// drover-classic.jsx — Variant 1: Classic devtool.
// Information-dense. Mono metrics. Plain rectangles, hairline borders.
// Sober palette: neutral grays + one teal accent for primary action / success.

const ClassicTheme = {
  // dark
  d: {
    bg:        '#1c1d20',
    chrome:    '#15161a',
    panel:     '#22242a',
    panelAlt:  '#1a1c20',
    border:    '#34373d',
    borderSoft:'#2a2c32',
    text:      '#dde0e6',
    dim:       '#8a8f99',
    dimmer:    '#5b6068',
    accent:    '#3ea99f',   // teal
    accentDim: '#2a7d76',
    danger:    '#d96565',
    warn:      '#d9a155',
    pass:      '#5cba8b',
    skip:      '#7c8088',
    inputBg:   '#15161a',
    btnBg:     '#2c2f36',
    btnBgH:    '#373b43',
    primaryBg: '#3ea99f',
    primaryFg: '#0c1a18',
  },
  l: {
    bg:        '#f3f4f6',
    chrome:    '#e8eaef',
    panel:     '#ffffff',
    panelAlt:  '#f8f9fb',
    border:    '#d8dbe1',
    borderSoft:'#e6e8ec',
    text:      '#1c1f24',
    dim:       '#5c6168',
    dimmer:    '#8a8f97',
    accent:    '#2a7d76',
    accentDim: '#bdded9',
    danger:    '#c0463f',
    warn:      '#a8731e',
    pass:      '#2f8c5a',
    skip:      '#7c8088',
    inputBg:   '#ffffff',
    btnBg:     '#ffffff',
    btnBgH:    '#f1f2f5',
    primaryBg: '#2a7d76',
    primaryFg: '#ffffff',
  },
};

function ClassicWindow({ mode = 'dark', initial }) {
  const t = ClassicTheme[mode === 'dark' ? 'd' : 'l'];
  const D = window.useDrover(initial);
  const palette = { pending: t.dimmer, running: t.accent, passed: t.pass, failed: t.danger, skipped: t.skip };
  const fontMono = '"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace';
  const fontUI   = '"Inter","Segoe UI",system-ui,sans-serif';
  const isActive = D.phase === 'active';
  const allChecked = D.phase === 'checked' || D.phase === 'active';
  const failed = D.lastSummary?.failed ?? 0;

  return (
    <div style={{
      width: 480, height: 640, background: t.bg, color: t.text, display: 'flex', flexDirection: 'column',
      fontFamily: fontUI, fontSize: 13, lineHeight: 1.4, overflow: 'hidden',
      border: mode === 'dark' ? '1px solid #000' : '1px solid #c0c3c9',
    }}>
      {/* ─── title bar ─── */}
      <ClassicTitleBar t={t} />

      {/* ─── content ─── */}
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px 0' }}>

        {/* Form */}
        <SectionLabel t={t}>SOCKS5 Proxy</SectionLabel>
        <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
          <Field t={t} label="Host" style={{ flex: 1 }}>
            <input value={D.form.host} onChange={e => D.update({ host: e.target.value })}
              placeholder="95.165.72.59 или example.com"
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              style={inputStyle(t, fontMono)} />
          </Field>
          <Field t={t} label="Port" style={{ width: 92 }}>
            <input value={D.form.port} onChange={e => D.update({ port: e.target.value.replace(/\D/g,'') })}
              placeholder="12334" inputMode="numeric"
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              style={inputStyle(t, fontMono)} />
          </Field>
        </div>

        <Checkbox t={t} checked={D.form.auth}
          onChange={(v) => { D.update({ auth: v }); if (v) setTimeout(() => document.getElementById('cls-login')?.focus(), 30); }}>
          Authentication
        </Checkbox>

        <div style={{ display: 'flex', gap: 8, marginTop: 8, marginBottom: 12, opacity: D.form.auth ? 1 : 0.45 }}>
          <Field t={t} label="Login" style={{ flex: 1 }}>
            <input id="cls-login" disabled={!D.form.auth} value={D.form.login}
              onChange={e => D.update({ login: e.target.value })} placeholder="user"
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              style={inputStyle(t, fontMono, !D.form.auth)} />
          </Field>
          <Field t={t} label="Password" style={{ flex: 1 }}>
            <input disabled={!D.form.auth} type="password" value={D.form.password}
              onChange={e => D.update({ password: e.target.value })} placeholder="••••••"
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              style={inputStyle(t, fontMono, !D.form.auth)} />
          </Field>
        </div>

        <PrimaryBtn t={t} onClick={D.runCheck} disabled={D.phase === 'checking' || isActive}>
          {D.phase === 'checking' ? 'Checking…' : 'Check connection'}
        </PrimaryBtn>

        {/* Status */}
        <div style={{ height: 18 }} />
        <SectionLabel t={t}>Status</SectionLabel>
        <ClassicStatus t={t} D={D} palette={palette} fontMono={fontMono} />

        {/* Action buttons */}
        <div style={{ height: 14 }} />
        <div style={{ display: 'flex', gap: 8 }}>
          <ClassicStartBtn t={t} D={D} fontMono={fontMono} />
          <ClassicStopBtn  t={t} D={D} />
        </div>

        {isActive && <ClassicLiveStats t={t} stats={D.stats} fontMono={fontMono} />}

        <div style={{ height: 14 }} />
      </div>

      {/* Logs collapsible */}
      <ClassicLogs t={t} D={D} fontMono={fontMono} />
    </div>
  );
}

