"use client";

import { useState } from "react";
import Link from "next/link";
import { ArrowRight, BadgePercent, Flame, Sparkles } from "lucide-react";
import type { ProductCard as ProductCardType } from "@/lib/queries";
import { ProductCard } from "./product-card";

type TabKey = "bestSellers" | "newArrivals" | "deals";

const TABS: { key: TabKey; label: string; icon: typeof Flame; href: string }[] = [
  { key: "bestSellers", label: "Çok Satanlar", icon: Flame, href: "/urunler" },
  { key: "newArrivals", label: "Yeni Gelenler", icon: Sparkles, href: "/urunler" },
  { key: "deals", label: "Kampanyalılar", icon: BadgePercent, href: "/urunler?kampanya=1" },
];

export function FeaturedTabs({
  collections,
}: {
  collections: Record<TabKey, ProductCardType[]>;
}) {
  const [active, setActive] = useState<TabKey>("bestSellers");
  const activeTab = TABS.find((t) => t.key === active)!;
  const items = collections[active];

  return (
    <section className="relative overflow-hidden bg-sand/60">
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
        <div className="flex flex-col items-center justify-between gap-5 sm:flex-row">
          <div>
            <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-brand-600">
              Patiler ne istiyor?
            </p>
            <h2 className="mt-2 font-display text-3xl font-extrabold text-ink sm:text-4xl">
              Vitrindeki Güzellikler
            </h2>
          </div>
          <div className="flex flex-wrap justify-center gap-2">
            {TABS.map(({ key, label, icon: Icon }) => (
              <button
                key={key}
                type="button"
                onClick={() => setActive(key)}
                aria-pressed={active === key}
                className={`flex items-center gap-1.5 rounded-full px-4 py-2.5 text-sm font-extrabold transition-all active:scale-95 ${
                  active === key
                    ? "bg-ink text-white shadow-lg shadow-ink/20"
                    : "bg-white text-cocoa ring-1 ring-sand-dark hover:bg-brand-50 hover:text-brand-700 hover:ring-brand-300"
                }`}
              >
                <Icon className={`size-4 ${active === key ? "text-brand-400" : "text-brand-500"}`} aria-hidden />
                {label}
              </button>
            ))}
          </div>
        </div>

        <div
          key={active}
          className="mt-9 grid animate-pop-in grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 lg:gap-5"
        >
          {items.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

        <div className="mt-10 text-center">
          <Link
            href={activeTab.href}
            className="group inline-flex items-center gap-2 rounded-full border-2 border-ink px-6 py-3 text-sm font-extrabold text-ink transition-all hover:-translate-y-0.5 hover:bg-ink hover:text-white"
          >
            Tümünü Keşfet
            <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
          </Link>
        </div>
      </div>
    </section>
  );
}