"use client";

import { useMemo, useState } from "react";
import { BarChart3, CalendarDays, CheckCircle2, Coins, MousePointerClick, ShieldCheck, WalletCards } from "lucide-react";
import { AffiliatePanel, StatusPill } from "@/components/affiliation/affiliation-ui";
import { cn } from "@/lib/utils";

const deals = [
  {
    key: "CPA",
    title: "CPA",
    headline: "Touchez une commission fixe par joueur qualifié.",
    body: "Idéal si votre force est l'acquisition rapide et que vous voulez une rémunération simple à suivre.",
    bullets: ["Montant défini dans l'offre", "Qualification par premier dépôt", "Validation admin avant paiement"]
  },
  {
    key: "RS",
    title: "Revenue Share",
    headline: "Construisez un revenu récurrent sur la durée.",
    body: "Adapté aux communautés sportives engagées qui génèrent des joueurs actifs sur plusieurs semaines.",
    bullets: ["Part des revenus nets", "Suivi par période", "Historique des commissions"]
  },
  {
    key: "HYBRID",
    title: "Hybrid",
    headline: "Combinez acquisition immédiate et récurrence.",
    body: "Le format le plus équilibré pour lancer une collaboration sérieuse avec une base fixe et un partage de revenus.",
    bullets: ["CPA + revenue share", "Conditions configurables", "Offre assignée par affilié"]
  }
];

const screens = [
  {
    key: "affiliate",
    label: "Dashboard affilié",
    src: "/affiliation/dashboard-affiliate-full.png",
    title: "Suivi affilié",
    body: "Vos liens, clics, inscriptions, FTD, commissions, pays et paiements dans un seul espace."
  },
  {
    key: "admin",
    label: "Dashboard admin",
    src: "/affiliation/dashboard-admin-full.png",
    title: "Pilotage admin",
    body: "Validation des affiliés, création des offres, gestion des comptes, commissions et paiements."
  }
];

const tools = [
  [MousePointerClick, "Liens traqués", "Chaque lien est configuré par l'équipe avec son code, son deal et sa landing."],
  [BarChart3, "Statistiques utiles", "Clics, inscriptions, FTD et commissions sont regroupés au même endroit."],
  [WalletCards, "Paiements suivis", "Les demandes de paiement sont visibles avec leur statut."],
  [ShieldCheck, "Validation propre", "Les offres et commissions restent contrôlées côté admin."]
] as const;

