// drover-wizard-live.jsx — Wizard / stepper variant.
// 3 steps: Configure → Verify → Connect. State derives from D.phase.
// Step 1 = idle (form). Step 2 = checking/checked (diagnostics). Step 3 = active (running proxy).

const WIZARD_THEME = {
  l: {
    bg:        '#fafafa',
    chrome:    '#ffffff',
    panel:     '#ffffff',
    panelAlt:  '#f6f7f9',
    border:    '#ececec',
    borderHard:'#dcdcdc',
    text:      '#1a1a1a',
    dim:       '#666666',
    dimmer:    '#9aa0a6',
    accent:    '#1e6fd9',
    accentSoft:'#eef4fc',
    danger:    '#c0463f',
    warn:      '#a8731e',
    pass:      '#21a655',
    skip:      '#888888',
  },
  d: {
    bg:        '#0f1115',
    chrome:    '#171a20',
    panel:     '#1a1d23',
    panelAlt:  '#13151a',
    border:    '#2a2d33',
    borderHard:'#3a3d45',
    text:      '#e6e8ec',
    dim:       '#9aa0a6',
    dimmer:    '#5d6168',
    accent:    '#5b9bf0',
    accentSoft:'#1a253a',
    danger:    '#e57373',
    warn:      '#d9a155',
    pass:      '#5cba8b',
    skip:      '#7c8088',
  },
};

function WizardWindow({ mode = 'light', initial }) {
  const themeKey = mode === 'dark' ? 'd' : 'l';
  const t = WIZARD_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   = "'Inter','Segoe UI',system-ui,sans-serif";
  const fontMono = "'JetBrains Mono','SF Mono',ui-monospace,Consolas,monospace";

  // Determine current step from phase
  const phase = D.phase;
  const step = phase === 'idle' ? 1
             : (phase === 'checking' || phase === 'checked') ? 2
             : 3; // 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.45,
      borderRadius: 0,
    }}>
      <WizardTitleBar t={t} />

      {/* Stepper */}
      <div style={{
        display: 'flex', padding: '14px 18px', alignItems: 'center',
        borderBottom: `1px solid ${t.border}`, background: t.chrome, gap: 0,
      }}>
        {[[1, 'Configure'], [2, 'Verify'], [3, 'Connect']].map(([n, label], i) => {
          const done = step > n;
          const current = step === n;
          const dim = step < n;
          return (
            <React.Fragment key={n}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{
                  width: 22, height: 22, borderRadius: '50%',
                  background: dim ? t.panelAlt : t.accent,
                  border: dim ? `1px solid ${t.borderHard}` : 'none',
                  color: dim ? t.dimmer : '#fff',
                  fontSize: 11, fontWeight: 600,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'background .2s',
                }}>{done ? '✓' : n}</span>
                <span style={{ fontSize: 12.5, fontWeight: current ? 600 : 400, color: dim ? t.dimmer : t.text }}>{label}</span>
              </div>
              {i < 2 && <div style={{
                flex: 1, height: 1, background: step > n ? t.accent : t.borderHard,
                margin: '0 10px', transition: 'background .2s',
              }} />}
            </React.Fragment>
          );
        })}
      </div>

      {/* Step content */}
      <div style={{ flex: 1, overflow: 'auto', padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {step === 1 && <WizConfigure t={t} D={D} fontMono={fontMono} />}
        {step === 2 && <WizVerify t={t} D={D} fontMono={fontMono} palette={palette} themeKey={themeKey} />}
        {step === 3 && <WizConnect t={t} D={D} fontMono={fontMono} />}
      </div>

      {/* Footer */}
      <div style={{
        height: 54, display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
        gap: 8, padding: '0 18px', borderTop: `1px solid ${t.border}`, background: t.chrome,
      }}>
        <WizardSecondaryBtn t={t} onClick={() => {
          if (step === 2) D.stopProxy?.(), D.setPhase('idle');
          if (step === 3) D.stopProxy();
        }} disabled={step === 1}>
          {step === 3 ? 'Disconnect' : 'Back'}
        </WizardSecondaryBtn>
        <WizardPrimaryBtn t={t}
          onClick={() => {
            if (step === 1) D.runCheck();
            else if (step === 2) D.startProxy();
          }}
          disabled={
            (step === 1 && (D.phase === 'checking')) ||
            (step === 2 && (D.phase === 'checking' || D.lastSummary?.failed === D.tests.length)) ||
            (step === 3)
          }>
          {step === 1 && 'Verify →'}
          {step === 2 && (D.phase === 'checking' ? 'Verifying…' : 'Connect →')}
          {step === 3 && 'Connected'}
        </WizardPrimaryBtn>
      </div>
    </div>
  );
}

