"use client";

import Link from "next/link";
import Image from "next/image";
import type { Category } from "@/types";
import type { TemplateConfig } from "@/lib/template";
import { useLanguage } from "@/lib/language-context";
import { resolveMediaUrl } from "@/lib/utils";

interface CategorySectionProps {
  categories: Category[];
  template: TemplateConfig;
}

export default function CategorySection({
  categories,
  template,
}: CategorySectionProps) {
  const { t } = useLanguage();
  if (!categories.length) return null;

  switch (template.categoryStyle) {
    case "pills":
      return <CategoryPills categories={categories} t={t} />;
    case "grid":
      return <CategoryGrid categories={categories} t={t} />;
    case "list":
      return <CategoryList categories={categories} t={t} />;
    case "icons":
      return <CategoryIcons categories={categories} t={t} />;
    default:
      return <CategoryCards categories={categories} t={t} />;
  }
}

// ── Classic: image cards ──────────────────────────────────────────────────────
function CategoryCards({
  categories,
  t,
}: {
  categories: Category[];
  t: import("@/lib/i18n").Translations;
}) {
  return (
    <section className="py-14 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <h2 className="text-2xl font-bold text-gray-900">
            {t.categories.shopByCategory}
          </h2>
          <Link
            href="/categories"
            className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors flex items-center gap-1 group"
          >
            {t.categories.all}
            <svg
              className="w-4 h-4 transition-transform group-hover:translate-x-0.5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </Link>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
          {categories.slice(0, 10).map((cat) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className="group flex flex-col items-center gap-3 p-5 bg-white rounded-2xl border border-gray-100 hover:border-gray-200 hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5"
            >
              <div className="w-16 h-16 rounded-full overflow-hidden relative flex-shrink-0 bg-gray-50 ring-2 ring-transparent group-hover:ring-primary/20 transition-all">
                {resolveMediaUrl(cat.image_url) ? (
                  <Image
                    src={resolveMediaUrl(cat.image_url)!}
                    alt={cat.name}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                    sizes="64px"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-2xl bg-gray-50">
                    🏷️
                  </div>
                )}
              </div>
              <div className="text-center">
                <p className="text-xs font-semibold text-gray-700 group-hover:text-gray-900 transition-colors line-clamp-2">
                  {cat.name}
                </p>
                {cat.product_count !== undefined && (
                  <p className="text-[11px] text-gray-400 mt-0.5">
                    {cat.product_count} {t.categories.items}
                  </p>
                )}
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Modern Minimal: horizontal pill row ───────────────────────────────────────
function CategoryPills({
  categories,
  t,
}: {
  categories: Category[];
  t: import("@/lib/i18n").Translations;
}) {
  return (
    <section className="py-6 px-4 border-b border-gray-100 bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-2.5 overflow-x-auto pb-1 scrollbar-hide">
          <Link
            href="/products"
            className="flex-shrink-0 px-5 py-2 text-[11px] font-bold uppercase tracking-[0.15em] bg-gray-900 text-white hover:bg-gray-700 transition-colors"
          >
            {t.categories.all}
          </Link>
          {categories.map((cat) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className="flex-shrink-0 px-5 py-2 text-[11px] font-bold uppercase tracking-[0.15em] border border-gray-200 text-gray-600 hover:border-gray-900 hover:text-gray-900 transition-colors"
            >
              {cat.name}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Fashion: full-width image grid ────────────────────────────────────────────
function CategoryGrid({
  categories,
  t,
}: {
  categories: Category[];
  t: import("@/lib/i18n").Translations;
}) {
  const featured = categories.slice(0, 4);
  return (
    <section className="py-14 px-4">
      <div className="max-w-7xl mx-auto">
        <h2 className="text-3xl font-black text-gray-900 mb-8 uppercase tracking-tight">
          {t.nav.categories}
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {featured.map((cat, i) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className={`group relative overflow-hidden bg-gray-900 ${
                i === 0 ? "md:col-span-2 md:row-span-2" : ""
              }`}
              style={{ aspectRatio: i === 0 ? "1/1" : "3/4" }}
            >
              {resolveMediaUrl(cat.image_url) ? (
                <Image
                  src={resolveMediaUrl(cat.image_url)!}
                  alt={cat.name}
                  fill
                  className="object-cover group-hover:scale-108 transition-transform duration-700 opacity-80"
                  sizes="50vw"
                />
              ) : (
                <div
                  className="absolute inset-0"
                  style={{
                    background: `linear-gradient(135deg, var(--color-secondary), var(--color-primary))`,
                    opacity: 0.7,
                  }}
                />
              )}
              <div className="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors duration-300" />
              <div className="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-black/70 to-transparent">
                <p className="text-white font-black text-lg uppercase tracking-wide">
                  {cat.name}
                </p>
                {cat.product_count !== undefined && (
                  <p className="text-white/60 text-xs mt-0.5">
                    {cat.product_count} {t.categories.pieces}
                  </p>
                )}
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Boutique: elegant icons with serif labels ─────────────────────────────────
function CategoryIcons({
  categories,
  t,
}: {
  categories: Category[];
  t: import("@/lib/i18n").Translations;
}) {
  const ICONS = ["👗", "👠", "👜", "💍", "🧣", "🕶️", "🧴", "🌸", "🎁", "✨"];
  return (
    <section className="py-16 px-4 bg-stone-50 border-b border-stone-100">
      <div className="max-w-5xl mx-auto text-center">
        <p className="text-[10px] uppercase tracking-[0.35em] text-stone-400 mb-2">
          {t.categories.explore}
        </p>
        <h2 className="font-serif text-3xl text-stone-800 mb-12">
          {t.categories.ourCollections}
        </h2>
        <div className="grid grid-cols-3 sm:grid-cols-5 gap-8">
          {categories.slice(0, 10).map((cat, i) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className="group flex flex-col items-center gap-3"
            >
              <div className="w-16 h-16 rounded-full bg-white border border-stone-200 flex items-center justify-center text-2xl group-hover:border-stone-400 group-hover:shadow-md transition-all duration-200 overflow-hidden relative">
                {resolveMediaUrl(cat.image_url) ? (
                  <Image
                    src={resolveMediaUrl(cat.image_url)!}
                    alt={cat.name}
                    fill
                    className="object-cover"
                    sizes="64px"
                  />
                ) : (
                  ICONS[i % ICONS.length]
                )}
              </div>
              <p className="font-serif text-sm text-stone-600 group-hover:text-stone-900 transition-colors text-center leading-snug">
                {cat.name}
              </p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Marketplace: horizontal list with counts ──────────────────────────────────
function CategoryList({
  categories,
  t,
}: {
  categories: Category[];
  t: import("@/lib/i18n").Translations;
}) {
  return (
    <section className="py-5 px-4 bg-gray-50 border-y border-gray-200">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
          <span className="flex-shrink-0 text-[11px] font-bold text-gray-400 uppercase tracking-wider mr-1">
            {t.nav.categories}:
          </span>
          <Link
            href="/products"
            className="flex-shrink-0 text-xs font-semibold text-gray-700 hover:text-gray-900 px-3 py-1.5 bg-white border border-gray-200 hover:border-gray-400 hover:shadow-sm transition-all"
          >
            {t.categories.allProducts}
          </Link>
          {categories.map((cat) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className="flex-shrink-0 flex items-center gap-1 text-xs font-semibold text-gray-700 hover:text-gray-900 px-3 py-1.5 bg-white border border-gray-200 hover:border-gray-400 hover:shadow-sm transition-all"
            >
              {cat.name}
              {cat.product_count !== undefined && (
                <span className="text-gray-400 font-normal text-[11px]">
                  ({cat.product_count})
                </span>
              )}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}