// src/api/cliente.js
import { URL_API } from '../configuracion.js';

const TIEMPO_ESPERA = 10_000;   // 10 s: más allá, la red se da por perdida

/**
 * Error de la capa de datos. Lleva el código HTTP para que quien lo reciba
 * pueda decidir: 404 no es lo mismo que 500 ni que un fallo de red.
 */
export class ErrorApi extends Error {
  constructor(mensaje, { estado = null, url = null, cuerpo = null } = {}) {
    super(mensaje);
    this.name = 'ErrorApi';
    this.estado = estado;
    this.url = url;
    this.cuerpo = cuerpo;
  }

  get esNoEncontrado() {
    return this.estado === 404;
  }

  get esDeRed() {
    return this.estado === null;   // nunca hubo respuesta
  }

  get esDelServidor() {
    return this.estado !== null && this.estado >= 500;
  }
}

/**
 * Envoltorio único de fetch. Todas las peticiones del proyecto pasan por aquí.
 */
export async function peticion(ruta, opciones = {}) {
  const { metodo = 'GET', cuerpo, señal, ...resto } = opciones;

  // Tiempo de espera propio: fetch no lo trae, y una petición colgada
  // deja la interfaz en "cargando" para siempre
  const controlador = new AbortController();
  const temporizador = setTimeout(() => controlador.abort(), TIEMPO_ESPERA);

  // Si quien llama trae su propia señal (TanStack Query la pasa), se combinan
  const señalFinal = señal
    ? AbortSignal.any([señal, controlador.signal])
    : controlador.signal;

  const url = `${URL_API}${ruta}`;

  try {
    const respuesta = await fetch(url, {
      method: metodo,
      signal: señalFinal,
      headers: {
        Accept: 'application/json',
        ...(cuerpo ? { 'Content-Type': 'application/json' } : {}),
        ...resto.headers
      },
      ...(cuerpo ? { body: JSON.stringify(cuerpo) } : {}),
      ...resto
    });

    if (!respuesta.ok) {
      // Se intenta leer el cuerpo del error, pero su ausencia no debe romper nada
      let detalle = null;
      try {
        detalle = await respuesta.json();
      } catch {
        detalle = null;
      }

      throw new ErrorApi(mensajePorEstado(respuesta.status), {
        estado: respuesta.status,
        url,
        cuerpo: detalle
      });
    }

    // 204 No Content: no hay cuerpo que interpretar
    if (respuesta.status === 204) return null;

    return await respuesta.json();
  } catch (error) {
    if (error instanceof ErrorApi) throw error;

    if (error.name === 'AbortError') {
      throw new ErrorApi('La petición ha tardado demasiado.', { url });
    }

    // TypeError de fetch = no hubo respuesta: sin red, DNS, CORS…
    throw new ErrorApi('No se ha podido conectar con el servidor.', { url });
  } finally {
    clearTimeout(temporizador);
  }
}

function mensajePorEstado(estado) {
  if (estado === 404) return 'El recurso solicitado no existe.';
  if (estado === 401) return 'La sesión ha caducado.';
  if (estado === 403) return 'No tienes permiso para esta operación.';
  if (estado >= 500) return 'El servidor no está respondiendo correctamente.';
  return 'La petición no se ha podido completar.';
}

// src/api/bicicletas.js
import { peticion } from './cliente.js';

export function obtenerBicicletas({ tipo, señal } = {}) {
  // json-server filtra por campo con un parámetro de consulta
  const parametros = new URLSearchParams();
  if (tipo && tipo !== 'todos') parametros.set('tipo', tipo);

  const consulta = parametros.toString();
  return peticion(`/bicicletas${consulta ? `?${consulta}` : ''}`, { señal });
}

export function obtenerBicicleta(id, { señal } = {}) {
  return peticion(`/bicicletas/${id}`, { señal });
}

export function actualizarEstadoBicicleta(id, estado) {
  return peticion(`/bicicletas/${id}`, { metodo: 'PATCH', cuerpo: { estado } });
}

// src/api/reservas.js
import { peticion } from './cliente.js';

export function obtenerReservas({ usuarioId, señal } = {}) {
  const ruta = usuarioId ? `/reservas?usuario=${usuarioId}` : '/reservas';
  return peticion(ruta, { señal });
}

