// drover-hero-live.jsx — Big toggle / VPN-style variant.
// Centerpiece: a giant connect button. Form lives in an expandable section below.
// Compact form (host:port) shown collapsed in active state; full form in idle.

const HERO_THEME = {
  d: {
    bg:        'radial-gradient(ellipse at top, #142340 0%, #0e1426 60%, #080d1c 100%)',
    chrome:    'transparent',
    panel:     '#15192a',
    panelAlt:  '#1a1f33',
    border:    'rgba(255,255,255,.08)',
    borderHard:'rgba(255,255,255,.18)',
    text:      '#ffffff',
    textDim:   '#cbd1d9',
    dim:       '#7a8499',
    dimmer:    '#5a6178',
    accent:    '#5dd4b3',
    accentDeep:'#2da085',
    accentDarker:'#1a6e5b',
    danger:    '#ff6b6b',
    warn:      '#f3c764',
    pass:      '#5dd4b3',
    skip:      '#7a8499',
  },
  l: {
    bg:        'linear-gradient(180deg, #f3f7fb 0%, #e8edf4 100%)',
    chrome:    'transparent',
    panel:     '#ffffff',
    panelAlt:  '#f5f7fb',
    border:    'rgba(0,0,0,.07)',
    borderHard:'rgba(0,0,0,.15)',
    text:      '#0e1830',
    textDim:   '#3a4356',
    dim:       '#6a7383',
    dimmer:    '#9aa3b2',
    accent:    '#1aa787',
    accentDeep:'#0f8c70',
    accentDarker:'#0a6655',
    danger:    '#c0463f',
    warn:      '#a8731e',
    pass:      '#1aa787',
    skip:      '#7a8499',
  },
};

