// Writing mode demo: typing + ⌘⇧T rewrite into target language.
const WritingDemo = ({ lang = 'en' }) => {
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;
  const [phase, setPhase] = React.useState(0);
  // 0 typing source, 1 source done (caret), 2 hotkey shown, 3 translating, 4 final

  const source = "Hi Yuki, just wanted to flag that the deck for tomorrow is mostly there — I'll send a final pass tonight after dinner. Let me know if there's anything you want to push earlier.";
  const target = "由紀さん、明日のデッキはほぼ仕上がっています。今晩、夕食後に最終確認をお送りします。もし先に進めたい部分があれば、ご連絡ください。";

  const [typed, setTyped] = React.useState("");

  React.useEffect(() => {
    let cancelled = false;
    const run = async () => {
      while (!cancelled) {
        // type out
        setPhase(0);
        setTyped("");
        for (let i = 1; i <= source.length; i++) {
          if (cancelled) return;
          setTyped(source.slice(0, i));
          await new Promise(r => setTimeout(r, 22 + Math.random() * 30));
        }
        if (cancelled) return;
        await new Promise(r => setTimeout(r, 700));
        setPhase(2); // hotkey
        await new Promise(r => setTimeout(r, 600));
        setPhase(3); // translating
        await new Promise(r => setTimeout(r, 900));
        if (cancelled) return;
        setPhase(4);
        setTyped(target);
        await new Promise(r => setTimeout(r, 3500));
      }
    };
    run();
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="demo-window writing-demo" style={{ aspectRatio: '16 / 11' }}>
      <div className="demo-titlebar">
        <div className="lights"><span/><span/><span/></div>
        <div className="title">Slack — #design-yuki</div>
      </div>
      <div className="demo-body">
        <div className="writing-pane">
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--fg-dim)', textTransform: 'uppercase', marginBottom: 10 }}>
            {phase === 4
              ? T('EN → JA · 「Coworker」 preset', 'EN → JA ·「同事」預設', 'EN → JA ·「同僚」プリセット')
              : T('Drafting message', '正在打訊息', '下書き中')}
          </div>
          <div style={{ minHeight: '6em' }}>
            {typed}
            {phase < 4 && <span className="caret"/>}
          </div>
        </div>

        <div className={"writing-toast" + (phase >= 2 ? " show" : "")}>
          <span className="pulse"/>
          {phase === 2 && <><span className="kbd" style={{ fontSize: 10 }}>⌘</span><span className="kbd" style={{ fontSize: 10 }}>⇧</span><span className="kbd" style={{ fontSize: 10 }}>T</span> &nbsp; {T('rewrite in Japanese', '改寫為日文', '日本語に書き換え')}</>}
          {phase === 3 && <>{T('translating to Japanese…', '正在翻譯成日文…', '日本語に翻訳中…')}</>}
          {phase === 4 && <>{T(<>pasted · undo with <span className="kbd" style={{ fontSize: 10 }}>⌘Z</span></>, <>已貼上 · 按 <span className="kbd" style={{ fontSize: 10 }}>⌘Z</span> 復原</>, <>貼り付け済み · <span className="kbd" style={{ fontSize: 10 }}>⌘Z</span> で取り消し</>)}</>}
        </div>
      </div>
    </div>
  );
};

window.WritingDemo = WritingDemo;