import Link from "next/link";
import { BarChart3, CreditCard, LayoutDashboard, Link2, Menu, ShieldCheck, UserPlus, WalletCards } from "lucide-react";
import { cn } from "@/lib/utils";

export function AffiliateLogo() {
  return (
    <Link href="/affiliation" className="flex items-center gap-2" aria-label="ZiraBet affiliation">
      <span className="relative grid h-8 w-8 place-items-center">
        <svg viewBox="0 0 48 48" className="h-full w-full drop-shadow-[0_0_14px_rgba(16,224,189,.35)]">
          <path d="M24 4 43 18 36 40 12 40 5 18 24 4Z" fill="#07111c" stroke="#8bdcff" strokeWidth="2" />
          <path d="M24 9 36 19 31 34 17 34 12 19 24 9Z" fill="#0d1b25" stroke="#10e0bd" strokeWidth="1.3" />
          <path d="M17 17h16l-1.7 4.3h-7L17.2 32H32l-1.8 4.2H14.4l1.7-4.1 7.1-10.7h-7.8L17 17Z" fill="#10e0bd" />
          <path d="M31 8.2 34.2 11 31 14.2 27.8 11 31 8.2Z" fill="#f4c95d" />
        </svg>
      </span>
      <span className="text-base font-black italic text-white">
        Zira<span className="text-felt">Bet</span>
      </span>
    </Link>
  );
}

export function AffiliationFrame({ children }: { children: React.ReactNode }) {
  return <div className="min-h-screen bg-[#020910] text-white [background-image:linear-gradient(140deg,rgba(15,191,143,.08),transparent_34%),linear-gradient(180deg,#06131b_0%,#020910_48%,#020910_100%)]">{children}</div>;
}

export function AffiliationHeader({ compact = false }: { compact?: boolean }) {
  return (
    <header className="sticky top-0 z-40 border-b border-white/10 bg-[#061018]/92 backdrop-blur">
      <div className="mx-auto flex h-14 max-w-[1160px] items-center justify-between gap-3 px-4">
        <AffiliateLogo />
        <nav className="hidden items-center gap-1 md:flex">
          <HeaderLink href="/affiliation" label="Accueil" />
          <HeaderLink href="/affiliation#avantages" label="Avantages" />
          <HeaderLink href="/affiliation#commissions" label="Commissions" />
          <HeaderLink href="/affiliation#faq" label="FAQ" />
        </nav>
        <div className="flex items-center gap-2">
          {!compact ? (
            <>
              <Link href="/affiliation/login" className="hidden h-8 items-center rounded-lg border border-white/10 px-3 text-xs font-bold text-slate-200 md:flex">
                Connexion
              </Link>
              <Link href="/affiliation/register" className="grid h-8 place-items-center rounded-lg bg-felt px-3 text-xs font-black text-ink-950">
                S'inscrire
              </Link>
            </>
          ) : null}
          {!compact ? (
            <details className="relative md:hidden">
              <summary className="grid h-8 w-8 cursor-pointer list-none place-items-center rounded-lg border border-white/10 bg-white/[0.04] text-slate-300 [&::-webkit-details-marker]:hidden">
                <Menu className="h-4 w-4" />
              </summary>
              <div className="absolute right-0 mt-2 w-44 rounded-lg border border-white/10 bg-[#08131b] p-2 shadow-panel">
                {[
                  ["/affiliation", "Accueil"],
                  ["/affiliation#avantages", "Avantages"],
                  ["/affiliation#commissions", "Commissions"],
                  ["/affiliation#faq", "FAQ"],
                  ["/affiliation/login", "Connexion"]
                ].map(([href, label]) => (
                  <Link key={href} href={href} className="block rounded-lg px-3 py-2 text-xs font-bold text-slate-300 hover:bg-white/[0.06]">
                    {label}
                  </Link>
                ))}
              </div>
            </details>
          ) : null}
        </div>
      </div>
    </header>
  );
}

function HeaderLink({ href, label }: { href: string; label: string }) {
  return (
    <Link href={href} className="rounded-lg px-3 py-2 text-xs font-bold text-slate-400 transition hover:bg-white/[0.06] hover:text-white">
      {label}
    </Link>
  );
}