// ─── pieces ─────────────────────────────────────────────────────────────────
function ClassicTitleBar({ t }) {
  const cellStyle = {
    width: 38, height: 28, display:'flex', alignItems:'center', justifyContent:'center',
    color: t.dim, cursor:'pointer',
  };
  return (
    <div style={{
      height: 32, background: t.chrome, borderBottom: `1px solid ${t.borderSoft}`,
      display:'flex', alignItems:'center', WebkitAppRegion:'drag', userSelect:'none',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, padding:'0 12px', flex:1 }}>
        <window.BrandMark size={14} color={t.accent}/>
        <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: 0.1 }}>Drover-Go</span>
        <span style={{ fontSize: 11, color: t.dimmer, fontFamily:'ui-monospace,monospace' }}>v0.4.2</span>
      </div>
      <div style={{ display:'flex', WebkitAppRegion:'no-drag' }}>
        <div style={cellStyle} title="Settings"><window.IconGear color={t.dim}/></div>
        <div style={cellStyle} title="Minimize"><window.IconMin color={t.dim}/></div>
        <div style={{...cellStyle}} title="Close"
             onMouseEnter={e => e.currentTarget.style.background = '#c0463f'}
             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <window.IconClose color={t.dim}/>
        </div>
      </div>
    </div>
  );
}

function SectionLabel({ children, t }) {
  return <div style={{
    fontSize: 10.5, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase',
    color: t.dim, marginBottom: 8,
  }}>{children}</div>;
}

function Field({ children, label, t, style }) {
  return (
    <label style={{ display:'flex', flexDirection:'column', gap: 4, ...style }}>
      <span style={{ fontSize: 10.5, color: t.dim, fontWeight: 500 }}>{label}</span>
      {children}
    </label>
  );
}

function inputStyle(t, fontMono, disabled) {
  return {
    background: t.inputBg, color: disabled ? t.dimmer : t.text,
    border: `1px solid ${t.border}`, borderRadius: 3, padding: '7px 9px',
    fontFamily: fontMono, fontSize: 12, outline: 'none', width: '100%', boxSizing: 'border-box',
    transition: 'border-color .12s, box-shadow .12s',
  };
}