export function AffiliationLandingExperience() {
  const [deal, setDeal] = useState(deals[2]);
  const [screen, setScreen] = useState(screens[0]);
  const [players, setPlayers] = useState(18);
  const [deposit, setDeposit] = useState(50);

  const estimate = useMemo(() => {
    const qualified = Math.max(0, Math.round(players * 0.42));
    const volume = qualified * deposit;
    const cpa = deal.key === "RS" ? 0 : qualified * 150;
    const share = deal.key === "CPA" ? 0 : volume * 0.25;
    return { qualified, value: cpa + share };
  }, [deal.key, deposit, players]);

  return (
    <>
      <section id="commissions" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
        <div className="grid gap-4 lg:grid-cols-[0.88fr_1.12fr] lg:items-stretch">
          <AffiliatePanel className="p-4 sm:p-5">
            <StatusPill label="Deals partenaires" tone="gold" />
            <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Choisissez le modèle qui colle à votre audience.</h2>
            <p className="mt-3 text-sm leading-6 text-slate-400">
              ZiraBet peut rémunérer vos joueurs en CPA, Revenue Share ou Hybrid. Les conditions sont validées avec l'équipe avant activation de vos liens.
            </p>
            <div className="mt-4 grid grid-cols-3 gap-2">
              {deals.map((item) => (
                <button
                  key={item.key}
                  onClick={() => setDeal(item)}
                  className={cn(
                    "h-10 rounded-lg border text-xs font-black transition",
                    deal.key === item.key ? "border-felt bg-felt text-ink-950" : "border-white/10 bg-white/[0.04] text-slate-300 hover:border-felt/40"
                  )}
                >
                  {item.title}
                </button>
              ))}
            </div>
            <div className="mt-4 rounded-lg border border-white/10 bg-[#07131b] p-4">
              <div className="flex items-start gap-3">
                <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-felt/10 text-felt">
                  <Coins className="h-4 w-4" />
                </div>
                <div>
                  <h3 className="text-base font-black text-white">{deal.headline}</h3>
                  <p className="mt-2 text-xs leading-5 text-slate-400">{deal.body}</p>
                </div>
              </div>
              <div className="mt-4 grid gap-2">
                {deal.bullets.map((bullet) => (
                  <div key={bullet} className="flex items-center gap-2 text-xs font-semibold text-slate-300">
                    <CheckCircle2 className="h-4 w-4 text-felt" />
                    {bullet}
                  </div>
                ))}
              </div>
            </div>
          </AffiliatePanel>

          <AffiliatePanel className="p-4 sm:p-5">
            <div className="flex items-center justify-between gap-3">
              <div>
                <div className="text-xs font-black uppercase tracking-[0.18em] text-felt">Projection</div>
                <h3 className="mt-2 text-xl font-black text-white">Estimez votre potentiel.</h3>
              </div>
              <BarChart3 className="h-5 w-5 text-felt" />
            </div>
            <p className="mt-2 text-xs leading-5 text-slate-400">
              Une estimation simple pour comprendre les modèles. Les montants réels dépendent de l'offre validée et de la qualité du trafic.
            </p>
            <div className="mt-4 grid gap-3 sm:grid-cols-2">
              <RangeControl label="Joueurs envoyés" value={players} min={1} max={120} suffix="" onChange={setPlayers} />
              <RangeControl label="Dépôt moyen" value={deposit} min={25} max={500} suffix="€" onChange={setDeposit} />
            </div>
            <div className="mt-4 grid gap-2 sm:grid-cols-3">
              <Kpi label="Joueurs qualifiés" value={String(estimate.qualified)} />
              <Kpi label="Modèle actif" value={deal.title} />
              <Kpi label="Projection" value={`${Math.round(estimate.value).toLocaleString("fr-FR")} €`} tone="felt" />
            </div>
            <div className="mt-4 rounded-lg border border-felt/20 bg-felt/10 p-3 text-xs leading-5 text-felt">
              Votre dashboard affiche ensuite les vrais clics, inscriptions, premiers dépôts et commissions rattachés aux liens activés sur votre compte.
            </div>
          </AffiliatePanel>
        </div>
      </section>

      <section id="dashboard" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <StatusPill label="Screens réels" />
            <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Un vrai espace pour suivre vos performances.</h2>
          </div>
          <div className="grid grid-cols-2 gap-2 sm:w-[330px]">
            {screens.map((item) => (
              <button
                key={item.key}
                onClick={() => setScreen(item)}
                className={cn(
                  "h-9 rounded-lg border px-3 text-xs font-black transition",
                  screen.key === item.key ? "border-felt bg-felt text-ink-950" : "border-white/10 bg-white/[0.04] text-slate-300"
                )}
              >
                {item.label}
              </button>
            ))}
          </div>
        </div>
        <div className="mt-5 grid gap-4 lg:grid-cols-[1.45fr_0.55fr] lg:items-stretch">
          <div className="overflow-hidden rounded-xl border border-white/12 bg-[#07131b] shadow-[0_24px_80px_rgba(0,0,0,.38)]">
            <div className="flex h-9 items-center gap-2 border-b border-white/10 bg-white/[0.04] px-3">
              <span className="h-2.5 w-2.5 rounded-full bg-ember" />
              <span className="h-2.5 w-2.5 rounded-full bg-gold" />
              <span className="h-2.5 w-2.5 rounded-full bg-felt" />
              <span className="ml-2 text-[11px] font-bold text-slate-500">zirabet.com/affiliation</span>
            </div>
            <div className="relative aspect-[16/9] overflow-hidden bg-[#020910]">
              <img src={screen.src} alt={screen.title} className="absolute inset-x-0 top-0 w-full min-w-[680px] max-w-none" />
            </div>
          </div>
          <AffiliatePanel className="p-4">
            <div className="grid h-10 w-10 place-items-center rounded-lg bg-felt/10 text-felt">
              <ShieldCheck className="h-4 w-4" />
            </div>
            <h3 className="mt-3 text-lg font-black text-white">{screen.title}</h3>
            <p className="mt-2 text-sm leading-6 text-slate-400">{screen.body}</p>
            <div className="mt-4 grid gap-2">
              {["Données réelles", "Interface séparée", "Statuts de paiement"].map((item) => (
                <div key={item} className="rounded-lg border border-white/10 bg-white/[0.035] px-3 py-2 text-xs font-bold text-slate-300">
                  {item}
                </div>
              ))}
            </div>
          </AffiliatePanel>
        </div>
      </section>

      <section id="outils" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {tools.map(([Icon, title, body]) => (
            <AffiliatePanel key={title} className="p-4">
              <div className="grid h-9 w-9 place-items-center rounded-lg border border-felt/20 bg-felt/10 text-felt">
                <Icon className="h-4 w-4" />
              </div>
              <h3 className="mt-3 text-sm font-black text-white">{title}</h3>
              <p className="mt-2 text-xs leading-5 text-slate-400">{body}</p>
            </AffiliatePanel>
          ))}
        </div>
      </section>

      <section id="paiements" className="mx-auto max-w-[1120px] px-4 py-8 sm:py-10">
        <AffiliatePanel className="grid gap-4 p-4 sm:p-5 lg:grid-cols-[0.75fr_1.25fr] lg:items-center">
          <div>
            <div className="flex items-center gap-2 text-felt">
              <CalendarDays className="h-4 w-4" />
              <span className="text-xs font-black uppercase tracking-[0.18em]">Paiements</span>
            </div>
            <h2 className="mt-3 text-2xl font-black text-white sm:text-3xl">Payé une fois par mois.</h2>
            <p className="mt-3 text-sm leading-6 text-slate-400">
              Les commissions validées sont regroupées par période. Les paiements sont traités entre le 10 et le 15 du mois suivant.
            </p>
          </div>
          <div className="grid gap-2 sm:grid-cols-3">
            <TimelineCard title="1-30" body="Période de suivi des clics, inscriptions et dépôts qualifiés." />
            <TimelineCard title="Validation" body="Contrôle des commissions et des conditions de l'offre." />
            <TimelineCard title="10-15" body="Fenêtre mensuelle de paiement des commissions validées." />
          </div>
        </AffiliatePanel>
      </section>
    </>
  );
}

