const { useState, useEffect, useRef } = React;

// Profile → API tokens: create (shown once), list, revoke. Uses window.BBApiTokens (utils/api-tokens.js).
function ApiTokensSection({ apiBase, token }) {
  const T = window.BBApiTokens;
  const [tokens, setTokens] = useState([]);
  const [name, setName] = useState("");
  const [fresh, setFresh] = useState(null); // {name, token}: shown once, kept in memory only
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [copied, setCopied] = useState(false);

  const load = () => T.list(apiBase, token).then(setTokens).catch((e) => setErr(e.message || "Failed to load"));
  useEffect(() => { if (T && token) load(); }, [apiBase, token]);
  if (!T) return null;

  const submit = async (e) => {
    e.preventDefault(); setErr(""); setCopied(false);
    const bad = T.validateName(name);
    if (bad) { setErr(bad); return; }
    setBusy(true);
    try {
      const j = await T.create(apiBase, token, name);
      setFresh({ name: j.name, token: j.token });
      setName("");
      await load();
    } catch (e2) { setErr(e2.message || "Failed"); }
    finally { setBusy(false); }
  };

  const revoke = async (t) => {
    if (!window.confirm(`Revoke "${t.name}"? Anything using it stops working.`)) return;
    setErr("");
    try { await T.revoke(apiBase, token, t.id); await load(); }
    catch (e) { setErr(e.message || "Failed"); }
  };

  const copy = () => {
    if (navigator.clipboard && fresh) navigator.clipboard.writeText(fresh.token).then(() => setCopied(true)).catch(() => {});
  };

  const live = T.active(tokens);
  return (
    <div className="border-t pt-4 grid gap-2" data-testid="api-tokens">
      <div className="text-sm font-semibold">API tokens</div>
      <div className="muted text-xs">For scripts and integrations: send as <code>Authorization: Bearer &lt;token&gt;</code>. A token can do anything you can. <a href={`${apiBase}/docs/guide`} target="_blank" rel="noopener" data-testid="api-docs-link">API docs</a></div>
      {fresh && (
        <div className="chip rounded p-2 grid gap-2">
          <div className="text-xs font-semibold">Copy "{fresh.name}" now. It won't be shown again.</div>
          <input className="chip w-full px-2 py-1 rounded text-xs" readOnly value={fresh.token} onFocus={(e) => e.target.select()} />
          <div className="flex gap-2 justify-end">
            <button type="button" className="btn px-3 py-1 rounded text-xs" onClick={copy}>{copied ? "Copied" : "Copy"}</button>
            <button type="button" className="btn-alt px-3 py-1 rounded text-xs" onClick={() => setFresh(null)}>Done</button>
          </div>
        </div>
      )}
      {live.map((t) => (
        <div key={t.id} className="flex items-center justify-between gap-2 text-sm">
          <div className="min-w-0">
            <div className="truncate">{t.name}</div>
            <div className="muted text-xs">{t.token_prefix}… · created {T.when(t.created_at)} · used {T.when(t.last_used_at)}</div>
          </div>
          <button type="button" className="btn-alt px-3 py-1 rounded text-xs" onClick={() => revoke(t)}>Revoke</button>
        </div>
      ))}
      {!live.length && !err && <div className="muted text-xs">No API tokens.</div>}
      <form onSubmit={submit} className="flex gap-2">
        <input className="chip flex-1 min-w-0 px-3 py-2 rounded text-sm" value={name} maxLength={T.NAME_MAX} placeholder="Token name, e.g. home automation" onChange={(e) => setName(e.target.value)} />
        <button className="btn px-3 py-2 rounded text-sm disabled:opacity-50" disabled={busy}>{busy ? "Creating..." : "Create"}</button>
      </form>
      {err && <div className="text-red-600 text-sm">{err}</div>}
    </div>
  );
}

