// drover-minimal.jsx — Variant 2: Minimal / Fluent-aligned.
// Windows 11 Mica feel. Generous spacing. Subtle accents. Segoe UI Variable.
// Soft cards on a tinted background, accent: a calm slate-blue.

const MinTheme = {
  d: {
    bg: '#1e1f23', mica: 'rgba(255,255,255,0.02)', chrome: 'rgba(255,255,255,0.03)',
    panel: 'rgba(255,255,255,0.04)', panel2: 'rgba(255,255,255,0.06)',
    border: 'rgba(255,255,255,0.08)', borderStrong: 'rgba(255,255,255,0.14)',
    text: '#f3f3f3', dim: '#b0b3ba', dimmer: '#7a7d85',
    accent: '#76b3ff', accentBg: 'rgba(118,179,255,0.16)',
    danger: '#ff7a7a', warn: '#ffb86b', pass: '#7ad29c', skip: '#9aa0aa',
    inputBg: 'rgba(255,255,255,0.04)', inputBorder: 'rgba(255,255,255,0.16)',
    primaryBg: '#76b3ff', primaryFg: '#0d1722',
  },
  l: {
    bg: '#f6f6f8', mica: 'rgba(255,255,255,0.5)', chrome: 'rgba(255,255,255,0.65)',
    panel: '#ffffff', panel2: '#fafafc',
    border: 'rgba(0,0,0,0.06)', borderStrong: 'rgba(0,0,0,0.14)',
    text: '#1c1d20', dim: '#4f5460', dimmer: '#8a8f97',
    accent: '#3a72c7', accentBg: 'rgba(58,114,199,0.10)',
    danger: '#c0463f', warn: '#9c6a14', pass: '#2c8a5a', skip: '#7c8088',
    inputBg: '#ffffff', inputBorder: 'rgba(0,0,0,0.18)',
    primaryBg: '#3a72c7', primaryFg: '#ffffff',
  },
};