function Checkbox({ checked, onChange, children, t }) {
  return (
    <label style={{ display:'inline-flex', alignItems:'center', gap: 7, cursor:'pointer', userSelect:'none', fontSize: 12 }}>
      <span style={{
        width: 14, height: 14, borderRadius: 2, border: `1px solid ${checked ? t.accent : t.border}`,
        background: checked ? t.accent : 'transparent', display:'flex', alignItems:'center', justifyContent:'center',
        transition: 'background .12s, border-color .12s',
      }}>
        {checked && <svg width="9" height="9" viewBox="0 0 9 9"><path d="M1.5 4.5l2 2 4-4" stroke={t.primaryFg} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      </span>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display:'none' }}/>
      {children}
    </label>
  );
}

function PrimaryBtn({ t, onClick, disabled, children, style }) {
  return (
    <button onClick={onClick} disabled={disabled}
      style={{
        width:'100%', padding:'9px 12px', border:'none', borderRadius: 3,
        background: disabled ? t.btnBg : t.primaryBg, color: disabled ? t.dimmer : t.primaryFg,
        fontWeight: 600, fontSize: 12.5, letterSpacing: 0.1, cursor: disabled ? 'not-allowed' : 'pointer',
        boxShadow: disabled ? 'none' : `inset 0 -1px 0 rgba(0,0,0,.18)`,
        transition: 'background .12s', ...style,
      }}>
      {children}
    </button>
  );
}