function HeroWindow({ mode = 'dark', initial }) {
  const themeKey = mode === 'dark' ? 'd' : 'l';
  const t = HERO_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";

  const [showForm, setShowForm] = React.useState(false);
  const [showDetails, setShowDetails] = React.useState(false);

  const phase = D.phase;
  const summary = D.lastSummary;
  const allFailed = summary && summary.failed === D.tests.length;
  const failed = summary?.failed ?? 0;
  const isActive = phase === 'active';
  const warning = isActive && failed > 0;

  // big-button click handler. Two-step: if idle/checked, go.
  const handleBigClick = () => {
    if (phase === 'active') return D.stopProxy();
    if (phase === 'checking') return;
    if (phase === 'idle') {
      // run check, then auto-start if it passed
      (async () => {
        await D.runCheck();
      })();
      return;
    }
    if (phase === 'checked' && !allFailed) D.startProxy();
    if (phase === 'checked' && allFailed) D.runCheck();
  };

  // After runCheck completes from idle, auto-start if all passed.
  const prevPhase = React.useRef(phase);
  React.useEffect(() => {
    if (prevPhase.current === 'checking' && phase === 'checked') {
      const sum = D.lastSummary;
      if (sum && sum.failed === 0) {
        // small delay so user perceives the "checked" state briefly
        setTimeout(() => D.startProxy(), 600);
      }
    }
    prevPhase.current = phase;
  }, [phase]);

  // Big-button label / colors
  let buttonState;
  if (phase === 'active') buttonState = warning ? 'active-warn' : 'active';
  else if (phase === 'checking') buttonState = 'checking';
  else if (phase === 'checked' && allFailed) buttonState = 'failed';
  else buttonState = 'idle';

  const ringColor = ({
    idle:        t.accent,
    checking:    t.accent,
    active:      t.accent,
    'active-warn': t.warn,
    failed:      t.danger,
  })[buttonState];

  const headline = ({
    idle:        'Tap to connect',
    checking:    'Verifying…',
    active:      'Discord is protected',
    'active-warn': 'Connected · UDP fallback',
    failed:      'Connection failed',
  })[buttonState];

  const subline = ({
    idle:        `via ${D.form.host}`,
    checking:    `running 7 checks…`,
    active:      `via ${D.form.host} · ${window.fmtUptime(D.stats.uptimeS)}`,
    'active-warn': `voice/screen disabled · ${window.fmtUptime(D.stats.uptimeS)}`,
    failed:      `${failed} of ${D.tests.length} checks failed`,
  })[buttonState];

  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,
    }}>
      {/* Title bar */}
      <div style={{ height: 36, display: 'flex', alignItems: 'center', padding: '0 14px', fontSize: 12.5 }}>
        <window.BrandMark size={14} color={t.accent} />
        <span style={{ marginLeft: 10, fontWeight: 600, color: t.text }}>Drover-Go</span>
        <span style={{ marginLeft: 8, fontSize: 11, color: t.dim }}>0.4.2</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: ringColor, display: 'flex', alignItems: 'center', gap: 6 }}>
          {phase === 'active' && <span className="drv-pulsedot" style={{ width: 6, height: 6, borderRadius: 3, background: ringColor }} />}
          {phase === 'idle' && 'idle'}
          {phase === 'checking' && 'checking…'}
          {phase === 'checked' && (allFailed ? 'failed' : 'ready')}
          {phase === 'active' && (warning ? 'connected · warn' : 'connected')}
        </span>
        <div style={{ display: 'flex', marginLeft: 8 }}>
          <HeroTitleBtn t={t}><window.IconGear color={t.dim} /></HeroTitleBtn>
          <HeroTitleBtn t={t}><window.IconMin color={t.dim} /></HeroTitleBtn>
          <HeroTitleBtn t={t} hoverBg="#c42b1c"><window.IconClose color={t.dim} /></HeroTitleBtn>
        </div>
      </div>

      {/* Big button + headlines */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px 18px 0', gap: 14, minHeight: 0 }}>
        <BigToggle t={t} state={buttonState} onClick={handleBigClick} progress={
          phase === 'checking' ? Object.keys(D.results).length / D.tests.length : 0
        } />

        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 19, fontWeight: 600 }}>{headline}</div>
          <div style={{ fontSize: 12.5, color: t.dim, marginTop: 4, fontFamily: fontMono }}>{subline}</div>
        </div>

        {/* Stats — only when active */}
        {isActive && (
          <div style={{
            display: 'flex', width: '100%', background: t.panel,
            border: `1px solid ${t.border}`, borderRadius: 12, padding: 12, justifyContent: 'space-around',
          }}>
            <HeroStat icon="↑" v={fmtCompact(D.stats.up)} u={fmtUnit(D.stats.up)} c={t.accent} mono={fontMono} t={t} />
            <HeroStat icon="↓" v={fmtCompact(D.stats.down)} u={fmtUnit(D.stats.down)} c={t.accent} mono={fontMono} t={t} />
            <HeroStat icon="◇" v={D.stats.tcp} u="tcp" c={t.text} mono={fontMono} t={t} />
            <HeroStat icon="◈" v={D.stats.udp} u="udp" c={warning ? t.warn : t.text} mono={fontMono} t={t} />
          </div>
        )}

        {/* Diagnostic mini-list during check or after */}
        {(phase === 'checking' || (phase === 'checked' && !isActive)) && (
          <div style={{ width: '100%', flex: 1, minHeight: 0, overflow: 'auto' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              {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 8px', minHeight: 24, fontSize: 12.5 }}>
                      <window.StatusDot state={state} palette={palette} size={11} />
                      <span style={{ color: state === 'pending' ? t.dimmer : t.textDim }} 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: 18, height: 18, 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 8px 4px 28px', padding: '8px 10px', borderRadius: 6,
                        background: themeKey === 'd' ? 'rgba(255,107,107,.08)' : '#fdf2f2',
                        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>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      {/* Bottom: form (idle) or footer chips (active) */}
      <div style={{ padding: '0 18px 14px' }}>
        <div style={{
          background: t.panel, border: `1px solid ${t.border}`, borderRadius: 12,
          overflow: 'hidden',
        }}>
          <button onClick={() => setShowForm(s => !s)}
            style={{
              width: '100%', padding: '11px 14px', display: 'flex', alignItems: 'center', gap: 10,
              background: 'transparent', border: 'none', cursor: 'pointer', color: t.text,
              fontSize: 12.5, fontFamily: fontUI, textAlign: 'left',
            }}>
            <span style={{
              width: 26, height: 26, borderRadius: 13, background: t.panelAlt,
              border: `1px solid ${t.border}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fontMono, fontSize: 10, color: t.accent,
            }}>S5</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>Proxy</div>
              <div style={{ fontSize: 11, color: t.dim, fontFamily: fontMono }}>{D.form.host}:{D.form.port}{D.form.auth ? ' · auth' : ''}</div>
            </div>
            <window.IconChevron color={t.dim} dir={showForm ? 'up' : 'down'} />
          </button>
          {showForm && (
            <div className="drv-fadein" style={{ borderTop: `1px solid ${t.border}`, padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', gap: 8 }}>
                <HeroInput t={t} fontMono={fontMono} value={D.form.host}
                  onChange={v => D.update({ host: v })}
                  onEnter={D.runCheck} placeholder="95.165.72.59 или example.com" label="Host" style={{ flex: 1 }} />
                <HeroInput t={t} fontMono={fontMono} value={D.form.port}
                  onChange={v => D.update({ port: v.replace(/\D/g,'') })}
                  onEnter={D.runCheck} placeholder="12334" label="Port" style={{ width: 90 }} />
              </div>
              <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', userSelect: 'none', fontSize: 12.5 }}>
                <span style={{
                  width: 16, height: 16, borderRadius: 4,
                  border: `1.5px solid ${D.form.auth ? t.accent : t.borderHard}`,
                  background: D.form.auth ? t.accent : 'transparent',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'background .12s',
                }}>
                  {D.form.auth && <svg width="10" height="10" viewBox="0 0 11 11"><path d="M2 5.5l2.5 2.5 4.5-5" stroke={themeKey === 'd' ? '#0c1a18' : '#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('hero-login')?.focus(), 30); }}
                  style={{ display: 'none' }} />
                <span style={{ color: t.textDim }}>Authentication</span>
              </label>
              <div style={{ display: 'flex', gap: 8, opacity: D.form.auth ? 1 : 0.4, pointerEvents: D.form.auth ? 'auto' : 'none' }}>
                <HeroInput t={t} fontMono={fontMono} id="hero-login" value={D.form.login}
                  onChange={v => D.update({ login: v })} onEnter={D.runCheck}
                  placeholder="user" label="Login" style={{ flex: 1 }} disabled={!D.form.auth} />
                <HeroInput t={t} fontMono={fontMono} value={D.form.password} type="password"
                  onChange={v => D.update({ password: v })} onEnter={D.runCheck}
                  placeholder="••••••" label="Password" style={{ flex: 1 }} disabled={!D.form.auth} />
              </div>
            </div>
          )}
        </div>

        {/* Logs strip */}
        <button onClick={() => setShowDetails(s => !s)}
          style={{
            width: '100%', marginTop: 8, padding: '6px 4px', display: 'flex', alignItems: 'center', gap: 6,
            background: 'transparent', border: 'none', cursor: 'pointer', color: t.dim,
            fontSize: 11, fontFamily: fontMono, textAlign: 'left',
          }}>
          <window.IconChevron color={t.dim} dir={showDetails ? 'down' : 'right'} />
          <span>Logs</span>
          <span style={{ marginLeft: 'auto', color: t.dimmer }}>{D.logs.length} lines</span>
        </button>
        {showDetails && (
          <div className="drv-fadein" style={{
            background: t.panelAlt, border: `1px solid ${t.border}`, borderRadius: 8,
            maxHeight: 110, overflow: 'auto', padding: '8px 12px',
            fontFamily: fontMono, fontSize: 10.5, color: t.textDim,
          }} 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>
  );
}

// ─── Big toggle button ──────────────────────────────────────────────────
function BigToggle({ t, state, onClick, progress = 0 }) {
  // size = 168 px circle; outer pulsing rings
  const isActive = state === 'active' || state === 'active-warn';
  const isChecking = state === 'checking';
  const isFailed = state === 'failed';
  const isWarn = state === 'active-warn';

  const accent = isWarn ? t.warn : isFailed ? t.danger : t.accent;
  const accentDeep = isWarn ? t.warn : isFailed ? t.danger : t.accentDeep;
  const accentDarker = isWarn ? t.warn : isFailed ? t.danger : t.accentDarker;

  const ring = 168;
  const stroke = 5;
  const r = (ring - stroke) / 2;
  const c = 2 * Math.PI * r;

  return (
    <button onClick={onClick} disabled={isChecking}
      style={{
        position: 'relative', width: ring, height: ring, marginTop: 8,
        background: isActive
          ? `radial-gradient(circle at 35% 30%, ${accent} 0%, ${accentDeep} 60%, ${accentDarker} 100%)`
          : isFailed
            ? `radial-gradient(circle at 35% 30%, ${t.danger} 0%, #8c2c2c 100%)`
            : `radial-gradient(circle at 35% 30%, ${t.panel} 0%, ${t.panelAlt} 100%)`,
        boxShadow: isActive
          ? `0 0 60px ${accent}66, 0 0 0 6px ${accent}22, 0 0 0 12px ${accent}10`
          : `0 0 0 2px ${accent}22, 0 6px 24px rgba(0,0,0,.15)`,
        border: 'none', borderRadius: '50%', cursor: isChecking ? 'wait' : 'pointer',
        color: isActive || isFailed ? '#fff' : accent,
        transition: 'background .35s, box-shadow .35s, color .2s',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
      }}>
      {/* pulsing ring on active */}
      {isActive && (
        <span style={{
          position: 'absolute', inset: -16, borderRadius: '50%',
          border: `1px solid ${accent}66`, animation: 'drv-pulse-ring 2s ease-out infinite',
        }} />
      )}
      {/* progress ring while checking */}
      {isChecking && (
        <svg width={ring} height={ring} style={{ position: 'absolute', inset: 0, transform: 'rotate(-90deg)' }}>
          <circle cx={ring/2} cy={ring/2} r={r} fill="none" stroke={`${accent}30`} strokeWidth={stroke} />
          <circle cx={ring/2} cy={ring/2} r={r} fill="none" stroke={accent} strokeWidth={stroke} strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - progress)}
            style={{ transition: 'stroke-dashoffset .35s' }} />
          {/* spinner segment */}
          <circle cx={ring/2} cy={ring/2} r={r-12} fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round"
            strokeDasharray={`${(c-24)*0.18} ${(c-24)*0.82}`}
            style={{ animation: 'drv-spin 1.2s linear infinite', transformOrigin: '50% 50%' }} />
        </svg>
      )}
      <span style={{ fontSize: 42, lineHeight: 1, fontWeight: 100 }}>⏻</span>
      <span style={{ fontSize: 11, letterSpacing: '.25em', marginTop: 6, opacity: 0.95, fontWeight: 600 }}>
        {isActive ? 'ACTIVE' : isChecking ? 'TESTING' : isFailed ? 'RETRY' : 'OFF'}
      </span>
      <style>{`
        @keyframes drv-pulse-ring { 0%{ transform: scale(1); opacity:.5; } 70%{ transform: scale(1.18); opacity:0;} 100%{transform:scale(1.18); opacity:0;}}
      `}</style>
    </button>
  );
}

function HeroStat({ icon, v, u, c, mono, t }) {
  return (
    <div style={{ textAlign: 'center', minWidth: 56 }}>
      <div style={{ fontSize: 11, color: t.accent }}>{icon}</div>
      <div style={{ fontSize: 18, fontWeight: 600, fontFamily: mono, marginTop: 2, color: c }}>{v}</div>
      <div style={{ fontSize: 9.5, color: t.dim, letterSpacing: '.06em', textTransform: 'uppercase' }}>{u}</div>
    </div>
  );
}

function HeroTitleBtn({ children, t, hoverBg }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: 26, height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', borderRadius: 5,
        background: hover ? (hoverBg || 'rgba(127,127,127,.16)') : 'transparent',
      }}>{children}</div>
  );
}

function HeroInput({ t, fontMono, value, onChange, onEnter, placeholder, label, style, type, disabled, id }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, ...style }}>
      <span style={{ fontSize: 10.5, color: t.dim, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }}>{label}</span>
      <input id={id} type={type} value={value} disabled={disabled}
        onChange={e => onChange(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && onEnter?.()}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        placeholder={placeholder}
        style={{
          height: 32, background: t.panelAlt, color: disabled ? t.dimmer : t.text,
          border: `1px solid ${focus ? t.accent : t.border}`,
          borderRadius: 7, padding: '0 10px',
          fontFamily: fontMono, fontSize: 12, outline: 'none', boxSizing: 'border-box',
          transition: 'border-color .12s, box-shadow .12s',
          boxShadow: focus ? `0 0 0 3px ${t.accent}22` : 'none',
        }} />
    </label>
  );
}

function fmtCompact(n) {
  if (n < 1024) return n.toFixed(0);
  if (n < 1024 * 1024) return (n / 1024).toFixed(0);
  return (n / 1024 / 1024).toFixed(1);
}
function fmtUnit(n) {
  if (n < 1024) return 'B/s';
  if (n < 1024 * 1024) return 'KB/s';
  return 'MB/s';
}

window.HeroWindow = HeroWindow;