// 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.

import * as React from 'react'
import {
  useDrover,
  BrandMark, IconGear, IconMin, IconClose, IconChevron, IconCopy,
  IconArrowUp, IconArrowDown, IconSun, IconMoon, StatusDot,
  fmtBytes, fmtUptime, fmtTime,
} from './shared.jsx'
import { WindowMinimise, Quit } from '../../wailsjs/runtime/runtime'
import { Version as GoVersion } from '../../wailsjs/go/gui/App'

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',
  },
};

export function ClassicWindow({ mode = 'dark', initial, onToggleMode }) {
  const t = ClassicTheme[mode === 'dark' ? 'd' : 'l'];
  const D = useDrover(initial);
  const [version, setVersion] = React.useState('');
  React.useEffect(() => { GoVersion().then(setVersion).catch(() => {}); }, []);
  const palette = { pending: t.dimmer, running: t.accent, passed: t.pass, failed: t.danger, skipped: t.skip, warn: t.warn };
  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: '100vw', height: '100vh', 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} version={version} mode={mode} onToggleMode={onToggleMode} />

      {/* ─── 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>

        {D.phase === 'checking' ? (
          <div style={{ display: 'flex', gap: 8 }}>
            <PrimaryBtn t={t} onClick={D.runCheck} disabled style={{ flex: 1 }}>
              Checking…
            </PrimaryBtn>
            <ClassicCancelBtn t={t} onClick={D.cancelCheck} />
          </div>
        ) : (
          <PrimaryBtn t={t} onClick={D.runCheck} disabled={isActive}>
            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, version, mode, onToggleMode }) {
  // Cell height = full title-bar height so the hover background fills
  // edge-to-edge (no thin sliver of chrome above the red close highlight).
  // alignSelf:'stretch' on the wrapper keeps it pinned to the top/bottom
  // of the flex row even though parent uses alignItems:'center' for text.
  const cellStyle = {
    width: 38, height: '100%', 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:'stretch',
      // CSS Wails recognises for the OS title-bar drag region. The
      // close/min cells below override it with --wails-draggable: no-drag
      // so clicks land on the buttons, not the drag handler.
      ['--wails-draggable']: 'drag',
      userSelect:'none',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, padding:'0 12px', flex:1 }}>
        <BrandMark size={14} color={t.accent}/>
        <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: 0.1 }}>Drover-Go</span>
        {version && <span style={{ fontSize: 11, color: t.dimmer, fontFamily:'ui-monospace,monospace' }}>v{version}</span>}
      </div>
      <div style={{ display:'flex', alignItems:'stretch', ['--wails-draggable']: 'no-drag' }}>
        <div style={cellStyle}
             title={mode === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
             onClick={(e) => onToggleMode && onToggleMode(e)}>
          {mode === 'dark' ? <IconSun color={t.dim}/> : <IconMoon color={t.dim}/>}
        </div>
        <div style={cellStyle} title="Minimize" onClick={() => WindowMinimise()}>
          <IconMin color={t.dim}/>
        </div>
        <div style={cellStyle} title="Close"
             onClick={() => Quit()}
             onMouseEnter={e => e.currentTarget.style.background = '#c0463f'}
             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <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'
          ? <>
              <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
            ? (D.lastSummary?.warnings > 0
                ? <span style={{ color: t.warn, fontWeight: 600 }}>All checks passed (with warnings).</span>
                : <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 }}>
                <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 === 'warn' ? t.warn : state === 'skipped' ? t.skip : t.dim }}>
                  {r?.metric || (state === 'running' ? '...' : '')}
                </span>
                {(r?.result === 'failed' || r?.result === 'warn') && (
                  <button onClick={() => D.toggleExpand(test.id)} style={iconBtnStyle(t)} title="Подробнее">
                    <IconChevron color={t.dim} dir={r.expanded ? 'up' : 'down'}/>
                  </button>
                )}
              </div>
              {(r?.result === 'failed' || r?.result === 'warn') && r.expanded && (
                <div className="drv-fadein" style={{
                  margin: '4px 0 6px 21px', padding: '8px 10px', borderRadius: 3,
                  background: mode_mix(r.result === 'warn' ? t.warn : t.danger, t.panel, 0.9),
                  border: `1px solid ${mode_mix(r.result === 'warn' ? t.warn : t.danger, t.panel, 0.78)}`,
                  fontSize: 11.5, color: t.text,
                }}>
                  {r.error
                    ? <div style={{ color: r.result === 'warn' ? t.warn : t.danger, fontWeight: 600, marginBottom: 2 }}>{r.error}</div>
                    : (r.hint && <div style={{ color: r.result === 'warn' ? t.warn : t.danger, fontWeight: 600, marginBottom: 2 }}>{r.hint}</div>)}
                  {r.error && <div style={{ color: t.dim }}>{r.hint}</div>}
                  {r.rawHex && (
                    <div style={{
                      fontFamily: fontMono, fontSize: 10.5, color: t.dimmer,
                      marginTop: 4, padding: '4px 6px',
                      background: t.panelAlt, borderRadius: 2,
                      overflowX: 'auto', whiteSpace: 'nowrap',
                    }}>
                      {r.rawHex.length > 64 ? r.rawHex.slice(0, 64) + '…' : r.rawHex}
                    </div>
                  )}
                  <div style={{ display:'flex', gap: 6, marginTop: 6 }}>
                    <button onClick={() => navigator.clipboard?.writeText(
                        `[${test.label}] ${r.error} — ${r.metric}` + (r.rawHex ? ` — raw=${r.rawHex}` : ''))}
                      style={smallBtn(t, fontMono)}>
                      <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 ClassicCancelBtn({ t, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: 92, padding: '9px 12px', borderRadius: 3, fontWeight: 600, fontSize: 12.5,
        background: t.btnBg, color: hover ? t.danger : t.text,
        border: `1px solid ${hover ? t.danger : t.border}`, cursor: 'pointer',
        transition: 'color .12s, border-color .12s',
      }}>
      Cancel
    </button>
  );
}

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(<IconArrowUp color={t.dim}/>,    fmtBytes(stats.up))}
      {cell(<IconArrowDown color={t.dim}/>,  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>, 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,
      }}>
        <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 }}>{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>
  );
}

// Default export so App.jsx can `import ClassicWindow from './components/Classic'`.
export default ClassicWindow;