// Inactivity overlay — "Still there?" prompt + auto-lock countdown.
// Triggered by tapping the dev "Simulate timeout" pill (or any window.gpsTriggerInactivity()).
const { useState: useStateIn, useEffect: useEffectIn } = React;

function InactivityHost({ onLock }) {
  const [stage, setStage] = useStateIn("idle"); // idle | warning | locking
  const [warnLeft, setWarnLeft] = useStateIn(15);
  const [lockLeft, setLockLeft] = useStateIn(5);

  useEffectIn(() => {
    window.gpsTriggerInactivity = () => {
      setStage("warning");
      setWarnLeft(15);
    };
    return () => { window.gpsTriggerInactivity = null; };
  }, []);

  useEffectIn(() => {
    if (stage !== "warning") return;
    if (warnLeft <= 0) { setStage("locking"); setLockLeft(5); return; }
    const t = setTimeout(() => setWarnLeft((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [stage, warnLeft]);

  useEffectIn(() => {
    if (stage !== "locking") return;
    if (lockLeft <= 0) { setStage("idle"); onLock && onLock(); return; }
    const t = setTimeout(() => setLockLeft((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [stage, lockLeft]);

  function stillHere() { setStage("idle"); setWarnLeft(15); }

  if (stage === "idle") return null;

  return (
    <div className="fixed inset-0 z-[55] bg-zinc-950/90 backdrop-blur-sm flex items-center justify-center p-8 text-zinc-100" style={{ animation: "fadeIn 0.2s" }}>
      <div className="w-full max-w-[680px] bg-zinc-900 border border-zinc-800 rounded-2xl p-10 text-center">
        {stage === "warning" ? (
          <>
            <div className="text-[12px] uppercase tracking-[0.22em] text-amber-400">No activity</div>
            <div className="font-display text-[72px] tracking-tight mt-2">Still there?</div>
            <div className="text-[18px] text-zinc-400 mt-3">
              Locking station in{" "}
              <span className="font-mono text-amber-300 tabular-nums">{warnLeft}s</span>
            </div>
            <div className="grid grid-cols-2 gap-3 mt-8">
              <button onClick={() => { setStage("locking"); setLockLeft(0); }}
                className="h-[80px] rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-200 font-display text-[20px] tracking-wider hover:bg-zinc-700">
                LOCK NOW
              </button>
              <button onClick={stillHere}
                className="h-[80px] rounded-xl bg-emerald-500 text-zinc-950 font-display text-[22px] tracking-wider hover:bg-emerald-400">
                I'M STILL HERE
              </button>
            </div>
          </>
        ) : (
          <>
            <div className="text-[12px] uppercase tracking-[0.22em] text-red-400">Locking station</div>
            <div className="font-display text-[88px] tabular-nums leading-none mt-2 text-red-300">{lockLeft}</div>
            <div className="text-[18px] text-zinc-400 mt-3">Session will end and require PIN re-entry</div>
            <button onClick={stillHere}
              className="mt-7 h-[64px] px-8 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-200 font-display text-[18px] tracking-wider hover:bg-zinc-700">
              CANCEL
            </button>
          </>
        )}
      </div>
    </div>
  );
}

// Small dev pill in bottom-right corner — only visible to manager/admin during demo
function DevInactivityTrigger() {
  return (
    <button onClick={() => window.gpsTriggerInactivity && window.gpsTriggerInactivity()}
      className="fixed bottom-4 right-4 z-30 h-9 px-3 rounded-lg bg-zinc-900/80 border border-zinc-700 text-zinc-400 text-[11px] uppercase tracking-wider font-mono hover:bg-zinc-800 hover:text-zinc-200 backdrop-blur-sm">
      ⏱ simulate timeout
    </button>
  );
}

window.InactivityHost = InactivityHost;
window.DevInactivityTrigger = DevInactivityTrigger;