// mockup-classic.jsx — DelyxOS Classic: top panel + left dock + draggable windows

const classicApps = {
  home: {
    label: 'home',
    glyph: '⌂',
    title: 'delyx — local LLMs made easy. maybe.',
    w: 820, h: 600,
  },
  docs: {
    label: 'docs',
    glyph: '§',
    title: 'documentation — delyx',
    w: 880, h: 620,
  },
  status: {
    label: 'status',
    glyph: '◷',
    title: 'status — what is true, right now',
    w: 820, h: 580,
  },
  contact: {
    label: 'contact',
    glyph: '@',
    title: 'contact — say hi (preferably with logs)',
    w: 840, h: 600,
  },
  terminal: {
    label: 'terminal',
    glyph: '$_',
    title: 'user@delyxos: ~',
    w: 560, h: 360,
  },
  agent: {
    label: 'agent core',
    glyph: '◈',
    title: 'delyx agent core — local',
    w: 540, h: 420,
  },
};

function classicGlyph(g) {
  return (
    <span style={{
      fontFamily: 'var(--mono)',
      fontWeight: 600,
      fontSize: 18,
      color: 'var(--cyan)',
      lineHeight: 1,
      letterSpacing: -1,
    }}>{g}</span>
  );
}

function DelyxClassic() {
  const [open, setOpen] = React.useState({ home: true });
  const [order, setOrder] = React.useState(['home']);
  const [minimized, setMinimized] = React.useState({});
  const [maximized, setMaximized] = React.useState({});
  const [pos, setPos] = React.useState({
    home: { x: 30, y: 30 },
    docs: { x: 60, y: 50 },
    status: { x: 90, y: 70 },
    contact: { x: 80, y: 60 },
    terminal: { x: 250, y: 330 },
    agent: { x: 420, y: 100 },
  });
  const [clock, setClock] = React.useState(() => new Date());

  React.useEffect(() => {
    const t = setInterval(() => setClock(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const focus = (id) => setOrder((o) => [...o.filter((x) => x !== id), id]);
  // Dock click: open if closed, restore if minimized, minimize if focused, focus if obscured.
  const toggle = (id) => {
    if (!open[id]) {
      setOpen((p) => ({ ...p, [id]: true }));
      setMinimized((p) => ({ ...p, [id]: false }));
      focus(id);
      return;
    }
    if (minimized[id]) {
      setMinimized((p) => ({ ...p, [id]: false }));
      focus(id);
      return;
    }
    // Open and visible — if topmost, minimize; otherwise raise to top.
    const top = order[order.length - 1];
    if (top === id) {
      setMinimized((p) => ({ ...p, [id]: true }));
    } else {
      focus(id);
    }
  };
  const close = (id) => {
    setOpen((p) => ({ ...p, [id]: false }));
    setMinimized((p) => ({ ...p, [id]: false }));
    setMaximized((p) => ({ ...p, [id]: false }));
  };
  const minimize = (id) => setMinimized((p) => ({ ...p, [id]: true }));
  const toggleMax = (id) => setMaximized((p) => ({ ...p, [id]: !p[id] }));
  const move = (id, dx, dy) =>
    setPos((p) => ({ ...p, [id]: { x: p[id].x + dx, y: p[id].y + dy } }));

  const clockStr = clock.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
    + '  ' + clock.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });

  return (
    <div className="desktop-root" data-screen-label="01 Classic">
      {/* Top panel */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 28,
        background: 'rgba(6,8,11,0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center',
        padding: '0 14px',
        fontSize: 12, color: 'var(--fg-soft)',
        zIndex: 100,
      }}>
        <span style={{ color: 'var(--cyan)', marginRight: 6 }}>~</span>
        <span style={{ color: 'var(--fg-soft)' }}>delyxos:/activities</span>
        <span className="cursor-blink" style={{ marginLeft: 4 }}>_</span>
        <div style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)', color: 'var(--dim)' }}>
          {clockStr}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, color: 'var(--dim)', fontSize: 11 }}>
          <span>net <span style={{ color: 'var(--good)' }}>●</span></span>
          <span>vol 64</span>
          <span>bat 87%</span>
          <span>v0.1.0</span>
        </div>
      </div>

      {/* Left dock */}
      <div style={{
        position: 'absolute', top: 28, left: 0, bottom: 0, width: 56,
        background: 'rgba(6,8,11,0.78)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
        borderRight: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 8, paddingTop: 10,
        zIndex: 95,
      }}>
        {/* logo at top */}
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: '#000', border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          overflow: 'hidden',
          boxShadow: '0 0 24px rgba(95,212,255,0.18)',
          marginBottom: 6,
        }}>
          <img src="delyx.png" alt="" style={{ width: '150%', height: '150%', objectFit: 'cover' }} />
        </div>
        <div style={{ width: 24, height: 1, background: 'var(--line)', marginBottom: 4 }} />
        {/* site pages */}
        {['home', 'docs', 'status', 'contact'].map((id) => (
          <DockIcon key={id} active={open[id]} minimized={minimized[id]} onClick={() => toggle(id)} glyph={classicApps[id].glyph} label={classicApps[id].label} />
        ))}
        <div style={{ width: 24, height: 1, background: 'var(--line)', margin: '6px 0' }} />
        {/* fun apps */}
        {['terminal', 'agent'].map((id) => (
          <DockIcon key={id} active={open[id]} minimized={minimized[id]} onClick={() => toggle(id)} glyph={classicApps[id].glyph} label={classicApps[id].label} />
        ))}
        <div style={{ width: 24, height: 1, background: 'var(--line)', margin: '6px 0' }} />
        {/* github external link */}
        <DockIcon
          external
          onClick={() => window.open('https://github.com/joshua-ivy/Delyx', '_blank', 'noopener,noreferrer')}
          glyph="↗"
          label="github → joshua-ivy/Delyx"
        />
        {/* spacer */}
        <div style={{ flex: 1 }} />
        <div style={{ color: 'var(--dimmer)', fontSize: 10, paddingBottom: 10, letterSpacing: 1 }}>v0.1</div>
      </div>

      {/* Desktop area */}
      <div style={{ position: 'absolute', top: 28, left: 56, right: 0, bottom: 0, zIndex: 1 }}>
        {/* Welcome glyph - shows when no visible windows */}
        {!order.some((id) => open[id] && !minimized[id]) && (
          <div style={{
            position: 'absolute', inset: 0, display: 'flex',
            alignItems: 'center', justifyContent: 'center',
            flexDirection: 'column', color: 'var(--dim)', gap: 12,
          }}>
            <img src="delyx.png" alt="" style={{ width: 96, opacity: 0.5, filter: 'drop-shadow(0 0 40px rgba(95,212,255,0.25))' }} />
            <div style={{ fontSize: 11, letterSpacing: 2, textTransform: 'uppercase' }}>delyxos · ready</div>
          </div>
        )}

        {/* Desktop corner stamp */}
        <div style={{
          position: 'absolute', right: 18, bottom: 14,
          color: 'var(--dimmer)', fontSize: 10, letterSpacing: 1, textTransform: 'uppercase',
          textAlign: 'right', lineHeight: 1.7,
        }}>
          <div>delyxos 26.04 lts</div>
          <div>kernel 6.5 · webkit</div>
          <div style={{ color: 'var(--cyan)' }}>● online</div>
        </div>

        {order.map((id) => open[id] && (
          <Window
            key={id}
            id={id}
            app={classicApps[id]}
            pos={pos[id]}
            z={order.indexOf(id) + 10}
            minimized={!!minimized[id]}
            maximized={!!maximized[id]}
            onFocus={() => focus(id)}
            onClose={() => close(id)}
            onMinimize={() => minimize(id)}
            onToggleMax={() => toggleMax(id)}
            onMove={(dx, dy) => move(id, dx, dy)}
          >
            {id === 'home' && <ClassicHome />}
            {id === 'docs' && <ClassicDocs />}
            {id === 'status' && <ClassicStatus />}
            {id === 'contact' && <ClassicContact />}
            {id === 'terminal' && <ClassicTerminal />}
            {id === 'agent' && <ClassicAgent />}
          </Window>
        ))}
      </div>
    </div>
  );
}