function WizardTitleBar({ t }) {
  return (
    <div style={{
      height: 32, display: 'flex', alignItems: 'center', padding: '0 12px',
      borderBottom: `1px solid ${t.border}`, fontSize: 12, color: t.text, background: t.chrome,
    }}>
      <window.BrandMark size={14} color={t.accent} />
      <span style={{ marginLeft: 8, fontWeight: 600 }}>Drover-Go · Setup</span>
      <div style={{ marginLeft: 'auto', display: 'flex' }}>
        <WizTitleBtn t={t}><window.IconGear color={t.dim} /></WizTitleBtn>
        <WizTitleBtn t={t}><window.IconMin color={t.dim} /></WizTitleBtn>
        <WizTitleBtn t={t} hoverBg="#c0463f" hoverFg="#fff"><window.IconClose color={t.dim} /></WizTitleBtn>
      </div>
    </div>
  );
}
function WizTitleBtn({ children, t, hoverBg, hoverFg }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ width: 38, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
        background: hover ? (hoverBg || 'rgba(127,127,127,.1)') : 'transparent',
        color: hover && hoverFg ? hoverFg : 'inherit',
        borderRadius: 4,
      }}>{children}</div>
  );
}

// ─── Step 1: Configure ───────────────────────────────────────────────────
function WizConfigure({ t, D, fontMono }) {
  const inputStyle = (disabled) => ({
    height: 36, background: t.panel, color: disabled ? t.dimmer : t.text,
    border: `1px solid ${t.borderHard}`, borderRadius: 6, padding: '0 12px',
    fontFamily: fontMono, fontSize: 13, outline: 'none', width: '100%', boxSizing: 'border-box',
    transition: 'border-color .12s, box-shadow .12s',
  });
  const onFocus = (e) => { e.target.style.borderColor = t.accent; e.target.style.boxShadow = `0 0 0 3px ${t.accentSoft}`; };
  const onBlur = (e) => { e.target.style.borderColor = t.borderHard; e.target.style.boxShadow = 'none'; };
  return (
    <>
      <div>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>Configure your proxy</h2>
        <div style={{ fontSize: 12.5, color: t.dim, marginTop: 4 }}>
          Введите адрес SOCKS5-сервера. На следующем шаге мы проверим, что Discord будет работать через него.
        </div>
      </div>
      <div style={{
        background: t.panel, border: `1px solid ${t.border}`, borderRadius: 8,
        padding: 16, display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <label style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ fontSize: 11.5, color: t.dim, fontWeight: 500 }}>Host</span>
            <input value={D.form.host}
              onChange={e => D.update({ host: e.target.value })}
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              onFocus={onFocus} onBlur={onBlur}
              placeholder="95.165.72.59 или example.com"
              style={inputStyle(false)} />
          </label>
          <label style={{ width: 100, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ fontSize: 11.5, color: t.dim, fontWeight: 500 }}>Port</span>
            <input value={D.form.port}
              onChange={e => D.update({ port: e.target.value.replace(/\D/g,'') })}
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              onFocus={onFocus} onBlur={onBlur}
              placeholder="12334" inputMode="numeric"
              style={inputStyle(false)} />
          </label>
        </div>

        <label style={{ display: 'inline-flex', alignItems: 'center', gap: 9, cursor: 'pointer', userSelect: 'none', fontSize: 13 }}>
          <span style={{
            width: 18, height: 18, borderRadius: 4,
            border: `1.5px solid ${D.form.auth ? t.accent : t.borderHard}`,
            background: D.form.auth ? t.accent : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {D.form.auth && <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={D.form.auth}
            onChange={e => { D.update({ auth: e.target.checked }); if (e.target.checked) setTimeout(() => document.getElementById('wiz-login')?.focus(), 30); }}
            style={{ display: 'none' }} />
          <span>Authentication</span>
        </label>

        <div style={{ display: 'flex', gap: 10, opacity: D.form.auth ? 1 : 0.4, pointerEvents: D.form.auth ? 'auto' : 'none' }}>
          <label style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ fontSize: 11.5, color: t.dim, fontWeight: 500 }}>Login</span>
            <input id="wiz-login" disabled={!D.form.auth} value={D.form.login}
              onChange={e => D.update({ login: e.target.value })}
              onKeyDown={e => e.key === 'Enter' && D.runCheck()}
              onFocus={onFocus} onBlur={onBlur}
              placeholder="user" style={inputStyle(!D.form.auth)} />
          </label>
          <label style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ fontSize: 11.5, color: t.dim, fontWeight: 500 }}>Password</span>
            <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()}
              onFocus={onFocus} onBlur={onBlur}
              placeholder="••••••" style={inputStyle(!D.form.auth)} />
          </label>
        </div>
      </div>
      <div style={{ fontSize: 12, color: t.dim, marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{
          width: 14, height: 14, borderRadius: '50%', border: `1px solid ${t.borderHard}`,
          fontSize: 9, color: t.dim, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>i</span>
        Нажмите <span style={{ color: t.text, fontWeight: 600 }}>Verify →</span>, чтобы продолжить.
      </div>
    </>
  );
}

// ─── Step 2: Verify ───────────────────────────────────────────────────
function WizVerify({ t, D, fontMono, palette, themeKey }) {
  const phase = D.phase;
  const total = D.tests.length;
  const completed = Object.keys(D.results).length;
  const failed = D.lastSummary?.failed ?? 0;
  const ringFrac = phase === 'checked' ? 1 : completed / total;
  const ringDash = 163.4;
  return (
    <>
      <div>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
          {phase === 'checking' ? 'Verifying your proxy' : (failed === 0 ? 'All checks passed' : 'Some checks failed')}
        </h2>
        <div style={{ fontSize: 12.5, color: t.dim, marginTop: 4 }}>
          {phase === 'checking'
            ? <>Запускаем 7 проверок против <span style={{ fontFamily: fontMono, color: t.text }}>{D.form.host}:{D.form.port}</span></>
            : (failed === 0
                ? <>Прокси работает. Discord — голос, чат и демонстрация — будет работать через него.</>
                : <>{failed} из {total} проверок не прошли. Часть функций работать не будет.</>)}
        </div>
      </div>

      {/* progress + ring */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16, padding: 14,
        background: t.panel, border: `1px solid ${t.border}`, borderRadius: 8,
      }}>
        <svg width="64" height="64" viewBox="0 0 64 64">
          <circle cx="32" cy="32" r="26" fill="none" stroke={t.border} strokeWidth="6" />
          <circle cx="32" cy="32" r="26" fill="none"
            stroke={failed > 0 ? t.danger : phase === 'checked' ? t.pass : t.accent}
            strokeWidth="6" strokeLinecap="round"
            strokeDasharray={ringDash}
            strokeDashoffset={ringDash * (1 - ringFrac)}
            transform="rotate(-90 32 32)"
            style={{ transition: 'stroke-dashoffset .35s, stroke .2s' }} />
          <text x="32" y="36" textAnchor="middle" fontSize="13" fontWeight="600" fill={t.text}>
            {phase === 'checked' ? `${total - failed}/${total}` : `${completed}/${total}`}
          </text>
        </svg>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 13.5 }}>
            {phase === 'checking' ? <>Testing <span style={{ fontFamily: fontMono }}>{D.tests.find(x => x.id === D.running)?.label || '…'}</span></> : (failed === 0 ? 'Готово к подключению' : 'Завершено с ошибками')}
          </div>
          <div style={{ fontSize: 12, color: t.dim, marginTop: 2 }}>
            {phase === 'checking' ? 'This usually takes 5–15 seconds.' : 'См. отчёт ниже.'}
          </div>
        </div>
      </div>

      {/* test list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1, fontSize: 12.5 }}>
        {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: '5px 10px',
                background: D.running === test.id ? t.accentSoft : 'transparent',
                borderRadius: 4, minHeight: 26,
              }}>
                <window.StatusDot state={state} palette={palette} size={12} />
                <span style={{ 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' ? '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 22px', padding: '8px 10px', borderRadius: 6,
                  background: themeKey === 'l' ? '#fdf2f2' : '#3a1f1f',
                  border: `1px solid ${t.danger}`, fontSize: 12,
                }}>
                  <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.panel, color: t.dim, border: `1px solid ${t.borderHard}`,
                      borderRadius: 4, cursor: 'pointer' }}>copy error</button>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </>
  );
}

// ─── Step 3: Connect (active) ───────────────────────────────────────────
function WizConnect({ t, D, fontMono }) {
  const stats = D.stats;
  const failed = D.lastSummary?.failed ?? 0;
  return (
    <>
      <div>
        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="drv-pulsedot" style={{
            width: 10, height: 10, borderRadius: 5, background: failed > 0 ? t.warn : t.pass,
            display: 'inline-block',
          }} />
          {failed > 0 ? 'Connected · UDP fallback' : 'Connected'}
        </h2>
        <div style={{ fontSize: 12.5, color: t.dim, marginTop: 4 }}>
          Discord routes through <span style={{ fontFamily: fontMono, color: t.text }}>{D.form.host}:{D.form.port}</span>
          {' · '}<span style={{ fontFamily: fontMono }}>{window.fmtUptime(stats.uptimeS)}</span>
        </div>
      </div>

      {/* stats grid */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
      }}>
        <WizStat t={t} fontMono={fontMono} label="Upload"   value={window.fmtBytes(stats.up)}   accent={t.accent} />
        <WizStat t={t} fontMono={fontMono} label="Download" value={window.fmtBytes(stats.down)} accent={t.pass} />
        <WizStat t={t} fontMono={fontMono} label="TCP"      value={stats.tcp}                   accent={t.accent} />
        <WizStat t={t} fontMono={fontMono} label="UDP"      value={stats.udp}                   accent={failed > 0 ? t.warn : t.pass} />
      </div>

      {/* logs panel inline */}
      <div style={{
        background: t.panel, border: `1px solid ${t.border}`, borderRadius: 8,
        padding: 12, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
          <span style={{ fontSize: 11.5, color: t.dim, fontWeight: 600, letterSpacing: 0.2 }}>RECENT LOG</span>
          <button onClick={() => navigator.clipboard?.writeText(D.logs.map(l => `[${l.level}] ${l.msg}`).join('\n'))}
            style={{ marginLeft: 'auto', padding: '2px 8px', fontSize: 11, fontFamily: fontMono,
              background: 'transparent', color: t.dim, border: `1px solid ${t.borderHard}`,
              borderRadius: 4, cursor: 'pointer' }}>copy</button>
          <button onClick={D.clearLogs}
            style={{ marginLeft: 6, padding: '2px 8px', fontSize: 11, fontFamily: fontMono,
              background: 'transparent', color: t.dim, border: `1px solid ${t.borderHard}`,
              borderRadius: 4, cursor: 'pointer' }}>clear</button>
        </div>
        <div className="drv-log" style={{
          flex: 1, overflowY: 'auto', fontFamily: fontMono, fontSize: 11,
          lineHeight: 1.55, color: t.dim, minHeight: 0,
        }} ref={el => el && (el.scrollTop = el.scrollHeight)}>
          {D.logs.slice(-30).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>
    </>
  );
}

function WizStat({ t, fontMono, label, value, accent }) {
  return (
    <div style={{
      background: t.panel, border: `1px solid ${t.border}`, borderRadius: 8,
      padding: '10px 12px',
    }}>
      <div style={{ fontSize: 10.5, color: t.dim, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 600, fontFamily: fontMono, marginTop: 3, color: accent }}>{value}</div>
    </div>
  );
}

function WizardPrimaryBtn({ t, onClick, disabled, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        height: 32, padding: '0 18px', borderRadius: 6, border: 'none',
        background: disabled ? t.panelAlt : (hover ? '#1a5fbf' : t.accent),
        color: disabled ? t.dimmer : '#fff',
        fontWeight: 600, fontSize: 13, cursor: disabled ? 'not-allowed' : 'pointer',
        boxShadow: disabled ? 'none' : 'inset 0 -1px 0 rgba(0,0,0,.18)',
      }}>{children}</button>
  );
}
function WizardSecondaryBtn({ t, onClick, disabled, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        height: 32, padding: '0 14px', borderRadius: 6,
        background: hover && !disabled ? t.panelAlt : t.panel,
        color: disabled ? t.dimmer : t.text,
        border: `1px solid ${t.borderHard}`,
        fontSize: 13, cursor: disabled ? 'not-allowed' : 'pointer',
      }}>{children}</button>
  );
}

window.WizardWindow = WizardWindow;