import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import type { Category } from "@/lib/headless/types";

type TileContent = { subtitle: string; image?: string; color: string };

// No hay fotografia real todavia para las 6 categorias raiz de la taxonomia
// (ver ADR 0005) -- solo se mapean imagen/subtitulo para las que ya tienen
// un asset en public/images/categories/. Las demas caen al tile de solo
// gradiente en vez de mostrar una imagen que no les corresponde.
const tileContent: Record<string, TileContent> = {
  juguetes: { subtitle: "Personajes que inspiran", image: "/images/categories/figuras.webp", color: "from-yellow-300 to-orange-400" },
  "mochilas-y-morrales": { subtitle: "Estilo para cada aventura", image: "/images/categories/mochilas.webp", color: "from-cyan-400 to-blue-500" },
  "bebes-y-primera-infancia": { subtitle: "Primeros descubrimientos", color: "from-pink-300 to-fuchsia-400" },
  educativos: { subtitle: "Aprender jugando", color: "from-emerald-400 to-teal-600" },
  "accion-y-aventura": { subtitle: "Para explorar sin límites", color: "from-red-500 to-rose-700" },
  variedades: { subtitle: "Un poco de todo", color: "from-violet-400 to-purple-600" },
};

const defaultTile: TileContent = { subtitle: "Explora esta categoría", color: "from-slate-400 to-slate-600" };

export function CategoryTiles({ categories }: { categories: Category[] }) {
  const roots = categories.filter((category) => !category.parentId);

  if (roots.length === 0) return null;

  return (
    <section className="mx-auto max-w-7xl px-4 py-14">
      <div className="mb-8 flex items-end justify-between gap-4">
        <div>
          <span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Explora por mundos</span>
          <h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Encuentra tu próximo tesoro</h2>
        </div>
        <Link href="/catalog" className="hidden font-black text-cyan-700 sm:block">Ver todo →</Link>
      </div>
      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        {roots.map((category) => {
          const content = tileContent[category.handle] ?? defaultTile;

          return (
            <Link
              key={category.id}
              href={`/catalog?category=${encodeURIComponent(category.name)}`}
              className={`group relative min-h-64 overflow-hidden rounded-[2rem] bg-gradient-to-br ${content.color} shadow-xl`}
            >
              {content.image && (
                <>
                  <Image src={content.image} alt={category.name} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 33vw, 16vw" className="object-cover transition duration-500 group-hover:scale-105" />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-white/5" />
                </>
              )}
              <div className="absolute inset-x-0 bottom-0 flex items-end justify-between p-6 text-white">
                <div>
                  <h3 className="text-xl font-black">{category.name}</h3>
                  <p className="mt-1 text-sm font-semibold text-white/80">{content.subtitle}</p>
                </div>
                <span className="grid size-11 shrink-0 place-items-center rounded-full bg-white text-slate-950 transition group-hover:rotate-45">
                  <ArrowUpRight />
                </span>
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}