function DockIcon({ active, minimized, onClick, glyph, label, external }) {
  const [hover, setHover] = React.useState(false);
  const visible = active && !minimized;
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        width: 40, height: 40, borderRadius: 8,
        background: visible ? 'rgba(95,212,255,0.12)' : active ? 'rgba(95,212,255,0.04)' : 'rgba(255,255,255,0.02)',
        border: '1px solid ' + (visible ? 'rgba(95,212,255,0.45)' : active ? 'rgba(95,212,255,0.2)' : 'var(--line)'),
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
        transition: 'all 0.15s ease',
      }}
    >
      {classicGlyph(glyph)}
      {active && (
        <span style={{
          position: 'absolute', left: -8, top: '50%', transform: 'translateY(-50%)',
          width: 3, height: visible ? 16 : 8,
          background: 'var(--cyan)',
          opacity: visible ? 1 : 0.5,
          borderRadius: 0,
        }} />
      )}
      {external && (
        <span style={{
          position: 'absolute', top: 2, right: 3,
          width: 5, height: 5, borderRadius: 3,
          background: 'var(--cyan)',
        }} />
      )}
      {hover && (
        <span style={{
          position: 'absolute', left: 48, top: '50%', transform: 'translateY(-50%)',
          background: 'rgba(6,8,11,0.95)', color: 'var(--fg)',
          border: '1px solid var(--line)',
          fontSize: 11, padding: '4px 8px', borderRadius: 4,
          whiteSpace: 'nowrap', zIndex: 200,
          fontFamily: 'var(--mono)',
        }}>{label}{minimized ? ' · minimized' : ''}</span>
      )}
    </div>
  );
}

