import Link from "next/link";
import Image from "next/image";
import type { TemplateConfig } from "@/lib/template";
import { getTranslations, type Translations } from "@/lib/i18n";
import { resolveMediaUrl } from "@/lib/utils";

interface HeroProps {
  template: TemplateConfig;
  hero: {
    title?: string;
    subtitle?: string;
    image_url?: string | null;
    cta_label?: string;
  };
  storeName: string;
  t?: Translations;
}

export default function HeroSection({
  template,
  hero,
  storeName,
  t,
}: HeroProps) {
  const T = t ?? getTranslations("en");
  switch (template.heroStyle) {
    case "split":
      return <HeroSplit hero={hero} storeName={storeName} t={T} />;
    case "fullbleed":
      return <HeroFullbleed hero={hero} storeName={storeName} t={T} />;
    case "minimal":
      return <HeroMinimal hero={hero} storeName={storeName} t={T} />;
    case "banner":
      return <HeroBanner hero={hero} storeName={storeName} t={T} />;
    default:
      return <HeroCentered hero={hero} storeName={storeName} t={T} />;
  }
}

// ── Classic: centered text, optional bg image ─────────────────────────────────
function HeroCentered({
  hero,
  storeName,
  t,
}: Omit<HeroProps, "template"> & { t: Translations }) {
  return (
    <section
      className="relative min-h-[520px] flex items-center justify-center px-4 text-white overflow-hidden"
      style={{
        backgroundColor: "var(--color-secondary)",
        ...(hero.image_url
          ? {
              backgroundImage: `url(${hero.image_url})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }
          : {}),
      }}
    >
      {hero.image_url && (
        <div
          className="absolute inset-0 bg-gradient-to-b from-black/30 via-black/50 to-black/60"
          aria-hidden
        />
      )}
      {!hero.image_url && (
        <div
          className="absolute inset-0 opacity-10"
          style={{
            backgroundImage:
              "radial-gradient(circle at 30% 50%, rgba(255,255,255,0.15) 0%, transparent 60%)",
          }}
        />
      )}
      <div className="relative max-w-3xl mx-auto text-center px-4">
        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-5 leading-[1.05] tracking-tight">
          {hero.title || storeName}
        </h1>
        {hero.subtitle && (
          <p className="text-lg md:text-xl opacity-85 mb-10 max-w-xl mx-auto leading-relaxed">
            {hero.subtitle}
          </p>
        )}
        <Link
          href="/products"
          className="btn-primary inline-block px-10 py-4 rounded-full text-sm font-semibold shadow-xl"
        >
          {hero.cta_label || t.home.shopNow}
        </Link>
      </div>
    </section>
  );
}

// ── Modern Minimal: split layout, text left / image right ─────────────────────
function HeroSplit({
  hero,
  storeName,
  t,
}: Omit<HeroProps, "template"> & { t: Translations }) {
  return (
    <section className="bg-white border-b border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 min-h-[520px]">
          <div className="flex flex-col justify-center py-16 lg:py-24 pr-0 lg:pr-16">
            <p
              className="text-[11px] font-bold uppercase tracking-[0.35em] mb-5"
              style={{ color: "var(--color-primary)" }}
            >
              {t.home.newCollection}
            </p>
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-black text-gray-900 leading-[0.95] mb-6 tracking-tight">
              {hero.title || storeName}
            </h1>
            {hero.subtitle && (
              <p className="text-lg text-gray-500 mb-10 max-w-md leading-relaxed">
                {hero.subtitle}
              </p>
            )}
            <div className="flex gap-3 flex-wrap">
              <Link
                href="/products"
                className="inline-block px-8 py-3.5 text-sm font-bold text-white"
                style={{ backgroundColor: "var(--color-secondary)" }}
              >
                {hero.cta_label || t.home.shopNow}
              </Link>
              <Link
                href="/categories"
                className="inline-block px-8 py-3.5 text-sm font-bold border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white transition-colors"
              >
                {t.home.browse}
              </Link>
            </div>
          </div>
          <div className="relative min-h-[320px] lg:min-h-0 overflow-hidden">
            {hero.image_url ? (
              <Image
                src={hero.image_url}
                alt={hero.title || storeName}
                fill
                className="object-cover"
                sizes="50vw"
                priority
              />
            ) : (
              <div
                className="w-full h-full flex items-center justify-center"
                style={{
                  backgroundColor: "var(--color-primary)",
                  opacity: 0.08,
                }}
              >
                <svg
                  className="w-32 h-32 opacity-20"
                  viewBox="0 0 64 64"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M32 10 C32 10 28 14 28 17 C28 19.2 29.8 21 32 21 C34.2 21 36 19.2 36 17 C36 14 32 10 32 10Z"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M32 21 L32 25 L10 40 C8 41.2 9 44 11.5 44 L52.5 44 C55 44 56 41.2 54 40 L32 25Z"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Fashion: full-bleed image, large centered text ────────────────────────────
function HeroFullbleed({
  hero,
  storeName,
  t,
}: Omit<HeroProps, "template"> & { t: Translations }) {
  return (
    <section className="relative min-h-[90vh] flex items-end overflow-hidden bg-gray-900">
      {hero.image_url ? (
        <Image
          src={hero.image_url}
          alt={hero.title || storeName}
          fill
          className="object-cover"
          sizes="100vw"
          priority
        />
      ) : (
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%)`,
          }}
        />
      )}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/25 to-transparent" />
      <div className="relative w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
        <h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white leading-[0.9] mb-5 tracking-tight">
          {hero.title || storeName}
        </h1>
        {hero.subtitle && (
          <p className="text-xl text-white/75 mb-10 max-w-lg leading-relaxed">
            {hero.subtitle}
          </p>
        )}
        <Link
          href="/products"
          className="inline-block px-12 py-4 text-sm font-bold text-black bg-white hover:bg-gray-100 transition-colors"
        >
          {hero.cta_label || t.home.exploreCollection}
        </Link>
      </div>
    </section>
  );
}

