// ========== Status · Diagnóstico de conexión ==========
// Página pública (sin auth requerida) que verifica en vivo si todas las
// piezas del stack están conectadas: frontend, backend, Supabase, sesión.
//
// URL: holai.cl/status

function StatusPage({ go }) {
  const [checks, setChecks] = React.useState([]);
  const [running, setRunning] = React.useState(true);
  const [lastRun, setLastRun] = React.useState(null);

  const run = React.useCallback(async () => {
    setRunning(true);
    const results = [];

    // ── 1. Frontend ─────────────────────────────────────────────────────
    results.push({
      key: 'frontend',
      label: 'Frontend',
      status: 'ok',
      detail: 'Página cargó correctamente.',
      info: { url: window.location.origin, path: window.location.pathname },
    });
    setChecks([...results]);

    // ── 2. Backend (/api/health) ────────────────────────────────────────
    try {
      const t0 = performance.now();
      const r = await fetch('/api/health', { cache: 'no-store' });
      const ms = Math.round(performance.now() - t0);
      const j = await r.json().catch(() => ({}));
      if (r.ok && j.ok) {
        results.push({
          key: 'backend',
          label: 'Backend (Vercel Functions)',
          status: 'ok',
          detail: `Responde en ${ms}ms — Node ${j.node || '?'} en ${j.region || '?'}.`,
          info: j,
        });
      } else {
        results.push({
          key: 'backend',
          label: 'Backend (Vercel Functions)',
          status: 'error',
          detail: `HTTP ${r.status}.`,
          info: j,
        });
      }
    } catch (e) {
      results.push({
        key: 'backend',
        label: 'Backend (Vercel Functions)',
        status: 'error',
        detail: 'No respondió. ¿Deploy en error?',
        info: { error: e.message },
      });
    }
    setChecks([...results]);

    // ── 3. Supabase config ──────────────────────────────────────────────
    try {
      const r = await fetch('/api/config', { cache: 'no-store' });
      const cfg = await r.json();
      if (cfg.configured) {
        results.push({
          key: 'config',
          label: 'Supabase configurado',
          status: 'ok',
          detail: 'Las env vars SUPABASE_URL y SUPABASE_ANON_KEY están seteadas en Vercel.',
          info: { supabaseUrl: cfg.supabaseUrl },
        });
      } else {
        results.push({
          key: 'config',
          label: 'Supabase configurado',
          status: 'warn',
          detail: 'Faltan env vars en Vercel. Agregá SUPABASE_URL y SUPABASE_ANON_KEY.',
          info: cfg,
        });
      }
    } catch (e) {
      results.push({
        key: 'config',
        label: 'Supabase configurado',
        status: 'error',
        detail: 'No se pudo leer /api/config.',
        info: { error: e.message },
      });
    }
    setChecks([...results]);

    // ── 4. SDK Supabase cargado en el browser ───────────────────────────
    if (window.holai && window.holai.initPromise) {
      try { await window.holai.initPromise; } catch {}
    }
    if (window.holai && window.holai.supabase) {
      results.push({
        key: 'sdk',
        label: 'SDK Supabase (browser)',
        status: 'ok',
        detail: 'Cliente inicializado y listo para auth.',
      });
    } else {
      results.push({
        key: 'sdk',
        label: 'SDK Supabase (browser)',
        status: 'warn',
        detail: 'Cliente no inicializado. Probablemente Supabase no está configurado.',
      });
    }
    setChecks([...results]);

    // ── 5. Sesión actual ────────────────────────────────────────────────
    const supa = window.holai && window.holai.supabase;
    let session = null;
    if (supa) {
      try {
        const { data } = await supa.auth.getSession();
        session = data && data.session;
      } catch {}
    }
    if (session && session.user) {
      results.push({
        key: 'session',
        label: 'Sesión',
        status: 'ok',
        detail: `Conectado como ${session.user.email}`,
        info: {
          userId:    session.user.id,
          email:     session.user.email,
          createdAt: session.user.created_at,
          expiresIn: session.expires_in,
        },
      });
    } else {
      results.push({
        key: 'session',
        label: 'Sesión',
        status: 'info',
        detail: 'No hay usuario logueado en este browser.',
      });
    }
    setChecks([...results]);

    // ── 6. Whoami / Admin ───────────────────────────────────────────────
    if (session && session.access_token) {
      try {
        const r = await fetch('/api/admin/whoami', {
          headers: { Authorization: 'Bearer ' + session.access_token },
        });
        const j = await r.json().catch(() => ({}));
        if (r.ok) {
          results.push({
            key: 'admin',
            label: 'Rol',
            status: j.isAdmin ? 'ok' : 'info',
            detail: j.isAdmin
              ? 'Tu email está en ADMIN_EMAILS — tenés acceso al panel /admin.'
              : 'Usuario regular (no admin). Para ser admin agregá tu email a ADMIN_EMAILS en Vercel.',
            info: j,
          });
        } else {
          results.push({
            key: 'admin',
            label: 'Rol',
            status: 'warn',
            detail: `whoami respondió HTTP ${r.status}.`,
            info: j,
          });
        }
      } catch (e) {
        results.push({
          key: 'admin',
          label: 'Rol',
          status: 'error',
          detail: 'No se pudo verificar el rol.',
          info: { error: e.message },
        });
      }
    }
    setChecks([...results]);

    // ── 7. Database (opcional, solo si hay sesión) ──────────────────────
    if (supa && session) {
      try {
        const { data, error } = await supa.from('profiles').select('id').limit(1);
        if (error) throw error;
        results.push({
          key: 'db',
          label: 'Base de datos',
          status: 'ok',
          detail: `Postgres responde. profiles tiene ${data?.length ?? 0} fila(s) visible(s) bajo tu RLS.`,
        });
      } catch (e) {
        results.push({
          key: 'db',
          label: 'Base de datos',
          status: 'error',
          detail: 'Error consultando profiles. ¿Aplicaste migrations/0001_init.sql?',
          info: { error: e.message },
        });
      }
      setChecks([...results]);
    }

    setRunning(false);
    setLastRun(new Date());
  }, []);

  React.useEffect(() => { run(); }, [run]);

  const total   = checks.length;
  const okCount = checks.filter(c => c.status === 'ok').length;
  const allOk   = !running && total > 0 && checks.every(c => c.status === 'ok' || c.status === 'info');

  return (
    <div style={{ minHeight:'100vh', background:'var(--bg)', padding:'48px 24px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 28 }}>
          <div>
            <a href="#" onClick={(e)=>{e.preventDefault(); go('home');}} className="logo" style={{ fontSize: 22 }}>
              <span className="logo-mark"><Beagle/></span><span>Hol<span className="logo-ai">ai</span></span>
            </a>
            <h1 className="display display-m" style={{ margin: '20px 0 6px' }}>Estado de conexión</h1>
            <div className="muted" style={{ fontSize: 14 }}>
              Diagnóstico en vivo del frontend, backend, Supabase y tu sesión.
            </div>
          </div>
          <button className="btn btn-outline btn-sm" onClick={run} disabled={running}>
            {running ? 'Verificando…' : 'Re-verificar'}
          </button>
        </div>

        {/* Resumen */}
        <div className="card" style={{ padding: 20, marginBottom: 18, display:'flex', justifyContent:'space-between', alignItems:'center', gap: 16 }}>
          <div>
            <div className="eyebrow">Resumen</div>
            <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4 }}>
              {running
                ? 'Corriendo diagnósticos…'
                : allOk
                  ? 'Todo conectado ✓'
                  : `${okCount} de ${total} OK`}
            </div>
            {lastRun && (
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                Última verificación: {lastRun.toLocaleString('es-CL')}
              </div>
            )}
          </div>
          <StatusBig status={running ? 'running' : (allOk ? 'ok' : (checks.some(c => c.status === 'error') ? 'error' : 'warn'))}/>
        </div>

        {/* Checks */}
        <div style={{ display: 'grid', gap: 12 }}>
          {checks.map(c => <StatusCard key={c.key} check={c}/>)}
        </div>

        <div style={{ marginTop: 32, textAlign:'center', fontSize: 12, color:'var(--muted)' }}>
          ¿Algo en rojo? Compartí esta pantalla con quien te ayude a debuggear.
        </div>
      </div>
    </div>
  );
}

