// Componente de Diagnóstico y Estado de Conexión con Supabase
function SupabaseStatus({ statusData, onRefresh }) {
  const isConnected = statusData.status === 'connected';

  return (
    <div className="app-card">
      <div className="card-header">
        <h2 className="card-title">
          <i className="fa-solid fa-server" style={{ color: 'var(--primary-light)' }}></i>
          Diagnóstico y Conexión con Supabase
        </h2>
        <button 
          className="btn btn-secondary btn-sm"
          onClick={onRefresh}
          disabled={statusData.status === 'loading'}
        >
          <i className={`fa-solid fa-rotate ${statusData.status === 'loading' ? 'fa-spin' : ''}`}></i>
          Reverificar
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px', marginBottom: '24px' }}>
        <div style={{ background: 'var(--bg-surface-elevated)', padding: '16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>ESTADO DE BASE DE DATOS</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '1.1rem', fontWeight: '700', color: isConnected ? 'var(--accent-green)' : 'var(--accent-rose)' }}>
            <i className={`fa-solid ${isConnected ? 'fa-circle-check' : 'fa-circle-xmark'}`}></i>
            {isConnected ? 'Activo & Saludable' : 'Error de Conexión'}
          </div>
        </div>

        <div style={{ background: 'var(--bg-surface-elevated)', padding: '16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>LATENCIA DE RESPUESTA</div>
          <div style={{ fontSize: '1.1rem', fontWeight: '700', color: 'var(--accent-cyan)' }}>
            {statusData.latency ? `${statusData.latency} ms` : '--'}
          </div>
        </div>

        <div style={{ background: 'var(--bg-surface-elevated)', padding: '16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>SOPORTE TIEMPO REAL (WEBSOCKETS)</div>
          <div style={{ fontSize: '1.1rem', fontWeight: '700', color: 'var(--accent-gold)' }}>
            <i className="fa-solid fa-bolt" style={{ marginRight: '6px' }}></i>
            Listo para Canales de Bingo
          </div>
        </div>
      </div>

      <h3 style={{ fontSize: '0.95rem', fontWeight: '700', color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'uppercase' }}>
        Detalles de Configuración
      </h3>
      <table className="info-table">
        <tbody>
          <tr>
            <td><strong>Endpoint API Supabase</strong></td>
            <td><span className="code-badge">{statusData.url || 'https://xrxztirgmfqjrdxqehhz.supabase.co'}</span></td>
          </tr>
          <tr>
            <td><strong>Cliente Supabase JS</strong></td>
            <td><span className="code-badge">v2.49.1</span> (Listo para Auth, Database y Realtime Channels)</td>
          </tr>
          <tr>
            <td><strong>Mensaje de Estado</strong></td>
            <td>{statusData.message || 'Verificando conectividad...'}</td>
          </tr>
          <tr>
            <td><strong>Próximo Paso</strong></td>
            <td>
              <span style={{ color: 'var(--accent-gold)', fontWeight: '600' }}>
                <i className="fa-solid fa-arrow-right" style={{ marginRight: '6px' }}></i>
                Esperando especificaciones del Modelo de Negocio para crear tablas (salas, partidas, cartones, apuestas)
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

window.SupabaseStatus = SupabaseStatus;