// ─── status panel ──────────────────────────────────────────────────────────
function ClassicStatus({ t, D, palette, fontMono }) {
  const idle = D.phase === 'idle';
  if (idle) {
    return (
      <div style={{
        background: t.panel, border: `1px solid ${t.borderSoft}`, borderRadius: 4,
        padding: '14px 14px', display:'flex', alignItems:'center', gap: 10,
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: t.dimmer }}/>
        <span style={{ color: t.dim, fontSize: 12.5 }}>Ready to check</span>
      </div>
    );
  }
  return (
    <div style={{ background: t.panel, border: `1px solid ${t.borderSoft}`, borderRadius: 4, overflow:'hidden' }}>
      {/* header */}
      <div style={{
        padding: '8px 12px', display:'flex', alignItems:'center', gap: 8,
        borderBottom: `1px solid ${t.borderSoft}`, background: t.panelAlt, fontSize: 12,
      }}>
        {D.phase === 'checking'
          ? <>
              <window.StatusDot state="running" palette={palette} size={12}/>
              <span>Running diagnostics…</span>
              <span style={{ marginLeft:'auto', color: t.dim, fontFamily: fontMono, fontSize: 11 }}>
                {Object.keys(D.results).length}/{D.tests.length}
              </span>
            </>
          : D.lastSummary?.failed === 0
            ? <span style={{ color: t.pass, fontWeight: 600 }}>All checks passed. Ready to start.</span>
            : <span style={{ color: t.warn, fontWeight: 600 }}>{D.lastSummary?.failed} of {D.tests.length} checks failed. Some features won't work.</span>}
      </div>
      {/* tests */}
      <div>
        {D.tests.map((test, i) => {
          const r = D.results[test.id];
          const state = r?.result || (D.running === test.id ? 'running' : 'pending');
          const isLast = i === D.tests.length - 1;
          return (
            <div key={test.id} style={{
              borderBottom: !isLast ? `1px solid ${t.borderSoft}` : 'none',
              padding: '6px 12px',
            }}>
              <div style={{ display:'flex', alignItems:'center', gap: 9, height: 22 }}>
                <window.StatusDot state={state} palette={palette} size={12}/>
                <span style={{ fontSize: 12, color: state === 'pending' ? t.dim : t.text }} title={test.desc}>
                  {test.label}
                </span>
                <span style={{ marginLeft:'auto', fontFamily: fontMono, fontSize: 11,
                               color: state === 'failed' ? t.danger : state === 'skipped' ? t.skip : t.dim }}>
                  {r?.metric || (state === 'running' ? '...' : '')}
                </span>
                {r?.result === 'failed' && (
                  <button onClick={() => D.toggleExpand(test.id)} style={iconBtnStyle(t)} title="Подробнее">
                    <window.IconChevron color={t.dim} dir={r.expanded ? 'up' : 'down'}/>
                  </button>
                )}
              </div>
              {r?.result === 'failed' && r.expanded && (
                <div className="drv-fadein" style={{
                  margin: '4px 0 6px 21px', padding: '8px 10px', borderRadius: 3,
                  background: mode_mix(t.danger, t.panel, 0.9), border: `1px solid ${mode_mix(t.danger, t.panel, 0.78)}`,
                  fontSize: 11.5, color: t.text,
                }}>
                  <div style={{ color: t.danger, fontWeight: 600, marginBottom: 2 }}>{r.error}</div>
                  <div style={{ color: t.dim }}>{r.hint}</div>
                  <div style={{ display:'flex', gap: 6, marginTop: 6 }}>
                    <button onClick={() => navigator.clipboard?.writeText(`[${test.label}] ${r.error} — ${r.metric}`)}
                      style={smallBtn(t, fontMono)}>
                      <window.IconCopy color={t.dim}/> copy
                    </button>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function iconBtnStyle(t) {
  return {
    width: 20, height: 20, padding: 0, border:'none', background:'transparent',
    cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center',
    borderRadius: 2,
  };
}
function smallBtn(t, fontMono) {
  return {
    display:'inline-flex', alignItems:'center', gap: 4, padding: '3px 7px',
    background: t.btnBg, border: `1px solid ${t.border}`, color: t.dim,
    borderRadius: 3, fontFamily: fontMono, fontSize: 10.5, cursor:'pointer',
  };
}

// crude color mix for dark/light. expects hex (#rrggbb), bg can be hex too. amount=share-of-bg.
function mode_mix(fg, bg, amt) {
  const a = hexToRgb(fg), b = hexToRgb(bg);
  return `rgb(${Math.round(a.r*(1-amt)+b.r*amt)},${Math.round(a.g*(1-amt)+b.g*amt)},${Math.round(a.b*(1-amt)+b.b*amt)})`;
}
function hexToRgb(h) {
  const v = h.replace('#','');
  return { r: parseInt(v.slice(0,2),16), g: parseInt(v.slice(2,4),16), b: parseInt(v.slice(4,6),16) };
}

// ─── start/stop ────────────────────────────────────────────────────────────
function ClassicStartBtn({ t, D, fontMono }) {
  const phase = D.phase;
  const summary = D.lastSummary;
  const allFailed = summary && summary.failed === D.tests.length;
  const checkedOk = phase === 'checked' && !allFailed;
  const active = phase === 'active';
  const warning = active && (summary?.failed || 0) > 0;

  if (active) {
    return (
      <div style={{
        flex:1, padding:'9px 12px', borderRadius: 3, display:'flex', alignItems:'center', justifyContent:'center', gap: 8,
        background: warning ? mode_mix(t.warn, t.panel, 0.85) : mode_mix(t.pass, t.panel, 0.85),
        border: `1px solid ${warning ? t.warn : t.pass}`,
        color: warning ? t.warn : t.pass, fontWeight: 600, fontSize: 12.5, fontFamily: fontMono,
      }}>
        <span className="drv-pulsedot" style={{
          width: 8, height: 8, borderRadius: 4, background: warning ? t.warn : t.pass,
        }}/>
        Active{warning ? ' · UDP fallback' : ''}
      </div>
    );
  }
  return (
    <PrimaryBtn t={t} disabled={!checkedOk} onClick={D.startProxy} style={{ flex: 1 }}>
      Start proxying
    </PrimaryBtn>
  );
}

function ClassicStopBtn({ t, D }) {
  const enabled = D.phase === 'active';
  return (
    <button onClick={D.stopProxy} disabled={!enabled}
      style={{
        flex:1, padding:'9px 12px', borderRadius: 3, fontWeight: 600, fontSize: 12.5,
        background: t.btnBg, color: enabled ? t.text : t.dimmer,
        border: `1px solid ${t.border}`, cursor: enabled ? 'pointer':'not-allowed',
      }}>
      Stop
    </button>
  );
}

function ClassicLiveStats({ t, stats, fontMono }) {
  const cell = (icon, val) => (
    <div style={{ display:'flex', alignItems:'center', gap: 4, color: t.dim, fontFamily: fontMono, fontSize: 11 }}>
      {icon}<span>{val}</span>
    </div>
  );
  return (
    <div style={{
      marginTop: 8, padding: '6px 10px', borderRadius: 3,
      background: t.panel, border: `1px solid ${t.borderSoft}`,
      display:'flex', justifyContent:'space-between', alignItems:'center',
    }}>
      {cell(<window.IconArrowUp color={t.dim}/>,    window.fmtBytes(stats.up))}
      {cell(<window.IconArrowDown color={t.dim}/>,  window.fmtBytes(stats.down))}
      {cell(<span style={{fontSize:9, color:t.dimmer}}>TCP</span>, stats.tcp)}
      {cell(<span style={{fontSize:9, color:t.dimmer}}>UDP</span>, stats.udp)}
      {cell(<span style={{fontSize:9, color:t.dimmer}}>↑t</span>, window.fmtUptime(stats.uptimeS))}
    </div>
  );
}

// ─── logs ──────────────────────────────────────────────────────────────────
function ClassicLogs({ t, D, fontMono }) {
  return (
    <div style={{ borderTop: `1px solid ${t.borderSoft}`, background: t.chrome, flexShrink: 0 }}>
      <button onClick={() => D.setLogsOpen(!D.logsOpen)} style={{
        width:'100%', padding: '8px 14px', display:'flex', alignItems:'center', gap:8,
        background:'transparent', border:'none', color: t.dim, cursor:'pointer',
        fontSize: 11, fontFamily: fontMono, letterSpacing: 0.3,
      }}>
        <window.IconChevron color={t.dim} dir={D.logsOpen ? 'down' : 'right'}/>
        <span style={{ textTransform:'uppercase' }}>Logs</span>
        <span style={{ marginLeft: 'auto', color: t.dimmer }}>{D.logs.length} lines</span>
      </button>
      {D.logsOpen && (
        <div style={{ borderTop: `1px solid ${t.borderSoft}` }}>
          <div style={{ display:'flex', gap: 6, padding: '6px 12px', borderBottom: `1px solid ${t.borderSoft}` }}>
            <button style={smallBtn(t, fontMono)}
              onClick={() => navigator.clipboard?.writeText(D.logs.map(l => `[${l.level}] ${l.msg}`).join('\n'))}>copy all</button>
            <button style={smallBtn(t, fontMono)} onClick={D.clearLogs}>clear</button>
            <button style={smallBtn(t, fontMono)}>open log file</button>
          </div>
          <div className="drv-log" style={{
            maxHeight: 130, overflowY: 'auto', padding: '6px 12px',
            fontFamily: fontMono, fontSize: 10.5, lineHeight: 1.55, color: t.dim,
            background: t.panelAlt,
          }} ref={el => el && (el.scrollTop = el.scrollHeight)}>
            {D.logs.map((l, i) => (
              <div key={i}>
                <span style={{ color: t.dimmer }}>{window.fmtTime(l.t)}</span>
                {' '}
                <span style={{ color: l.level==='ERROR'?t.danger:l.level==='WARN'?t.warn:t.pass, fontWeight: 600 }}>[{l.level}]</span>
                {' '}
                <span>{l.msg}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.ClassicWindow = ClassicWindow;