import { useETA } from '../context/ETAContext'
import ETACard from '../components/ETACard'
import WarningCard from '../components/WarningCard'
import RouteProgress from '../components/RouteProgress'

export default function Dashboard() {
  const { etaData, loading, error, lastFetch, refresh } = useETA()

  if (loading) {
    return (
      <div style={styles.centered}>
        <div style={styles.spinner} />
        <p style={styles.loadingText}>Obteniendo ETA...</p>
      </div>
    )
  }

  if (error) {
    return (
      <div style={styles.page}>
        <WarningCard
          type="warning"
          title="⚠ Sin conexión al servidor"
          message={`No se pudo obtener el ETA. Verifica tu conexión. Error: ${error}`}
        />
        <button onClick={refresh} style={styles.retryBtn}>
          Reintentar
        </button>
      </div>
    )
  }

  if (!etaData) {
    return (
      <div style={styles.page}>
        <WarningCard
          type="info"
          title="ℹ Sin información de ruta"
          message="No hay rutas activas en este momento. Vuelve a intentarlo más tarde."
        />
      </div>
    )
  }

  return (
    <div style={styles.page}>

      {/* Colonia y ruta */}
      <div style={styles.addressBadge}>
        <div style={styles.addressIcon}>📍</div>
        <div>
          <div style={styles.addressMain}>{etaData.colonia}</div>
          <div style={styles.addressSub}>{etaData.routeName} · Celaya, Gto.</div>
        </div>
      </div>

      {/* ETA principal */}
      <ETACard etaData={etaData} />

      {/* Notificación activa */}
      {etaData.notificacion && (
        <WarningCard
          type={etaData.status === 'cerca' ? 'warning' : 'info'}
          title={etaData.notificacion.title}
          message={etaData.notificacion.body}
        />
      )}

      {/* Mensajes preventivos */}
      <WarningCard
        type="warning"
        title="⚠ Aviso de Seguridad"
        message="No saques la basura antes de tiempo ni intentes alcanzar el vehículo en movimiento. Espera que el camión se detenga completamente frente a tu domicilio."
      />

      <WarningCard
        type="info"
        title="🔒 Privacidad garantizada"
        message="Este sistema no muestra el mapa ni la ubicación exacta del camión. Solo recibes la ventana de tiempo estimada para tu zona registrada."
      />

      {/* Progreso de ruta */}
      <RouteProgress
        posicionActual={etaData.posicionActual}
        totalNodos={etaData.totalNodos}
        progresoPct={etaData.progresoPct}
      />

      {/* Última actualización */}
      {lastFetch && (
        <p style={styles.lastUpdate}>
          Actualizado: {lastFetch.toLocaleTimeString('es-MX')} ·{' '}
          <span onClick={refresh} style={{ color: '#3d9aff', cursor: 'pointer' }}>
            Actualizar
          </span>
        </p>
      )}
    </div>
  )
}

const styles = {
  page:        { padding: 16, paddingBottom: 32 },
  centered:    { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '60vh', gap: 16 },
  spinner:     { width: 32, height: 32, border: '3px solid rgba(61,154,255,0.2)', borderTop: '3px solid #3d9aff', borderRadius: '50%', animation: 'spin 1s linear infinite' },
  loadingText: { fontSize: 13, color: '#6b7f96' },
  addressBadge:{ background: '#131820', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, padding: '10px 14px', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10 },
  addressIcon: { width: 32, height: 32, background: 'rgba(61,154,255,0.1)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 },
  addressMain: { fontWeight: 500, color: '#e8edf5', fontSize: 12 },
  addressSub:  { color: '#6b7f96', fontSize: 11, marginTop: 1 },
  retryBtn:    { width: '100%', padding: 12, borderRadius: 10, border: '1px solid rgba(61,154,255,0.3)', background: 'rgba(61,154,255,0.08)', color: '#3d9aff', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 500, cursor: 'pointer', marginTop: 8 },
  lastUpdate:  { fontSize: 11, color: '#3d5570', textAlign: 'center', marginTop: 12 },
}