// boot-screens-2.jsx — §00 G-K
// G: Offline · H: DB recovery · I: Sign out · J: Spotlight · K: Wallet nudge

// ═════════════════════════════════════════════════════════════
// G · OFFLINE / NETWORK FALLBACK
// ═════════════════════════════════════════════════════════════

function BootOffline({ dark, variant = 'banner' }) {
  const t = dark ? G.d : G.l;

  return (
    <AppShell dark={dark} active="chat" sidebar={chatSidebar(dark)}
      topBar={<AppTopBar dark={dark} breadcrumbs={['Chat', 'Auth audit']} />}
    >
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* Banner */}
        <div style={{
          padding: '8px 24px', background: dark ? 'rgba(254,188,46,0.08)' : 'rgba(254,188,46,0.06)',
          borderBottom: `1px solid rgba(254,188,46,0.3)`, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 4, background: '#febc2e' }} />
          <span style={{ fontSize: 12, color: t.fg2 }}><strong style={{ color: t.fg }}>Offline</strong> · using local models only</span>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono }}>Last sync: 4m ago</span>
          <Button variant="ghost" size="sm">Retry</Button>
        </div>

        {/* Chat */}
        <div style={{ flex: 1, padding: 24, overflow: 'auto' }}>
          <UserMsg dark={dark}>Audit the auth middleware</UserMsg>
          <AssistantMsg dark={dark}>I'll use the local llama-3.1 since you're offline. Reading auth.ts now…</AssistantMsg>
          {variant === 'tooltip' && (
            <div style={{
              padding: '10px 14px', margin: '8px 0', background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: t.fg3, opacity: 0.7,
            }}>
              <Icon name="lock" size={13} color={t.fg3} />
              Web search disabled — requires internet.
            </div>
          )}
        </div>

        {/* Composer with filtered model picker */}
        <div style={{ padding: '12px 24px 18px', borderTop: `0.5px solid ${t.border}` }}>
          <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 14, padding: 12 }}>
            <div style={{ fontSize: 13, color: t.fg3, marginBottom: 10 }}>Reply…</div>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
              {/* Model picker — only locals */}
              <div style={{ position: 'relative' }}>
                <button style={{ height: 28, padding: '0 10px', borderRadius: 999, border: `1px solid ${t.border}`, background: 'transparent', color: t.fg2, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontFamily: G.mono }}>
                  <div style={{ width: 6, height: 6, borderRadius: 3, background: '#28c840' }} />
                  llama-3.1-70b · local
                  <Icon name="chevronDown" size={10} />
                </button>
                {variant === 'picker' && (
                  <div style={{ position: 'absolute', bottom: 'calc(100% + 6px)', left: 0, width: 280, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10, boxShadow: t.shadow, padding: 6 }}>
                    <div style={{ padding: '4px 8px', fontSize: 10, color: t.fg3, fontFamily: G.mono, letterSpacing: 0.6 }}>LOCAL · AVAILABLE</div>
                    {['llama-3.1-70b', 'qwen-2.5-32b', 'mistral-7b'].map(m => (
                      <div key={m} style={{ padding: '6px 8px', borderRadius: 6, fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 6, height: 6, borderRadius: 3, background: '#28c840' }} />
                        {m}
                      </div>
                    ))}
                    <Divider style={{ margin: '6px 0', width: '100%' }} />
                    <div style={{ padding: '4px 8px', fontSize: 10, color: t.fg4, fontFamily: G.mono, letterSpacing: 0.6 }}>REMOTE · OFFLINE</div>
                    {['claude-4.5-sonnet', 'gpt-4o', 'gemini-1.5-pro'].map(m => (
                      <div key={m} style={{ padding: '6px 8px', borderRadius: 6, fontSize: 12, display: 'flex', alignItems: 'center', gap: 8, color: t.fg4, opacity: 0.5 }}>
                        <Icon name="lock" size={10} color={t.fg4} />
                        {m}
                      </div>
                    ))}
                  </div>
                )}
              </div>
              <span style={{ flex: 1 }} />
              <button style={{ width: 32, height: 32, borderRadius: 16, background: t.surface2, border: 'none', color: t.fg3 }}><Icon name="arrowUp" size={14} /></button>
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
}


// ═════════════════════════════════════════════════════════════
// H · DATABASE CORRUPTION RECOVERY
// ═════════════════════════════════════════════════════════════