function RangeControl({ label, value, min, max, suffix, onChange }: { label: string; value: number; min: number; max: number; suffix: string; onChange: (value: number) => void }) {
  return (
    <label className="block rounded-lg border border-white/10 bg-white/[0.035] p-3">
      <div className="flex items-center justify-between gap-3 text-xs font-black text-white">
        <span>{label}</span>
        <span className="text-felt">{value.toLocaleString("fr-FR")} {suffix}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        value={value}
        onChange={(event) => onChange(Number(event.target.value))}
        className="mt-3 w-full accent-felt"
      />
    </label>
  );
}

function Kpi({ label, value, tone = "slate" }: { label: string; value: string; tone?: "felt" | "slate" }) {
  return (
    <div className="rounded-lg border border-white/10 bg-white/[0.035] p-3">
      <div className="text-[10px] font-bold uppercase tracking-[0.12em] text-slate-500">{label}</div>
      <div className={cn("mt-1 text-lg font-black", tone === "felt" ? "text-felt" : "text-white")}>{value}</div>
    </div>
  );
}

function TimelineCard({ title, body }: { title: string; body: string }) {
  return (
    <div className="rounded-lg border border-white/10 bg-[#07131b] p-3">
      <div className="text-lg font-black text-felt">{title}</div>
      <p className="mt-2 text-xs leading-5 text-slate-400">{body}</p>
    </div>
  );
}