function Window({ id, app, pos, z, minimized, maximized, onFocus, onClose, onMinimize, onToggleMax, onMove, children }) {
  const drag = React.useRef(null);
  const onDown = (e) => {
    if (maximized) return; // can't drag a maximized window
    onFocus();
    drag.current = { x: e.clientX, y: e.clientY };
    const handler = (ev) => {
      if (!drag.current) return;
      const dx = ev.clientX - drag.current.x;
      const dy = ev.clientY - drag.current.y;
      drag.current = { x: ev.clientX, y: ev.clientY };
      onMove(dx, dy);
    };
    const up = () => {
      drag.current = null;
      window.removeEventListener('mousemove', handler);
      window.removeEventListener('mouseup', up);
    };
    window.addEventListener('mousemove', handler);
    window.addEventListener('mouseup', up);
  };

  const winStyle = maximized
    ? {
        position: 'absolute',
        left: 0, top: 0, width: '100%', height: '100%',
        background: 'rgba(14,17,23,0.96)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: '1px solid var(--line)',
        borderRadius: 0,
        boxShadow: 'none',
        overflow: 'hidden',
        zIndex: z,
        display: minimized ? 'none' : 'flex',
        flexDirection: 'column',
      }
    : {
        position: 'absolute',
        left: pos.x, top: pos.y,
        width: app.w, height: app.h,
        background: 'rgba(14,17,23,0.92)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: '1px solid var(--line)',
        borderRadius: 10,
        boxShadow: '0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(95,212,255,0.06)',
        overflow: 'hidden',
        zIndex: z,
        display: minimized ? 'none' : 'flex',
        flexDirection: 'column',
      };

  return (
    <div onMouseDown={onFocus} style={winStyle}>
      <div
        onMouseDown={onDown}
        onDoubleClick={(e) => { e.stopPropagation(); onToggleMax && onToggleMax(); }}
        style={{
          height: 32, padding: '0 10px',
          background: 'rgba(6,8,11,0.85)',
          borderBottom: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          cursor: maximized ? 'default' : 'move',
          fontSize: 12, color: 'var(--fg-soft)',
          userSelect: 'none',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: 'var(--cyan)' }}>{classicApps[id].glyph}</span>
          <span>{app.title}</span>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{
            fontSize: 10, color: 'var(--dim)',
            padding: '2px 6px', border: '1px solid var(--line)', borderRadius: 3,
          }}>local</span>
          <button onClick={(e) => { e.stopPropagation(); onMinimize && onMinimize(); }} style={dotBtn('#ffc850')} title="minimize">_</button>
          <button onClick={(e) => { e.stopPropagation(); onToggleMax && onToggleMax(); }} style={dotBtn('#5fd49f')} title={maximized ? 'restore' : 'maximize'}>{maximized ? '❐' : '□'}</button>
          <button onClick={(e) => { e.stopPropagation(); onClose(); }} style={dotBtn('#ff7878', true)} title="close">×</button>
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

function dotBtn(color, danger) {
  return {
    width: 18, height: 18, borderRadius: 4,
    background: 'transparent', color: color,
    border: '1px solid ' + color + '55',
    fontFamily: 'var(--mono)', fontSize: 11,
    cursor: 'pointer', display: 'inline-flex',
    alignItems: 'center', justifyContent: 'center',
    padding: 0, lineHeight: 1,
    transition: 'all 0.15s ease',
  };
}

// ────────── Apps ──────────

function ClassicTerminal() {
  const [lines, setLines] = React.useState([
    { kind: 'out', text: 'delyxos 26.04 LTS — webkit kernel 6.5' },
    { kind: 'out', text: 'type "help" to see what works in this prototype.' },
    { kind: 'cmd', text: 'delyx status' },
    { kind: 'ok', text: '● agent core    online   (phi4-mini · ollama)' },
    { kind: 'ok', text: '● mcp servers   2/2      (fs, web-search)' },
    { kind: 'ok', text: '● vault         3.2 GiB  (4 sources, 812 chunks)' },
    { kind: 'warn', text: '~ retrieval     active   (3 claims pending audit)' },
  ]);
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef(null);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [lines]);

  const commands = {
    help: () => [{ kind: 'out', text: 'commands: help, status, models, vault, neofetch, clear, agent <msg>' }],
    status: () => [
      { kind: 'ok', text: '● agent core    online' },
      { kind: 'ok', text: '● mcp servers   2/2' },
      { kind: 'warn', text: '~ retrieval     3 claims pending' },
    ],
    models: () => [
      { kind: 'out', text: 'phi4-mini       3.8B   answer · helper · default' },
      { kind: 'out', text: 'qwen2.5-coder   7B     code · scoring' },
      { kind: 'out', text: 'nomic-embed     0.1B   embeddings' },
    ],
    vault: () => [
      { kind: 'out', text: 'notes/         128 items · 412 chunks' },
      { kind: 'out', text: 'imports/        14 docs · 287 chunks' },
      { kind: 'out', text: 'web-snaps/      32 pages · 113 chunks' },
    ],
    neofetch: () => [
      { kind: 'cyan', text: '   ◈◈◈     user@delyxos' },
      { kind: 'cyan', text: '  ◈   ◈    ────────────────' },
      { kind: 'out', text: '  ◈   ◈    OS:     DelyxOS 26.04 LTS' },
      { kind: 'out', text: '   ◈◈◈     Kernel: 6.5.0-webkit' },
      { kind: 'out', text: '            Shell:  delyx-sh 0.1' },
      { kind: 'out', text: '            Agent:  phi4-mini via ollama' },
      { kind: 'out', text: '            Vault:  3.2 GiB · 812 chunks' },
    ],
  };

  const submit = (e) => {
    if (e.key !== 'Enter') return;
    const cmd = val.trim();
    setVal('');
    if (!cmd) return;
    if (cmd === 'clear') { setLines([]); return; }
    const next = [{ kind: 'cmd', text: cmd }];
    const parts = cmd.split(' ');
    const head = parts[0].toLowerCase();
    if (head === 'agent') {
      const msg = parts.slice(1).join(' ');
      next.push({ kind: 'out', text: 'agent → ' + (msg ? 'thinking about: "' + msg + '"…' : 'usage: agent <message>') });
      if (msg) {
        setTimeout(() => setLines((l) => [...l, { kind: 'cyan', text: 'agent: i looked at "' + msg + '" and would normally route to phi4-mini · 1 retrieval pass · 2 claims to audit.' }]), 600);
      }
    } else if (commands[head]) {
      next.push(...commands[head]());
    } else {
      next.push({ kind: 'err', text: 'delyx-sh: ' + head + ': not in this prototype (try: help)' });
    }
    setLines((l) => [...l, ...next]);
  };

  return (
    <div
      onClick={() => inputRef.current?.focus()}
      style={{
        background: '#06080b', height: '100%',
        display: 'flex', flexDirection: 'column',
        fontFamily: 'var(--mono)', fontSize: 12,
        color: 'var(--fg)',
        userSelect: 'text',
      }}
    >
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: '12px 14px' }}>
        {lines.map((l, i) => <TermLine key={i} line={l} />)}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
          <span style={{ color: 'var(--cyan)' }}>user@delyxos</span>
          <span style={{ color: 'var(--dim)' }}>:</span>
          <span style={{ color: 'var(--good)' }}>~</span>
          <span style={{ color: 'var(--dim)' }}>$</span>
          <input
            ref={inputRef}
            autoFocus
            value={val}
            onChange={(e) => setVal(e.target.value)}
            onKeyDown={submit}
            spellCheck={false}
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: 'var(--fg)', fontFamily: 'var(--mono)', fontSize: 12,
            }}
          />
        </div>
      </div>
    </div>
  );
}