function MinimalWindow({ mode = 'light', initial }) {
  const t = MinTheme[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 isActive = D.phase === 'active';
  const fontUI = '"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif';
  const fontMono = '"Cascadia Mono","Consolas",ui-monospace,monospace';

  return (
    <div style={{
      width: 480, height: 640, background: t.bg, color: t.text, display: 'flex', flexDirection: 'column',
      fontFamily: fontUI, fontSize: 13.5, overflow: 'hidden',
      boxShadow: mode === 'dark' ? '0 0 0 1px rgba(255,255,255,0.06)' : '0 0 0 1px rgba(0,0,0,0.08)',
    }}>
      {/* title */}
      <MinTitle t={t}/>

      <div style={{ flex: 1, overflow:'auto', padding: '8px 16px 0' }}>
        {/* Form card */}
        <Card t={t} style={{ padding: 16 }}>
          <CardHeader t={t}>SOCKS5 Proxy</CardHeader>
          <div style={{ display:'flex', gap: 10 }}>
            <MinField 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={minInput(t, fontUI)}/>
            </MinField>
            <MinField t={t} label="Port" style={{ width: 96 }}>
              <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={minInput(t, fontUI)}/>
            </MinField>
          </div>

          <div style={{ height: 12 }}/>
          <MinToggle t={t} checked={D.form.auth}
            onChange={(v) => { D.update({ auth: v }); if (v) setTimeout(()=>document.getElementById('min-login')?.focus(),30); }}>
            Authentication
          </MinToggle>
          <div style={{ display:'flex', gap: 10, marginTop: 10, opacity: D.form.auth ? 1 : 0.45,
                        pointerEvents: D.form.auth ? 'auto':'none' }}>
            <MinField t={t} label="Login" style={{ flex: 1 }}>
              <input id="min-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={minInput(t, fontUI, !D.form.auth)}/>
            </MinField>
            <MinField 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={minInput(t, fontUI, !D.form.auth)}/>
            </MinField>
          </div>

          <div style={{ height: 14 }}/>
          <button onClick={D.runCheck} disabled={D.phase === 'checking' || isActive} style={{
            width:'100%', padding: '10px 14px', borderRadius: 6, border: 'none',
            background: (D.phase === 'checking' || isActive) ? t.panel2 : t.primaryBg,
            color: (D.phase === 'checking' || isActive) ? t.dimmer : t.primaryFg,
            fontWeight: 600, fontSize: 13.5, cursor: D.phase==='checking'?'not-allowed':'pointer',
            fontFamily: fontUI,
          }}>
            {D.phase === 'checking' ? 'Checking…' : 'Check connection'}
          </button>
        </Card>

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

        {/* Status card */}
        <Card t={t} style={{ padding: 14 }}>
          <CardHeader t={t}>Status</CardHeader>
          <MinStatus t={t} D={D} palette={palette} fontMono={fontMono}/>
        </Card>

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

        {/* Action card */}
        <Card t={t} style={{ padding: 14 }}>
          <div style={{ display:'flex', gap: 10 }}>
            <MinStartBtn t={t} D={D} fontUI={fontUI}/>
            <MinStopBtn t={t} D={D} fontUI={fontUI}/>
          </div>
          {isActive && <MinLiveStats t={t} stats={D.stats} fontMono={fontMono}/>}
        </Card>
        <div style={{ height: 12 }}/>
      </div>

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

function MinTitle({ t }) {
  const cell = { width: 46, height: 32, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', color: t.dim };
  return (
    <div style={{
      height: 36, background: t.chrome, display:'flex', alignItems:'center',
      borderBottom: `1px solid ${t.border}`, userSelect:'none',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10, padding:'0 14px', flex:1 }}>
        <window.BrandMark size={16} color={t.accent}/>
        <span style={{ fontSize: 13, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ fontSize: 11, color: t.dimmer }}>0.4.2</span>
      </div>
      <div style={{ display:'flex' }}>
        <div style={cell} title="Settings"><window.IconGear color={t.dim}/></div>
        <div style={cell} title="Minimize"><window.IconMin color={t.dim}/></div>
        <div style={cell} title="Close"
             onMouseEnter={e => { e.currentTarget.style.background = '#c0463f'; e.currentTarget.style.color = 'white'; }}
             onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = t.dim; }}>
          <window.IconClose/>
        </div>
      </div>
    </div>
  );
}
function Card({ t, children, style }) {
  return <div style={{
    background: t.panel, border: `1px solid ${t.border}`, borderRadius: 8, ...style,
  }}>{children}</div>;
}
function CardHeader({ t, children }) {
  return <div style={{ fontSize: 12, fontWeight: 600, color: t.dim, marginBottom: 10, letterSpacing: 0.2 }}>{children}</div>;
}
function MinField({ t, label, children, style }) {
  return <label style={{ display:'flex', flexDirection:'column', gap: 5, ...style }}>
    <span style={{ fontSize: 11.5, color: t.dim }}>{label}</span>
    {children}
  </label>;
}
function minInput(t, fontUI, disabled) {
  return {
    background: t.inputBg, color: disabled ? t.dimmer : t.text,
    border: `1px solid ${t.inputBorder}`, borderRadius: 5, padding: '8px 10px',
    fontSize: 13, fontFamily: fontUI, outline:'none', width:'100%', boxSizing:'border-box',
  };
}
function MinToggle({ t, checked, onChange, children }) {
  return (
    <label style={{ display:'inline-flex', alignItems:'center', gap: 10, cursor:'pointer', userSelect:'none' }}>
      <span style={{
        width: 36, height: 20, borderRadius: 10, padding: 2, boxSizing:'border-box',
        background: checked ? t.accent : t.borderStrong, transition: 'background .14s',
        display:'flex', alignItems:'center',
      }}>
        <span style={{
          width: 14, height: 14, borderRadius: 7, background: 'white',
          transform: checked ? 'translateX(16px)' : 'translateX(0)', transition: 'transform .14s',
        }}/>
      </span>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display:'none' }}/>
      <span style={{ fontSize: 13 }}>{children}</span>
    </label>
  );
}
function MinStatus({ t, D, palette, fontMono }) {
  if (D.phase === 'idle') {
    return (
      <div style={{ display:'flex', alignItems:'center', gap: 10, padding: '6px 0' }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: t.dimmer }}/>
        <span style={{ color: t.dim }}>Ready to check</span>
      </div>
    );
  }
  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 8 }}>
        {D.phase === 'checking'
          ? <>
              <window.StatusDot state="running" palette={palette} size={14}/>
              <span style={{ fontWeight: 500 }}>Running diagnostics…</span>
            </>
          : D.lastSummary?.failed === 0
            ? <SummaryPill t={t} kind="ok">All checks passed. Ready to start.</SummaryPill>
            : <SummaryPill t={t} kind="warn">{D.lastSummary?.failed} of {D.tests.length} checks failed. Some features won't work.</SummaryPill>}
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap: 2 }}>
        {D.tests.map(test => {
          const r = D.results[test.id];
          const state = r?.result || (D.running === test.id ? 'running' : 'pending');
          return (
            <div key={test.id} style={{ borderRadius: 4, padding: '4px 4px' }}>
              <div style={{ display:'flex', alignItems:'center', gap: 10, height: 26 }}>
                <window.StatusDot state={state} palette={palette} size={14}/>
                <span style={{ color: state==='pending'?t.dim:t.text, fontSize: 13 }} title={test.desc}>{test.label}</span>
                <span style={{ marginLeft:'auto', fontFamily: fontMono, fontSize: 11.5,
                               color: state==='failed'?t.danger:state==='skipped'?t.skip:t.dim }}>
                  {r?.metric}
                </span>
                {r?.result === 'failed' && (
                  <button onClick={() => D.toggleExpand(test.id)} style={{
                    background:'transparent', border:'none', cursor:'pointer', padding: 4, color: t.dim,
                  }} 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 24px', padding: 10, background: t.panel2, borderRadius: 6,
                  borderLeft: `2px solid ${t.danger}`, fontSize: 12,
                }}>
                  <div style={{ color: t.danger, fontWeight: 600, marginBottom: 3 }}>{r.error}</div>
                  <div style={{ color: t.dim, lineHeight: 1.5 }}>{r.hint}</div>
                  <button onClick={() => navigator.clipboard?.writeText(`${test.label}: ${r.error}`)}
                    style={{
                      marginTop: 6, background:'transparent', border:`1px solid ${t.border}`,
                      color: t.dim, borderRadius: 4, padding: '3px 8px', fontSize: 11, cursor:'pointer',
                      display:'inline-flex', gap:4, alignItems:'center', fontFamily: fontMono,
                    }}>
                    <window.IconCopy color={t.dim}/> copy error
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
function SummaryPill({ t, kind, children }) {
  const c = kind === 'ok' ? t.pass : t.warn;
  return <div style={{
    padding: '7px 11px', borderRadius: 6, fontSize: 12.5, fontWeight: 500,
    background: kind==='ok' ? 'rgba(122,210,156,0.12)' : 'rgba(255,184,107,0.12)',
    color: c, border: `1px solid ${c}40`, width: '100%',
  }}>{children}</div>;
}

function MinStartBtn({ t, D, fontUI }) {
  const phase = D.phase;
  const allFailed = D.lastSummary && D.lastSummary.failed === D.tests.length;
  const checkedOk = phase === 'checked' && !allFailed;
  const active = phase === 'active';
  const warning = active && (D.lastSummary?.failed || 0) > 0;
  if (active) {
    const c = warning ? t.warn : t.pass;
    return (
      <div style={{
        flex: 1, padding: '10px 14px', borderRadius: 6, fontWeight: 600, fontSize: 13.5,
        background: warning ? 'rgba(255,184,107,0.14)' : 'rgba(122,210,156,0.14)',
        border: `1px solid ${c}55`, color: c,
        display:'flex', alignItems:'center', justifyContent:'center', gap: 8, fontFamily: fontUI,
      }}>
        <span className="drv-pulsedot" style={{ width: 8, height: 8, borderRadius: 4, background: c }}/>
        Active{warning ? ' · UDP fallback' : ''}
      </div>
    );
  }
  return (
    <button onClick={D.startProxy} disabled={!checkedOk} style={{
      flex: 1, padding: '10px 14px', borderRadius: 6, border:'none',
      background: checkedOk ? t.primaryBg : t.panel2, color: checkedOk ? t.primaryFg : t.dimmer,
      fontWeight: 600, fontSize: 13.5, cursor: checkedOk ? 'pointer':'not-allowed', fontFamily: fontUI,
    }}>Start proxying</button>
  );
}
function MinStopBtn({ t, D, fontUI }) {
  const enabled = D.phase === 'active';
  return (
    <button onClick={D.stopProxy} disabled={!enabled} style={{
      flex: 1, padding: '10px 14px', borderRadius: 6,
      background: 'transparent', color: enabled ? t.text : t.dimmer,
      border: `1px solid ${enabled ? t.borderStrong : t.border}`, fontWeight: 600, fontSize: 13.5,
      cursor: enabled ? 'pointer' : 'not-allowed', fontFamily: fontUI,
    }}>Stop</button>
  );
}
function MinLiveStats({ t, stats, fontMono }) {
  const Cell = ({ icon, val, lbl }) => (
    <div style={{ display:'flex', alignItems:'center', gap: 4 }}>
      {icon}
      <span style={{ fontFamily: fontMono, fontSize: 11.5, color: t.text }}>{val}</span>
      {lbl && <span style={{ fontSize: 10, color: t.dimmer, textTransform:'uppercase', letterSpacing:0.5 }}>{lbl}</span>}
    </div>
  );
  return (
    <div style={{
      marginTop: 10, paddingTop: 10, borderTop: `1px solid ${t.border}`,
      display:'flex', justifyContent:'space-between', alignItems:'center', color: t.dim,
    }}>
      <Cell icon={<window.IconArrowUp color={t.pass}/>} val={window.fmtBytes(stats.up)}/>
      <Cell icon={<window.IconArrowDown color={t.accent}/>} val={window.fmtBytes(stats.down)}/>
      <Cell val={stats.tcp} lbl="tcp"/>
      <Cell val={stats.udp} lbl="udp"/>
      <Cell val={window.fmtUptime(stats.uptimeS)} lbl="up"/>
    </div>
  );
}
function MinLogs({ t, D, fontMono }) {
  return (
    <div style={{ borderTop: `1px solid ${t.border}`, background: t.chrome, flexShrink: 0 }}>
      <button onClick={() => D.setLogsOpen(!D.logsOpen)} style={{
        width:'100%', padding: '9px 16px', display:'flex', alignItems:'center', gap:10,
        background:'transparent', border:'none', color: t.dim, cursor:'pointer', fontSize: 12,
      }}>
        <window.IconChevron color={t.dim} dir={D.logsOpen ? 'down' : 'right'}/>
        <span style={{ fontWeight: 600 }}>Logs</span>
        <span style={{ marginLeft: 'auto', fontFamily: fontMono, fontSize: 11, color: t.dimmer }}>{D.logs.length}</span>
      </button>
      {D.logsOpen && (
        <>
          <div style={{ display:'flex', gap: 6, padding: '0 16px 8px' }}>
            {['Copy all','Clear','Open log file'].map((l,i) => (
              <button key={l} onClick={i===0 ? () => navigator.clipboard?.writeText(D.logs.map(x=>`[${x.level}] ${x.msg}`).join('\n')) : i===1 ? D.clearLogs : undefined}
                style={{
                  background:'transparent', border:`1px solid ${t.border}`, borderRadius: 4,
                  padding: '4px 9px', fontSize: 11, color: t.dim, cursor:'pointer', fontFamily: fontMono,
                }}>{l}</button>
            ))}
          </div>
          <div className="drv-log" ref={el => el && (el.scrollTop = el.scrollHeight)}
               style={{ maxHeight: 130, overflowY: 'auto', padding: '8px 16px',
                        fontFamily: fontMono, fontSize: 11, lineHeight: 1.6, color: t.dim, background: t.panel }}>
            {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.accent, fontWeight: 600 }}>[{l.level}]</span>{' '}
                {l.msg}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

window.MinimalWindow = MinimalWindow;