// Toast system — slides up from bottom with 3-second depleting bar + optional UNDO.
// Usage: window.gpsToast({ message, tone, undo: () => void, durationMs })
const { useState: useStateToast, useEffect: useEffectToast, useRef: useRefToast } = React;

function ToastHost() {
  const [toast, setToast] = useStateToast(null);
  const timerRef = useRefToast(null);
  const rafRef = useRefToast(null);
  const [progress, setProgress] = useStateToast(1);

  useEffectToast(() => {
    window.gpsToast = (opts) => {
      // clear any existing
      if (timerRef.current) clearTimeout(timerRef.current);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      const dur = opts.durationMs || 3000;
      const t = { id: Date.now(), tone: opts.tone || "ok", ...opts, _dur: dur, _start: performance.now() };
      setToast(t);
      setProgress(1);
      function step(ts) {
        const elapsed = ts - t._start;
        const p = Math.max(0, 1 - elapsed / dur);
        setProgress(p);
        if (p > 0) rafRef.current = requestAnimationFrame(step);
      }
      rafRef.current = requestAnimationFrame(step);
      timerRef.current = setTimeout(() => setToast(null), dur);
    };
    return () => { window.gpsToast = null; };
  }, []);

  function dismiss() {
    if (timerRef.current) clearTimeout(timerRef.current);
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    setToast(null);
  }
  function undo() {
    if (toast?.undo) toast.undo();
    dismiss();
  }

  if (!toast) return null;

  const toneStyles = {
    ok: "bg-emerald-500/10 border-emerald-500/40 text-emerald-100",
    warn: "bg-amber-500/10 border-amber-500/40 text-amber-100",
    err: "bg-red-500/10 border-red-500/40 text-red-100",
    info: "bg-zinc-800 border-zinc-700 text-zinc-100",
  };
  const barColor = {
    ok: "bg-emerald-400",
    warn: "bg-amber-400",
    err: "bg-red-400",
    info: "bg-zinc-400",
  }[toast.tone];

  return (
    <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[60]" style={{ animation: "toastIn 0.22s ease-out" }}>
      <div className={`relative overflow-hidden rounded-xl border px-5 py-4 shadow-2xl min-w-[420px] flex items-center gap-5 ${toneStyles[toast.tone] || toneStyles.info}`}>
        <div className="text-[16px] font-medium">{toast.message}</div>
        {toast.undo && (
          <button onClick={undo}
            className="ml-auto h-9 px-4 rounded-lg bg-zinc-100 text-zinc-950 font-display text-[13px] tracking-wider hover:bg-white">
            UNDO
          </button>
        )}
        <button onClick={dismiss}
          className="h-8 w-8 rounded-md text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/40 flex items-center justify-center">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-zinc-900/50">
          <div className={`h-full ${barColor}`} style={{ width: `${progress * 100}%`, transition: "none" }} />
        </div>
      </div>
      <style>{`
        @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
      `}</style>
    </div>
  );
}

window.ToastHost = ToastHost;