"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, BadgePercent, PawPrint } from "lucide-react";

function getNextMonday(): number {
  const d = new Date();
  const day = d.getDay();
  const diff = (8 - day) % 7 || 7;
  const target = new Date(d.getFullYear(), d.getMonth(), d.getDate() + diff, 0, 0, 0);
  return target.getTime();
}

type Remaining = { gun: number; saat: number; dakika: number; saniye: number };

function calc(target: number): Remaining {
  const diff = Math.max(0, target - Date.now());
  return {
    gun: Math.floor(diff / 86400000),
    saat: Math.floor((diff % 86400000) / 3600000),
    dakika: Math.floor((diff % 3600000) / 60000),
    saniye: Math.floor((diff % 60000) / 1000),
  };
}

export function CampaignBanner() {
  const [target, setTarget] = useState<number | null>(null);
  const [left, setLeft] = useState<Remaining | null>(null);

  useEffect(() => {
    const t = getNextMonday();
    setTarget(t);
    setLeft(calc(t));
    const iv = setInterval(() => setLeft(calc(t)), 1000);
    return () => clearInterval(iv);
  }, []);

  const units: { value: number | null; label: string }[] = [
    { value: left?.gun ?? null, label: "Gün" },
    { value: left?.saat ?? null, label: "Saat" },
    { value: left?.dakika ?? null, label: "Dakika" },
    { value: left?.saniye ?? null, label: "Saniye" },
  ];

  return (
    <section className="px-4 py-14 sm:px-6">
      <div className="relative mx-auto max-w-7xl overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-brand-500 via-brand-600 to-brand-800 shadow-2xl shadow-brand-500/30">
        <PawPrint className="absolute -left-8 -top-8 size-40 -rotate-12 text-white/10" aria-hidden />
        <PawPrint className="absolute bottom-6 left-[38%] size-20 rotate-12 text-white/10" aria-hidden />
        <PawPrint className="absolute right-[30%] top-6 size-14 rotate-45 text-white/10" aria-hidden />

        <div className="relative grid items-center gap-8 p-8 sm:p-12 lg:grid-cols-2">
          <div className="text-center lg:text-left">
            <span className="inline-flex -rotate-1 items-center gap-1.5 rounded-full bg-white/15 px-4 py-1.5 text-xs font-extrabold uppercase tracking-wider text-white ring-1 ring-white/25 backdrop-blur">
              <BadgePercent className="size-4" aria-hidden />
              Haftanın Pati Şenliği
            </span>
            <h2 className="mt-4 font-display text-4xl font-extrabold leading-tight text-white sm:text-5xl">
              %30&apos;a Varan
              <span className="block text-brand-100">Karnaval İndirimi!</span>
            </h2>
            <p className="mx-auto mt-3 max-w-md text-sm font-semibold leading-relaxed text-white/85 lg:mx-0 lg:text-base">
              Seçili mama, ödül ve oyuncaklarda kaçırılmayacak fırsatlar. Stoklar patiler
              kadar hızlı tükeniyor — acele et!
            </p>

            {/* Geri sayım */}
            <div className="mt-6 flex justify-center gap-2.5 lg:justify-start" suppressHydrationWarning>
              {units.map(({ value, label }) => (
                <div
                  key={label}
                  className="flex min-w-[4.25rem] flex-col items-center rounded-2xl bg-white/12 px-3 py-2.5 ring-1 ring-white/20 backdrop-blur"
                >
                  <span className="font-display text-2xl font-extrabold tabular-nums text-white sm:text-3xl">
                    {value === null ? "--" : String(value).padStart(2, "0")}
                  </span>
                  <span className="text-[10px] font-extrabold uppercase tracking-wider text-white/70">
                    {label}
                  </span>
                </div>
              ))}
            </div>
            {target && <span className="sr-only">Kampanya bitişine kalan süre</span>}

            <Link
              href="/urunler?kampanya=1"
              className="group mt-7 inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-base font-extrabold text-brand-700 shadow-xl transition-all hover:-translate-y-0.5 hover:shadow-2xl active:scale-95"
            >
              Fırsatları Yakala
              <ArrowRight className="size-5 transition-transform group-hover:translate-x-1" aria-hidden />
            </Link>
          </div>

          {/* Uçuşan ürün kartları */}
          <div className="relative mx-auto hidden h-72 w-full max-w-md sm:block lg:h-80">
            <div className="animate-floaty absolute left-0 top-2 w-44 -rotate-6 overflow-hidden rounded-3xl bg-white p-2 shadow-2xl">
              <div className="relative aspect-square overflow-hidden rounded-2xl bg-[#FCE7E3]">
                <Image src="/images/products/odul.png" alt="Ödül mamaları" fill sizes="176px" className="object-cover" />
              </div>
              <p className="px-1.5 pb-1 pt-2 text-center font-display text-xs font-extrabold text-ink">
                Ödül Mamaları
              </p>
            </div>
            <div className="animate-floaty-slow absolute right-0 top-14 w-48 rotate-3 overflow-hidden rounded-3xl bg-white p-2 shadow-2xl">
              <div className="relative aspect-square overflow-hidden rounded-2xl bg-[#E9F3E9]">
                <Image
                  src="/images/products/kopek-kuru.png"
                  alt="Köpek mamaları"
                  fill
                  sizes="192px"
                  className="object-cover"
                />
              </div>
              <p className="px-1.5 pb-1 pt-2 text-center font-display text-xs font-extrabold text-ink">
                Köpek Mamaları
              </p>
            </div>
            <div className="animate-floaty absolute bottom-0 left-24 w-40 rotate-2 overflow-hidden rounded-3xl bg-white p-2 shadow-2xl" style={{ animationDelay: "-3s" }}>
              <div className="relative aspect-square overflow-hidden rounded-2xl bg-[#EDE7F6]">
                <Image src="/images/products/oyuncak.png" alt="Oyuncaklar" fill sizes="160px" className="object-cover" />
              </div>
              <p className="px-1.5 pb-1 pt-2 text-center font-display text-xs font-extrabold text-ink">
                Oyuncaklar
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}