/* src/index.css */

/* ---------- 1. Reinicio mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  text-wrap: balance;
}

/* ---------- 2. Variables de diseño ---------- */
:root {
  /* Color */
  --color-marca: #12805c;
  --color-marca-oscura: #0d6247;
  --color-alquilada: #b45309;
  --color-mantenimiento: #9b1c1c;
  --color-fondo: #f5f7fa;
  --color-superficie: #ffffff;
  --color-texto: #1f2933;
  --color-texto-suave: #52606d;
  --color-borde: #d9e2ec;
  --color-foco: #2563eb;

  /* Forma */
  --radio: 8px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-elevada: 0 10px 25px rgba(15, 23, 42, 0.15);

  /* Espaciado: una escala, no números sueltos */
  --espacio: 1rem;
  --espacio-xs: 0.25rem;
  --espacio-s: 0.5rem;
  --espacio-l: 1.5rem;
  --espacio-xl: 2.5rem;

  /* Tipografía */
  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto-s: 0.875rem;
  --texto-m: 1rem;
  --texto-l: 1.25rem;
  --texto-xl: 1.75rem;

  /* Otros */
  --ancho-maximo: 72rem;
  --transicion: 150ms ease;
}

/* ---------- 3. Base ---------- */
body {
  font-family: var(--fuente);
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

/* Foco visible SIEMPRE. Nunca outline: none sin sustituto */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* src/index.css — continuación */
:root[data-tema='oscuro'] {
  --color-fondo: #131a22;
  --color-superficie: #1b242f;
  --color-texto: #e4ecf3;
  --color-texto-suave: #9aa5b1;
  --color-borde: #2c3846;
  --color-marca: #1fa87a;         /* más luminoso: sobre fondo oscuro necesita más contraste */
  --color-alquilada: #d97706;
  --color-mantenimiento: #ef4444;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-elevada: 0 10px 25px rgba(0, 0, 0, 0.5);
}

// src/contextos/ProveedorTema.jsx
import { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
import { useAlmacenLocal } from '../hooks/useAlmacenLocal.js';

const ContextoTema = createContext(null);

export function ProveedorTema({ children }) {
  const [tema, setTema] = useAlmacenLocal('ciclourbano:tema', 'claro');

  // Efecto de sincronización con el DOM: el atributo vive fuera de React
  useEffect(() => {
    document.documentElement.dataset.tema = tema;
  }, [tema]);

  const alternarTema = useCallback(() => {
    setTema((actual) => (actual === 'claro' ? 'oscuro' : 'claro'));
  }, [setTema]);

  // value estabilizado: sin esto, cada render del proveedor repinta TODOS los consumidores
  const valor = useMemo(() => ({ tema, alternarTema }), [tema, alternarTema]);

  return <ContextoTema.Provider value={valor}>{children}</ContextoTema.Provider>;
}

export function useTema() {
  const contexto = useContext(ContextoTema);
  if (contexto === null) {
    throw new Error('useTema debe usarse dentro de ProveedorTema.');
  }
  return contexto;
}

// src/utilidades/clases.js
export function clases(...valores) {
  return valores.filter(Boolean).join(' ');
}

// src/componentes/base/Boton.jsx
import { clases } from '../../utilidades/clases.js';
import estilos from './Boton.module.css';

function Boton({
  variante = 'primario',
  tamano = 'medio',
  tipo = 'button',
  cargando = false,
  anchoCompleto = false,
  children,
  className,
  ...resto
}) {
  return (
    <button
      type={tipo}
      className={clases(
        estilos.boton,
        estilos[variante],
        estilos[tamano],
        anchoCompleto && estilos.anchoCompleto,
        className
      )}
      aria-busy={cargando || undefined}
      disabled={cargando || resto.disabled}
      {...resto}
    >
      {cargando ? 'Un momento…' : children}
    </button>
  );
}

export default Boton;

// src/componentes/base/Campo.jsx
import { useId } from 'react';
import { clases } from '../../utilidades/clases.js';
import estilos from './Campo.module.css';

function Campo({ etiqueta, error, ayuda, obligatorio = false, children }) {
  const id = useId();
  const idError = `${id}-error`;
  const idAyuda = `${id}-ayuda`;

  // Se describe con la ayuda y, si lo hay, con el error
  const descritoPor = clases(ayuda && idAyuda, error && idError) || undefined;

  return (
    <div className={clases(estilos.campo, error && estilos.conError)}>
      <label className={estilos.etiqueta} htmlFor={id}>
        {etiqueta}
        {obligatorio && (
          <span className={estilos.obligatorio} aria-hidden="true">
            {' '}*
          </span>
        )}
      </label>

      {ayuda && (
        <p className={estilos.ayuda} id={idAyuda}>
          {ayuda}
        </p>
      )}

      {/* El control se recibe como función para poder inyectarle id y aria-* */}
      {children({
        id,
        'aria-invalid': error ? true : undefined,
        'aria-describedby': descritoPor,
        'aria-required': obligatorio || undefined
      })}

      {error && (
        <p className={estilos.error} id={idError} role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

export default Campo;

// Uso
<Campo etiqueta="Duración (horas)" obligatorio error={errores.horas} ayuda="Entre 1 y 24 horas">
  {(props) => (
    <input {...props} type="number" min="1" max="24" value={horas} onChange={manejarHoras} />
  )}
</Campo>

// src/componentes/base/Panel.jsx
import { clases } from '../../utilidades/clases.js';
import estilos from './Panel.module.css';

function Panel({ titulo, nivel = 2, acciones, children, className }) {
  const Encabezado = `h${nivel}`;   // el nivel lo decide la pantalla, no el componente

  return (
    <section className={clases(estilos.panel, className)}>
      {(titulo || acciones) && (
        <header className={estilos.cabecera}>
          {titulo && <Encabezado className={estilos.titulo}>{titulo}</Encabezado>}
          {acciones && <div className={estilos.acciones}>{acciones}</div>}
        </header>
      )}
      <div className={estilos.cuerpo}>{children}</div>
    </section>
  );
}

export default Panel;

// src/componentes/base/Etiqueta.jsx  (EtiquetaEstado es su especialización)
import { clases } from '../../utilidades/clases.js';
import estilos from './Etiqueta.module.css';

const TEXTOS = {
  disponible: 'Disponible',
  alquilada: 'Alquilada',
  mantenimiento: 'En mantenimiento'
};

export function EtiquetaEstado({ estado }) {
  return (
    <span className={clases(estilos.etiqueta, estilos[estado])}>
      {TEXTOS[estado] ?? estado}
    </span>
  );
}

// src/componentes/base/Modal.jsx
import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { useEventoTeclado } from '../../hooks/useEventoTeclado.js';
import estilos from './Modal.module.css';

function Modal({ abierto, titulo, alCerrar, children }) {
  const contenedor = useRef(null);
  const elementoPrevio = useRef(null);

  useEventoTeclado('Escape', alCerrar, { activo: abierto });

  useEffect(() => {
    if (!abierto) return;

    // 1) Recordar el foco de origen y 2) llevarlo al diálogo
    elementoPrevio.current = document.activeElement;
    contenedor.current?.focus();

    // 3) Bloquear el desplazamiento del fondo
    const overflowPrevio = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = overflowPrevio;
      // 4) Devolver el foco a donde estaba
      elementoPrevio.current?.focus?.();
    };
  }, [abierto]);

  if (!abierto) return null;

  return createPortal(
    <div className={estilos.velo} onClick={alCerrar}>
      <div
        ref={contenedor}
        className={estilos.dialogo}
        role="dialog"
        aria-modal="true"
        aria-labelledby="titulo-modal"
        tabIndex={-1}
        onClick={(evento) => evento.stopPropagation()}
      >
        <h2 id="titulo-modal" className={estilos.titulo}>{titulo}</h2>
        {children}
      </div>
    </div>,
    document.body
  );
}

export default Modal;

// src/componentes/Diseno.jsx
import { Outlet } from 'react-router';
import Cabecera from './Cabecera.jsx';
import MigasDePan from './MigasDePan.jsx';
import ListaAvisos from './ListaAvisos.jsx';
import PieDePagina from './PieDePagina.jsx';
import estilos from './Diseno.module.css';

function Diseno() {
  return (
    <div className={estilos.contenedor}>
      <a className={estilos.saltar} href="#contenido">
        Saltar al contenido principal
      </a>

      <Cabecera />

      <main className={estilos.principal} id="contenido" tabIndex={-1}>
        <MigasDePan />
        <ListaAvisos />
        <Outlet />
      </main>

      <PieDePagina />
    </div>
  );
}

export default Diseno;

/* src/componentes/Diseno.module.css */
.contenedor {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.principal {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-l) var(--espacio);
}

/* El enlace de salto: fuera de pantalla hasta que recibe el foco */
.saltar {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--espacio-s) var(--espacio);
  background: var(--color-marca);
  color: #fff;
  border-radius: 0 0 var(--radio) 0;
  text-decoration: none;
}

.saltar:focus {
  left: 0;
  top: 0;
}

// src/componentes/Cabecera.jsx
import { NavLink, Link } from 'react-router';
import MenuUsuario from './MenuUsuario.jsx';
import BotonTema from './BotonTema.jsx';
import { clases } from '../utilidades/clases.js';
import { NOMBRE_APP } from '../configuracion.js';
import estilos from './Cabecera.module.css';

const ENLACES = [
  { a: '/', texto: 'Catálogo', exacto: true },
  { a: '/estaciones', texto: 'Estaciones' },
  { a: '/reservas', texto: 'Mis reservas' },
  { a: '/taller', texto: 'Taller', soloOperario: true }
];

function Cabecera() {
  // En 11-03 saldrá de la sesión real; ahora se fija para poder ver la pantalla
  const esOperario = true;

  const visibles = ENLACES.filter((enlace) => !enlace.soloOperario || esOperario);

  return (
    <header className={estilos.cabecera}>
      <div className={estilos.interior}>
        <Link to="/" className={estilos.marca}>
          <span aria-hidden="true">🚲</span> {NOMBRE_APP}
        </Link>

        <nav className={estilos.navegacion} aria-label="Principal">
          <ul className={estilos.lista}>
            {visibles.map((enlace) => (
              <li key={enlace.a}>
                <NavLink
                  to={enlace.a}
                  end={enlace.exacto}
                  className={({ isActive }) =>
                    clases(estilos.enlace, isActive && estilos.activo)
                  }
                >
                  {enlace.texto}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>

        <div className={estilos.acciones}>
          <BotonTema />
          <MenuUsuario />
        </div>
      </div>
    </header>
  );
}

export default Cabecera;

/* src/componentes/Cabecera.module.css — el estado activo */
.enlace {
  display: block;
  padding: var(--espacio-s) var(--espacio);
  color: var(--color-texto-suave);
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color var(--transicion);
}

.enlace:hover {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

.activo {
  color: var(--color-marca);
  font-weight: 600;
  /* El color NO puede ser la única señal: se añade una marca de forma */
  box-shadow: inset 0 -2px 0 var(--color-marca);
}

// src/componentes/MigasDePan.jsx
import { Link, useMatches } from 'react-router';
import estilos from './MigasDePan.module.css';

function MigasDePan() {
  const coincidencias = useMatches().filter((m) => m.handle?.miga);

  if (coincidencias.length <= 1) return null;   // en el inicio no aportan nada

  return (
    <nav aria-label="Ruta de navegación" className={estilos.migas}>
      <ol className={estilos.lista}>
        {coincidencias.map((coincidencia, indice) => {
          const esUltima = indice === coincidencias.length - 1;
          const texto =
            typeof coincidencia.handle.miga === 'function'
              ? coincidencia.handle.miga(coincidencia)
              : coincidencia.handle.miga;

          return (
            <li key={coincidencia.id} className={estilos.miga}>
              {esUltima ? (
                <span aria-current="page">{texto}</span>
              ) : (
                <>
                  <Link to={coincidencia.pathname}>{texto}</Link>
                  <span aria-hidden="true" className={estilos.separador}>/</span>
                </>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export default MigasDePan;

// src/datos/dominio.js — copia estática de db.json para trabajar sin API
export const bicicletas = [
  { id: 'bici-001', modelo: 'Urbana Clásica', tipo: 'urbana', estado: 'disponible', estacionId: 'est-01', precioHora: 2.5 },
  { id: 'bici-002', modelo: 'Eléctrica Pro', tipo: 'electrica', estado: 'alquilada', estacionId: 'est-01', precioHora: 4.0 },
  { id: 'bici-003', modelo: 'Carga Max', tipo: 'carga', estado: 'mantenimiento', estacionId: 'est-02', precioHora: 5.5 },
  { id: 'bici-004', modelo: 'Urbana Clásica', tipo: 'urbana', estado: 'disponible', estacionId: 'est-03', precioHora: 2.5 },
  { id: 'bici-005', modelo: 'Eléctrica Pro', tipo: 'electrica', estado: 'disponible', estacionId: 'est-02', precioHora: 4.0 }
];

export const estaciones = [
  { id: 'est-01', nombre: 'Plaza Mayor', barrio: 'Centro', plazas: 20 },
  { id: 'est-02', nombre: 'Parque Norte', barrio: 'Norte', plazas: 15 },
  { id: 'est-03', nombre: 'Estación Central', barrio: 'Ensanche', plazas: 30 }
];

export const usuarios = [
  { id: 'usr-01', nombre: 'Ana Ribera', email: '[email protected]', rol: 'cliente' },
  { id: 'usr-02', nombre: 'Marc Solé', email: '[email protected]', rol: 'operario' }
];

export const reservas = [
  { id: 'res-01', bicicletaId: 'bici-002', usuario: 'usr-01', fechaInicio: '2026-05-04T09:00', horas: 2, estado: 'activa' }
];

// src/componentes/EsqueletoPagina.jsx
import estilos from './EsqueletoPagina.module.css';

function EsqueletoPagina({ filas = 3, conCabecera = true }) {
  return (
    <div className={estilos.esqueleto} data-testid="esqueleto-pagina" aria-hidden="true">
      {conCabecera && <div className={estilos.titulo} />}
      {Array.from({ length: filas }, (_, indice) => (
        <div key={indice} className={estilos.fila} />
      ))}
    </div>
  );
}

export default EsqueletoPagina;

// El anuncio para lectores de pantalla va aparte, porque el esqueleto es aria-hidden
function IndicadorDeCarga({ texto = 'Cargando…' }) {
  return (
    <p role="status" aria-live="polite" className="visualmente-oculto">
      {texto}
    </p>
  );
}

// Mal: no dice nada
<p>No hay reservas.</p>

// Bien: explica y ofrece la salida
<div className={estilos.vacio}>
  <h2>Todavía no tienes reservas</h2>
  <p>Cuando reserves una bicicleta aparecerá aquí con su hora de inicio y su duración.</p>
  <Boton onClick={() => navegar('/')}>Ver el catálogo</Boton>
</div>

// src/paginas/PaginaCatalogo.jsx
import { useState, useMemo, useDeferredValue } from 'react';
import Panel from '../componentes/base/Panel.jsx';
import SelectorTipo from '../componentes/SelectorTipo.jsx';
import BuscadorBicicletas from '../componentes/BuscadorBicicletas.jsx';
import ListaBicicletas from '../componentes/ListaBicicletas.jsx';
import ResumenFlota from '../componentes/ResumenFlota.jsx';
import EsqueletoPagina from '../componentes/EsqueletoPagina.jsx';
import Aviso from '../componentes/Aviso.jsx';
import { bicicletas, estaciones } from '../datos/dominio.js';
import estilos from './PaginaCatalogo.module.css';

// Interruptores temporales para revisar los estados. En 11-03 los sustituyen isPending e isError
const CARGANDO = false;
const CON_ERROR = false;

function PaginaCatalogo() {
  const [tipo, setTipo] = useState('todos');
  const [termino, setTermino] = useState('');

  // El término diferido mantiene el campo fluido con listas grandes (08-03)
  const terminoDiferido = useDeferredValue(termino);

  const visibles = useMemo(() => {
    const texto = terminoDiferido.trim().toLowerCase();
    return bicicletas
      .filter((bici) => tipo === 'todos' || bici.tipo === tipo)
      .filter((bici) => bici.modelo.toLowerCase().includes(texto));
  }, [tipo, terminoDiferido]);

  if (CARGANDO) return <EsqueletoPagina filas={5} />;

  if (CON_ERROR) {
    return (
      <Aviso tono="error" titulo="No se han podido cargar las bicicletas">
        Comprueba tu conexión e inténtalo de nuevo.
      </Aviso>
    );
  }

  return (
    <>
      <h1 className={estilos.titulo}>Catálogo de bicicletas</h1>
      <p className={estilos.entradilla}>
        {visibles.length} de {bicicletas.length} bicicletas
      </p>

      <ResumenFlota bicicletas={bicicletas} />

      <Panel titulo="Filtros" nivel={2} className={estilos.filtros}>
        <SelectorTipo tipoElegido={tipo} alCambiarTipo={setTipo} />
        <BuscadorBicicletas termino={termino} alCambiarTermino={setTermino} />
      </Panel>

      {visibles.length === 0 ? (
        <div className={estilos.vacio}>
          <h2>Ninguna bicicleta coincide con la búsqueda</h2>
          <p>Prueba con otro tipo o borra el texto del buscador.</p>
        </div>
      ) : (
        <ListaBicicletas bicicletas={visibles} estaciones={estaciones} />
      )}
    </>
  );
}

export default PaginaCatalogo;

// src/componentes/SelectorTipo.jsx
import { useTransition } from 'react';
import { clases } from '../utilidades/clases.js';
import estilos from './SelectorTipo.module.css';

const TIPOS = [
  { valor: 'todos', texto: 'Todas' },
  { valor: 'urbana', texto: 'Urbana' },
  { valor: 'electrica', texto: 'Eléctrica' },
  { valor: 'carga', texto: 'De carga' }
];

function SelectorTipo({ tipoElegido, alCambiarTipo }) {
  const [pendiente, iniciarTransicion] = useTransition();

  return (
    <div
      className={clases(estilos.grupo, pendiente && estilos.pendiente)}
      role="group"
      aria-label="Filtrar por tipo de bicicleta"
    >
      {TIPOS.map((tipo) => (
        <button
          key={tipo.valor}
          type="button"
          className={clases(estilos.boton, tipoElegido === tipo.valor && estilos.activo)}
          aria-pressed={tipoElegido === tipo.valor}
          onClick={() => iniciarTransicion(() => alCambiarTipo(tipo.valor))}
        >
          {tipo.texto}
        </button>
      ))}
    </div>
  );
}

export default SelectorTipo;

// src/componentes/TarjetaBicicleta.jsx
import { memo } from 'react';
import { Link } from 'react-router';
import { EtiquetaEstado } from './base/Etiqueta.jsx';
import Boton from './base/Boton.jsx';
import estilos from './TarjetaBicicleta.module.css';

function TarjetaBicicleta({ bicicleta, estacion, alReservar }) {
  const disponible = bicicleta.estado === 'disponible';

  return (
    <article
      className={estilos.tarjeta}
      data-testid="tarjeta-bicicleta"
      data-bicicleta={bicicleta.id}
    >
      <header className={estilos.cabecera}>
        <h3 className={estilos.modelo}>
          <Link to={`/bicicletas/${bicicleta.id}`}>{bicicleta.modelo}</Link>
        </h3>
        <EtiquetaEstado estado={bicicleta.estado} />
      </header>

      <dl className={estilos.datos}>
        <div>
          <dt>Estación</dt>
          <dd>{estacion?.nombre ?? 'Sin asignar'}</dd>
        </div>
        <div>
          <dt>Precio</dt>
          <dd>{bicicleta.precioHora.toFixed(2)} €/h</dd>
        </div>
      </dl>

      <Boton
        variante="primario"
        disabled={!disponible}
        onClick={() => alReservar?.(bicicleta.id)}
        aria-label={`Reservar ${bicicleta.modelo}`}
      >
        {disponible ? 'Reservar' : 'No disponible'}
      </Boton>
    </article>
  );
}

export default memo(TarjetaBicicleta);

// src/paginas/PaginaFichaBicicleta.jsx
import { useParams, useNavigate, Link } from 'react-router';
import Panel from '../componentes/base/Panel.jsx';
import Boton from '../componentes/base/Boton.jsx';
import { EtiquetaEstado } from '../componentes/base/Etiqueta.jsx';
import { bicicletas, estaciones } from '../datos/dominio.js';
import estilos from './PaginaFichaBicicleta.module.css';

function PaginaFichaBicicleta() {
  const { bicicletaId } = useParams();
  const navegar = useNavigate();

  const bicicleta = bicicletas.find((b) => b.id === bicicletaId);

  // El identificador inexistente NO es una pantalla en blanco (H3)
  if (!bicicleta) {
    return (
      <div className={estilos.noEncontrada}>
        <h1>Esta bicicleta no existe</h1>
        <p>El identificador <code>{bicicletaId}</code> no corresponde a ninguna bicicleta.</p>
        <Link to="/">Volver al catálogo</Link>
      </div>
    );
  }

  const estacion = estaciones.find((e) => e.id === bicicleta.estacionId);
  const disponible = bicicleta.estado === 'disponible';

  return (
    <>
      <header className={estilos.cabecera}>
        <h1>{bicicleta.modelo}</h1>
        <EtiquetaEstado estado={bicicleta.estado} />
      </header>

      <div className={estilos.columnas}>
        <Panel titulo="Datos de la bicicleta" nivel={2}>
          <dl className={estilos.datos}>
            <div><dt>Identificador</dt><dd>{bicicleta.id}</dd></div>
            <div><dt>Tipo</dt><dd>{bicicleta.tipo}</dd></div>
            <div><dt>Precio por hora</dt><dd>{bicicleta.precioHora.toFixed(2)} €</dd></div>
          </dl>
        </Panel>

        <Panel titulo="Ubicación" nivel={2}>
          {estacion ? (
            <p>
              <Link to={`/estaciones/${estacion.id}`}>{estacion.nombre}</Link>
              {' · '}Barrio {estacion.barrio} · {estacion.plazas} plazas
            </p>
          ) : (
            <p>Esta bicicleta no está asignada a ninguna estación.</p>
          )}
        </Panel>
      </div>

      <div className={estilos.acciones}>
        <Boton
          disabled={!disponible}
          onClick={() => navegar(`/reservas/nueva?bicicleta=${bicicleta.id}`)}
        >
          {disponible ? 'Reservar esta bicicleta' : 'No disponible ahora mismo'}
        </Boton>
        {!disponible && (
          <p className={estilos.motivo}>
            {bicicleta.estado === 'alquilada'
              ? 'Está alquilada. Vuelve a consultarla más tarde.'
              : 'Está en mantenimiento. El equipo del taller la está revisando.'}
          </p>
        )}
      </div>
    </>
  );
}

export default PaginaFichaBicicleta;

// src/paginas/PaginaEstaciones.jsx
import TarjetaEstacion from '../componentes/TarjetaEstacion.jsx';
import { estaciones, bicicletas } from '../datos/dominio.js';
import estilos from './PaginaEstaciones.module.css';

function PaginaEstaciones() {
  return (
    <>
      <h1>Estaciones</h1>
      <p className={estilos.entradilla}>{estaciones.length} estaciones en servicio.</p>

      <ul className={estilos.rejilla}>
        {estaciones.map((estacion) => {
          const deLaEstacion = bicicletas.filter((b) => b.estacionId === estacion.id);
          return (
            <li key={estacion.id}>
              <TarjetaEstacion
                estacion={estacion}
                totalBicicletas={deLaEstacion.length}
                disponibles={deLaEstacion.filter((b) => b.estado === 'disponible').length}
              />
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default PaginaEstaciones;

// src/paginas/PaginaDetalleEstacion.jsx
import { NavLink, Outlet, useParams } from 'react-router';
import { clases } from '../utilidades/clases.js';
import { estaciones } from '../datos/dominio.js';
import estilos from './PaginaDetalleEstacion.module.css';

function PaginaDetalleEstacion() {
  const { estacionId } = useParams();
  const estacion = estaciones.find((e) => e.id === estacionId);

  if (!estacion) {
    return <h1>Esta estación no existe</h1>;
  }

  const claseEnlace = ({ isActive }) => clases(estilos.pestana, isActive && estilos.activa);

  return (
    <>
      <h1>{estacion.nombre}</h1>
      <p className={estilos.entradilla}>
        Barrio {estacion.barrio} · {estacion.plazas} plazas
      </p>

      <nav className={estilos.pestanas} aria-label="Secciones de la estación">
        <NavLink to="." end className={claseEnlace}>Flota</NavLink>
        <NavLink to="incidencias" className={claseEnlace}>Incidencias</NavLink>
      </nav>

      {/* El contenido de la pestaña activa */}
      <Outlet context={{ estacion }} />
    </>
  );
}

export default PaginaDetalleEstacion;

// src/paginas/PaginaReservas.jsx
import { useState } from 'react';
import { Link } from 'react-router';
import PanelReservas from '../componentes/PanelReservas.jsx';
import Modal from '../componentes/base/Modal.jsx';
import Boton from '../componentes/base/Boton.jsx';
import { reservas, bicicletas } from '../datos/dominio.js';
import estilos from './PaginaReservas.module.css';

function PaginaReservas() {
  // Estado local puro: qué reserva está pendiente de confirmación de cancelación
  const [reservaACancelar, setReservaACancelar] = useState(null);

  return (
    <>
      <div className={estilos.cabecera}>
        <h1>Mis reservas</h1>
        <Link to="/reservas/nueva" className={estilos.enlaceAccion}>
          Nueva reserva
        </Link>
      </div>

      {reservas.length === 0 ? (
        <div className={estilos.vacio}>
          <h2>Todavía no tienes reservas</h2>
          <p>Cuando reserves una bicicleta aparecerá aquí con su hora de inicio y su duración.</p>
          <Link to="/">Ver el catálogo</Link>
        </div>
      ) : (
        <PanelReservas
          reservas={reservas}
          bicicletas={bicicletas}
          alCancelar={setReservaACancelar}
        />
      )}

      <Modal
        abierto={reservaACancelar !== null}
        titulo="Cancelar la reserva"
        alCerrar={() => setReservaACancelar(null)}
      >
        <p>¿Seguro que quieres cancelar esta reserva? Esta acción no se puede deshacer.</p>
        <div className={estilos.accionesModal}>
          <Boton variante="secundario" onClick={() => setReservaACancelar(null)}>
            Volver
          </Boton>
          <Boton variante="peligro" onClick={() => setReservaACancelar(null)}>
            Sí, cancelar
          </Boton>
        </div>
      </Modal>
    </>
  );
}

export default PaginaReservas;

// src/componentes/PanelReservas.jsx (extracto)
<table className={estilos.tabla}>
  <caption className="visualmente-oculto">Lista de tus reservas</caption>
  <thead>
    <tr>
      <th scope="col">Bicicleta</th>
      <th scope="col">Inicio</th>
      <th scope="col">Horas</th>
      <th scope="col">Estado</th>
      <th scope="col"><span className="visualmente-oculto">Acciones</span></th>
    </tr>
  </thead>
  <tbody>
    {reservas.map((reserva) => (
      <tr key={reserva.id} data-testid="fila-reserva">
        <td>{bicicletaDe(reserva)?.modelo ?? 'Desconocida'}</td>
        <td>{formatearFecha(reserva.fechaInicio)}</td>
        <td>{reserva.horas}</td>
        <td><EtiquetaEstado estado={reserva.estado} /></td>
        <td>
          <Boton
            variante="texto"
            onClick={() => alCancelar(reserva)}
            disabled={reserva.estado === 'cancelada'}
          >
            Cancelar
          </Boton>
        </td>
      </tr>
    ))}
  </tbody>
</table>

// src/componentes/FormularioReserva.jsx
import { useState } from 'react';
import Campo from './base/Campo.jsx';
import Boton from './base/Boton.jsx';
import estilos from './FormularioReserva.module.css';

function FormularioReserva({ bicicletas, valorInicial, enviando = false, alEnviar }) {
  const [datos, setDatos] = useState(valorInicial);
  const [errores, setErrores] = useState({});

  const reservables = bicicletas.filter((b) => b.estado === 'disponible');
  const elegida = bicicletas.find((b) => b.id === datos.bicicletaId);
  const total = elegida ? elegida.precioHora * Number(datos.horas || 0) : 0;

  function manejarCambio(campo, valor) {
    setDatos((actual) => ({ ...actual, [campo]: valor }));
  }

  function manejarEnviar(evento) {
    evento.preventDefault();
    // En 11-03 aquí entra validarReserva y la mutación
    alEnviar?.(datos);
  }

  return (
    <form className={estilos.formulario} onSubmit={manejarEnviar} noValidate>
      <Campo etiqueta="Bicicleta" obligatorio error={errores.bicicletaId}>
        {(props) => (
          <select
            {...props}
            value={datos.bicicletaId}
            onChange={(e) => manejarCambio('bicicletaId', e.target.value)}
          >
            <option value="">Elige una bicicleta</option>
            {reservables.map((bici) => (
              <option key={bici.id} value={bici.id}>
                {bici.modelo} — {bici.precioHora.toFixed(2)} €/h
              </option>
            ))}
          </select>
        )}
      </Campo>

      <Campo
        etiqueta="Inicio de la reserva"
        obligatorio
        error={errores.fechaInicio}
        ayuda="No puede empezar en el pasado"
      >
        {(props) => (
          <input
            {...props}
            type="datetime-local"
            value={datos.fechaInicio}
            onChange={(e) => manejarCambio('fechaInicio', e.target.value)}
          />
        )}
      </Campo>

      <Campo etiqueta="Duración (horas)" obligatorio error={errores.horas} ayuda="Entre 1 y 24">
        {(props) => (
          <input
            {...props}
            type="number"
            min="1"
            max="24"
            value={datos.horas}
            onChange={(e) => manejarCambio('horas', e.target.value)}
          />
        )}
      </Campo>

      <Campo etiqueta="Acepto las condiciones de uso" error={errores.condiciones}>
        {(props) => (
          <input
            {...props}
            type="checkbox"
            checked={datos.condiciones}
            onChange={(e) => manejarCambio('condiciones', e.target.checked)}
          />
        )}
      </Campo>

      <p className={estilos.total} data-testid="total-reserva">
        Total estimado: <strong>{total.toFixed(2)} €</strong>
      </p>

      <Boton tipo="submit" cargando={enviando} anchoCompleto>
        Crear reserva
      </Boton>
    </form>
  );
}

export default FormularioReserva;

// src/paginas/PaginaAcceso.jsx (extracto)
function PaginaAcceso() {
  const [correo, setCorreo] = useState('');
  const [error, setError] = useState(null);

  function manejarEnviar(evento) {
    evento.preventDefault();
    // En 11-03: despacho a sliceSesion y redirección al origen
  }

  return (
    <div className={estilos.centro}>
      <h1>Acceder a CicloUrbano</h1>

      {error && (
        <div role="alert" className={estilos.error}>
          {error}
        </div>
      )}

      <form onSubmit={manejarEnviar} noValidate>
        <Campo etiqueta="Correo electrónico" obligatorio ayuda="Prueba con [email protected]">
          {(props) => (
            <input
              {...props}
              type="email"
              autoComplete="email"
              value={correo}
              onChange={(e) => setCorreo(e.target.value)}
            />
          )}
        </Campo>

        <Boton tipo="submit" anchoCompleto>Entrar</Boton>
      </form>
    </div>
  );
}

// src/componentes/RutaProtegida.jsx — versión de 11-02
import { Outlet } from 'react-router';

function RutaProtegida() {
  // TODO(11-03): comprobar la sesión real y redirigir a /acceso conservando el origen
  return <Outlet />;
}

export default RutaProtegida;

// src/paginas/PaginaTaller.jsx (extracto)
function PaginaTaller() {
  const enMantenimiento = bicicletas.filter((b) => b.estado === 'mantenimiento');
  const resto = bicicletas.filter((b) => b.estado !== 'mantenimiento');

  return (
    <>
      <h1>Taller</h1>
      <p className={estilos.entradilla}>
        Gestión del estado de la flota. Solo para personal operario.
      </p>

      <Panel titulo={`En mantenimiento (${enMantenimiento.length})`} nivel={2}>
        {enMantenimiento.length === 0 ? (
          <p>Toda la flota está operativa.</p>
        ) : (
          <ul className={estilos.lista}>
            {enMantenimiento.map((bici) => (
              <li key={bici.id}>
                {bici.modelo} <code>{bici.id}</code>
                <Boton variante="secundario" tamano="pequeno">Devolver al servicio</Boton>
              </li>
            ))}
          </ul>
        )}
      </Panel>

      <Panel titulo={`Resto de la flota (${resto.length})`} nivel={2}>
        {/* mismo patrón, con el botón "Enviar a mantenimiento" */}
      </Panel>
    </>
  );
}

// src/paginas/PaginaNoEncontrada.jsx — ruta * : la URL no existe
function PaginaNoEncontrada() {
  return (
    <div className={estilos.centro}>
      <h1>Esta página no existe</h1>
      <p>Puede que el enlace esté mal escrito o que la página se haya movido.</p>
      <Link to="/">Ir al catálogo</Link>
    </div>
  );
}

// src/paginas/PaginaSinPermisos.jsx — la URL existe, pero el rol no basta
function PaginaSinPermisos() {
  return (
    <div className={estilos.centro}>
      <h1>No tienes permiso para ver esta página</h1>
      <p>El área de taller está reservada al personal operario.</p>
      <Link to="/">Volver al catálogo</Link>
    </div>
  );
}

// src/paginas/PaginaErrorRuta.jsx — errorElement: algo ha fallado al renderizar la ruta
import { useRouteError, isRouteErrorResponse, Link } from 'react-router';
import { registrarError } from '../utilidades/monitorizacion.js';

function PaginaErrorRuta() {
  const error = useRouteError();
  registrarError(error, { origen: 'errorElement' });

  const mensaje = isRouteErrorResponse(error)
    ? `Error ${error.status}: ${error.statusText}`
    : 'Ha ocurrido un problema al mostrar esta pantalla.';

  return (
    <div className={estilos.centro} role="alert">
      <h1>Algo no ha ido bien</h1>
      <p>{mensaje}</p>
      <Link to="/">Volver al catálogo</Link>
      {import.meta.env.DEV && <pre className={estilos.detalle}>{String(error)}</pre>}
    </div>
  );
}

/* src/componentes/ListaBicicletas.module.css */
.lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espacio);
  /* Tantas columnas como quepan, con un mínimo de 260px cada una */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* src/componentes/Cabecera.module.css */
.lista {
  display: flex;
  gap: var(--espacio-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 48rem) {
  .interior {
    flex-wrap: wrap;
  }

  .navegacion {
    order: 3;
    width: 100%;
  }

  .lista {
    overflow-x: auto;          /* la navegación se desplaza en horizontal */
    scrollbar-width: none;
    padding-bottom: var(--espacio-xs);
  }
}

// src/componentes/ResumenFlota.jsx
import { memo, useMemo } from 'react';
import estilos from './ResumenFlota.module.css';

const ESTADOS = [
  { clave: 'disponible', texto: 'Disponibles', simbolo: '●' },
  { clave: 'alquilada', texto: 'Alquiladas', simbolo: '▲' },
  { clave: 'mantenimiento', texto: 'En mantenimiento', simbolo: '■' }
];

function ResumenFlota({ bicicletas }) {
  const recuento = useMemo(() => {
    return bicicletas.reduce(
      (acumulado, bici) => ({ ...acumulado, [bici.estado]: (acumulado[bici.estado] ?? 0) + 1 }),
      { disponible: 0, alquilada: 0, mantenimiento: 0 }
    );
  }, [bicicletas]);

  const total = bicicletas.length;

  // Estado vacío: sin esto habría una división por cero en el porcentaje
  if (total === 0) {
    return (
      <section className={estilos.resumen} aria-labelledby="titulo-resumen">
        <h2 id="titulo-resumen" className={estilos.titulo}>Estado de la flota</h2>
        <p>No hay bicicletas registradas.</p>
      </section>
    );
  }

  return (
    <section className={estilos.resumen} aria-labelledby="titulo-resumen">
      <h2 id="titulo-resumen" className={estilos.titulo}>Estado de la flota</h2>

      <ul className={estilos.lista}>
        {ESTADOS.map(({ clave, texto, simbolo }) => {
          const cantidad = recuento[clave];
          const porcentaje = Math.round((cantidad / total) * 100);

          return (
            <li key={clave} className={estilos.item}>
              <span className={estilos.encabezado}>
                {/* Símbolo: segunda señal además del color */}
                <span className={estilos[clave]} aria-hidden="true">{simbolo}</span>
                <span className={estilos.texto}>{texto}</span>
                <span className={estilos.cantidad}>
                  {cantidad}
                  <span className="visualmente-oculto"> de {total} bicicletas</span>
                </span>
              </span>

              {/* La barra es puramente visual: el dato ya está en el texto */}
              <div className={estilos.pista} aria-hidden="true">
                <div
                  className={`${estilos.barra} ${estilos[clave]}`}
                  style={{ inlineSize: `${porcentaje}%` }}
                />
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

export default memo(ResumenFlota);

useEffect(() => {
  if (!abierto) return;

  elementoPrevio.current = document.activeElement;
  contenedor.current?.focus();

  const overflowPrevio = document.body.style.overflow;
  document.body.style.overflow = 'hidden';

  return () => {
    document.body.style.overflow = overflowPrevio;

    const previo = elementoPrevio.current;
    // Solo si sigue existiendo Y está conectado al documento
    if (previo instanceof HTMLElement && previo.isConnected) {
      previo.focus();
    } else {
      // Respaldo: el contenido principal, que es enfocable por tabIndex={-1}
      document.getElementById('contenido')?.focus();
    }
  };
}, [abierto]);

.contenedorTabla {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla {
  width: 100%;
  min-width: 34rem;      /* por debajo, las columnas se apelmazan: mejor desplazar */
  border-collapse: collapse;
}

/* Y en móvil, columnas menos críticas fuera */
@media (max-width: 30rem) {
  .columnaHoras {
    display: none;
  }
}

// PanelReservas.jsx
<div className={estilos.contenedorTabla}>
  <table className={estilos.tabla}>…</table>
</div>

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  padding: 0.15rem var(--espacio-s);
  border-radius: 999px;
  font-size: var(--texto-s);
  font-weight: 600;
  border: 1px solid currentColor;   /* el borde da forma además de color */
}

.disponible { color: var(--color-marca); background: color-mix(in srgb, var(--color-marca) 12%, transparent); }
.alquilada { color: var(--color-alquilada); background: color-mix(in srgb, var(--color-alquilada) 12%, transparent); }
.mantenimiento { color: var(--color-mantenimiento); background: color-mix(in srgb, var(--color-mantenimiento) 12%, transparent); }

// src/componentes/SelectorTipo.jsx — variante adaptable
function SelectorTipo({ tipoElegido, alCambiarTipo, variante = 'auto' }) {
  const [pendiente, iniciarTransicion] = useTransition();

  const cambiar = (valor) => iniciarTransicion(() => alCambiarTipo(valor));

  if (variante === 'desplegable' || TIPOS.length > 6) {
    return (
      <Campo etiqueta="Tipo de bicicleta">
        {(props) => (
          <select {...props} value={tipoElegido} onChange={(e) => cambiar(e.target.value)}>
            {TIPOS.map((tipo) => (
              <option key={tipo.valor} value={tipo.valor}>{tipo.texto}</option>
            ))}
          </select>
        )}
      </Campo>
    );
  }

  return (
    <div className={clases(estilos.grupo, pendiente && estilos.pendiente)}
         role="group" aria-label="Filtrar por tipo de bicicleta">
      {TIPOS.map((tipo) => (
        <button key={tipo.valor} type="button"
                className={clases(estilos.boton, tipoElegido === tipo.valor && estilos.activo)}
                aria-pressed={tipoElegido === tipo.valor}
                onClick={() => cambiar(tipo.valor)}>
          {tipo.texto}
        </button>
      ))}
    </div>
  );
}