// ── Boutique: elegant minimal with decorative line ────────────────────────────
function HeroMinimal({
  hero,
  storeName,
  t,
}: Omit<HeroProps, "template"> & { t: Translations }) {
  return (
    <section className="bg-stone-50 py-24 px-4 border-b border-stone-200">
      <div className="max-w-2xl mx-auto text-center">
        <div className="flex items-center justify-center gap-4 mb-10">
          <div
            className="h-px flex-1 max-w-[60px]"
            style={{ backgroundColor: "var(--color-primary)" }}
          />
          <span className="text-[10px] font-bold uppercase tracking-[0.35em] text-stone-400">
            {t.home.newCollection}
          </span>
          <div
            className="h-px flex-1 max-w-[60px]"
            style={{ backgroundColor: "var(--color-primary)" }}
          />
        </div>
        <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif font-light text-stone-900 mb-5 tracking-wide leading-tight">
          {hero.title || storeName}
        </h1>
        {hero.subtitle && (
          <p className="text-base text-stone-500 mb-10 font-light tracking-wide leading-relaxed max-w-md mx-auto">
            {hero.subtitle}
          </p>
        )}
        <Link
          href="/products"
          className="inline-block px-10 py-3.5 text-xs font-bold uppercase tracking-[0.2em] border border-stone-900 text-stone-900 hover:bg-stone-900 hover:text-white transition-colors"
        >
          {hero.cta_label || t.home.discover}
        </Link>
        <div className="flex items-center justify-center gap-4 mt-10">
          <div
            className="h-px flex-1 max-w-[60px]"
            style={{ backgroundColor: "var(--color-primary)" }}
          />
          <div
            className="w-1.5 h-1.5 rounded-full"
            style={{ backgroundColor: "var(--color-primary)" }}
          />
          <div
            className="h-px flex-1 max-w-[60px]"
            style={{ backgroundColor: "var(--color-primary)" }}
          />
        </div>
      </div>
    </section>
  );
}

// ── Marketplace: compact banner with search bar ───────────────────────────────
function HeroBanner({
  hero,
  storeName,
  t,
}: Omit<HeroProps, "template"> & { t: Translations }) {
  const welcomeText =
    hero.title || t.home.welcomeTo.replace(/\{\{\s*name\s*\}\}/g, storeName);
  return (
    <section
      className="py-14 px-4"
      style={{ backgroundColor: "var(--color-secondary)" }}
    >
      <div className="max-w-3xl mx-auto text-center text-white">
        <h1 className="text-2xl md:text-4xl font-bold mb-3 tracking-tight">
          {welcomeText}
        </h1>
        {hero.subtitle && (
          <p className="text-sm opacity-75 mb-7 max-w-md mx-auto">
            {hero.subtitle}
          </p>
        )}
        <form
          action="/products"
          method="get"
          className="flex max-w-xl mx-auto shadow-xl rounded-xl overflow-hidden"
        >
          <input
            type="text"
            name="search"
            placeholder={t.nav.search}
            className="flex-1 px-5 py-4 text-sm text-gray-900 bg-white focus:outline-none"
          />
          <button
            type="submit"
            className="px-6 py-4 text-sm font-bold text-white flex-shrink-0"
            style={{ backgroundColor: "var(--color-primary)" }}
          >
            {t.search.search}
          </button>
        </form>
      </div>
    </section>
  );
}