export function crearReserva(datos) {
  return peticion('/reservas', { metodo: 'POST', cuerpo: datos });
}

export function actualizarReserva(id, cambios) {
  return peticion(`/reservas/${id}`, { metodo: 'PATCH', cuerpo: cambios });
}

// src/api/estaciones.js
import { peticion } from './cliente.js';

export function obtenerEstaciones({ señal } = {}) {
  return peticion('/estaciones', { señal });
}

export function obtenerEstacion(id, { señal } = {}) {
  return peticion(`/estaciones/${id}`, { señal });
}

// src/api/usuarios.js
import { peticion } from './cliente.js';

export async function buscarUsuarioPorCorreo(email) {
  // json-server devuelve un array al filtrar; aquí se normaliza a un objeto o null
  const encontrados = await peticion(`/usuarios?email=${encodeURIComponent(email)}`);
  return encontrados[0] ?? null;
}

// src/consultas/clienteConsultas.js
import { QueryClient } from '@tanstack/react-query';
import { ErrorApi } from '../api/cliente.js';

export const clienteConsultas = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      gcTime: 5 * 60_000,
      refetchOnWindowFocus: true,
      retry: (intentos, error) => {
        // Un 404 no mejora reintentando: es una respuesta correcta a una pregunta mal hecha
        if (error instanceof ErrorApi && error.estado >= 400 && error.estado < 500) {
          return false;
        }
        return intentos < 2;
      }
    },
    mutations: {
      retry: false   // reintentar un POST puede crear dos reservas
    }
  }
});

// Las estaciones cambian de mes en mes, no de minuto en minuto
export function useEstaciones() {
  return useQuery({
    queryKey: claves.estaciones.todas(),
    queryFn: ({ signal }) => obtenerEstaciones({ señal: signal }),
    staleTime: 10 * 60_000        // 10 minutos: sobrescribe el global
  });
}

// src/consultas/claves.js
export const claves = {
  bicicletas: {
    todas: () => ['bicicletas'],
    lista: (filtros) => ['bicicletas', filtros],
    detalle: (id) => ['bicicletas', 'detalle', id]
  },
  estaciones: {
    todas: () => ['estaciones'],
    detalle: (id) => ['estaciones', id],
    incidencias: (id) => ['estaciones', id, 'incidencias']
  },
  reservas: {
    todas: () => ['reservas'],
    deUsuario: (usuarioId) => ['reservas', { usuario: usuarioId }]
  }
};

// src/consultas/bicicletas.js
import { useQuery } from '@tanstack/react-query';
import { obtenerBicicletas, obtenerBicicleta } from '../api/bicicletas.js';
import { claves } from './claves.js';

export function useBicicletas(filtros = {}) {
  return useQuery({
    queryKey: claves.bicicletas.lista(filtros),
    // signal lo aporta Query: cancela la petición si el componente se desmonta
    queryFn: ({ signal }) => obtenerBicicletas({ ...filtros, señal: signal })
  });
}

export function useBicicleta(id) {
  return useQuery({
    queryKey: claves.bicicletas.detalle(id),
    queryFn: ({ signal }) => obtenerBicicleta(id, { señal: signal }),
    enabled: Boolean(id)   // sin id no se lanza la petición
  });
}

// src/consultas/reservas.js
import { useQuery } from '@tanstack/react-query';
import { obtenerReservas } from '../api/reservas.js';
import { claves } from './claves.js';

export function useReservas(usuarioId) {
  return useQuery({
    queryKey: claves.reservas.deUsuario(usuarioId),
    queryFn: ({ signal }) => obtenerReservas({ usuarioId, señal: signal }),
    enabled: Boolean(usuarioId)   // sin sesión no hay reservas que pedir
  });
}

// src/paginas/PaginaCatalogo.jsx
import { useMemo, useDeferredValue } from 'react';
import { useSearchParams } from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { useBicicletas } from '../consultas/bicicletas.js';
import { useEstaciones } from '../consultas/estaciones.js';
import { seleccionarTermino, seleccionarOrden, terminoCambiado }
  from '../funcionalidades/catalogo/sliceCatalogo.js';
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 Boton from '../componentes/base/Boton.jsx';
import estilos from './PaginaCatalogo.module.css';

