/* Boot sequence, BSOD, and Web Audio sound helpers */

/* ====== Web Audio sounds (no asset files) ====== */
const Sounds = (() => {
  let ctx = null;
  let muted = false;
  const ac = () => (ctx ||= new (window.AudioContext || window.webkitAudioContext)());

  const tone = (freq, dur, type = 'sine', vol = 0.15, startAt = 0) => {
    if (muted) return;
    const a = ac();
    const t0 = a.currentTime + startAt;
    const osc = a.createOscillator();
    const g = a.createGain();
    osc.type = type;
    osc.frequency.setValueAtTime(freq, t0);
    g.gain.setValueAtTime(0, t0);
    g.gain.linearRampToValueAtTime(vol, t0 + 0.01);
    g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
    osc.connect(g).connect(a.destination);
    osc.start(t0);
    osc.stop(t0 + dur + 0.02);
  };

  const slide = (f0, f1, dur, type = 'sine', vol = 0.15, startAt = 0) => {
    if (muted) return;
    const a = ac();
    const t0 = a.currentTime + startAt;
    const osc = a.createOscillator();
    const g = a.createGain();
    osc.type = type;
    osc.frequency.setValueAtTime(f0, t0);
    osc.frequency.linearRampToValueAtTime(f1, t0 + dur);
    g.gain.setValueAtTime(0, t0);
    g.gain.linearRampToValueAtTime(vol, t0 + 0.02);
    g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
    osc.connect(g).connect(a.destination);
    osc.start(t0);
    osc.stop(t0 + dur + 0.02);
  };

  return {
    setMuted(v) { muted = v; },
    isMuted() { return muted; },
    /* The famous Microsoft Sound (Brian Eno) — abbreviated arpeggio */
    startup() {
      // C5 E5 G5 C6 ascending pad
      const notes = [523.25, 659.25, 783.99, 1046.5];
      notes.forEach((f, i) => tone(f, 0.9, 'triangle', 0.10, i * 0.12));
      tone(261.63, 1.4, 'sine', 0.06, 0.5); // low pad
    },
    /* MSN nudge: 2 short blips */
    nudge() {
      tone(880, 0.08, 'square', 0.12, 0);
      tone(660, 0.08, 'square', 0.12, 0.1);
    },
    /* MSN message in: classic ding */
    msgIn() {
      tone(988, 0.12, 'sine', 0.10, 0);
      tone(1318, 0.18, 'sine', 0.10, 0.08);
    },
    /* BSOD beep */
    bsod() {
      tone(220, 0.6, 'square', 0.18, 0);
    },
    /* Shutdown swoop */
    shutdown() {
      slide(440, 110, 0.7, 'sawtooth', 0.12, 0);
    },
    /* Generic click */
    click() {
      tone(1200, 0.04, 'square', 0.06, 0);
    },
  };
})();
window.Sounds = Sounds;


/* ============== Boot sequence ============== */
function BootSequence({ onDone }) {
  const [progress, setProgress] = React.useState(0);
  const [stage, setStage] = React.useState('logo'); // logo → progress → fadeout

  React.useEffect(() => {
    // unlock audio on user gesture; if not yet unlocked, still try
    try { Sounds.startup(); } catch (e) {}
    const t1 = setTimeout(() => setStage('progress'), 1200);
    const t2 = setInterval(() => {
      setProgress(p => {
        if (p >= 100) return 100;
        return p + 4 + Math.random() * 6;
      });
    }, 110);
    return () => { clearTimeout(t1); clearInterval(t2); };
  }, []);

  React.useEffect(() => {
    if (progress >= 100) {
      setStage('fadeout');
      const t = setTimeout(onDone, 500);
      return () => clearTimeout(t);
    }
  }, [progress, onDone]);

  return (
    <div className={`boot-screen ${stage === 'fadeout' ? 'fadeout' : ''}`}>
      <div className="boot-logo">
        <svg width="220" height="180" viewBox="0 0 220 180">
          <defs>
            <linearGradient id="flagR" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#ff5a5a"/><stop offset="1" stopColor="#c80000"/>
            </linearGradient>
            <linearGradient id="flagG" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#7bff7b"/><stop offset="1" stopColor="#00a000"/>
            </linearGradient>
            <linearGradient id="flagB" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#6da3ff"/><stop offset="1" stopColor="#0040c0"/>
            </linearGradient>
            <linearGradient id="flagY" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#ffe96b"/><stop offset="1" stopColor="#d0a000"/>
            </linearGradient>
          </defs>
          <g transform="skewX(-18)">
            <polygon points="40,8 100,4 96,80 36,84" fill="url(#flagR)"/>
            <polygon points="104,4 168,0 164,76 100,80" fill="url(#flagG)"/>
            <polygon points="36,90 96,86 92,162 32,166" fill="url(#flagB)"/>
            <polygon points="100,86 164,82 160,158 96,162" fill="url(#flagY)"/>
          </g>
        </svg>
        <div className="boot-wordmark">
          <div className="boot-microsoft">Microsoft</div>
          <div className="boot-windows">Windows<span className="boot-98">98</span></div>
        </div>
      </div>
      {stage !== 'logo' && (
        <div className="boot-progress-wrap">
          <div className="boot-progress-label">Démarrage de Windows 98…</div>
          <div className="boot-progress-track">
            <div className="boot-progress-fill" style={{ width: `${Math.min(progress, 100)}%` }}></div>
          </div>
        </div>
      )}
      <div className="boot-copyright">
        Copyright © 1981-1998 Microsoft Corporation
      </div>
    </div>
  );
}
window.BootSequence = BootSequence;


