"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import { Instagram, Facebook, Globe, Mail, Phone } from "lucide-react";
import { getTransferWhatsappUrl } from "@/lib/whatsapp-url";
import { BRAND } from "@/lib/brand";
import BrandLogo from "@/components/BrandLogo";

function TikTokIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className}>
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.93a8.16 8.16 0 0 0 4.77 1.52V7a4.85 4.85 0 0 1-1.84-.31z" />
    </svg>
  );
}

function WhatsAppIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className={className}>
      <path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21" />
    </svg>
  );
}

/** Rutas de panel/login: sin footer de marketing. */
function isPanelRoute(pathname: string | null): boolean {
  if (!pathname) return false;
  return (
    pathname.startsWith("/admin") ||
    pathname.startsWith("/web/") ||
    pathname === "/login" ||
    pathname === "/forgot-password" ||
    pathname.startsWith("/reset-password") ||
    pathname === "/registro"
  );
}

/** "https://www.instagram.com/cuenta/" → "@cuenta" */
function instagramHandle(url: string): string {
  try {
    const first = new URL(url).pathname.split("/").filter(Boolean)[0];
    return first ? `@${first}` : "Instagram";
  } catch {
    return "Instagram";
  }
}

function displayHost(url: string): string {
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return url;
  }
}

export default function SiteChrome({
  contactUrl,
  resultsEnabled,
  results2Enabled,
  instagramUrl,
  tiktokUrl,
  facebookUrl,
  contactEmail,
  contactPhone,
  foundationUrl,
}: {
  contactUrl: string;
  resultsEnabled: boolean;
  results2Enabled?: boolean;
  instagramUrl: string;
  tiktokUrl: string;
  facebookUrl: string;
  contactEmail: string;
  contactPhone: string;
  foundationUrl: string;
}) {
  const pathname = usePathname();
  if (isPanelRoute(pathname)) return null;

  const transferWhatsappUrl = contactUrl ? getTransferWhatsappUrl(contactUrl) : "";
  const phoneHref = contactPhone ? `tel:${contactPhone.replace(/[^\d+]/g, "")}` : "";

  const socials = [
    instagramUrl && { href: instagramUrl, label: "Instagram", icon: <Instagram className="h-4 w-4" /> },
    contactUrl && { href: contactUrl, label: "WhatsApp", icon: <WhatsAppIcon className="h-4 w-4" /> },
    facebookUrl && { href: facebookUrl, label: "Facebook", icon: <Facebook className="h-4 w-4" /> },
    tiktokUrl && { href: tiktokUrl, label: "TikTok", icon: <TikTokIcon className="h-4 w-4" /> },
  ].filter(Boolean) as { href: string; label: string; icon: React.ReactNode }[];

  const linkClass = "text-sm text-white/75 hover:text-white transition-colors";

  return (
    <footer className="bg-brand-teal text-white">
      <div className="mx-auto max-w-6xl px-4 pt-14 pb-8">
        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
          <div>
            <BrandLogo inverted />
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-white/75">
              Un sorteo solidario de {BRAND.org}. Pequeños gestos, grandes comienzos.
            </p>
            {socials.length > 0 && (
              <div className="mt-5 flex gap-2">
                {socials.map((s) => (
                  <a
                    key={s.label}
                    href={s.href}
                    target="_blank"
                    rel="noopener noreferrer nofollow"
                    aria-label={s.label}
                    title={s.label}
                    className="flex h-9 w-9 items-center justify-center rounded-full border border-white/30 text-white/85 transition hover:border-white hover:bg-white/10 hover:text-white"
                  >
                    {s.icon}
                  </a>
                ))}
              </div>
            )}
          </div>

          <div>
            <h3 className="mb-4 font-serif text-sm font-bold uppercase tracking-wider">Navegación</h3>
            <nav className="flex flex-col gap-2" aria-label="Enlaces del sitio">
              <Link href="/#premio" className={linkClass}>El premio</Link>
              <Link href="/#causa" className={linkClass}>La causa</Link>
              <Link href="/#boletos" className={linkClass}>Boletos</Link>
              <Link href="/buscador" className={linkClass}>Verificar boletos</Link>
              <Link href="/bases" className={linkClass}>Bases del sorteo</Link>
              {resultsEnabled && <Link href="/#resultados" className={linkClass}>Resultados del sorteo</Link>}
              {results2Enabled && <Link href="/#resultados-2" className={linkClass}>Ganadores sorteo 2</Link>}
              {transferWhatsappUrl && (
                <a href={transferWhatsappUrl} target="_blank" rel="noopener noreferrer" className={linkClass}>
                  Compra por transferencia
                </a>
              )}
            </nav>
          </div>

          <div>
            <h3 className="mb-4 font-serif text-sm font-bold uppercase tracking-wider">Contacto</h3>
            <ul className="flex flex-col gap-2">
              {foundationUrl && (
                <li>
                  <a href={foundationUrl} target="_blank" rel="noopener noreferrer" className={`${linkClass} inline-flex items-center gap-2`}>
                    <Globe className="h-3.5 w-3.5" /> {displayHost(foundationUrl)}
                  </a>
                </li>
              )}
              {contactEmail && (
                <li>
                  <a href={`mailto:${contactEmail}`} className={`${linkClass} inline-flex items-center gap-2 break-all`}>
                    <Mail className="h-3.5 w-3.5 shrink-0" /> {contactEmail}
                  </a>
                </li>
              )}
              {contactPhone && (
                <li>
                  <a href={phoneHref} className={`${linkClass} inline-flex items-center gap-2`}>
                    <Phone className="h-3.5 w-3.5" /> {contactPhone}
                  </a>
                </li>
              )}
              {instagramUrl && (
                <li>
                  <a href={instagramUrl} target="_blank" rel="noopener noreferrer" className={`${linkClass} inline-flex items-center gap-2`}>
                    <Instagram className="h-3.5 w-3.5" /> {instagramHandle(instagramUrl)}
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-white/15 pt-6 text-xs text-white/60 md:flex-row">
          <p>© {new Date().getFullYear()} {BRAND.org}. Todos los derechos reservados.</p>
          <p>
            Desarrollado por{" "}
            <a href="https://r3q.cl/rifas" target="_blank" rel="noopener noreferrer" className="font-bold tracking-wider text-[#39ff14] drop-shadow-[0_0_8px_rgba(57,255,20,0.8)] transition-all duration-300 hover:text-white hover:drop-shadow-[0_0_15px_rgba(57,255,20,1)]">
              r3q.cl
            </a>
          </p>
        </div>
      </div>
    </footer>
  );
}