// drover-fluent-live.jsx — Fluent / Win11 live variant.
// System-native: Segoe UI Variable, acrylic-blue (#0067c0), light cards on a tinted bg.

const FLUENT_THEME = {
  l: {
    bg:        '#f3f3f3',
    chrome:    '#fafafa',
    panel:     '#ffffff',
    panelAlt:  '#f7f7f7',
    border:    'rgba(0,0,0,.06)',
    borderHard:'#d6d6d6',
    text:      '#1a1a1a',
    dim:       '#666666',
    dimmer:    '#999999',
    accent:    '#0067c0',
    accentHover:'#005a9e',
    danger:    '#c42b1c',
    warn:      '#9d5d00',
    pass:      '#107c10',
    skip:      '#888888',
    inputBg:   '#fafafa',
    inputBorder:'#888',
    activeBg:  '#dff6dd',
    activeBorder:'#9bc99b',
    warnBg:    '#fff4ce',
    warnBorder:'#dba81a',
  },
  d: {
    bg:        '#202020',
    chrome:    '#181818',
    panel:     '#2b2b2b',
    panelAlt:  '#252525',
    border:    'rgba(255,255,255,.06)',
    borderHard:'#3a3a3a',
    text:      '#f0f0f0',
    dim:       '#9b9b9b',
    dimmer:    '#6a6a6a',
    accent:    '#4cc2ff',
    accentHover:'#6cd0ff',
    danger:    '#ff6b6b',
    warn:      '#fce100',
    pass:      '#6ccb5f',
    skip:      '#7a7a7a',
    inputBg:   '#2c2c2c',
    inputBorder:'#666',
    activeBg:  '#1d2f1c',
    activeBorder:'#3d6e3a',
    warnBg:    '#3a3017',
    warnBorder:'#7a6320',
  },
};

function FluentWindow({ mode = 'light', initial }) {
  const themeKey = mode === 'dark' ? 'd' : 'l';
  const t = FLUENT_THEME[themeKey];
  const D = window.useDrover(initial);
  const palette = { pending: t.dimmer, running: t.accent, passed: t.pass, failed: t.danger, skipped: t.skip };
  const fontUI   = "'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif";
  const fontMono = "'Cascadia Mono','Cascadia Code',Consolas,'JetBrains Mono',ui-monospace,monospace";
  const isActive = D.phase === 'active';

  return (
    <div style={{
      width: 480, height: 640, background: t.bg, color: t.text,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
      fontFamily: fontUI, fontSize: 13.5, lineHeight: 1.4,
      borderRadius: 0,
    }}>
      <FluentTitleBar t={t} mode={mode} />

      <div style={{ flex: 1, overflow: 'auto', padding: '12px 12px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>

        {/* SOCKS5 form card */}
        <FluentCard t={t}>
          <FluentCardTitle t={t}>SOCKS5 Proxy</FluentCardTitle>
          <div style={{ display: 'flex', gap: 8 }}>
            <FluentField t={t} label="Host" style={{ flex: 1 }}>
              <input value={D.form.host}
                onChange={e => D.update({ host: e.target.value })}
                onKeyDown={e => e.key === 'Enter' && D.runCheck()}
                placeholder="95.165.72.59 или example.com"
                style={fluentInputStyle(t, fontMono)} />
            </FluentField>
            <FluentField t={t} label="Port" style={{ width: 92 }}>
              <input value={D.form.port}
                onChange={e => D.update({ port: e.target.value.replace(/\D/g,'') })}
                onKeyDown={e => e.key === 'Enter' && D.runCheck()}
                placeholder="12334" inputMode="numeric"
                style={fluentInputStyle(t, fontMono)} />
            </FluentField>
          </div>
          <FluentCheckbox t={t} checked={D.form.auth}
            onChange={(v) => { D.update({ auth: v }); if (v) setTimeout(() => document.getElementById('flu-login')?.focus(), 30); }}>
            Authentication
          </FluentCheckbox>
          <div style={{ display: 'flex', gap: 8, marginTop: 8, opacity: D.form.auth ? 1 : 0.45, pointerEvents: D.form.auth ? 'auto' : 'none' }}>
            <FluentField t={t} label="Login" style={{ flex: 1 }}>
              <input id="flu-login" disabled={!D.form.auth} value={D.form.login}
                onChange={e => D.update({ login: e.target.value })}
                onKeyDown={e => e.key === 'Enter' && D.runCheck()}
                placeholder="user" style={fluentInputStyle(t, fontMono, !D.form.auth)} />
            </FluentField>
            <FluentField 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 })}
                onKeyDown={e => e.key === 'Enter' && D.runCheck()}
                placeholder="••••••" style={fluentInputStyle(t, fontMono, !D.form.auth)} />
            </FluentField>
          </div>
          <FluentPrimaryBtn t={t} onClick={D.runCheck} disabled={D.phase === 'checking' || isActive}>
            {D.phase === 'checking' ? 'Checking…' : 'Check connection'}
          </FluentPrimaryBtn>
        </FluentCard>

        {/* Status card */}
        <FluentCard t={t}>
          <FluentCardTitle t={t}>Status</FluentCardTitle>
          <FluentStatus t={t} D={D} palette={palette} fontMono={fontMono} themeKey={themeKey} />
        </FluentCard>

        {/* Action buttons */}
        <div style={{ display: 'flex', gap: 8 }}>
          <FluentStartBtn t={t} D={D} fontMono={fontMono} />
          <FluentStopBtn t={t} D={D} />
        </div>

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

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

      <FluentLogs t={t} D={D} fontMono={fontMono} />
    </div>
  );
}