function TermLine({ line }) {
  const colors = {
    cmd: 'var(--fg)',
    out: 'var(--fg-soft)',
    ok: 'var(--cyan)',
    warn: 'var(--warn)',
    err: 'var(--bad)',
    cyan: 'var(--cyan)',
  };
  if (line.kind === 'cmd') {
    return (
      <div style={{ color: 'var(--fg)' }}>
        <span style={{ color: 'var(--cyan)' }}>user@delyxos</span>
        <span style={{ color: 'var(--dim)' }}>:</span>
        <span style={{ color: 'var(--good)' }}>~</span>
        <span style={{ color: 'var(--dim)' }}>$ </span>
        {line.text}
      </div>
    );
  }
  return <div style={{ color: colors[line.kind] || 'var(--fg-soft)', whiteSpace: 'pre' }}>{line.text}</div>;
}

function ClassicAgent() {
  const [msgs, setMsgs] = React.useState([
    { who: 'agent', text: 'agent core ready. local on phi4-mini · 0 evidence claims open.', meta: 'system' },
    { who: 'user', text: 'summarise the docs/REASONING_GAPS file' },
    { who: 'agent', text: 'pulling /docs/REASONING_GAPS_ARCHITECTURE.md from the vault. 14 sections, 9 listed as "experimental / opt-in". want the short version or the gap table?', meta: 'retrieval · 1 source · 0.18s' },
  ]);
  const [val, setVal] = React.useState('');
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs]);

  const send = () => {
    const t = val.trim();
    if (!t) return;
    setMsgs((m) => [...m, { who: 'user', text: t }]);
    setVal('');
    setTimeout(() => {
      const reply = t.toLowerCase().includes('hello')
        ? 'hi. local on phi4-mini, nothing routed remote. ask me about your vault, models, or run an audit.'
        : t.toLowerCase().includes('vault') || t.toLowerCase().includes('notes')
          ? 'vault has 174 items across notes, imports and web-snaps. 812 chunks. want hybrid retrieval over them?'
          : 'i ran a single retrieval pass over local sources. 2 claims need numeric/date audit before i hand you an answer i trust. open /research to see them?';
      setMsgs((m) => [...m, { who: 'agent', text: reply, meta: 'phi4-mini · 1 pass · ' + (Math.random() * 0.4 + 0.1).toFixed(2) + 's' }]);
    }, 700);
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--ink-soft)' }}>
      <div style={{
        padding: '10px 14px', borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', gap: 10,
        background: 'rgba(95,212,255,0.03)',
      }}>
        <div style={{
          width: 8, height: 8, borderRadius: 4, background: 'var(--good)',
          boxShadow: '0 0 12px var(--good)',
        }} />
        <span style={{ fontSize: 12, color: 'var(--fg)' }}>cognitive core</span>
        <span style={{ fontSize: 11, color: 'var(--dim)' }}>· phi4-mini</span>
        <span style={{ fontSize: 11, color: 'var(--dim)' }}>· ollama</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--cyan)' }}>simple mode</span>
      </div>
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {msgs.map((m, i) => <AgentMsg key={i} m={m} />)}
      </div>
      <div style={{ padding: 12, borderTop: '1px solid var(--line)', display: 'flex', gap: 8 }}>
        <input
          value={val}
          onChange={(e) => setVal(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && send()}
          placeholder="query the delyx agent… (try: summarise the docs)"
          style={{
            flex: 1, background: '#06080b', border: '1px solid var(--line)',
            borderRadius: 6, padding: '9px 12px',
            color: 'var(--fg)', fontFamily: 'var(--mono)', fontSize: 12,
            outline: 'none',
          }}
        />
        <button
          onClick={send}
          style={{
            background: 'var(--cyan)', color: 'var(--ink)',
            border: 'none', borderRadius: 6, padding: '0 16px',
            fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 12, cursor: 'pointer',
          }}
        >send →</button>
      </div>
    </div>
  );
}

