// Simulation driver — auto-progresses a phase through a scripted timeline
// usage: const sim = useSim(steps, deps) — steps: [{at: ms, do: (set) => {...}}, ...]

function useSim(steps, playing, resetKey) {
  const timers = React.useRef([]);
  React.useEffect(() => {
    timers.current.forEach(clearTimeout);
    timers.current = [];
    if (!playing) return;
    steps.forEach(s => {
      const t = setTimeout(() => s.do(), s.at);
      timers.current.push(t);
    });
    return () => {
      timers.current.forEach(clearTimeout);
      timers.current = [];
    };
  }, [playing, resetKey]);
}

// Typewriter — animates a string over duration ms
function useTypewriter(target, startAt, playing, resetKey) {
  const [text, setText] = React.useState("");
  React.useEffect(() => {
    setText("");
    if (!playing) { setText(target); return; }
    if (!target) return;
    const duration = Math.min(Math.max(target.length * 18, 400), 2600);
    const chars = target.length;
    const timers = [];
    const begin = setTimeout(() => {
      for (let i = 1; i <= chars; i++) {
        const t = setTimeout(() => setText(target.slice(0, i)), (i / chars) * duration);
        timers.push(t);
      }
    }, startAt);
    timers.push(begin);
    return () => timers.forEach(clearTimeout);
  }, [target, playing, resetKey]);
  return text;
}

// Simulation controls — big play/reset bar at top of a simulated phase
function SimBar({ playing, onPlay, onPause, onReset, done, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 12px',
      background: 'var(--paper-2)',
      border: '1px dashed var(--ink-3)',
      marginBottom: 14,
      position: 'relative',
    }}>
      <div className="mono" style={{ fontSize: '0.7rem', letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
        sim ·
      </div>
      <div className="hand" style={{ color: 'var(--blue)', fontSize: '1rem', flex: 1 }}>{label}</div>
      {!done ? (
        playing ? (
          <button className="btn btn-sm" onClick={onPause}>
            <Icons.Pause size={10} /> pause sim
          </button>
        ) : (
          <button className="btn btn-sm btn-primary" onClick={onPlay}>
            ▶ play sim
          </button>
        )
      ) : (
        <span className="stamp stamp-green" style={{ fontSize: '0.6rem' }}>sim complete</span>
      )}
      <button className="btn btn-sm btn-ghost" onClick={onReset}>
        reset
      </button>
    </div>
  );
}

Object.assign(window, { useSim, useTypewriter, SimBar });