function FluentTitleBar({ t, mode }) {
  return (
    <div style={{
      height: 32, background: t.chrome, borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center',
      fontFamily: "'Segoe UI Variable','Segoe UI',system-ui,sans-serif",
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', flex: 1 }}>
        <window.BrandMark size={14} color={t.accent} />
        <span style={{ fontSize: 12.5, fontWeight: 600 }}>Drover-Go</span>
        <span style={{ fontSize: 11, color: t.dimmer }}>0.4.2</span>
      </div>
      <div style={{ display: 'flex' }}>
        <FluentTitleBtn t={t}><window.IconGear color={t.dim} /></FluentTitleBtn>
        <FluentTitleBtn t={t}><window.IconMin color={t.dim} /></FluentTitleBtn>
        <FluentTitleBtn t={t} hoverBg="#c42b1c" hoverFg="#fff"><window.IconClose color={t.dim} /></FluentTitleBtn>
      </div>
    </div>
  );
}
function FluentTitleBtn({ children, t, hoverBg, hoverFg }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ width: 46, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
        background: hover ? (hoverBg || 'rgba(127,127,127,.12)') : 'transparent',
        color: hover && hoverFg ? hoverFg : 'inherit',
      }}>{children}</div>
  );
}

function FluentCard({ t, children, style }) {
  return (
    <div style={{
      background: t.panel, border: `1px solid ${t.border}`, borderRadius: 6,
      padding: 12, boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
      display: 'flex', flexDirection: 'column', gap: 8, ...style,
    }}>{children}</div>
  );
}
function FluentCardTitle({ t, children }) {
  return <div style={{ fontSize: 11.5, fontWeight: 600, color: t.dim, letterSpacing: 0.2 }}>{children}</div>;
}
function FluentField({ t, label, children, style }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 2, ...style }}>
      <span style={{ fontSize: 11, color: t.dimmer }}>{label}</span>
      {children}
    </label>
  );
}
function fluentInputStyle(t, fontMono, disabled) {
  return {
    height: 30, background: t.inputBg, color: disabled ? t.dimmer : t.text,
    border: `1px solid ${t.border}`, borderBottom: `1.5px solid ${t.inputBorder}`,
    borderRadius: 4, padding: '0 10px',
    fontFamily: fontMono, fontSize: 12.5, outline: 'none', width: '100%', boxSizing: 'border-box',
    transition: 'border-color .12s',
  };
}
function FluentCheckbox({ t, checked, onChange, children }) {
  return (
    <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', userSelect: 'none', fontSize: 12.5, marginTop: 2 }}>
      <span style={{
        width: 18, height: 18, borderRadius: 4,
        border: `1.5px solid ${checked ? t.accent : t.borderHard}`,
        background: checked ? t.accent : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'background .12s, border-color .12s',
      }}>
        {checked && <svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2.5 2.5 4.5-5" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      </span>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display: 'none' }} />
      <span>{children}</span>
    </label>
  );
}
function FluentPrimaryBtn({ t, onClick, disabled, children, style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        height: 34, width: '100%', borderRadius: 4, border: 'none',
        background: disabled ? t.panelAlt : (hover ? t.accentHover : t.accent),
        color: disabled ? t.dimmer : '#fff', fontWeight: 600, fontSize: 13,
        boxShadow: disabled ? 'none' : 'inset 0 -1px 0 rgba(0,0,0,.12)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        transition: 'background .12s', marginTop: 4, ...style,
      }}>{children}</button>
  );
}