function AgentMsg({ m }) {
  const isUser = m.who === 'user';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: isUser ? 'flex-end' : 'flex-start', gap: 4, maxWidth: '92%', alignSelf: isUser ? 'flex-end' : 'flex-start' }}>
      <div style={{ fontSize: 10, color: 'var(--dimmer)', letterSpacing: 1, textTransform: 'uppercase', display: 'flex', gap: 6 }}>
        <span>{isUser ? 'you' : 'agent'}</span>
        {m.meta && <span style={{ color: 'var(--dim)' }}>· {m.meta}</span>}
      </div>
      <div style={{
        padding: '10px 14px',
        background: isUser ? 'rgba(255,255,255,0.04)' : 'rgba(95,212,255,0.08)',
        border: '1px solid ' + (isUser ? 'var(--line)' : 'rgba(95,212,255,0.25)'),
        borderRadius: 8,
        fontSize: 13, color: 'var(--fg)', lineHeight: 1.55,
      }}>{m.text}</div>
    </div>
  );
}

function ClassicModels() {
  const models = [
    { name: 'phi4-mini', size: '3.8B', role: 'answer · helper · default', status: 'loaded', via: 'ollama' },
    { name: 'qwen2.5-coder', size: '7B', role: 'code · scoring', status: 'loaded', via: 'ollama' },
    { name: 'nomic-embed-text', size: '0.1B', role: 'embeddings', status: 'loaded', via: 'ollama' },
    { name: 'llama-3.1-70b', size: '70B', role: 'max reasoning', status: 'remote', via: 'openrouter' },
    { name: 'gpt-oss-20b', size: '20B', role: 'deep research', status: 'pull pending', via: 'ollama' },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--ink-soft)' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ color: 'var(--cyan)' }}>⌬</span>
        <span style={{ fontSize: 13, color: 'var(--fg)' }}>model roles</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--dim)' }}>5 wired · 1 pending</span>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
        {models.map((m) => {
          const ok = m.status === 'loaded';
          return (
            <div key={m.name} style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-soft)', display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.7fr', gap: 12, alignItems: 'center' }}>
              <div>
                <div style={{ color: 'var(--fg)', fontSize: 13 }}>
                  <span style={{ color: 'var(--cyan)', marginRight: 6 }}>&gt;</span>{m.name}
                </div>
                <div style={{ color: 'var(--dim)', fontSize: 11, marginTop: 2 }}>via {m.via} · {m.size}</div>
              </div>
              <div style={{ color: 'var(--fg-soft)', fontSize: 12 }}>{m.role}</div>
              <div style={{
                fontSize: 10, padding: '3px 8px', borderRadius: 3,
                width: 'fit-content', justifySelf: 'end',
                background: ok ? 'rgba(95,212,255,0.10)' : m.status === 'remote' ? 'rgba(255,200,80,0.10)' : 'rgba(255,255,255,0.04)',
                color: ok ? 'var(--cyan)' : m.status === 'remote' ? 'var(--warn)' : 'var(--dim)',
                letterSpacing: 1, textTransform: 'uppercase',
              }}>{m.status}</div>
            </div>
          );
        })}
      </div>
      <div style={{ padding: 12, borderTop: '1px solid var(--line)', display: 'flex', gap: 8 }}>
        <button style={pillBtn(true)}>+ pull model</button>
        <button style={pillBtn(false)}>add /v1 provider</button>
        <button style={pillBtn(false)}>edit roles</button>
      </div>
    </div>
  );
}

