import type { TemplateConfig } from "@/lib/template";

interface FooterProps {
  storeName: string;
  footerLinks?: { label: string; url: string }[];
  template?: TemplateConfig;
  rightsText?: string;
}

function FooterLink({
  href,
  label,
  dark,
}: {
  href: string;
  label: string;
  dark?: boolean;
}) {
  const isExternal =
    href.startsWith("http://") ||
    href.startsWith("https://") ||
    href.startsWith("//");
  return (
    <a
      href={href}
      className={`text-sm transition-colors ${
        dark
          ? "text-white/50 hover:text-white/90"
          : "text-gray-500 hover:text-gray-900"
      }`}
      {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
    >
      {label}
    </a>
  );
}

export default function Footer({
  storeName,
  footerLinks = [],
  template,
  rightsText = "All rights reserved.",
}: FooterProps) {
  const navStyle = template?.navStyle ?? "default";
  const isDark = navStyle === "dark" || navStyle === "transparent";
  const year = new Date().getFullYear();

  // ── Boutique: rich dark footer ────────────────────────────────────────────
  if (template?.id === "boutique") {
    return (
      <footer className="mt-0 bg-stone-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
          <div className="text-center mb-10">
            <p className="font-serif text-3xl text-white mb-3 tracking-wide">
              {storeName}
            </p>
            <div
              className="w-10 h-px mx-auto"
              style={{ backgroundColor: "var(--color-primary)" }}
            />
          </div>
          {footerLinks.length > 0 && (
            <nav className="flex flex-wrap gap-x-8 gap-y-3 justify-center mb-10">
              {footerLinks.map((link, i) => (
                <FooterLink key={i} href={link.url} label={link.label} dark />
              ))}
            </nav>
          )}
          <div className="border-t border-white/10 pt-8 flex flex-col sm:flex-row items-center justify-between gap-3">
            <p className="text-xs text-white/35" suppressHydrationWarning>
              © {year} {storeName}. {rightsText}
            </p>
            <p className="text-xs text-white/25">Powered by Sellzaki</p>
          </div>
        </div>
      </footer>
    );
  }

  // ── Dark (Fashion / Boutique nav) ─────────────────────────────────────────
  if (isDark) {
    return (
      <footer
        className="mt-0 border-t border-white/10"
        style={{ backgroundColor: "var(--color-secondary)" }}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-8">
            <div>
              <p className="text-white font-bold text-lg mb-1">{storeName}</p>
              <p className="text-white/40 text-xs" suppressHydrationWarning>
                © {year}. {rightsText}
              </p>
            </div>
            {footerLinks.length > 0 && (
              <nav className="flex flex-wrap gap-x-6 gap-y-3">
                {footerLinks.map((link, i) => (
                  <FooterLink key={i} href={link.url} label={link.label} dark />
                ))}
              </nav>
            )}
          </div>
        </div>
      </footer>
    );
  }

  // ── Modern Minimal ────────────────────────────────────────────────────────
  if (template?.id === "modern-minimal") {
    return (
      <footer className="mt-0 border-t-2 border-gray-900 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
            <p className="font-black text-gray-900 text-sm uppercase tracking-[0.2em]">
              {storeName}
            </p>
            {footerLinks.length > 0 && (
              <nav className="flex flex-wrap gap-x-6 gap-y-2">
                {footerLinks.map((link, i) => (
                  <FooterLink key={i} href={link.url} label={link.label} />
                ))}
              </nav>
            )}
            <p className="text-xs text-gray-400">© {year}</p>
          </div>
        </div>
      </footer>
    );
  }

  // ── Default / Classic / Marketplace ──────────────────────────────────────
  return (
    <footer className="mt-0 bg-white border-t border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-8">
          {/* Brand */}
          <div className="flex-shrink-0">
            <p className="font-bold text-gray-900 text-base mb-1">
              {storeName}
            </p>
            <p className="text-xs text-gray-400" suppressHydrationWarning>
              © {year}. {rightsText}
            </p>
          </div>

          {/* Links */}
          {footerLinks.length > 0 && (
            <nav className="flex flex-wrap gap-x-6 gap-y-2">
              {footerLinks.map((link, i) => (
                <FooterLink key={i} href={link.url} label={link.label} />
              ))}
            </nav>
          )}

          {/* Powered by */}
          <p className="text-xs text-gray-300 flex-shrink-0">
            Powered by Sellzaki
          </p>
        </div>
      </div>
    </footer>
  );
}