function ProfileModal({ apiBase, token, visible, onClose, onHandleChange, onAvatarChange }) {
  const [tab, setTab] = useState("account");
  const [newHandle, setNewHandle] = useState("");
  const [currentPin, setCurrentPin] = useState("");
  const [newPin, setNewPin] = useState("");
  const [errHandle, setErrHandle] = useState("");
  const [errPin, setErrPin] = useState("");
  const [busyHandle, setBusyHandle] = useState(false);
  const [busyPin, setBusyPin] = useState(false);
  const [reactionName, setReactionName] = useState(() => localStorage.getItem("bb_reactor_handle") || "");

  const overlayRef = useRef(null);
  const fileRef = useRef(null);
  const [avatarUrl, setAvatarUrl] = useState(null);
  const [avatarBusy, setAvatarBusy] = useState(false);
  const [errAvatar, setErrAvatar] = useState("");

  // Current avatar comes from /auth/me (avatar_url is only present when one is set).
  useEffect(() => {
    if (!visible || !token) return;
    let cancelled = false;
    setErrAvatar("");
    fetch(`${apiBase}/auth/me`, { headers: { Authorization: `Bearer ${token}` } })
      .then((r) => r.json())
      .then((j) => { if (!cancelled && j && j.ok) setAvatarUrl(j.avatar_url || null); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [visible, token, apiBase]);

  // Non-passive touchmove on overlay prevents page scroll on iOS (React onTouchMove is passive)
  useEffect(() => {
    const el = overlayRef.current;
    if (!el || !visible) return;
    const trap = (e) => {
      // Allow scroll inside the card; block everything else from reaching the page
      if (!e.target.closest('[data-modal-scroll]')) e.preventDefault();
    };
    el.addEventListener('touchmove', trap, { passive: false });
    return () => el.removeEventListener('touchmove', trap);
  }, [visible]);

  if (!visible) return null;

  const submitHandle = async (e) => {
    e.preventDefault(); setErrHandle("");
    const h = newHandle.trim();
    if (!h) { setErrHandle("Handle required"); return; }
    setBusyHandle(true);
    try {
      const r = await fetch(`${apiBase}/profile/handle`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ handle: h }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.ok === false) throw new Error(j.error || `HTTP ${r.status}`);
      localStorage.setItem("bb_handle", h);
      if (onHandleChange) onHandleChange(j.handle || h);
      setNewHandle("");
    } catch (e) { setErrHandle(e.message || "Failed"); }
    finally { setBusyHandle(false); }
  };

  const submitPin = async (e) => {
    e.preventDefault(); setErrPin("");
    if (!/^[0-9]{4}$/.test(newPin)) { setErrPin("PIN must be exactly 4 digits"); return; }
    setBusyPin(true);
    try {
      const r = await fetch(`${apiBase}/profile/pin`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ current: currentPin, pin: newPin }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.ok === false) throw new Error(j.error || `HTTP ${r.status}`);
      setCurrentPin(""); setNewPin("");
    } catch (e) { setErrPin(e.message || "Failed"); }
    finally { setBusyPin(false); }
  };

  const uploadAvatar = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    setErrAvatar(""); setAvatarBusy(true);
    try {
      const body = await window.BBAvatar.prepareUpload(file);
      const r = await fetch(`${apiBase}/profile/avatar`, {
        method: "POST",
        headers: { "Content-Type": body.type || "image/jpeg", Authorization: `Bearer ${token}` },
        body,
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.ok === false) throw new Error(j.error || j.detail || `HTTP ${r.status}`);
      setAvatarUrl(j.avatar_url || null);
      if (onAvatarChange) onAvatarChange(j.avatar_url || null);
    } catch (err) { setErrAvatar(err.message || "Upload failed"); }
    finally { setAvatarBusy(false); }
  };

  const removeAvatar = async () => {
    setErrAvatar(""); setAvatarBusy(true);
    try {
      const r = await fetch(`${apiBase}/profile/avatar`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` } });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.ok === false) throw new Error(j.error || j.detail || `HTTP ${r.status}`);
      setAvatarUrl(null);
      if (onAvatarChange) onAvatarChange(null);
    } catch (err) { setErrAvatar(err.message || "Remove failed"); }
    finally { setAvatarBusy(false); }
  };

  const myHandle = localStorage.getItem("bb_handle") || "";

  const TAB = "px-3 py-1.5 rounded text-sm font-medium transition-colors";
  const activeTab = TAB + " btn";
  const inactiveTab = TAB + " btn-alt";

  return (
    <div ref={overlayRef} className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 px-4 py-8">
      <div className={"card p-6 w-full shadow-xl overflow-y-auto " + (tab === "display" ? "" : "rounded-xl max-w-sm")}
           data-modal-scroll
           style={tab === "display"
             ? { position: 'fixed', inset: 0, maxWidth: 'none', height: '100%', borderRadius: 0, overflowX: 'hidden', paddingTop: 'max(1rem, env(safe-area-inset-top))', WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain' }
             : { maxHeight: 'calc(100vh - 4rem)', WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain' }}>

        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">Profile</h2>
          <button className="btn-alt px-3 py-1 rounded" onClick={() => onClose(false)}>Close</button>
        </div>

        <div className="flex gap-2 mb-4">
          <button className={tab === "account" ? activeTab : inactiveTab} onClick={() => setTab("account")}>Account</button>
          <button className={tab === "display" ? activeTab : inactiveTab} onClick={() => setTab("display")}>Display</button>
        </div>

        {tab === "account" && (
          <div className="grid gap-4">
            <div className="grid gap-2">
              <div className="text-sm font-semibold">Profile photo</div>
              <div className="flex items-center gap-3">
                {window.BBAvatar && <window.BBAvatar.Avatar handle={myHandle} url={avatarUrl} apiBase={apiBase} size={56} />}
                <div className="flex flex-wrap gap-2">
                  <input ref={fileRef} type="file" accept={(window.BBAvatar && window.BBAvatar.ACCEPT) || "image/*"} className="hidden" onChange={uploadAvatar} />
                  <button type="button" className="btn px-3 py-2 rounded text-sm disabled:opacity-50" disabled={avatarBusy || !window.BBAvatar}
                          onClick={() => fileRef.current && fileRef.current.click()}>
                    {avatarBusy ? "Saving..." : avatarUrl ? "Change photo" : "Upload photo"}
                  </button>
                  {avatarUrl && (
                    <button type="button" className="btn-alt px-3 py-2 rounded text-sm disabled:opacity-50" disabled={avatarBusy} onClick={removeAvatar}>Remove</button>
                  )}
                </div>
              </div>
              <div className="muted text-xs">Shown next to your name on the board. JPEG, PNG or WebP, up to 2 MB.</div>
              {errAvatar && <div className="text-red-600 text-sm">{errAvatar}</div>}
            </div>

            <form onSubmit={submitHandle} className="grid gap-2 border-t pt-4">
              <div className="text-sm font-semibold">Handle</div>
              <input className="chip w-full px-3 py-2 rounded text-sm" value={newHandle} placeholder="New handle" onChange={(e) => setNewHandle(e.target.value)} />
              {errHandle && <div className="text-red-600 text-sm">{errHandle}</div>}
              <button className="btn px-4 py-2 rounded self-end text-sm disabled:opacity-50" disabled={busyHandle}>{busyHandle ? "Saving..." : "Update Handle"}</button>
            </form>

            <form onSubmit={submitPin} className="grid gap-2 border-t pt-4">
              <div className="text-sm font-semibold">Change PIN</div>
              <input className="chip w-full px-3 py-2 rounded text-sm" type="password" value={currentPin} placeholder="Current PIN" onChange={(e) => setCurrentPin(e.target.value.replace(/[^0-9]/g, ""))} maxLength={4} />
              <input className="chip w-full px-3 py-2 rounded text-sm" type="password" value={newPin} placeholder="New PIN (4 digits)" onChange={(e) => setNewPin(e.target.value.replace(/[^0-9]/g, ""))} maxLength={4} />
              {errPin && <div className="text-red-600 text-sm">{errPin}</div>}
              <button className="btn px-4 py-2 rounded self-end text-sm disabled:opacity-50" disabled={busyPin}>{busyPin ? "Saving..." : "Update PIN"}</button>
            </form>

            <div className="border-t pt-4 grid gap-2">
              <div className="text-sm font-semibold">Reaction Display Name</div>
              <div className="muted text-xs">Shown when you react to a bet on the board</div>
              <input className="chip w-full px-3 py-2 rounded text-sm" value={reactionName} placeholder="e.g. Rooster" onChange={(e) => { setReactionName(e.target.value); localStorage.setItem("bb_reactor_handle", e.target.value); }} />
            </div>

            <ApiTokensSection apiBase={apiBase} token={token} />
          </div>
        )}

        {tab === "display" && (
          <div style={{ margin: "0 -1.5rem -1.5rem", minWidth: 0 }}>
            <div className="flex flex-wrap gap-2 justify-between items-center px-6 pb-2 text-sm">
              <span className="muted">Changes go straight to your LED panel</span>
              <a href="/display" className="btn-alt px-3 py-1 rounded" style={{ textDecoration: "none" }}>Full screen</a>
            </div>
            {window.DisplayControl ? <window.DisplayControl apiBase={apiBase} token={token} /> : <div className="p-6">Display controls failed to load. Open <a href="/display">/display</a>.</div>}
          </div>
        )}

      </div>
    </div>
  );
}

window.ProfileModal = ProfileModal;