function FluentStatus({ t, D, palette, fontMono, themeKey }) {
  if (D.phase === 'idle') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', color: t.dim, fontSize: 12.5 }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: t.dimmer }} />
        <span>Ready to check</span>
      </div>
    );
  }
  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5,
        color: D.phase === 'checking' ? t.accent
             : D.lastSummary?.failed === 0 ? t.pass : t.warn,
        fontWeight: 600,
      }}>
        {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, fontWeight: 400 }}>
                {Object.keys(D.results).length}/{D.tests.length}
              </span>
            </>
          : D.lastSummary?.failed === 0
            ? <span>All checks passed. Ready to start.</span>
            : <span>{D.lastSummary?.failed} of {D.tests.length} checks failed. Some features won't work.</span>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 4 }}>
        {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}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '4px 2px', minHeight: 22 }}>
                <window.StatusDot state={state} palette={palette} size={12} />
                <span style={{ fontSize: 12.5, color: state === 'pending' ? t.dimmer : 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={{ width: 20, height: 20, padding: 0, border: 'none', background: 'transparent', cursor: 'pointer' }}>
                    <window.IconChevron color={t.dim} dir={r.expanded ? 'up' : 'down'} />
                  </button>
                )}
              </div>
              {r?.result === 'failed' && r.expanded && (
                <div className="drv-fadein" style={{
                  margin: '2px 0 4px 21px', padding: '8px 10px', borderRadius: 4,
                  background: themeKey === 'l' ? '#fdf2f2' : '#3a1f1f',
                  border: `1px solid ${t.danger}`,
                  fontSize: 11.5,
                }}>
                  <div style={{ color: t.danger, fontWeight: 600, marginBottom: 2 }}>{r.error}</div>
                  <div style={{ color: t.dim }}>{r.hint}</div>
                  <button onClick={() => navigator.clipboard?.writeText(`[${test.label}] ${r.error} — ${r.metric}`)}
                    style={{ marginTop: 6, padding: '3px 8px', fontSize: 11, fontFamily: fontMono,
                      background: t.panelAlt, color: t.dim, border: `1px solid ${t.borderHard}`,
                      borderRadius: 3, cursor: 'pointer' }}>
                    copy error
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </>
  );
}

function FluentStartBtn({ 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, height: 34, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        background: warning ? t.warnBg : t.activeBg,
        border: `1px solid ${warning ? t.warnBorder : t.activeBorder}`,
        color: warning ? t.warn : t.pass, fontWeight: 600, fontSize: 12.5,
      }}>
        <span className="drv-pulsedot" style={{ width: 8, height: 8, borderRadius: 4, background: warning ? t.warn : t.pass }} />
        Active{warning ? ' · UDP fallback' : ''}
      </div>
    );
  }
  return (
    <FluentPrimaryBtn t={t} disabled={!checkedOk} onClick={D.startProxy} style={{ flex: 1, marginTop: 0 }}>
      Start proxying
    </FluentPrimaryBtn>
  );
}
function FluentStopBtn({ t, D }) {
  const enabled = D.phase === 'active';
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={D.stopProxy} disabled={!enabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        flex: 1, height: 34, borderRadius: 4, fontWeight: 600, fontSize: 12.5,
        background: enabled && hover ? t.panelAlt : t.panel,
        color: enabled ? t.text : t.dimmer,
        border: `1px solid ${t.borderHard}`, cursor: enabled ? 'pointer' : 'not-allowed',
        transition: 'background .12s',
      }}>Stop</button>
  );
}
function FluentLiveStats({ t, stats, fontMono }) {
  const cell = (label, val) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 5, color: t.dim, fontSize: 11.5, fontFamily: fontMono }}>
      {label}<span style={{ color: t.text }}>{val}</span>
    </div>
  );
  return (
    <div style={{
      padding: '8px 12px', borderRadius: 4,
      background: t.panel, border: `1px solid ${t.border}`,
      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>
  );
}

function FluentLogs({ 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: '8px 14px', display: 'flex', alignItems: 'center', gap: 8,
        background: 'transparent', border: 'none', color: t.dim, cursor: 'pointer',
        fontSize: 11.5, fontFamily: fontMono,
      }}>
        <window.IconChevron color={t.dim} dir={D.logsOpen ? 'down' : 'right'} />
        <span>Logs</span>
        <span style={{ marginLeft: 'auto', color: t.dimmer }}>{D.logs.length} lines</span>
      </button>
      {D.logsOpen && (
        <div style={{ borderTop: `1px solid ${t.border}` }}>
          <div style={{ display: 'flex', gap: 6, padding: '6px 12px', borderBottom: `1px solid ${t.border}` }}>
            {[
              ['Copy all', () => navigator.clipboard?.writeText(D.logs.map(l => `[${l.level}] ${l.msg}`).join('\n'))],
              ['Clear', D.clearLogs],
              ['Open log file', () => {}],
            ].map(([l, fn], i) => (
              <button key={i} onClick={fn} style={{
                padding: '3px 8px', fontSize: 11, fontFamily: fontMono,
                background: t.panel, color: t.dim, border: `1px solid ${t.borderHard}`,
                borderRadius: 3, cursor: 'pointer',
              }}>{l}</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.FluentWindow = FluentWindow;