function pillBtn(primary) {
  return {
    fontFamily: 'var(--mono)', fontSize: 11,
    padding: '6px 12px', borderRadius: 4,
    border: '1px solid ' + (primary ? 'var(--cyan)' : 'var(--line)'),
    background: primary ? 'rgba(95,212,255,0.10)' : 'transparent',
    color: primary ? 'var(--cyan)' : 'var(--dim)',
    cursor: 'pointer',
  };
}

function ClassicVault() {
  return (
    <div style={{ height: '100%', display: 'flex', background: 'var(--ink-soft)' }}>
      <div style={{ width: 180, borderRight: '1px solid var(--line)', padding: 10, fontSize: 12 }}>
        <div style={{ color: 'var(--dim)', fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>vault</div>
        {[
          ['▾ notes/', 'var(--cyan)'],
          ['   research-notes.md', null],
          ['   delyx-roadmap.md', null],
          ['   2026-q1-plan.md', null],
          ['▾ imports/', 'var(--cyan)'],
          ['   reasoning-gaps.pdf', null],
          ['   tauri-2-migration.md', null],
          ['▸ web-snaps/', 'var(--cyan)'],
          ['▸ memory/', 'var(--cyan)'],
        ].map(([t, c], i) => (
          <div key={i} style={{
            color: c || 'var(--fg-soft)',
            padding: '3px 6px',
            cursor: 'pointer',
            borderRadius: 3,
            background: i === 2 ? 'rgba(95,212,255,0.10)' : 'transparent',
          }}>{t}</div>
        ))}
      </div>
      <div style={{ flex: 1, padding: 16, overflowY: 'auto' }}>
        <div style={{ color: 'var(--dim)', fontSize: 11, marginBottom: 6 }}>notes / delyx-roadmap.md</div>
        <div style={{ color: 'var(--fg)', fontSize: 18, marginBottom: 14 }}>
          <span style={{ color: 'var(--cyan)', marginRight: 8 }}>#</span>delyx roadmap
        </div>
        <div style={{ color: 'var(--fg-soft)', fontSize: 12, lineHeight: 1.7 }}>
          <div style={{ color: 'var(--dim)', marginBottom: 4 }}>## near</div>
          <div>- signed windows installer + updater</div>
          <div>- claim audit ux polish</div>
          <div>- mcp stdio reliability under load</div>
          <div style={{ color: 'var(--dim)', marginTop: 14, marginBottom: 4 }}>## later</div>
          <div>- beam/tree hypothesis search</div>
          <div>- verifier-led composition</div>
          <div>- worker agents (opt-in)</div>
        </div>
        <div style={{
          marginTop: 18, padding: 10,
          border: '1px solid var(--line)', borderRadius: 6,
          background: 'rgba(95,212,255,0.04)',
          fontSize: 11, color: 'var(--dim)',
        }}>
          <span style={{ color: 'var(--cyan)' }}>indexed</span> · 412 chunks · last embed 2m ago · 14 backlinks
        </div>
      </div>
    </div>
  );
}

function ClassicControl() {
  const rows = [
    ['runs', 'idle', '12 today · last 2m ago', 'good'],
    ['approvals', 'queue', '3 pending review', 'warn'],
    ['connectors', '2/3 ok', 'fs · web-search · ✗ github', 'warn'],
    ['session', 'active', '47m · 18 turns · 1.2 GB ctx', 'good'],
    ['automations', 'off', '0 scheduled', 'dim'],
    ['logs', 'streaming', '142 lines/min', 'good'],
  ];
  return (
    <div style={{ height: '100%', background: 'var(--ink-soft)', padding: 14, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <span style={{ color: 'var(--cyan)' }}>◉</span>
        <span style={{ fontSize: 13, color: 'var(--fg)' }}>control center</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--dim)' }}>all systems · expert mode hatch</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, flex: 1 }}>
        {rows.map(([label, status, detail, tone]) => (
          <div key={label} style={{
            padding: 12, border: '1px solid var(--line)', borderRadius: 6,
            background: 'rgba(255,255,255,0.01)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 11, color: 'var(--dim)', letterSpacing: 1, textTransform: 'uppercase' }}>{label}</span>
              <span style={{
                fontSize: 10, color: tone === 'good' ? 'var(--cyan)' : tone === 'warn' ? 'var(--warn)' : 'var(--dim)',
                padding: '2px 6px', borderRadius: 3,
                border: '1px solid currentColor',
                opacity: 0.9,
              }}>{status}</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--fg-soft)' }}>{detail}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, padding: 8, fontSize: 10, color: 'var(--dimmer)', borderTop: '1px solid var(--line-soft)', letterSpacing: 0.5 }}>
        last sync 4s ago · vault 3.2 GiB · agent 47m uptime
      </div>
    </div>
  );
}

window.DelyxClassic = DelyxClassic;