"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import type { Product } from "@/data/products";
import { ProductCard } from "@/components/shop/ProductCard";

type TabId = "mujer" | "club" | "hombre";

const TABS: { id: TabId; label: string; shop: string }[] = [
  { id: "mujer", label: "Mujer", shop: "/shop?cat=mujer" },
  { id: "club", label: "Club 1976", shop: "/collections#club-1976" },
  { id: "hombre", label: "Hombre", shop: "/shop?cat=hombre" },
];

function isClub(p: Product) {
  const c = (p.collection || "").toLowerCase();
  return (
    p.category === "sets" ||
    c.includes("club") ||
    p.slug.includes("club-1976")
  );
}

function filterByTab(products: Product[], tab: TabId) {
  if (tab === "mujer") {
    return products.filter((p) => p.category === "mujer");
  }
  if (tab === "hombre") {
    return products.filter((p) => p.category === "hombre");
  }
  return products.filter(isClub);
}

export function HomeFeatured({ products }: { products: Product[] }) {
  const [tab, setTab] = useState<TabId>("mujer");
  const list = useMemo(
    () => filterByTab(products, tab).slice(0, 6),
    [products, tab]
  );
  const shopHref = TABS.find((t) => t.id === tab)?.shop || "/shop";

  return (
    <section className="bg-[#ebe6db] py-16 md:py-20">
      <div className="ot-container">
        <div className="flex flex-wrap items-end justify-between gap-4 mb-8">
          <div className="max-w-xl">
            <p className="ot-eyebrow">Piezas</p>
            <h2 className="font-serif text-4xl md:text-5xl mt-2 leading-tight">
              Destacadas
            </h2>
            <p className="mt-3 text-ot-muted leading-relaxed">
              Catálogo en vivo — elige la línea y entra a la prenda.
            </p>
          </div>
          <Link href={shopHref} className="ot-btn ot-btn-ghost hidden sm:inline-flex">
            Ver todo
          </Link>
        </div>

        <div className="flex flex-wrap gap-2 mb-8">
          {TABS.map((t) => (
            <button
              key={t.id}
              type="button"
              onClick={() => setTab(t.id)}
              className={`px-4 py-2 text-[11px] tracking-[0.16em] uppercase border transition ${
                tab === t.id
                  ? "border-ot-green bg-ot-green text-ot-cream"
                  : "border-black/15 bg-transparent text-ot-ink hover:border-ot-green/40"
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {list.length ? (
          <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-7">
            {list.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        ) : (
          <p className="text-ot-muted text-sm">
            Pronto más piezas en esta línea.
          </p>
        )}

        <div className="mt-8 sm:hidden">
          <Link href={shopHref} className="ot-btn ot-btn-ghost inline-flex">
            Ver todo
          </Link>
        </div>
      </div>
    </section>
  );
}