export function AffiliatePanel({ children, className, id }: { children: React.ReactNode; className?: string; id?: string }) {
  return <section id={id} className={cn("rounded-lg border border-white/10 bg-[#0b151d]/88 shadow-panel", className)}>{children}</section>;
}

export function AffiliationSidebar({ admin = false }: { admin?: boolean }) {
  const items = admin
    ? [
        ["/affiliation/admin", "Tableau de bord", LayoutDashboard],
        ["/affiliation/admin#affilies", "Affiliés", UserPlus],
        ["/affiliation/admin#liens", "Liens", WalletCards],
        ["/affiliation/admin#paiements", "Paiements", CreditCard],
        ["/affiliation/admin#commissions", "Commissions", BarChart3]
      ]
    : [
        ["/affiliation/dashboard", "Vue d'ensemble", LayoutDashboard],
        ["/affiliation/dashboard#liens", "Liens", Link2],
        ["/affiliation/dashboard#paiements", "Paiements", CreditCard],
        ["/affiliation/dashboard#stats", "Statistiques", BarChart3]
      ];

  return (
    <aside className="hidden w-44 shrink-0 border-r border-white/10 bg-[#061018] p-3 md:block">
      <AffiliateLogo />
      <nav className="mt-5 space-y-1">
        {items.map(([href, label, Icon]) => (
          <Link key={href as string} href={href as string} className="flex h-9 items-center gap-2 rounded-lg px-2 text-xs font-semibold text-slate-300 hover:bg-felt/10 hover:text-felt">
            <Icon className="h-4 w-4" />
            {label as string}
          </Link>
        ))}
      </nav>
    </aside>
  );
}

export function AffiliationMobileDock({ admin = false }: { admin?: boolean }) {
  const items = admin
    ? [
        ["/affiliation/admin", "Accueil", LayoutDashboard],
        ["/affiliation/admin#liens", "Liens", WalletCards],
        ["/affiliation/admin#paiements", "Paiements", CreditCard]
      ]
    : [
        ["/affiliation/dashboard", "Accueil", LayoutDashboard],
        ["/affiliation/dashboard#liens", "Liens", Link2],
        ["/affiliation/dashboard#paiements", "Paiements", CreditCard]
      ];

  return (
    <nav className="fixed inset-x-0 bottom-0 z-50 grid grid-cols-3 border-t border-white/10 bg-[#061018]/96 px-2 pb-[max(.45rem,env(safe-area-inset-bottom))] pt-2 backdrop-blur md:hidden">
      {items.map(([href, label, Icon]) => (
        <Link key={href as string} href={href as string} className="flex flex-col items-center gap-1 rounded-lg py-1 text-[10px] font-bold text-slate-300">
          <Icon className="h-5 w-5" />
          {label as string}
        </Link>
      ))}
    </nav>
  );
}

export function StatusPill({ label, tone = "felt" }: { label: string; tone?: "felt" | "gold" | "ember" | "slate" }) {
  const tones = {
    felt: "border-felt/25 bg-felt/10 text-felt",
    gold: "border-gold/25 bg-gold/10 text-gold",
    ember: "border-ember/25 bg-ember/10 text-ember",
    slate: "border-white/10 bg-white/[0.05] text-slate-300"
  };
  return <span className={cn("rounded-md border px-2 py-0.5 text-[10px] font-bold uppercase", tones[tone])}>{label}</span>;
}

export function TrustRow() {
  return (
    <div className="grid gap-2 sm:grid-cols-3">
      {[
        ["Commissions suivies", "Attribution par lien et cookie sécurisé"],
        ["Paiement mensuel", "Entre le 10 et le 15 du mois suivant"],
        ["Tracking propre", "Clics, inscriptions, FTD et commissions"]
      ].map(([title, body]) => (
        <div key={title} className="rounded-lg border border-white/10 bg-white/[0.035] p-3">
          <ShieldCheck className="mb-2 h-4 w-4 text-felt" />
          <div className="text-xs font-bold text-white">{title}</div>
          <p className="mt-1 text-[11px] leading-4 text-slate-500">{body}</p>
        </div>
      ))}
    </div>
  );
}