function BootDBRecovery({ dark, state = 'detected' }) {
  const t = dark ? G.d : G.l;

  if (state === 'repairing' || state === 'restoring') {
    const isRepair = state === 'repairing';
    return (
      <BootFrame dark={dark}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
          <div style={{ width: 56, height: 56, borderRadius: 28, border: `3px solid ${t.surface2}`, borderTopColor: t.fg, animation: 'gh-spin 1.2s linear infinite' }} />
          <div style={{ textAlign: 'center', maxWidth: 380 }}>
            <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 8 }}>{isRepair ? 'Repairing database…' : 'Restoring from cloud…'}</div>
            <div style={{ fontSize: 12, color: t.fg3, lineHeight: 1.5 }}>{isRepair ? 'Running VACUUM and rebuilding indexes. This usually takes under a minute.' : 'Pulling from your last GhastSync snapshot at 04:22.'}</div>
          </div>
          <div style={{ width: 280, height: 3, background: t.surface2, borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: '48%', height: '100%', background: t.fg }} />
          </div>
          <div style={{ fontSize: 11, color: t.fg3, fontFamily: G.mono }}>{isRepair ? 'rebuilding chat_index · 142 of 287' : '12.4 MB / 26 MB'}</div>
        </div>
      </BootFrame>
    );
  }

  if (state === 'failed') {
    return (
      <BootFrame dark={dark}>
        <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18, padding: 60 }}>
          <Icon name="warn" size={28} color="#ff5f57" />
          <div style={{ textAlign: 'center', maxWidth: 480 }}>
            <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 8 }}>Repair failed</div>
            <div style={{ fontSize: 12, color: t.fg3, lineHeight: 1.55 }}>The integrity check found unrecoverable pages in <code style={{ fontFamily: G.mono, padding: '1px 5px', background: t.surface2, borderRadius: 3 }}>chat_history</code>. Your chats prior to this morning are likely lost. We recommend restoring from cloud.</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Button variant="primary" size="md">Restore from cloud</Button>
            <Button variant="secondary" size="md">Reset and start over</Button>
          </div>
        </div>
      </BootFrame>
    );
  }

  // detected
  return (
    <BootFrame dark={dark}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px 80px', gap: 20 }}>
        <div style={{ width: 56, height: 56, borderRadius: 28, background: 'rgba(255,95,87,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="warn" size={26} color="#ff5f57" />
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.3, marginBottom: 8 }}>Your database needs attention</div>
          <div style={{ fontSize: 13, color: t.fg3, maxWidth: 460, lineHeight: 1.55 }}>
            We couldn't open <code style={{ fontFamily: G.mono, fontSize: 11, padding: '1px 5px', background: t.surface2, borderRadius: 3 }}>~/.ghast/main.db</code>. This usually happens after a forced quit. Pick how you'd like to recover:
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 480, marginTop: 8 }}>
          {[
            { icon: 'tools', name: 'Try repair', desc: 'Run SQLite VACUUM and rebuild indexes. Most chats survive. Recommended first.', recommended: true },
            { icon: 'cloud', name: 'Restore from GhastSync', desc: 'Pull your last cloud snapshot from May 4, 04:22. Loses ~3h of recent chats.' },
            { icon: 'refresh', name: 'Reset and start over', desc: 'Wipe local data. You\'ll be signed out and start fresh. Cannot be undone.', danger: true },
          ].map((opt, i) => (
            <div key={i} style={{
              padding: '14px 16px', background: t.surface, border: `1px solid ${opt.recommended ? t.fg : t.border}`, borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer',
            }}>
              <Icon name={opt.icon} size={18} color={opt.danger ? '#ff5f57' : t.fg2} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: opt.danger ? '#ff5f57' : t.fg }}>
                  {opt.name}
                  {opt.recommended && <Tag style={{ marginLeft: 8, height: 16, fontSize: 9, background: t.fg, color: t.bg, border: 'none' }}>Recommended</Tag>}
                </div>
                <div style={{ fontSize: 11, color: t.fg3, marginTop: 2, lineHeight: 1.4 }}>{opt.desc}</div>
              </div>
              <Icon name="arrowRight" size={14} color={t.fg3} />
            </div>
          ))}
        </div>

        <div style={{ marginTop: 4 }}>
          <a style={{ fontSize: 11, color: t.fg3, textDecoration: 'underline', cursor: 'pointer', fontFamily: G.mono }}>Show error log</a>
        </div>
      </div>
    </BootFrame>
  );
}



Object.assign(window, {
  BootOffline, BootDBRecovery,
});