const { useState, useEffect } = React;

function JoinModal({ apiBase, visible, onDone }) {

  const [code, setCode] = useState("");
  const [handle, setHandle] = useState(localStorage.getItem("bb_handle") || "");
  const [pin, setPin] = useState("");
  const [pushOptIn, setPushOptIn] = useState(true);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("")
  const [hasSavedCode, setHasSavedCode] = useState(false);

  useEffect(() => {
    if (visible) {
      const stored = localStorage.getItem("bb_group_code") || "";
      setCode(stored);
      setHasSavedCode(!!stored);
    }
  }, [visible]);

  if (!visible) return null;

  const submit = async (e) => {
    e.preventDefault();
    setErr("");
    if (!/^[0-9]{4}$/.test(pin)) { setErr("PIN must be exactly 4 digits"); return; }
    setBusy(true);
    try {
      const groupCode = code.trim();
      // Join / sign-in
      const r = await fetch(`${apiBase}/auth/join`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: groupCode, handle, pin }),
      });
      const j = await r.json();
      if (!j.ok) throw new Error(j.error || "Join failed");
      localStorage.setItem("bb_group_code", groupCode);
      localStorage.setItem("bb_handle", handle);
      localStorage.setItem("bb_token", j.token || "");

      // Register for push notifications if available
      if (pushOptIn && typeof registerPushToken === "function") {
        await registerPushToken(apiBase, j.token);
      }

      const roles = Array.isArray(j.roles)
        ? j.roles
        : j.role
          ? [j.role]
          : [];
      onDone(j.token, j.handle, roles);
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div className="absolute inset-0 bg-black/20" />
      <form onSubmit={submit} className="relative card w-[92vw] max-w-md p-6 rounded-2xl shadow-xl" noValidate>
        <h2 className="text-2xl font-bold mb-4">{hasSavedCode ? "Sign In" : "Join Blackbook"}</h2>
        <p className="muted mb-4">Enter your group code, handle, and 4-digit PIN.</p>
        <div className="grid gap-3">
          <input className="chip px-3 py-2 rounded" placeholder="Group code" value={code} onChange={(e) => setCode(e.target.value)} required />
          <input className="chip px-3 py-2 rounded" placeholder="Handle" value={handle} maxLength={32} onChange={(e) => setHandle(e.target.value)} required />
          <input
            className="chip px-3 py-2 rounded"
            placeholder="4-digit PIN"
            value={pin}
            type="tel"
            inputMode="numeric"
            maxLength={4}
            autoComplete="one-time-code"
            enterKeyHint="done"
            onChange={(e) => setPin(e.target.value.replace(/[^0-9]/g, ""))}
            required
          />

          <label className="flex items-center gap-2">
            <input type="checkbox" className="toggle" checked={pushOptIn} onChange={(e) => setPushOptIn(e.target.checked)} />
            <span className="muted text-sm">Enable push alerts</span>
          </label>
        </div>
        {err && <p className="text-red-600 mt-3">{err}</p>}
        <div className="flex gap-2 mt-5">
          <button type="button" onClick={() => onDone(null, null)} className="btn-alt px-4 py-2 rounded">Cancel</button>
          <button disabled={busy} className="btn px-4 py-2 rounded disabled:opacity-50">{busy ? "Working..." : hasSavedCode ? "Sign In" : "Join"}</button>
        </div>
      </form>
    </div>
  );
}


// Attach to window for simple inclusion order
window.JoinModal = JoinModal;