function PaginaCatalogo() {
  // 1) El filtro vive en la URL
  const [parametros, setParametros] = useSearchParams();
  const tipo = parametros.get('tipo') ?? 'todos';

  // 2) El término y el orden viven en Redux
  const termino = useSelector(seleccionarTermino);
  const orden = useSelector(seleccionarOrden);
  const despachar = useDispatch();

  // 3) Los datos viven en el servidor
  const consulta = useBicicletas({ tipo });
  const { data: estaciones = [] } = useEstaciones();

  const terminoDiferido = useDeferredValue(termino);

  const visibles = useMemo(() => {
    const texto = terminoDiferido.trim().toLowerCase();
    const lista = (consulta.data ?? []).filter((bici) =>
      bici.modelo.toLowerCase().includes(texto)
    );

    return [...lista].sort((a, b) =>
      orden === 'precio' ? a.precioHora - b.precioHora : a.modelo.localeCompare(b.modelo)
    );
  }, [consulta.data, terminoDiferido, orden]);

  function manejarCambioTipo(nuevoTipo) {
    // replace: true evita llenar el historial con cada clic de filtro
    if (nuevoTipo === 'todos') {
      setParametros({}, { replace: true });
    } else {
      setParametros({ tipo: nuevoTipo }, { replace: true });
    }
  }

  if (consulta.isPending) return <EsqueletoPagina filas={5} />;

  if (consulta.isError) {
    return (
      <Aviso tono="error" titulo="No se han podido cargar las bicicletas">
        <p>{consulta.error.mensajeAmigable ?? consulta.error.message}</p>
        <Boton onClick={() => consulta.refetch()}>Reintentar</Boton>
      </Aviso>
    );
  }

  return (
    <>
      <h1 className={estilos.titulo}>Catálogo de bicicletas</h1>
      <p className={estilos.entradilla} aria-live="polite">
        {visibles.length} de {consulta.data.length} bicicletas
        {consulta.isFetching && <span className={estilos.actualizando}> · actualizando…</span>}
      </p>

      <ResumenFlota bicicletas={consulta.data} />

      <Panel titulo="Filtros" nivel={2} className={estilos.filtros}>
        <SelectorTipo tipoElegido={tipo} alCambiarTipo={manejarCambioTipo} />
        <BuscadorBicicletas
          termino={termino}
          alCambiarTermino={(valor) => despachar(terminoCambiado(valor))}
        />
      </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/consultas/reservas.js — continuación
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { crearReserva } from '../api/reservas.js';
import { claves } from './claves.js';

export function useCrearReserva() {
  const cliente = useQueryClient();

  return useMutation({
    mutationFn: crearReserva,

    onSuccess: (reservaCreada) => {
      // La lista de reservas del usuario ha cambiado
      cliente.invalidateQueries({
        queryKey: claves.reservas.deUsuario(reservaCreada.usuario)
      });
      // La bicicleta pasa a estar comprometida: el catálogo entero puede haber cambiado
      cliente.invalidateQueries({ queryKey: claves.bicicletas.todas() });
    }
  });
}

// src/paginas/PaginaNuevaReserva.jsx
import { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router';
import { useSelector } from 'react-redux';
import { useBicicletas } from '../consultas/bicicletas.js';
import { useCrearReserva } from '../consultas/reservas.js';
import { seleccionarUsuario } from '../funcionalidades/sesion/sliceSesion.js';
import { useAvisos } from '../contextos/avisos.js';
import { validarReserva } from '../utilidades/validarReserva.js';
import FormularioReserva from '../componentes/FormularioReserva.jsx';
import EsqueletoPagina from '../componentes/EsqueletoPagina.jsx';
import Aviso from '../componentes/Aviso.jsx';

function PaginaNuevaReserva() {
  const navegar = useNavigate();
  const [parametros] = useSearchParams();
  const usuario = useSelector(seleccionarUsuario);
  const { anadirAviso } = useAvisos();

  const consultaBicicletas = useBicicletas();
  const mutacion = useCrearReserva();

  const [errores, setErrores] = useState({});

  const valorInicial = {
    // Preselección desde la ficha: /reservas/nueva?bicicleta=bici-001
    bicicletaId: parametros.get('bicicleta') ?? '',
    fechaInicio: '',
    horas: 1,
    condiciones: false
  };

  function manejarEnviar(datos) {
    // 1) Validar contra los datos REALES, no contra una copia
    const erroresEncontrados = validarReserva(datos, consultaBicicletas.data ?? []);
    setErrores(erroresEncontrados);

    if (Object.keys(erroresEncontrados).length > 0) return;

    // 2) Enviar
    mutacion.mutate(
      {
        id: `res-${Date.now()}`,          // json-server acepta el id; una API real lo generaría
        bicicletaId: datos.bicicletaId,
        usuario: usuario.id,
        fechaInicio: datos.fechaInicio,
        horas: Number(datos.horas),
        estado: 'activa'
      },
      {
        // 3) Éxito: aviso y redirección
        onSuccess: () => {
          anadirAviso({ tono: 'exito', texto: 'Reserva creada correctamente.' });
          navegar('/reservas', { replace: true });
        },
        // 4) Error: aviso en línea, sin salir de la pantalla
        onError: (error) => {
          anadirAviso({
            tono: 'error',
            texto: `No se ha podido crear la reserva. ${error.message}`
          });
        }
      }
    );
  }

  if (consultaBicicletas.isPending) return <EsqueletoPagina filas={4} />;

  if (consultaBicicletas.isError) {
    return (
      <Aviso tono="error" titulo="No se ha podido cargar el catálogo">
        Sin la lista de bicicletas no se puede crear una reserva. Inténtalo de nuevo.
      </Aviso>
    );
  }

  return (
    <>
      <h1>Nueva reserva</h1>
      <FormularioReserva
        bicicletas={consultaBicicletas.data}
        valorInicial={valorInicial}
        errores={errores}
        enviando={mutacion.isPending}
        alEnviar={manejarEnviar}
      />
    </>
  );
}

export default PaginaNuevaReserva;

// src/consultas/reservas.js — continuación
export function useCancelarReserva(usuarioId) {
  const cliente = useQueryClient();
  const clave = claves.reservas.deUsuario(usuarioId);

  return useMutation({
    mutationFn: (idReserva) => actualizarReserva(idReserva, { estado: 'cancelada' }),

    onMutate: async (idReserva) => {
      // 1) Detener las consultas en vuelo: si una llega después, pisaría el cambio
      await cliente.cancelQueries({ queryKey: clave });

      // 2) Guardar la foto actual para poder revertir
      const anterior = cliente.getQueryData(clave);

      // 3) Pintar el resultado ya
      cliente.setQueryData(clave, (reservas = []) =>
        reservas.map((reserva) =>
          reserva.id === idReserva ? { ...reserva, estado: 'cancelada' } : reserva
        )
      );

      // Lo devuelto llega a onError y onSettled como "contexto"
      return { anterior };
    },

    onError: (error, idReserva, contexto) => {
      // 4) Revertir al estado exacto de antes
      if (contexto?.anterior) {
        cliente.setQueryData(clave, contexto.anterior);
      }
    },

    onSettled: () => {
      // 5) Pase lo que pase, sincronizar con el servidor
      cliente.invalidateQueries({ queryKey: clave });
      cliente.invalidateQueries({ queryKey: claves.bicicletas.todas() });
    }
  });
}

// src/funcionalidades/sesion/sliceSesion.js
import { createSlice } from '@reduxjs/toolkit';

const CLAVE_ALMACEN = 'ciclourbano:sesion';

function leerSesionGuardada() {
  try {
    const guardado = localStorage.getItem(CLAVE_ALMACEN);
    return guardado ? JSON.parse(guardado) : null;
  } catch {
    // JSON corrupto o almacenamiento bloqueado: se empieza sin sesión
    return null;
  }
}

const estadoInicial = {
  usuario: leerSesionGuardada(),
  cargando: false,
  error: null
};

const sliceSesion = createSlice({
  name: 'sesion',
  initialState: estadoInicial,
  reducers: {
    accesoIniciado(estado) {
      estado.cargando = true;
      estado.error = null;
    },
    sesionIniciada(estado, accion) {
      estado.usuario = accion.payload;
      estado.cargando = false;
      estado.error = null;
    },
    accesoFallido(estado, accion) {
      estado.usuario = null;
      estado.cargando = false;
      estado.error = accion.payload;
    },
    sesionCerrada(estado) {
      estado.usuario = null;
      estado.error = null;
    }
  }
});

export const { accesoIniciado, sesionIniciada, accesoFallido, sesionCerrada } =
  sliceSesion.actions;

// Selectores: el slice es el único que conoce la forma del estado
export const seleccionarUsuario = (estado) => estado.sesion.usuario;
export const seleccionarEstaIdentificado = (estado) => estado.sesion.usuario !== null;
export const seleccionarEsOperario = (estado) => estado.sesion.usuario?.rol === 'operario';
export const seleccionarCargandoSesion = (estado) => estado.sesion.cargando;
export const seleccionarErrorSesion = (estado) => estado.sesion.error;

export default sliceSesion.reducer;

// src/almacen/persistenciaSesion.js
const CLAVE_ALMACEN = 'ciclourbano:sesion';

export const persistenciaSesion = (almacen) => (siguiente) => (accion) => {
  const resultado = siguiente(accion);

  // Solo reacciona a las acciones de sesión: no escribe en cada tecla del buscador
  if (accion.type.startsWith('sesion/')) {
    const usuario = almacen.getState().sesion.usuario;
    try {
      if (usuario) {
        localStorage.setItem(CLAVE_ALMACEN, JSON.stringify(usuario));
      } else {
        localStorage.removeItem(CLAVE_ALMACEN);
      }
    } catch {
      // Modo privado o cuota llena: la aplicación sigue funcionando sin persistencia
    }
  }

  return resultado;
};

// src/almacen/almacen.js
import { configureStore } from '@reduxjs/toolkit';
import reductorSesion from '../funcionalidades/sesion/sliceSesion.js';
import reductorCatalogo from '../funcionalidades/catalogo/sliceCatalogo.js';
import reductorReservas from '../funcionalidades/reservas/sliceReservas.js';
import { persistenciaSesion } from './persistenciaSesion.js';

export const almacen = configureStore({
  reducer: {
    sesion: reductorSesion,
    catalogo: reductorCatalogo,
    reservas: reductorReservas
  },
  middleware: (obtenerPorDefecto) => obtenerPorDefecto().concat(persistenciaSesion)
});

// src/paginas/PaginaAcceso.jsx (extracto de la lógica)
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router';
import { buscarUsuarioPorCorreo } from '../api/usuarios.js';
import { accesoIniciado, sesionIniciada, accesoFallido, seleccionarCargandoSesion, seleccionarErrorSesion }
  from '../funcionalidades/sesion/sliceSesion.js';

function PaginaAcceso() {
  const [correo, setCorreo] = useState('');
  const despachar = useDispatch();
  const navegar = useNavigate();
  const location = useLocation();
  const cargando = useSelector(seleccionarCargandoSesion);
  const error = useSelector(seleccionarErrorSesion);

  // A dónde volver: lo dejó RutaProtegida al expulsar
  const destino = location.state?.desde?.pathname ?? '/';

  async function manejarEnviar(evento) {
    evento.preventDefault();
    despachar(accesoIniciado());

    try {
      const usuario = await buscarUsuarioPorCorreo(correo.trim());

      if (!usuario) {
        despachar(accesoFallido('No hay ninguna cuenta con ese correo.'));
        return;
      }

      despachar(sesionIniciada(usuario));
      navegar(destino, { replace: true });
    } catch (fallo) {
      despachar(accesoFallido(fallo.message));
    }
  }
  // …el marcado es el de 11-02, con cargando y error conectados
}

// src/funcionalidades/catalogo/sliceCatalogo.js
import { createSlice } from '@reduxjs/toolkit';

const sliceCatalogo = createSlice({
  name: 'catalogo',
  initialState: { termino: '', orden: 'modelo' },
  reducers: {
    terminoCambiado(estado, accion) {
      estado.termino = accion.payload;
    },
    ordenCambiado(estado, accion) {
      estado.orden = accion.payload;
    },
    filtrosReiniciados(estado) {
      estado.termino = '';
      estado.orden = 'modelo';
    }
  }
});

export const { terminoCambiado, ordenCambiado, filtrosReiniciados } = sliceCatalogo.actions;

export const seleccionarTermino = (estado) => estado.catalogo.termino;
export const seleccionarOrden = (estado) => estado.catalogo.orden;

export default sliceCatalogo.reducer;

// src/contextos/avisos.jsx
import { createContext, useContext, useState, useCallback, useMemo, useRef } from 'react';

const ContextoEstadoAvisos = createContext(null);
const ContextoAccionesAvisos = createContext(null);

export function ProveedorAvisos({ children }) {
  const [avisos, setAvisos] = useState([]);
  const siguienteId = useRef(1);

  const anadirAviso = useCallback(({ tono = 'info', texto, duracion = 5000 }) => {
    const id = siguienteId.current++;
    setAvisos((actuales) => [...actuales, { id, tono, texto }]);

    if (duracion > 0) {
      setTimeout(() => {
        setAvisos((actuales) => actuales.filter((aviso) => aviso.id !== id));
      }, duracion);
    }

    return id;
  }, []);

  const quitarAviso = useCallback((id) => {
    setAvisos((actuales) => actuales.filter((aviso) => aviso.id !== id));
  }, []);

  // Las acciones NUNCA cambian de identidad: los emisores no se repintan jamás
  const acciones = useMemo(() => ({ anadirAviso, quitarAviso }), [anadirAviso, quitarAviso]);

  return (
    <ContextoAccionesAvisos.Provider value={acciones}>
      <ContextoEstadoAvisos.Provider value={avisos}>
        {children}
      </ContextoEstadoAvisos.Provider>
    </ContextoAccionesAvisos.Provider>
  );
}

export function useAvisos() {
  const contexto = useContext(ContextoAccionesAvisos);
  if (!contexto) throw new Error('useAvisos debe usarse dentro de ProveedorAvisos.');
  return contexto;
}

export function useListaAvisos() {
  const contexto = useContext(ContextoEstadoAvisos);
  if (contexto === null) throw new Error('useListaAvisos debe usarse dentro de ProveedorAvisos.');
  return contexto;
}

// src/componentes/ListaAvisos.jsx
import { memo } from 'react';
import { useListaAvisos, useAvisos } from '../contextos/avisos.jsx';
import estilos from './ListaAvisos.module.css';

function ListaAvisos() {
  const avisos = useListaAvisos();
  const { quitarAviso } = useAvisos();

  if (avisos.length === 0) return null;

  return (
    <div className={estilos.lista}>
      {avisos.map((aviso) => (
        <div
          key={aviso.id}
          className={`${estilos.aviso} ${estilos[aviso.tono]}`}
          data-testid="aviso"
          /* Los errores interrumpen; el resto espera su turno */
          role={aviso.tono === 'error' ? 'alert' : 'status'}
        >
          <p>{aviso.texto}</p>
          <button type="button" onClick={() => quitarAviso(aviso.id)} aria-label="Cerrar aviso">
            ×
          </button>
        </div>
      ))}
    </div>
  );
}

export default memo(ListaAvisos);

const TIPOS_VALIDOS = ['todos', 'urbana', 'electrica', 'carga'];

const tipoBruto = parametros.get('tipo') ?? 'todos';
const tipo = TIPOS_VALIDOS.includes(tipoBruto) ? tipoBruto : 'todos';

// src/componentes/RutaProtegida.jsx
import { Navigate, Outlet, useLocation } from 'react-router';
import { useSelector } from 'react-redux';
import { seleccionarUsuario, seleccionarCargandoSesion }
  from '../funcionalidades/sesion/sliceSesion.js';
import EsqueletoPagina from './EsqueletoPagina.jsx';

function RutaProtegida() {
  const usuario = useSelector(seleccionarUsuario);
  const cargando = useSelector(seleccionarCargandoSesion);
  const location = useLocation();

  // Mientras no se sabe si hay sesión, NO se decide nada
  if (cargando) return <EsqueletoPagina filas={3} />;

  if (!usuario) {
    // state.desde: PaginaAcceso lo usa para volver aquí tras identificarse
    return <Navigate to="/acceso" replace state={{ desde: location }} />;
  }

  return <Outlet />;
}

export default RutaProtegida;

// src/componentes/RequiereRol.jsx
import { Navigate, Outlet } from 'react-router';
import { useSelector } from 'react-redux';
import { seleccionarUsuario } from '../funcionalidades/sesion/sliceSesion.js';

function RequiereRol({ rol }) {
  const usuario = useSelector(seleccionarUsuario);

  // Sin permiso NO se redirige a /acceso: la persona ya está identificada.
  // Mandarla al acceso sugeriría que el problema es de sesión, y no lo es.
  if (usuario?.rol !== rol) {
    return <Navigate to="/sin-permisos" replace />;
  }

  return <Outlet />;
}

export default RequiereRol;

// src/api/cliente.js — añadido al manejo de errores
import { almacen } from '../almacen/almacen.js';
import { sesionCerrada } from '../funcionalidades/sesion/sliceSesion.js';

if (respuesta.status === 401) {
  almacen.dispatch(sesionCerrada());
  // El enrutador reaccionará: RutaProtegida verá usuario === null y redirigirá
}

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { RouterProvider } from 'react-router';

import { almacen } from './almacen/almacen.js';
import { clienteConsultas } from './consultas/clienteConsultas.js';
import { router } from './rutas.jsx';
import LimiteDeError from './componentes/LimiteDeError.jsx';
import { Proveedores } from './contextos/Proveedores.jsx';
import { registrarError } from './utilidades/monitorizacion.js';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <LimiteDeError titulo="CicloUrbano no está disponible ahora mismo" alRegistrar={registrarError}>
      <QueryClientProvider client={clienteConsultas}>
        <Provider store={almacen}>
          <Proveedores>
            <RouterProvider router={router} />
          </Proveedores>
        </Provider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </LimiteDeError>
  </StrictMode>
);

// src/contextos/Proveedores.jsx
import { ProveedorTema } from './ProveedorTema.jsx';
import { ProveedorAvisos } from './avisos.jsx';

export function Proveedores({ children }) {
  return (
    <ProveedorTema>
      <ProveedorAvisos>{children}</ProveedorAvisos>
    </ProveedorTema>
  );
}

// src/consultas/bicicletas.js — continuación
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { actualizarEstadoBicicleta } from '../api/bicicletas.js';

export function useCambiarEstadoBicicleta() {
  const cliente = useQueryClient();

  return useMutation({
    mutationFn: ({ id, estado }) => actualizarEstadoBicicleta(id, estado),

    onMutate: async ({ id, estado }) => {
      // 1) Detener TODAS las consultas de bicicletas, listas y detalles
      await cliente.cancelQueries({ queryKey: claves.bicicletas.todas() });

      // 2) Foto de todas las entradas afectadas: hay varias listas (una por tipo)
      const listasAnteriores = cliente.getQueriesData({ queryKey: claves.bicicletas.todas() });

      // 3) Actualizar cada lista en caché
      cliente.setQueriesData({ queryKey: claves.bicicletas.todas() }, (datos) => {
        if (!Array.isArray(datos)) return datos;   // el detalle no es un array
        return datos.map((bici) => (bici.id === id ? { ...bici, estado } : bici));
      });

      // 4) Y la ficha individual, si está en caché
      cliente.setQueryData(claves.bicicletas.detalle(id), (bici) =>
        bici ? { ...bici, estado } : bici
      );

      return { listasAnteriores, id };
    },

    onError: (error, variables, contexto) => {
      // Reversión completa: se restaura cada entrada con su clave original
      contexto?.listasAnteriores?.forEach(([clave, datos]) => {
        cliente.setQueryData(clave, datos);
      });
    },

    onSettled: (datos, error, variables) => {
      cliente.invalidateQueries({ queryKey: claves.bicicletas.todas() });
      cliente.invalidateQueries({ queryKey: claves.bicicletas.detalle(variables.id) });
    }
  });
}

// src/paginas/PaginaTaller.jsx (extracto)
function PaginaTaller() {
  const consulta = useBicicletas();
  const mutacion = useCambiarEstadoBicicleta();
  const { anadirAviso } = useAvisos();

  function manejarCambio(bicicleta, nuevoEstado) {
    mutacion.mutate(
      { id: bicicleta.id, estado: nuevoEstado },
      {
        onSuccess: () =>
          anadirAviso({
            tono: 'exito',
            texto: `${bicicleta.modelo} ahora está ${nuevoEstado === 'mantenimiento' ? 'en mantenimiento' : 'disponible'}.`
          }),
        onError: (error) =>
          anadirAviso({ tono: 'error', texto: `No se ha podido actualizar. ${error.message}` })
      }
    );
  }

  if (consulta.isPending) return <EsqueletoPagina filas={4} />;
  // …resto del marcado de 11-02, con onClick={() => manejarCambio(bici, 'mantenimiento')}
}

return useMutation({
  scope: { id: 'estado-bicicletas' },   // se encolan, no se solapan
  mutationFn: ({ id, estado }) => actualizarEstadoBicicleta(id, estado),
  // …
});

const consulta = useBicicletas({ tipo });

// Si se quiere conservar la lista anterior durante el cambio de filtro,
// hay que DECIRLO en la interfaz, no dejar que parezca el resultado final
const mostrandoAnterior = consulta.isPlaceholderData;

<ul className={clases(estilos.lista, mostrandoAnterior && estilos.atenuada)} aria-busy={mostrandoAnterior}>

export function useBicicletas(filtros = {}) {
  const cliente = useQueryClient();

  return useQuery({
    queryKey: claves.bicicletas.lista(filtros),
    queryFn: ({ signal }) => obtenerBicicletas({ ...filtros, señal: signal }),
    placeholderData: () => {
      // Si la lista completa está en caché, se filtra en cliente como valor provisional
      const todas = cliente.getQueryData(claves.bicicletas.lista({}));
      if (!todas || !filtros.tipo || filtros.tipo === 'todos') return undefined;
      return todas.filter((bici) => bici.tipo === filtros.tipo);
    }
  });
}

// src/funcionalidades/sesion/sliceSesion.js — añadidos
const estadoInicial = {
  usuario: leerSesionGuardada(),
  cargando: false,
  error: null,
  caducada: false          // hay usuario en memoria, pero el servidor ya no lo acepta
};

// dentro de reducers:
sesionCaducada(estado) {
  estado.caducada = true;   // el usuario NO se borra: se necesita para volver
},
sesionRenovada(estado, accion) {
  estado.usuario = accion.payload;
  estado.caducada = false;
},

export const seleccionarSesionCaducada = (estado) => estado.sesion.caducada;

// src/consultas/clienteConsultas.js — manejador global
import { QueryClient, QueryCache, MutationCache } from '@tanstack/react-query';
import { almacen } from '../almacen/almacen.js';
import { sesionCaducada } from '../funcionalidades/sesion/sliceSesion.js';
import { ErrorApi } from '../api/cliente.js';

function manejarErrorGlobal(error) {
  if (error instanceof ErrorApi && error.estado === 401) {
    // Idempotente: aunque fallen cinco peticiones, el estado queda igual
    almacen.dispatch(sesionCaducada());
  }
}

export const clienteConsultas = new QueryClient({
  queryCache: new QueryCache({ onError: manejarErrorGlobal }),
  mutationCache: new MutationCache({ onError: manejarErrorGlobal }),
  defaultOptions: { /* …los del apartado 5… */ }
});

// src/componentes/AvisoSesionCaducada.jsx
import { useSelector, useDispatch } from 'react-redux';
import { useLocation, useNavigate } from 'react-router';
import { seleccionarSesionCaducada, sesionCerrada } from '../funcionalidades/sesion/sliceSesion.js';
import Modal from './base/Modal.jsx';
import Boton from './base/Boton.jsx';

function AvisoSesionCaducada() {
  const caducada = useSelector(seleccionarSesionCaducada);
  const location = useLocation();
  const navegar = useNavigate();
  const despachar = useDispatch();

  if (!caducada) return null;

  return (
    <Modal abierto titulo="Tu sesión ha caducado" alCerrar={() => {}}>
      <p>
        Por seguridad, la sesión se ha cerrado tras un periodo de inactividad.
        Vuelve a identificarte para continuar donde estabas.
      </p>
      <div>
        <Boton
          onClick={() => navegar('/acceso', { state: { desde: location }, replace: false })}
        >
          Volver a identificarme
        </Boton>
        <Boton
          variante="secundario"
          onClick={() => {
            despachar(sesionCerrada());
            navegar('/', { replace: true });
          }}
        >
          Salir
        </Boton>
      </div>
    </Modal>
  );
}

export default AvisoSesionCaducada;