const { useState, useEffect, useRef } = React;

const DISPLAY_PREF_KEY = "bb_display_prefs";

function loadDisplayPrefs() {
  try { return JSON.parse(localStorage.getItem(DISPLAY_PREF_KEY) || "{}"); } catch { return {}; }
}

function ProfileModal({ apiBase, token, visible, onClose, onHandleChange }) {
  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 [displayPrefs, setDisplayPrefs] = useState(() => ({
    display_enabled: true,
    wife_mode: false,
    brightness: 60,
    scroll_speed: 10,
    reaction_speed: 8,
    page_hold: 2.0,
    page_gap: 0.15,
    page_label_hold: 1.2,
    rotation: "Rotate:180",
    show_wagers: true,
    show_board: true,
    show_results: true,
    show_finals: true,
    show_reactions: true,
    ...loadDisplayPrefs(),
  }));
  const [syncStatus, setSyncStatus] = useState("");
  const syncTimer = useRef(null);
  const mountedRef = useRef(false);

  const setPref = (k, v) => setDisplayPrefs((p) => ({ ...p, [k]: v }));

  // "Page change speed" is presented 1 (slow) .. 10 (fast) but stored as a hold
  // time in seconds (higher seconds = slower). Map between the two.
  const holdFromSpeed = (s) => Math.round((5.0 - (s - 1) * 0.5) * 10) / 10; // 1->5.0s, 10->0.5s
  const speedFromHold = (h) => Math.min(10, Math.max(1, Math.round((5.0 - Number(h)) / 0.5) + 1));

  const pushPrefs = async (prefs) => {
    localStorage.setItem(DISPLAY_PREF_KEY, JSON.stringify(prefs));
    const deviceId = (localStorage.getItem("bb_handle") || "").toLowerCase() || "pi-main";
    const groupCode = localStorage.getItem("bb_group_code") || "";
    try {
      const r = await fetch(`${apiBase}/display/devices/${encodeURIComponent(deviceId)}/config`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ ...prefs, group_code: groupCode }),
      });
      setSyncStatus(r.ok ? "synced" : "offline");
    } catch {
      setSyncStatus("offline");
    }
    setTimeout(() => setSyncStatus(""), 2500);
  };

  // Auto-push every time prefs change, debounced 450ms
  useEffect(() => {
    if (!mountedRef.current) { mountedRef.current = true; return; }
    setSyncStatus("syncing");
    clearTimeout(syncTimer.current);
    syncTimer.current = setTimeout(() => pushPrefs(displayPrefs), 450);
    return () => clearTimeout(syncTimer.current);
  }, [displayPrefs]);

  const overlayRef = useRef(null);

  // 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 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 rounded-xl p-6 w-full max-w-sm shadow-xl overflow-y-auto"
           data-modal-scroll
           style={{ 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">
            <form onSubmit={submitHandle} className="grid gap-2">
              <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>
          </div>
        )}

        {tab === "display" && (
          <div className="grid gap-4">

            <div className="flex justify-between items-center text-xs muted">
              <span>Changes sync to Pi in ~2s</span>
              <span className="font-mono" style={{ color: syncStatus === "synced" ? "#22c55e" : syncStatus === "offline" ? "#f87171" : syncStatus === "syncing" ? "#fbbf24" : "transparent" }}>
                {syncStatus === "syncing" ? "syncing…" : syncStatus === "synced" ? "✓ synced" : syncStatus === "offline" ? "offline" : "."}
              </span>
            </div>

            {/* Power + Wife Mode — single tappable rows, current state shown as text on right */}
            <div className="grid gap-2">
              <button type="button" className="chip px-3 py-2.5 rounded-lg w-full text-left flex items-center justify-between"
                      onClick={() => setPref("display_enabled", displayPrefs.display_enabled === false ? true : false)}>
                <div>
                  <div className="text-sm font-semibold">Display</div>
                  <div className="text-xs muted">{displayPrefs.display_enabled === false ? "Panel is blank — tap to enable" : "Panel active — tap to turn off"}</div>
                </div>
                <span className="font-semibold text-sm" style={{ color: displayPrefs.display_enabled === false ? "#f87171" : "#22c55e" }}>
                  {displayPrefs.display_enabled === false ? "OFF" : "ON"}
                </span>
              </button>

              <button type="button" className="chip px-3 py-2.5 rounded-lg w-full text-left flex items-center justify-between"
                      onClick={() => setPref("wife_mode", !displayPrefs.wife_mode)}>
                <div>
                  <div className="text-sm font-semibold">Wife Mode</div>
                  <div className="text-xs muted">Values positive · +$1k for you</div>
                </div>
                <span className="font-semibold text-sm" style={{ color: displayPrefs.wife_mode ? "#f472b6" : undefined }}>
                  {displayPrefs.wife_mode ? "ON" : "OFF"}
                </span>
              </button>
            </div>

            {/* Brightness */}
            <div className="grid gap-1">
              <div className="flex justify-between text-sm font-semibold"><span>Brightness</span><span className="font-mono">{displayPrefs.brightness}%</span></div>
              <input type="range" min="10" max="100" step="5" value={displayPrefs.brightness} onChange={(e) => setPref("brightness", Number(e.target.value))} className="w-full" />
            </div>

            {/* Speed — three clear controls */}
            <div className="border-t pt-3 grid gap-3">
              <div className="text-sm font-semibold">Speed</div>

              <div className="grid gap-0.5">
                <div className="flex justify-between text-sm"><span className="muted">Vertical scroll speed</span><span className="font-mono text-xs">{displayPrefs.scroll_speed}</span></div>
                <input type="range" min="1" max="20" step="1" value={displayPrefs.scroll_speed} onChange={(e) => setPref("scroll_speed", Number(e.target.value))} className="w-full" />
                <div className="flex justify-between text-[10px] muted"><span>Slow</span><span>How fast pages scroll up</span><span>Fast</span></div>
              </div>

              <div className="grid gap-0.5">
                <div className="flex justify-between text-sm"><span className="muted">Horizontal scroll speed</span><span className="font-mono text-xs">{displayPrefs.reaction_speed}</span></div>
                <input type="range" min="1" max="20" step="1" value={displayPrefs.reaction_speed} onChange={(e) => setPref("reaction_speed", Number(e.target.value))} className="w-full" />
                <div className="flex justify-between text-[10px] muted"><span>Slow</span><span>Bottom ticker speed</span><span>Fast</span></div>
              </div>

              <div className="grid gap-0.5">
                <div className="flex justify-between text-sm"><span className="muted">Page change speed</span><span className="font-mono text-xs">{speedFromHold(displayPrefs.page_hold)}</span></div>
                <input type="range" min="1" max="10" step="1" value={speedFromHold(displayPrefs.page_hold)} onChange={(e) => setPref("page_hold", holdFromSpeed(Number(e.target.value)))} className="w-full" />
                <div className="flex justify-between text-[10px] muted"><span>Slow</span><span>How long each screen shows</span><span>Fast</span></div>
              </div>
            </div>

            {/* Sections */}
            <div className="border-t pt-3 grid gap-2">
              <div className="text-sm font-semibold">Screens shown</div>
              <div className="grid grid-cols-2 gap-1.5">
                {[["show_wagers","Wagers"],["show_board","Board"],["show_results","Results"],["show_reactions","Reaction ticker"]].map(([k, label]) => {
                  const on = displayPrefs[k] !== false;
                  return (
                    <button key={k} type="button" onClick={() => setPref(k, !on)}
                            className={`px-3 py-1.5 rounded text-sm text-left ${on ? "btn" : "btn-alt"}`}>
                      {label}
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Rotation */}
            <div className="border-t pt-3 grid gap-2">
              <div className="text-sm font-semibold">Rotation</div>
              <div className="grid grid-cols-4 gap-1">
                {["0","90","180","270"].map((r) => {
                  const val = r === "0" ? "" : `Rotate:${r}`;
                  return (
                    <button key={r} onClick={() => setPref("rotation", val)}
                            className={`py-1.5 rounded text-sm font-mono ${displayPrefs.rotation === val ? "btn" : "btn-alt"}`}>
                      {r}°
                    </button>
                  );
                })}
              </div>
            </div>

          </div>
        )}

      </div>
    </div>
  );
}

window.ProfileModal = ProfileModal;