<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Drover-Go — round 2 (dark only)</title>
<style>
  html, body { margin: 0; padding: 0; background: #f0eee9; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
</style>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel" src="design-canvas.jsx"></script>
<script type="text/babel" src="drover-shared.jsx"></script>
<script type="text/babel" src="drover-compact.jsx"></script>
<script type="text/babel" src="drover-cli.jsx"></script>
<script type="text/babel" src="drover-studio.jsx"></script>
<script type="text/babel" src="drover-workshop.jsx"></script>

<script type="text/babel">
  // Patch useDrover to record latest D per slot id (for preset driving).
  if (!window.__drvSlots) {
    const orig = window.useDrover;
    window.__drvSlots = new Map();
    window.useDrover = function(initial) {
      const D = orig(initial);
      const slot = (initial && initial.__slot) || null;
      React.useEffect(() => { if (slot) window.__drvSlots.set(slot, D); });
      return D;
    };
  }

  function PresetHost({ Component, preset }) {
    const slot = React.useId();
    React.useEffect(() => {
      let cancelled = false;
      const wait = () => new Promise(r => requestAnimationFrame(r));
      (async () => {
        await wait(); await wait();
        const D = window.__drvSlots.get(slot);
        if (!D || cancelled) return;
        if (preset === 'idle') return;
        if (preset === 'checking') { D.runCheck(); return; }
        const waitChecked = async () => {
          for (let i = 0; i < 60 && !cancelled; i++) {
            await new Promise(r => setTimeout(r, 200));
            if (window.__drvSlots.get(slot)?.phase === 'checked') break;
          }
        };
        if (preset === 'passed') { D.runCheck(); await waitChecked(); return; }
        if (preset === 'auth-passed') {
          D.update({ auth: true, login: 'drover', password: 'secret123' });
          await wait();
          window.__drvSlots.get(slot)?.runCheck();
          await waitChecked(); return;
        }
        if (preset === 'failed') {
          D.setScenario?.('udpFail'); await wait();
          window.__drvSlots.get(slot)?.runCheck();
          await waitChecked(); return;
        }
        if (preset === 'active') {
          D.runCheck(); await waitChecked(); await wait();
          window.__drvSlots.get(slot)?.startProxy?.();
          await new Promise(r => setTimeout(r, 1500));
          return;
        }
        if (preset === 'active-warn') {
          D.setScenario?.('udpFail'); await wait();
          window.__drvSlots.get(slot)?.runCheck(); await waitChecked(); await wait();
          window.__drvSlots.get(slot)?.startProxy?.();
          await new Promise(r => setTimeout(r, 1500));
          return;
        }
      })();
      return () => { cancelled = true; window.__drvSlots.delete(slot); };
    }, [preset, slot]);
    return <Component initial={{ __slot: slot }} />;
  }

  function ReasoningCard() {
    return (
      <div style={{
        width: 540, padding: '16px 18px', background: '#ffffff',
        border: '1px solid rgba(0,0,0,0.08)', borderRadius: 10,
        fontSize: 13, lineHeight: 1.55, color: '#2a251f',
      }}>
        <div style={{ fontWeight: 700, marginBottom: 4 }}>Drover-Go · round 2</div>
        <div style={{ color: '#5c5650' }}>
          Только dark. 4 новых направления, более сдержанных и функциональных:
          Compact Pro (плотный, мониторинговый), CLI (терминал/фосфор),
          Studio (Linear-ish, спокойный), Workshop (industrial slate + amber).
          Каждый — 6 состояний: idle → checking → all-passed → with-auth → UDP-failed → active → active-warn.
          Отметь, какие нравятся — расширим в light + tweaks.
        </div>
      </div>
    );
  }

  function App() {
    const { DesignCanvas, DCSection, DCArtboard } = window;
    const W = 480, H = 640;
    const variants = [
      { id: 'compact',  Component: window.CompactWindow,
        title: '1 · Compact Pro', subtitle: 'Плотный, мониторинговый. Wireshark-ish. Минимум воздуха.' },
      { id: 'cli',      Component: window.CliWindow,
        title: '2 · Cyber CLI',   subtitle: 'Фосфорный терминал. CRT-сканлайны. Всё через `> command --flag`.' },
      { id: 'studio',   Component: window.StudioWindow,
        title: '3 · Studio',      subtitle: 'Современный, calm, Linear-ish. Тонкие карты, синий accent.' },
      { id: 'workshop', Component: window.WorkshopWindow,
        title: '4 · Workshop',    subtitle: 'Industrial slate + amber. Шильдики, лево-акцентный border.' },
    ];
    const presets = [
      { id: 'idle',         label: 'idle' },
      { id: 'checking',     label: 'checking…' },
      { id: 'passed',       label: 'all passed' },
      { id: 'auth-passed',  label: 'with auth · passed' },
      { id: 'failed',       label: 'UDP failed' },
      { id: 'active',       label: 'active proxy' },
      { id: 'active-warn',  label: 'active · UDP warn' },
    ];

    return (
      <DesignCanvas>
        <DCSection id="intro" title="About" subtitle="Round 2 — dark only">
          <DCArtboard id="intro-card" label="reasoning" width={540} height={150}>
            <ReasoningCard/>
          </DCArtboard>
        </DCSection>
        {variants.map(v => (
          <DCSection key={v.id} id={v.id} title={v.title} subtitle={v.subtitle}>
            {presets.map(p => (
              <DCArtboard key={p.id} id={`${v.id}-${p.id}`} label={p.label} width={W} height={H}>
                <PresetHost Component={v.Component} preset={p.id}/>
              </DCArtboard>
            ))}
          </DCSection>
        ))}
      </DesignCanvas>
    );
  }

  function tryMount() {
    if (window.CompactWindow && window.CliWindow && window.StudioWindow && window.WorkshopWindow && window.DesignCanvas) {
      ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
    } else {
      setTimeout(tryMount, 50);
    }
  }
  tryMount();
</script>
</body>
</html>
