/* ============================================================
   KIOSK — locked check-in / check-out station.
   Flow: phone number → account auto-identified → "Bienvenida {name}"
   → 6-digit code by SMS (webhook) / WhatsApp fallback → verified →
   check-in or check-out recorded with timestamp.
   The kiosk launches with a 4-digit owner code and CANNOT be exited
   without it (state survives reloads via PPDB.kiosk).
   ============================================================ */

/* big touch keypad */
function KioskPad({ onDigit, onBack, disabled }) {
  const keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "back"];
  return (
    <div className="grid grid-cols-3 gap-2.5 w-full max-w-[300px] mx-auto">
      {keys.map((k, i) => k === "" ? <div key={i}></div> : (
        <button key={i} disabled={disabled} onClick={() => k === "back" ? onBack() : onDigit(k)}
          className="h-16 rounded-2xl bg-white/[.06] border border-white/10 text-white text-2xl font-bold flex items-center justify-center active:scale-90 active:bg-white/15 transition-all select-none"
          style={{ WebkitTapHighlightColor: "transparent" }}>
          {k === "back" ? <Icon name="delete" className="w-6 h-6 text-white/60" /> : k}
        </button>
      ))}
    </div>
  );
}

function fmtPhone(d) {
  if (d.length <= 3) return d;
  if (d.length <= 6) return "(" + d.slice(0, 3) + ") " + d.slice(3);
  return "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6, 10);
}
function maskPhone(p) {
  const d = String(p || "").replace(/\D/g, "").slice(-10);
  return "•••-•••-" + d.slice(-4);
}

/* live clock for the kiosk header */
function KioskClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);
  return (
    <div className="text-center">
      <div className="serif text-5xl md:text-6xl text-white leading-none tabular-nums">{now.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}</div>
      <div className="label text-white/40 text-[10px] mt-1.5 capitalize">{now.toLocaleDateString("es", { weekday: "long", day: "numeric", month: "long" })}</div>
    </div>
  );
}