function StatusBig({ status }) {
  const colors = {
    ok:      { bg:'#1A7A42', label:'OK' },
    warn:    { bg:'#C28B0E', label:'WARN' },
    error:   { bg:'#E84545', label:'ERROR' },
    running: { bg:'#5A6B82', label:'…' },
  };
  const c = colors[status] || colors.warn;
  return (
    <div style={{
      width: 64, height: 64, borderRadius: '50%', background: c.bg, color:'#fff',
      display:'grid', placeItems:'center', fontWeight: 800, fontSize: 12, fontFamily:'JetBrains Mono, monospace',
      letterSpacing:'0.06em', flexShrink: 0,
    }}>{c.label}</div>
  );
}

function StatusCard({ check }) {
  const colors = {
    ok:    { dot:'#1A7A42', label:'OK',    bg:'rgba(26,122,66,0.06)' },
    warn:  { dot:'#C28B0E', label:'WARN',  bg:'rgba(194,139,14,0.06)' },
    error: { dot:'#E84545', label:'ERROR', bg:'rgba(232,69,69,0.06)' },
    info:  { dot:'#5A6B82', label:'INFO',  bg:'rgba(90,107,130,0.06)' },
  };
  const c = colors[check.status] || colors.info;
  return (
    <div className="card" style={{ padding: 16, background: c.bg }}>
      <div style={{ display:'flex', alignItems:'flex-start', gap: 14 }}>
        <div style={{ width: 10, height: 10, borderRadius:'50%', background: c.dot, marginTop: 8, flexShrink: 0 }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 12, flexWrap:'wrap' }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>{check.label}</div>
            <span style={{
              fontSize: 9, fontFamily:'JetBrains Mono, monospace', fontWeight: 700,
              padding:'2px 8px', borderRadius: 4, background: c.dot, color:'#fff', letterSpacing:'0.06em',
            }}>{c.label}</span>
          </div>
          <div style={{ fontSize: 13, color:'var(--ink-2)', marginTop: 6, lineHeight: 1.5 }}>{check.detail}</div>
          {check.info && (
            <details style={{ marginTop: 10 }}>
              <summary style={{ fontSize: 11, color:'var(--muted)', cursor:'pointer', fontFamily:'JetBrains Mono, monospace' }}>detalles</summary>
              <pre style={{
                fontSize: 11, fontFamily:'JetBrains Mono, monospace', background:'rgba(0,0,0,0.04)',
                padding: 10, borderRadius: 6, marginTop: 6, overflow:'auto', maxHeight: 180,
                wordBreak:'break-all', whiteSpace:'pre-wrap',
              }}>{JSON.stringify(check.info, null, 2)}</pre>
            </details>
          )}
        </div>
      </div>
    </div>
  );
}

window.StatusPage = StatusPage;