/* ============================================================
   ADMIN · DANCERS — check in/out, daily house fee, card on file
   ============================================================ */
function DancersModule() {
  const t = useT(); const { lang } = useLang();
  const { DANCERS, HOUSE_FEE } = window.PP;
  const [rows, setRows] = useState(() => DANCERS.map((d) => ({ ...d })));
  const [feeFor, setFeeFor] = useState(null);

  const now = () => new Date().toLocaleTimeString(lang === "es" ? "es" : "en", { hour: "numeric", minute: "2-digit" });
  const checkIn = (id) => setRows((rs) => rs.map((d) => d.id === id ? { ...d, status: "in", in: now() } : d));
  const checkOut = (id) => setRows((rs) => rs.map((d) => d.id === id ? { ...d, status: "out", out: now() } : d));
  const payFee = (id, method) => setRows((rs) => rs.map((d) => d.id === id ? { ...d, feePaid: true, feeMethod: method, balance: 0 } : d));

  const onFloor = rows.filter((d) => d.status === "in").length;
  const collected = rows.filter((d) => d.feePaid).length * HOUSE_FEE;
  const owed = rows.filter((d) => !d.feePaid).length * HOUSE_FEE;
  const statusMeta = { in: { c: "#5FBFA8", l: t("On floor", "En piso") }, out: { c: "#6b6b72", l: t("Checked out", "Salió") }, scheduled: { c: "#CBA35C", l: t("Scheduled", "Agendada") } };

  return (
    <div>
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5">
        {[["sparkles", onFloor, t("On floor now", "En piso ahora")], ["check-circle", "$" + collected, t("House fees collected", "House fees cobradas")], ["alert-circle", "$" + owed, t("Fees outstanding", "Fees pendientes")], ["calendar", rows.length, t("Scheduled tonight", "Agendadas hoy")]].map(([ic, n, l], i) => (
          <div key={i} className="rounded-2xl border border-white/10 bg-card p-4"><Icon name={ic} className="w-5 h-5 text-coral mb-2" /><div className="text-2xl font-black leading-none">{n}</div><div className="label text-white/45 text-[9px] mt-1">{l}</div></div>
        ))}
      </div>

      {/* house fee policy bar */}
      <div className="rounded-2xl border border-gold/25 bg-gold/5 p-4 mb-5 flex items-center gap-3">
        <Icon name="info" className="w-5 h-5 text-gold-soft shrink-0" />
        <p className="text-white/65 text-sm">{t(<>Daily house fee is <b className="text-gold-soft">${HOUSE_FEE}</b>, collected at check-in. A card on file lets the club auto-charge unpaid balances at check-out.</>, <>El house fee diario es <b className="text-gold-soft">${HOUSE_FEE}</b>, se cobra al check-in. Una tarjeta en archivo permite cobrar saldos pendientes automáticamente al salir.</>)}</p>
      </div>

      <div className="space-y-2">
        {rows.map((d) => {
          const sm = statusMeta[d.status];
          return (
            <div key={d.id} className="flex items-center gap-4 p-4 rounded-2xl border border-white/10 bg-card">
              <div className="w-11 h-11 rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center font-black text-sm shrink-0">{d.name.slice(0, 2)}</div>
              <div className="flex-1 min-w-0">
                <div className="font-bold text-sm truncate flex items-center gap-2">{d.name}{d.card ? <Icon name="credit-card" className="w-3.5 h-3.5 text-green-400" /> : <Icon name="credit-card" className="w-3.5 h-3.5 text-white/25" />}</div>
                <div className="text-white/45 text-xs">{d.shift} · {d.bookings} {t("bookings", "reservas")}{d.in ? " · " + t("in", "entró") + " " + d.in : ""}</div>
              </div>
              <Chip color={sm.c}>{sm.l}</Chip>
              {/* house fee status */}
              {d.feePaid
                ? <span className="hidden sm:flex items-center gap-1 text-green-400 text-[11px] font-bold w-24 justify-center"><Icon name="check" className="w-3.5 h-3.5" />{t("Fee paid", "Fee pagado")}</span>
                : <button onClick={() => setFeeFor(d)} className="px-3 py-2 rounded-full bg-coral/15 border border-coral/40 text-coral text-[11px] font-bold uppercase tracking-wider hover:bg-coral hover:text-white transition-all w-24">${HOUSE_FEE} {t("fee", "fee")}</button>}
              {/* check in/out */}
              {d.status === "in"
                ? <button onClick={() => checkOut(d.id)} className="px-4 py-2 rounded-full border border-white/20 text-white/80 text-[11px] font-bold uppercase tracking-wider hover:bg-white/5 transition-all w-24">{t("Check out", "Salir")}</button>
                : d.status === "out"
                  ? <span className="text-white/40 text-[11px] w-24 text-center">{t("Out", "Salió")} {d.out}</span>
                  : <button onClick={() => checkIn(d.id)} className="px-4 py-2 rounded-full bg-green-500/15 border border-green-500/40 text-green-400 text-[11px] font-bold uppercase tracking-wider hover:bg-green-500 hover:text-white transition-all w-24">{t("Check in", "Entrar")}</button>}
            </div>
          );
        })}
      </div>

      {/* house fee modal */}
      {feeFor && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/70 backdrop-blur-sm fade-view" onClick={() => setFeeFor(null)}>
          <div className="w-full max-w-sm rounded-3xl border border-white/12 bg-ink p-6" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4"><h3 className="text-xl font-black uppercase">{t("House fee", "House fee")}</h3><button onClick={() => setFeeFor(null)}><Icon name="x" className="w-5 h-5 text-white/50" /></button></div>
            <p className="text-white/55 text-sm mb-1">{feeFor.name} · {feeFor.shift}</p>
            <div className="serif text-4xl text-gold-soft mb-5">${HOUSE_FEE}</div>
            {feeFor.card ? (
              <div className="mb-4 flex items-center gap-3 rounded-xl border border-white/12 bg-card p-3"><div className="w-9 h-6 rounded bg-gradient-to-br from-coral to-grape"></div><div className="flex-1"><div className="text-sm font-semibold">•••• {feeFor.card}</div><div className="text-white/40 text-[11px]">{t("Card on file", "Tarjeta en archivo")}</div></div><Icon name="shield-check" className="w-5 h-5 text-green-400" /></div>
            ) : (
              <div className="mb-4 rounded-xl border border-coral/30 bg-coral/5 p-3 flex items-center gap-2 text-coral text-xs"><Icon name="alert-triangle" className="w-4 h-4 shrink-0" />{t("No card on file — add one for auto-charge.", "Sin tarjeta en archivo — agrega una para cobro automático.")}</div>
            )}
            <div className="grid grid-cols-2 gap-3">
              {feeFor.card && <button onClick={() => { payFee(feeFor.id, "card"); setTimeout(() => setFeeFor(null), 300); }} className="gbtn py-3 rounded-full bg-coral hover:bg-coral-deep text-white text-[11px] font-bold uppercase tracking-wider flex items-center justify-center gap-2"><Icon name="credit-card" className="w-4 h-4" />{t("Charge card", "Cobrar tarjeta")}</button>}
              <button onClick={() => { payFee(feeFor.id, "cash"); setTimeout(() => setFeeFor(null), 300); }} 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 " + (feeFor.card ? "" : "col-span-2")}><Icon name="banknote" className="w-4 h-4" />{t("Mark cash paid", "Marcar pago efectivo")}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DancersModule });