/* ============================================================
   ADMIN · PROMOTERS — guestlists, comps, sales, commissions, payouts
   ============================================================ */
function PromotersModule() {
  const t = useT(); const { lang } = useLang();
  const { PROMOTERS } = window.PP;
  const [sel, setSel] = useState(null);
  const tierMeta = {
    headliner: { l: t("Headliner", "Headliner"), c: "#FF6B5B" },
    resident:  { l: t("Resident", "Residente"), c: "#CBA35C" },
    guest:     { l: t("Guest", "Invitado"), c: "#5FBFA8" },
  };
  const payout = (p) => Math.round(p.sales * p.rate / 100);
  const totals = {
    heads: PROMOTERS.reduce((s, p) => s + p.heads, 0),
    inside: PROMOTERS.reduce((s, p) => s + p.checkedIn, 0),
    sales: PROMOTERS.reduce((s, p) => s + p.sales, 0),
    payout: PROMOTERS.reduce((s, p) => s + payout(p), 0),
  };

  return (
    <div>
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
        {[["users", totals.heads, t("Guestlist heads", "Guestlist total"), "#9333EA"], ["scan-line", totals.inside, t("Checked in", "Adentro"), "#5FBFA8"], ["dollar-sign", "$" + (totals.sales / 1000).toFixed(1) + "K", t("Attributed sales", "Ventas atribuidas"), "#CBA35C"], ["wallet", "$" + (totals.payout / 1000).toFixed(1) + "K", t("Commissions due", "Comisiones a pagar"), "#FF6B5B"]].map(([ic, n, l, c], i) => (
          <div key={i} className="rounded-2xl border border-white/10 bg-card p-4"><Icon name={ic} className="w-5 h-5 mb-2" style={{ color: c }} /><div className="text-2xl font-black leading-none">{n}</div><div className="label text-white/45 text-[9px] mt-1">{l}</div></div>
        ))}
      </div>

      <div className="space-y-2.5">
        {PROMOTERS.map((p) => {
          const tm = tierMeta[p.tier]; const pct = Math.round((p.checkedIn / p.heads) * 100);
          return (
            <button key={p.id} onClick={() => setSel(p)} className="w-full flex items-center gap-4 p-4 rounded-2xl border border-white/10 bg-card text-left hover:border-coral/40 transition-all">
              <div className="w-11 h-11 rounded-full flex items-center justify-center font-black text-sm shrink-0" style={{ background: p.color + "22", color: p.color, border: "1px solid " + p.color + "66" }}>{p.name.split(" ").map((x) => x[0]).slice(0, 2).join("")}</div>
              <div className="flex-1 min-w-0">
                <div className="font-bold text-sm truncate flex items-center gap-2">{p.name}<span className="text-white/40 font-normal text-xs">{p.handle}</span></div>
                <div className="text-white/45 text-xs truncate">{p.crew} · {L(p.night, lang)}</div>
              </div>
              {/* guestlist progress */}
              <div className="hidden md:block w-32">
                <div className="flex justify-between text-[10px] text-white/45 mb-1"><span>{p.checkedIn}/{p.heads} {t("in", "adentro")}</span><span>{pct}%</span></div>
                <div className="h-1.5 rounded-full bg-white/10 overflow-hidden"><div className="h-full rounded-full" style={{ width: pct + "%", background: p.color }}></div></div>
              </div>
              <Chip color={tm.c}>{tm.l}</Chip>
              <div className="text-right shrink-0 w-20 hidden sm:block"><div className="serif text-lg text-gold-soft">${payout(p)}</div><div className="text-white/35 text-[10px]">{t("payout", "comisión")}</div></div>
              <Icon name="chevron-right" className="w-5 h-5 text-white/30 shrink-0" />
            </button>
          );
        })}
      </div>

      {sel && <PromoterDetail p={sel} payout={payout(sel)} tierMeta={tierMeta} onClose={() => setSel(null)} />}
    </div>
  );
}

function PromoterDetail({ p, payout, tierMeta, onClose }) {
  const t = useT(); const { lang } = useLang();
  const tm = tierMeta[p.tier];
  return (
    <div className="fixed inset-0 z-50 flex justify-end fade-view" onClick={onClose}>
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
      <div className="relative w-full max-w-md bg-ink border-l border-white/12 h-full overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="p-6">
          <div className="flex items-center justify-between mb-6"><div className="label text-coral text-[10px]">{t("Promoter", "Promotor")}</div><button onClick={onClose}><Icon name="x" className="w-6 h-6 text-white/55" /></button></div>
          <div className="flex items-center gap-4 mb-5">
            <div className="w-16 h-16 rounded-full flex items-center justify-center font-black text-xl shrink-0" style={{ background: p.color + "22", color: p.color, border: "1px solid " + p.color + "66" }}>{p.name.split(" ").map((x) => x[0]).slice(0, 2).join("")}</div>
            <div><h2 className="text-2xl font-black uppercase leading-none">{p.name}</h2><div className="text-white/45 text-sm mt-1">{p.handle} · {p.crew}</div></div>
          </div>
          <div className="flex flex-wrap gap-2 mb-6"><Chip color={tm.c}>{tm.l}</Chip><Chip color="#9333EA">{L(p.night, lang)}</Chip><Chip color="#5FBFA8">{p.rate}% {t("commission", "comisión")}</Chip></div>

          <div className="grid grid-cols-2 gap-3 mb-4">
            {[[p.heads, t("Guestlist heads", "Guestlist")], [p.checkedIn, t("Checked in", "Adentro")], [p.comps, t("Comps issued", "Comps emitidos")], [p.tables, t("Tables brought", "Mesas traídas")]].map(([n, l], i) => (
              <div key={i} className="rounded-xl border border-white/10 bg-card p-4"><div className="serif text-2xl text-white">{n}</div><div className="label text-white/45 text-[9px] mt-1">{l}</div></div>
            ))}
          </div>

          <div className="rounded-2xl border border-coral/30 bg-coral/5 p-5 mb-5">
            <div className="flex items-center justify-between mb-2"><span className="label text-white/55 text-[10px]">{t("Attributed sales", "Ventas atribuidas")}</span><span className="serif text-xl text-gold-soft">${p.sales.toLocaleString()}</span></div>
            <div className="flex items-center justify-between"><span className="label text-coral text-[10px]">{t("Commission due", "Comisión a pagar")} ({p.rate}%)</span><span className="serif text-3xl text-coral">${payout.toLocaleString()}</span></div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <ChargeButton amount={payout} label={t("Pay out", "Pagar")} className="!bg-coral" />
            <button className="py-3 rounded-full border border-white/15 text-white/80 text-[11px] font-bold uppercase tracking-wider hover:bg-white/5 flex items-center justify-center gap-2"><Icon name="list" className="w-4 h-4" />{t("View guestlist", "Ver guestlist")}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PromotersModule, PromoterDetail });