/* ============== Logon ============== */
function LogonScreen({ onLogin }) {
  const [pwd, setPwd] = React.useState("");
  const submit = (e) => { e.preventDefault(); onLogin(); };
  return (
    <div className="logon-screen">
      <div className="logon-flag">
        <svg width="56" height="46" viewBox="0 0 56 46">
          <g transform="skewX(-18)">
            <polygon points="14,2 30,1 29,21 13,22" fill="#e44"/>
            <polygon points="32,1 48,0 47,20 31,21" fill="#5c5"/>
            <polygon points="13,24 29,23 28,43 12,44" fill="#48c"/>
            <polygon points="31,23 47,22 46,42 30,43" fill="#fc4"/>
          </g>
        </svg>
      </div>
      <div className="logon-dialog">
        <div className="logon-title">Saisie du mot de passe Windows</div>
        <div className="logon-row">
          <div className="logon-keys">🔑</div>
          <div className="logon-text">
            Tapez votre mot de passe Windows.
          </div>
        </div>
        <form onSubmit={submit}>
          <div className="logon-field">
            <label>Nom :</label>
            <input className="logon-input" type="text" defaultValue="Reynald" />
          </div>
          <div className="logon-field">
            <label>Mot de passe :</label>
            <input
              className="logon-input"
              type="password"
              value={pwd}
              onChange={(e) => setPwd(e.target.value)}
              autoFocus
              placeholder=""
            />
          </div>
          <div className="logon-buttons">
            <button type="submit" className="btn btn-primary">OK</button>
            <button type="button" className="btn" onClick={onLogin}>Annuler</button>
          </div>
        </form>
      </div>
    </div>
  );
}
window.LogonScreen = LogonScreen;


/* ============== Shutdown dialog ============== */
function ShutdownDialog({ onChoose, onCancel }) {
  const [choice, setChoice] = React.useState('shutdown');
  const opts = [
    { id: 'standby', label: 'Mettre en veille' },
    { id: 'shutdown', label: 'Arrêter' },
    { id: 'restart', label: 'Redémarrer' },
    { id: 'restartdos', label: "Redémarrer en mode MS-DOS" },
  ];
  return (
    <div className="shutdown-overlay" onClick={onCancel}>
      <div className="shutdown-dialog" onClick={(e) => e.stopPropagation()}>
        <div className="shutdown-header">Arrêt de Windows</div>
        <div className="shutdown-body">
          <div className="shutdown-icon">
            <svg width="42" height="42" viewBox="0 0 42 42">
              <g transform="skewX(-18)">
                <polygon points="10,2 22,1 21,17 9,18" fill="#e44"/>
                <polygon points="24,1 36,0 35,16 23,17" fill="#5c5"/>
                <polygon points="9,20 21,19 20,35 8,36" fill="#48c"/>
                <polygon points="23,19 35,18 34,34 22,35" fill="#fc4"/>
              </g>
            </svg>
          </div>
          <div className="shutdown-options">
            <div className="shutdown-question">Que voulez-vous faire ?</div>
            {opts.map(o => (
              <label key={o.id} className="shutdown-radio">
                <input
                  type="radio"
                  name="shutdown-choice"
                  value={o.id}
                  checked={choice === o.id}
                  onChange={() => setChoice(o.id)}
                />
                <span>{o.label}</span>
              </label>
            ))}
          </div>
        </div>
        <div className="shutdown-buttons">
          <button className="btn btn-primary" onClick={() => onChoose(choice)}>OK</button>
          <button className="btn" onClick={onCancel}>Annuler</button>
          <button className="btn" onClick={onCancel}>Aide</button>
        </div>
      </div>
    </div>
  );
}
window.ShutdownDialog = ShutdownDialog;


/* ============== Hourglass ============== */
function Hourglass({ onDone, delay = 800 }) {
  React.useEffect(() => {
    const t = setTimeout(onDone, delay);
    return () => clearTimeout(t);
  }, [onDone, delay]);
  return (
    <div className="hourglass-screen">
      <div className="hourglass-spinner">⌛</div>
    </div>
  );
}
window.Hourglass = Hourglass;


/* ============== BSOD ============== */
function BSOD({ onDismiss }) {
  React.useEffect(() => {
    Sounds.bsod();
    const onKey = () => onDismiss();
    window.addEventListener('keydown', onKey);
    window.addEventListener('click', onKey);
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('click', onKey);
    };
  }, [onDismiss]);

  return (
    <div className="bsod">
      <pre className="bsod-text">
{`
   Windows

  Une exception fatale 0E s'est produite à 0028:C0011E36 dans VXD VMM(01) +
  00010E36. Le processus actuel sera arrêté.

  *  Appuyez sur une touche pour terminer l'application en cours.
  *  Appuyez sur CTRL+ALT+SUPPR à nouveau pour redémarrer votre
     ordinateur. Vous perdrez toutes les informations non enregistrées
     dans toutes les applications.

                Appuyez sur une touche pour continuer _
`}
      </pre>
    </div>
  );
}
window.BSOD = BSOD;