/* ---------- the locked full-screen kiosk ---------- */
function KioskView() {
  const t = useT();
  const [mode, setMode] = useState("phone"); // phone | person | code | done | notfound
  const [phone, setPhone] = useState("");
  const [person, setPerson] = useState(null);
  const [action, setAction] = useState("in"); // in | out
  const [code, setCode] = useState(null);
  const [codeAt, setCodeAt] = useState(0);
  const [codeInput, setCodeInput] = useState("");
  const [cool, setCool] = useState(0);
  const [doneAt, setDoneAt] = useState(null);
  // exit lock
  const [exitOpen, setExitOpen] = useState(false);
  const [exitPin, setExitPin] = useState("");
  const [fails, setFails] = useState(0);
  const [lockUntil, setLockUntil] = useState(0);

  // warn before closing the tab while the kiosk is locked
  useEffect(() => {
    const f = (e) => { e.preventDefault(); e.returnValue = ""; return ""; };
    window.addEventListener("beforeunload", f);
    return () => window.removeEventListener("beforeunload", f);
  }, []);
  // resend cooldown tick
  useEffect(() => {
    if (cool <= 0) return;
    const id = setInterval(() => setCool((c) => Math.max(0, c - 1)), 1000);
    return () => clearInterval(id);
  }, [cool > 0]);

  const reset = () => { setMode("phone"); setPhone(""); setPerson(null); setCode(null); setCodeInput(""); setDoneAt(null); };

  const lookup = () => {
    const found = window.PPDB.findByPhone(phone);
    if (!found) { setMode("notfound"); setTimeout(() => { setMode("phone"); setPhone(""); }, 4000); return; }
    const last = window.PPDB.checkins.lastFor(found.key);
    setPerson(found);
    setAction(last && last.type === "in" ? "out" : "in");
    setMode("person");
  };

  const sendCode = () => {
    const c = String(Math.floor(100000 + Math.random() * 900000));
    setCode(c); setCodeAt(Date.now()); setCodeInput(""); setCool(30);
    const via = window.PPDB.sendSms(person.phone, "PINK PONY · " + t("Your verification code: ", "Tu código de verificación: ") + c);
    window.toast(via === "sms"
      ? t("Code sent by SMS to ", "Código enviado por SMS a ") + maskPhone(person.phone)
      : t("Code sent by WhatsApp to ", "Código enviado por WhatsApp a ") + maskPhone(person.phone), "info");
    setMode("code");
  };

  const verify = (val) => {
    if (!code || Date.now() - codeAt > 3 * 60 * 1000) { window.toast(t("Code expired — resend it.", "Código vencido — reenvíalo."), "error"); setCodeInput(""); return; }
    if (val !== code) { window.toast(t("Wrong code — try again.", "Código incorrecto — intenta otra vez."), "error"); setCodeInput(""); return; }
    window.PPDB.checkins.add({ person: person.key, name: person.fullName, display: person.name, phone: person.phone, kind: person.kind, type: action });
    setDoneAt(new Date()); setMode("done");
    setTimeout(reset, 6000);
  };

  const tryExit = async () => {
    if (Date.now() < lockUntil) return;
    const ok = await window.PPDB.kiosk.disable(exitPin);
    if (!ok) {
      const f = fails + 1; setFails(f); setExitPin("");
      if (f >= 5) { setLockUntil(Date.now() + 30000); setFails(0); window.toast(t("Too many attempts — locked for 30s.", "Demasiados intentos — bloqueado 30s."), "error"); }
      else window.toast(t("Wrong owner code.", "Clave de owner incorrecta."), "error");
    }
    // on success PPDB emits pp:kiosk and the Workspace takes over again
  };

  const BTN = "gbtn w-full max-w-[300px] mx-auto py-4 rounded-full text-white text-[13px] font-black uppercase tracking-[0.16em] flex items-center justify-center gap-2";
  const coral = { background: "linear-gradient(135deg,#FF2E88,#FF6B5B)", boxShadow: "0 12px 36px rgba(255,46,136,.45)" };

  return (
    <div className="fixed inset-0 z-[80] bg-ink flex flex-col overflow-hidden" style={{ paddingTop: "env(safe-area-inset-top)", paddingBottom: "env(safe-area-inset-bottom)" }}>
      <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-[40rem] h-[26rem] bg-coral/10 rounded-full blur-[140px] pointer-events-none"></div>

      {/* header */}
      <div className="relative flex items-center justify-between px-5 pt-5">
        <img src={window.__asset ? window.__asset("assets/logo-white.png") : "assets/logo-white.png"} alt="Pink Pony Club" className="h-5 object-contain" />
        <button onClick={() => { setExitOpen(true); setExitPin(""); }} aria-label="exit kiosk" className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-white/30 hover:text-white/60"><Icon name="lock" className="w-4 h-4" /></button>
      </div>

      {/* body */}
      <div className="relative flex-1 flex flex-col items-center justify-center px-6 text-center overflow-y-auto py-6">
        {mode === "phone" && (
          <div className="fade-view w-full max-w-md">
            <KioskClock />
            <h1 className="text-2xl md:text-3xl font-black uppercase mt-7 mb-1.5">{t("Check-in / Check-out", "Check-in / Check-out")}</h1>
            <p className="text-white/45 text-sm mb-6">{t("Enter the phone number you registered with", "Ingresa el teléfono con el que te registraste")}</p>
            <div className="h-14 rounded-2xl border border-white/15 bg-white/[.04] flex items-center justify-center text-2xl font-bold tracking-wider mb-5 tabular-nums">{phone ? fmtPhone(phone) : <span className="text-white/25 text-lg">(305) 555-0148</span>}</div>
            <KioskPad onDigit={(d) => setPhone((p) => (p + d).slice(0, 10))} onBack={() => setPhone((p) => p.slice(0, -1))} />
            <div className="mt-5">
              <button disabled={phone.length !== 10} onClick={lookup} className={BTN + (phone.length === 10 ? "" : " opacity-30 cursor-not-allowed")} style={coral}>{t("Continue", "Continuar")}<Icon name="arrow-right" className="w-4 h-4" /></button>
            </div>
          </div>
        )}

        {mode === "notfound" && (
          <div className="fade-view max-w-sm">
            <div className="w-20 h-20 rounded-full bg-coral/15 border border-coral flex items-center justify-center mx-auto mb-5"><Icon name="user-x" className="w-9 h-9 text-coral" /></div>
            <h2 className="text-2xl font-black uppercase mb-2">{t("Number not found", "Número no registrado")}</h2>
            <p className="text-white/50 text-sm">{t("That phone isn't registered. Talk to your manager to get set up.", "Ese teléfono no está registrado. Habla con tu manager para registrarte.")}</p>
          </div>
        )}

        {mode === "person" && person && (
          <div className="fade-view max-w-sm w-full">
            <div className="w-20 h-20 rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center mx-auto mb-5 text-3xl font-black text-white">{(person.name || "?")[0].toUpperCase()}</div>
            <div className="label text-coral text-[10px] mb-2">{person.kind === "dancer" ? t("Entertainer", "Entertainer") : "Staff"} · {maskPhone(person.phone)}</div>
            <h2 className="text-3xl font-black uppercase mb-2">{t("Welcome, ", "¡Bienvenida, ")}{person.name}{t("!", "!")}</h2>
            <p className="text-white/55 text-sm mb-7">
              {action === "in"
                ? t("Ready to start your night? We'll text you a code to activate your check-in.", "¿Lista para empezar tu noche? Te enviaremos un código para activar tu check-in.")
                : t("Heading out? We'll text you a code to confirm your check-out.", "¿Ya terminas? Te enviaremos un código para confirmar tu check-out.")}
            </p>
            <button onClick={sendCode} className={BTN} style={coral}><Icon name="message-circle" className="w-4 h-4" />{t("Send my code", "Enviar mi código")}</button>
            <button onClick={reset} className="block mx-auto mt-4 text-white/35 text-[11px] font-bold uppercase tracking-wider">{t("Not you? Go back", "¿No eres tú? Volver")}</button>
          </div>
        )}

        {mode === "code" && person && (
          <div className="fade-view w-full max-w-md">
            <div className="label text-coral text-[10px] mb-2">{person.name} · {action === "in" ? "CHECK-IN" : "CHECK-OUT"}</div>
            <h2 className="text-2xl font-black uppercase mb-1.5">{t("Enter your code", "Ingresa tu código")}</h2>
            <p className="text-white/45 text-sm mb-5">{t("Sent to ", "Enviado a ")}{maskPhone(person.phone)}</p>
            <div className="flex justify-center gap-2 mb-5">
              {[0, 1, 2, 3, 4, 5].map((i) => (
                <div key={i} className={"w-11 h-14 rounded-xl border flex items-center justify-center text-2xl font-black tabular-nums " + (codeInput[i] ? "border-coral bg-coral/10 text-white" : "border-white/15 bg-white/[.03] text-white/20")}>{codeInput[i] || "·"}</div>
              ))}
            </div>
            <KioskPad onDigit={(d) => { const v = (codeInput + d).slice(0, 6); setCodeInput(v); if (v.length === 6) setTimeout(() => verify(v), 150); }} onBack={() => setCodeInput((p) => p.slice(0, -1))} />
            <div className="mt-5 flex items-center justify-center gap-5">
              <button disabled={cool > 0} onClick={sendCode} className={"text-[11px] font-bold uppercase tracking-wider " + (cool > 0 ? "text-white/25" : "text-coral hover:text-white")}>{cool > 0 ? t("Resend in ", "Reenviar en ") + cool + "s" : t("Resend code", "Reenviar código")}</button>
              <button onClick={reset} className="text-white/35 text-[11px] font-bold uppercase tracking-wider">{t("Cancel", "Cancelar")}</button>
            </div>
          </div>
        )}

        {mode === "done" && person && doneAt && (
          <div className="fade-view max-w-sm">
            <div className="w-24 h-24 rounded-full bg-green-500/15 border-2 border-green-500 flex items-center justify-center mx-auto mb-6"><Icon name="check" className="w-12 h-12 text-green-400" /></div>
            <h2 className="text-3xl font-black uppercase mb-2">{action === "in" ? "CHECK-IN ✓" : "CHECK-OUT ✓"}</h2>
            <div className="serif text-5xl text-gold-soft mb-3 tabular-nums">{doneAt.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}</div>
            <p className="text-white/55 text-sm">{action === "in" ? t("Have a great night, ", "¡Buena noche, ") + person.name + "! 💗" : t("See you soon, ", "¡Hasta pronto, ") + person.name + "! 👋"}</p>
          </div>
        )}
      </div>

      <p className="relative text-center text-white/20 text-[10px] pb-4 px-6">{t("Pink Pony Hub · Kiosk mode — staff assistance at the bar", "Pink Pony Hub · Modo kiosko — asistencia del staff en la barra")}</p>

      {/* EXIT — owner 4-digit code */}
      {exitOpen && (
        <div className="absolute inset-0 z-10 bg-ink/97 backdrop-blur-xl flex flex-col items-center justify-center px-6 fade-view">
          <button onClick={() => setExitOpen(false)} className="absolute top-5 right-5 w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-white/60"><Icon name="x" className="w-5 h-5" /></button>
          <Icon name="shield" className="w-10 h-10 text-coral mb-4" />
          <h2 className="text-xl font-black uppercase mb-1.5">{t("Exit kiosk mode", "Salir del modo kiosko")}</h2>
          <p className="text-white/45 text-sm mb-6">{t("Owner's 4-digit code required", "Se requiere la clave de 4 dígitos del owner")}</p>
          <div className="flex justify-center gap-2.5 mb-6">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className={"w-12 h-14 rounded-xl border flex items-center justify-center text-2xl " + (exitPin[i] ? "border-coral bg-coral/10" : "border-white/15 bg-white/[.03]")}>{exitPin[i] ? "•" : ""}</div>
            ))}
          </div>
          {Date.now() < lockUntil
            ? <p className="text-coral text-sm font-bold mb-4">{t("Locked — wait 30 seconds.", "Bloqueado — espera 30 segundos.")}</p>
            : <KioskPad onDigit={(d) => { const v = (exitPin + d).slice(0, 4); setExitPin(v); }} onBack={() => setExitPin((p) => p.slice(0, -1))} />}
          <div className="mt-5 w-full max-w-[300px]">
            <button disabled={exitPin.length !== 4 || Date.now() < lockUntil} onClick={tryExit} className={"gbtn w-full py-3.5 rounded-full bg-coral text-white text-[12px] font-bold uppercase tracking-[0.16em] " + (exitPin.length === 4 ? "" : "opacity-30 cursor-not-allowed")}>{t("Unlock & exit", "Desbloquear y salir")}</button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- launch screen (Hub tab, owner only) ---------- */
function KioskLaunch() {
  const t = useT(); const { lang } = useLang();
  const [pin, setPin] = useState("");
  const [pin2, setPin2] = useState("");
  const [err, setErr] = useState("");
  const [recent, setRecent] = useState(() => window.PPDB.checkins.all().slice(0, 12));
  useEffect(() => {
    const f = () => setRecent(window.PPDB.checkins.all().slice(0, 12));
    window.addEventListener("pp:checkins", f);
    return () => window.removeEventListener("pp:checkins", f);
  }, []);

  const launch = async (e) => {
    e.preventDefault(); setErr("");
    if (!/^\d{4}$/.test(pin)) return setErr(t("The code must be exactly 4 digits.", "La clave debe ser exactamente 4 dígitos."));
    if (pin !== pin2) return setErr(t("Codes don't match.", "Las claves no coinciden."));
    await window.PPDB.kiosk.enable(pin);
    window.toast(t("Kiosk locked & live.", "Kiosko bloqueado y activo."));
  };
  const fmt = (iso) => { try { return new Date(iso).toLocaleString(lang === "es" ? "es" : "en", { weekday: "short", hour: "numeric", minute: "2-digit" }); } catch (e) { return ""; } };

  return (
    <div className="grid lg:grid-cols-12 gap-6 items-start">
      <div className="lg:col-span-5">
        <form onSubmit={launch} className="rounded-2xl border border-white/12 bg-card p-6 space-y-4">
          <div className="flex items-center gap-3 mb-1">
            <div className="w-11 h-11 rounded-xl bg-coral/15 border border-coral/40 flex items-center justify-center"><Icon name="tablet" className="w-5 h-5 text-coral" /></div>
            <div><div className="font-black uppercase">{t("Launch kiosk", "Iniciar kiosko")}</div><div className="text-white/45 text-[11px]">{t("Locked check-in station for this device", "Estación de check-in bloqueada para este dispositivo")}</div></div>
          </div>
          <ol className="text-white/55 text-[12.5px] leading-relaxed space-y-1.5 list-decimal list-inside">
            <li>{t("Set a 4-digit owner code below.", "Define abajo una clave de owner de 4 dígitos.")}</li>
            <li>{t("This device becomes the kiosk — the screen locks and only that code exits it (survives reloads).", "Este dispositivo se vuelve el kiosko — la pantalla se bloquea y solo esa clave la cierra (sobrevive recargas).")}</li>
            <li>{t("Dancers/staff check in with their registered phone + a texted code.", "Las dancers/staff hacen check-in con su teléfono registrado + un código por texto.")}</li>
          </ol>
          <div className="grid grid-cols-2 gap-3">
            <div><label className="label text-white/45 text-[9px] block mb-1.5">{t("Owner code (4 digits)", "Clave owner (4 dígitos)")}</label><input type="password" inputMode="numeric" value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, "").slice(0, 4))} className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3 text-center text-xl tracking-[0.5em] text-white focus:outline-none focus:border-coral" /></div>
            <div><label className="label text-white/45 text-[9px] block mb-1.5">{t("Confirm", "Confirmar")}</label><input type="password" inputMode="numeric" value={pin2} onChange={(e) => setPin2(e.target.value.replace(/\D/g, "").slice(0, 4))} className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3 text-center text-xl tracking-[0.5em] text-white focus:outline-none focus:border-coral" /></div>
          </div>
          {err && <p className="text-coral text-xs font-semibold">{err}</p>}
          <button className="gbtn w-full py-3.5 rounded-full text-white text-[12px] font-black uppercase tracking-[0.16em]" style={{ background: "linear-gradient(135deg,#FF2E88,#FF6B5B)", boxShadow: "0 10px 32px rgba(255,46,136,.4)" }}><Icon name="lock" className="w-4 h-4 inline mr-1.5" />{t("Lock & launch kiosk", "Bloquear e iniciar kiosko")}</button>
          <p className="text-white/35 text-[11px] leading-relaxed">{t("Tip: for hardware-level lock, also enable iOS Guided Access or Android screen pinning on the tablet.", "Tip: para bloqueo a nivel de hardware, activa también Acceso Guiado (iOS) o el anclaje de pantalla (Android) en la tablet.")}</p>
        </form>
      </div>

      <div className="lg:col-span-7">
        <div className="label text-white/40 text-[10px] mb-2.5">{t("Recent check-ins", "Check-ins recientes")}</div>
        {recent.length === 0 ? (
          <div className="rounded-2xl border border-dashed border-white/15 p-10 text-center text-white/45 text-sm">
            <Icon name="user-check" className="w-8 h-8 mx-auto mb-3 text-white/25" />
            {t("No check-ins yet. Once the kiosk is live, every check-in/out lands here with its exact time.", "Aún no hay check-ins. Cuando el kiosko esté activo, cada entrada/salida aparecerá aquí con su hora exacta.")}
          </div>
        ) : (
          <div className="space-y-2">
            {recent.map((c) => (
              <div key={c.id} className="flex items-center gap-3 rounded-xl border border-white/10 bg-card p-3.5">
                <div className={"w-9 h-9 rounded-lg flex items-center justify-center shrink-0 " + (c.type === "in" ? "bg-green-500/12 border border-green-500/40" : "bg-white/5 border border-white/15")}><Icon name={c.type === "in" ? "log-in" : "log-out"} className={"w-4 h-4 " + (c.type === "in" ? "text-green-400" : "text-white/50")} /></div>
                <div className="flex-1 min-w-0"><div className="font-bold text-sm truncate">{c.display || c.name}</div><div className="text-white/45 text-[11px] capitalize">{c.kind === "dancer" ? "Entertainer" : "Staff"} · {fmt(c.at)}</div></div>
                <Chip color={c.type === "in" ? "#5FBFA8" : "#888"}>{c.type === "in" ? "IN" : "OUT"}</Chip>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { KioskView, KioskLaunch });