// src/api/client.js
import { URL_API } from '../configuracio.js';

const TEMPS_ESPERA = 10_000;   // 10 s: més enllà, la xarxa es dona per perduda

/**
 * Error de la capa de dades. Porta el codi HTTP perquè qui el rebi
 * pugui decidir: 404 no és el mateix que 500 ni que una fallada de xarxa.
 */
export class ErrorApi extends Error {
  constructor(missatge, { estat = null, url = null, cos = null } = {}) {
    super(missatge);
    this.name = 'ErrorApi';
    this.estat = estat;
    this.url = url;
    this.cos = cos;
  }

  get esNoTrobat() {
    return this.estat === 404;
  }

  get esDeXarxa() {
    return this.estat === null;   // mai hi va haver resposta
  }

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

/**
 * Embolcall únic de fetch. Totes les peticions del projecte hi passen.
 */
export async function peticio(ruta, opcions = {}) {
  const { metode = 'GET', cos, senyal, ...resta } = opcions;

  // Temporitzador propi: fetch no el porta, i una petició penjada
  // deixa la interfície en "carregant" per sempre
  const controlador = new AbortController();
  const temporitzador = setTimeout(() => controlador.abort(), TEMPS_ESPERA);

  // Si qui truca porta la seva pròpia senyal (TanStack Query la passa), es combinen
  const senyalFinal = senyal
    ? AbortSignal.any([senyal, controlador.signal])
    : controlador.signal;

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

  try {
    const resposta = await fetch(url, {
      method: metode,
      signal: senyalFinal,
      headers: {
        Accept: 'application/json',
        ...(cos ? { 'Content-Type': 'application/json' } : {}),
        ...resta.headers
      },
      ...(cos ? { body: JSON.stringify(cos) } : {}),
      ...resta
    });

    if (!resposta.ok) {
      // S'intenta llegir el cos de l'error, però la seva absència no ha de trencar res
      let detall = null;
      try {
        detall = await resposta.json();
      } catch {
        detall = null;
      }

      throw new ErrorApi(missatgePerEstat(resposta.status), {
        estat: resposta.status,
        url,
        cos: detall
      });
    }

    // 204 No Content: no hi ha cos a interpretar
    if (resposta.status === 204) return null;

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

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

    // TypeError de fetch = no hi va haver resposta: sense xarxa, DNS, CORS…
    throw new ErrorApi('No s\'ha pogut connectar amb el servidor.', { url });
  } finally {
    clearTimeout(temporitzador);
  }
}

function missatgePerEstat(estat) {
  if (estat === 404) return 'El recurs sol·licitat no existeix.';
  if (estat === 401) return 'La sessió ha caducat.';
  if (estat === 403) return 'No tens permís per a aquesta operació.';
  if (estat >= 500) return 'El servidor no està responent correctament.';
  return 'La petició no s\'ha pogut completar.';
}

// src/api/bicicletes.js
import { peticio } from './client.js';

export function obtenirBicicletes({ tipus, senyal } = {}) {
  // json-server filtra per camp amb un paràmetre de consulta
  const parametres = new URLSearchParams();
  if (tipus && tipus !== 'todos') parametres.set('tipus', tipus);

  const consulta = parametres.toString();
  return peticio(`/bicicletas${consulta ? `?${consulta}` : ''}`, { senyal });
}

export function obtenirBicicleta(id, { senyal } = {}) {
  return peticio(`/bicicletas/${id}`, { senyal });
}

export function actualitzarEstatBicicleta(id, estat) {
  return peticio(`/bicicletas/${id}`, { metode: 'PATCH', cos: { estat } });
}

// src/api/reserves.js
import { peticio } from './client.js';

export function obtenirReserves({ usuariId, senyal } = {}) {
  const ruta = usuariId ? `/reservas?usuari=${usuariId}` : '/reservas';
  return peticio(ruta, { senyal });
}

export function crearReserva(dades) {
  return peticio('/reservas', { metode: 'POST', cos: dades });
}

export function actualitzarReserva(id, canvis) {
  return peticio(`/reservas/${id}`, { metode: 'PATCH', cos: canvis });
}

// src/api/estacions.js
import { peticio } from './client.js';

export function obtenirEstacions({ senyal } = {}) {
  return peticio('/estaciones', { senyal });
}

export function obtenirEstacio(id, { senyal } = {}) {
  return peticio(`/estaciones/${id}`, { senyal });
}

// src/api/usuaris.js
import { peticio } from './client.js';

export async function cercarUsuariPerEmail(email) {
  // json-server retorna un array en filtrar; aquí es normalitza a un objecte o null
  const trobats = await peticio(`/usuarios?email=${encodeURIComponent(email)}`);
  return trobats[0] ?? null;
}

// src/consultes/clientConsultes.js
import { QueryClient } from '@tanstack/react-query';
import { ErrorApi } from '../api/client.js';

export const clientConsultes = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      gcTime: 5 * 60_000,
      refetchOnWindowFocus: true,
      retry: (intents, error) => {
        // Un 404 no millora reintentant: és una resposta correcta a una pregunta mal feta
        if (error instanceof ErrorApi && error.estat >= 400 && error.estat < 500) {
          return false;
        }
        return intents < 2;
      }
    },
    mutations: {
      retry: false   // reintentar un POST pot crear dues reserves
    }
  }
});

// Les estacions canvien de mes en mes, no de minut en minut
export function useEstacions() {
  return useQuery({
    queryKey: claus.estacions.totes(),
    queryFn: ({ signal }) => obtenirEstacions({ senyal: signal }),
    staleTime: 10 * 60_000        // 10 minuts: sobreescriu el global
  });
}

// src/consultes/claus.js
export const claus = {
  bicicletes: {
    totes: () => ['bicicletes'],
    llista: (filtres) => ['bicicletes', filtres],
    detall: (id) => ['bicicletes', 'detall', id]
  },
  estacions: {
    totes: () => ['estacions'],
    detall: (id) => ['estacions', id],
    incidencies: (id) => ['estacions', id, 'incidencies']
  },
  reserves: {
    totes: () => ['reserves'],
    deUsuari: (usuariId) => ['reserves', { usuari: usuariId }]
  }
};

// src/consultes/bicicletes.js
import { useQuery } from '@tanstack/react-query';
import { obtenirBicicletes, obtenirBicicleta } from '../api/bicicletes.js';
import { claus } from './claus.js';

export function useBicicletes(filtres = {}) {
  return useQuery({
    queryKey: claus.bicicletes.llista(filtres),
    // signal l'aporta Query: cancel·la la petició si el component es desmunta
    queryFn: ({ signal }) => obtenirBicicletes({ ...filtres, senyal: signal })
  });
}

export function useBicicleta(id) {
  return useQuery({
    queryKey: claus.bicicletes.detall(id),
    queryFn: ({ signal }) => obtenirBicicleta(id, { senyal: signal }),
    enabled: Boolean(id)   // sense id no es llança la petició
  });
}

// src/consultes/reserves.js
import { useQuery } from '@tanstack/react-query';
import { obtenirReserves } from '../api/reserves.js';
import { claus } from './claus.js';

export function useReserves(usuariId) {
  return useQuery({
    queryKey: claus.reserves.deUsuari(usuariId),
    queryFn: ({ signal }) => obtenirReserves({ usuariId, senyal: signal }),
    enabled: Boolean(usuariId)   // sense sessió no hi ha reserves a demanar
  });
}

// src/pagines/PaginaCataleg.jsx
import { useMemo, useDeferredValue } from 'react';
import { useSearchParams } from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { useBicicletes } from '../consultes/bicicletes.js';
import { useEstacions } from '../consultes/estacions.js';
import { seleccionarTerme, seleccionarOrdre, termeCanviat }
  from '../funcionalitats/cataleg/sliceCataleg.js';
import Panell from '../components/base/Panell.jsx';
import SelectorTipus from '../components/SelectorTipus.jsx';
import CercadorBicicletes from '../components/CercadorBicicletes.jsx';
import LlistaBicicletes from '../components/LlistaBicicletes.jsx';
import ResumFlota from '../components/ResumFlota.jsx';
import EsqueletPagina from '../components/EsqueletPagina.jsx';
import Avis from '../components/Avis.jsx';
import Boto from '../components/base/Boto.jsx';
import estils from './PaginaCataleg.module.css';

function PaginaCataleg() {
  // 1) El filtre viu a la URL
  const [parametres, setParametres] = useSearchParams();
  const tipus = parametres.get('tipo') ?? 'todos';

  // 2) El terme i l'ordre viuen a Redux
  const terme = useSelector(seleccionarTerme);
  const ordre = useSelector(seleccionarOrdre);
  const despatxar = useDispatch();

  // 3) Les dades viuen al servidor
  const consulta = useBicicletes({ tipus });
  const { data: estacions = [] } = useEstacions();

  const termeDiferit = useDeferredValue(terme);

  const visibles = useMemo(() => {
    const text = termeDiferit.trim().toLowerCase();
    const llista = (consulta.data ?? []).filter((bici) =>
      bici.model.toLowerCase().includes(text)
    );

    return [...llista].sort((a, b) =>
      ordre === 'preu' ? a.preuHora - b.preuHora : a.model.localeCompare(b.model)
    );
  }, [consulta.data, termeDiferit, ordre]);

  function gestionarCanviTipus(tipusNou) {
    // replace: true evita omplir l'historial amb cada clic de filtre
    if (tipusNou === 'todos') {
      setParametres({}, { replace: true });
    } else {
      setParametres({ tipo: tipusNou }, { replace: true });
    }
  }

  if (consulta.isPending) return <EsqueletPagina files={5} />;

  if (consulta.isError) {
    return (
      <Avis to="error" titol="No s'han pogut carregar les bicicletes">
        <p>{consulta.error.missatgeAmigable ?? consulta.error.message}</p>
        <Boto onClick={() => consulta.refetch()}>Reintentar</Boto>
      </Avis>
    );
  }

  return (
    <>
      <h1 className={estils.titol}>Catàleg de bicicletes</h1>
      <p className={estils.entradeta} aria-live="polite">
        {visibles.length} de {consulta.data.length} bicicletes
        {consulta.isFetching && <span className={estils.actualitzant}> · actualitzant…</span>}
      </p>

      <ResumFlota bicicletes={consulta.data} />

      <Panell titol="Filtres" nivell={2} className={estils.filtres}>
        <SelectorTipus tipusEscollit={tipus} alCanviarTipus={gestionarCanviTipus} />
        <CercadorBicicletes
          terme={terme}
          alCercar={(valor) => despatxar(termeCanviat(valor))}
        />
      </Panell>

      {visibles.length === 0 ? (
        <div className={estils.buit}>
          <h2>Cap bicicleta coincideix amb la cerca</h2>
          <p>Prova amb un altre tipus o esborra el text del cercador.</p>
        </div>
      ) : (
        <LlistaBicicletes bicicletes={visibles} estacions={estacions} />
      )}
    </>
  );
}

export default PaginaCataleg;

// src/consultes/reserves.js — continuació
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { crearReserva } from '../api/reserves.js';
import { claus } from './claus.js';

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

  return useMutation({
    mutationFn: crearReserva,

    onSuccess: (reservaCreada) => {
      // La llista de reserves de l'usuari ha canviat
      client.invalidateQueries({
        queryKey: claus.reserves.deUsuari(reservaCreada.usuari)
      });
      // La bicicleta passa a estar compromesa: el catàleg sencer pot haver canviat
      client.invalidateQueries({ queryKey: claus.bicicletes.totes() });
    }
  });
}

// src/pagines/PaginaNovaReserva.jsx
import { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router';
import { useSelector } from 'react-redux';
import { useBicicletes } from '../consultes/bicicletes.js';
import { useCrearReserva } from '../consultes/reserves.js';
import { seleccionarUsuari } from '../funcionalitats/sessio/sliceSessio.js';
import { useAvisos } from '../contextos/avisos.js';
import { validarReserva } from '../utilitats/validarReserva.js';
import FormulariReserva from '../components/FormulariReserva.jsx';
import EsqueletPagina from '../components/EsqueletPagina.jsx';
import Avis from '../components/Avis.jsx';

function PaginaNovaReserva() {
  const navegar = useNavigate();
  const [parametres] = useSearchParams();
  const usuari = useSelector(seleccionarUsuari);
  const { afegirAvis } = useAvisos();

  const consultaBicicletes = useBicicletes();
  const mutacio = useCrearReserva();

  const [errors, setErrors] = useState({});

  const valorInicial = {
    // Preselecció des de la fitxa: /reservas/nueva?bicicleta=bici-001
    bicicletaId: parametres.get('bicicleta') ?? '',
    dataInici: '',
    hores: 1,
    condicions: false
  };

  function gestionarEnviar(dades) {
    // 1) Validar contra les dades REALS, no contra una còpia
    const errorsTrobats = validarReserva(dades, consultaBicicletes.data ?? []);
    setErrors(errorsTrobats);

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

    // 2) Enviar
    mutacio.mutate(
      {
        id: `res-${Date.now()}`,          // json-server accepta l'id; una API real el generaria
        bicicletaId: dades.bicicletaId,
        usuari: usuari.id,
        dataInici: dades.dataInici,
        hores: Number(dades.hores),
        estat: 'activa'
      },
      {
        // 3) Èxit: avís i redirecció
        onSuccess: () => {
          afegirAvis({ to: 'exit', text: 'Reserva creada correctament.' });
          navegar('/reservas', { replace: true });
        },
        // 4) Error: avís en línia, sense sortir de la pantalla
        onError: (error) => {
          afegirAvis({
            to: 'error',
            text: `No s'ha pogut crear la reserva. ${error.message}`
          });
        }
      }
    );
  }

  if (consultaBicicletes.isPending) return <EsqueletPagina files={4} />;

  if (consultaBicicletes.isError) {
    return (
      <Avis to="error" titol="No s'ha pogut carregar el catàleg">
        Sense la llista de bicicletes no es pot crear una reserva. Torna-ho a provar.
      </Avis>
    );
  }

  return (
    <>
      <h1>Nova reserva</h1>
      <FormulariReserva
        bicicletes={consultaBicicletes.data}
        valorInicial={valorInicial}
        errors={errors}
        enviant={mutacio.isPending}
        alEnviar={gestionarEnviar}
      />
    </>
  );
}

export default PaginaNovaReserva;

// src/consultes/reserves.js — continuació
export function useCancellarReserva(usuariId) {
  const client = useQueryClient();
  const clau = claus.reserves.deUsuari(usuariId);

  return useMutation({
    mutationFn: (idReserva) => actualitzarReserva(idReserva, { estat: 'cancelada' }),

    onMutate: async (idReserva) => {
      // 1) Aturar les consultes en curs: si una arriba després, trepitjaria el canvi
      await client.cancelQueries({ queryKey: clau });

      // 2) Desar la foto actual per poder revertir
      const anterior = client.getQueryData(clau);

      // 3) Pintar el resultat ja
      client.setQueryData(clau, (reserves = []) =>
        reserves.map((reserva) =>
          reserva.id === idReserva ? { ...reserva, estat: 'cancelada' } : reserva
        )
      );

      // El que es retorna arriba a onError i onSettled com a "context"
      return { anterior };
    },

    onError: (error, idReserva, context) => {
      // 4) Revertir a l'estat exacte d'abans
      if (context?.anterior) {
        client.setQueryData(clau, context.anterior);
      }
    },

    onSettled: () => {
      // 5) Passi el que passi, sincronitzar amb el servidor
      client.invalidateQueries({ queryKey: clau });
      client.invalidateQueries({ queryKey: claus.bicicletes.totes() });
    }
  });
}

// src/funcionalitats/sessio/sliceSessio.js
import { createSlice } from '@reduxjs/toolkit';

const CLAU_MAGATZEM = 'ciclourbano:sesion';

function llegirSessioDesada() {
  try {
    const desat = localStorage.getItem(CLAU_MAGATZEM);
    return desat ? JSON.parse(desat) : null;
  } catch {
    // JSON corrupte o emmagatzematge bloquejat: es comença sense sessió
    return null;
  }
}

const estatInicial = {
  usuari: llegirSessioDesada(),
  carregant: false,
  error: null
};

const sliceSessio = createSlice({
  name: 'sessio',
  initialState: estatInicial,
  reducers: {
    accesIniciat(estat) {
      estat.carregant = true;
      estat.error = null;
    },
    sessioIniciada(estat, accio) {
      estat.usuari = accio.payload;
      estat.carregant = false;
      estat.error = null;
    },
    accesFallit(estat, accio) {
      estat.usuari = null;
      estat.carregant = false;
      estat.error = accio.payload;
    },
    sessioTancada(estat) {
      estat.usuari = null;
      estat.error = null;
    }
  }
});

export const { accesIniciat, sessioIniciada, accesFallit, sessioTancada } =
  sliceSessio.actions;

// Selectors: el slice és l'únic que coneix la forma de l'estat
export const seleccionarUsuari = (estat) => estat.sessio.usuari;
export const seleccionarEstaIdentificat = (estat) => estat.sessio.usuari !== null;
export const seleccionarEsOperari = (estat) => estat.sessio.usuari?.rol === 'operario';
export const seleccionarCarregantSessio = (estat) => estat.sessio.carregant;
export const seleccionarErrorSessio = (estat) => estat.sessio.error;

export default sliceSessio.reducer;

// src/magatzem/persistenciaSessio.js
const CLAU_MAGATZEM = 'ciclourbano:sesion';

export const persistenciaSessio = (magatzem) => (seguent) => (accio) => {
  const resultat = seguent(accio);

  // Només reacciona a les accions de sessió: no escriu a cada tecla del cercador
  if (accio.type.startsWith('sessio/')) {
    const usuari = magatzem.getState().sessio.usuari;
    try {
      if (usuari) {
        localStorage.setItem(CLAU_MAGATZEM, JSON.stringify(usuari));
      } else {
        localStorage.removeItem(CLAU_MAGATZEM);
      }
    } catch {
      // Mode privat o quota plena: l'aplicació continua funcionant sense persistència
    }
  }

  return resultat;
resultat;
};

// src/magatzem/magatzem.js
import { configureStore } from '@reduxjs/toolkit';
import reductorSessio from '../funcionalitats/sessio/sliceSessio.js';
import reductorCataleg from '../funcionalitats/cataleg/sliceCataleg.js';
import reductorReserves from '../funcionalitats/reserves/sliceReserves.js';
import { persistenciaSessio } from './persistenciaSessio.js';

export const magatzem = configureStore({
  reducer: {
    sessio: reductorSessio,
    cataleg: reductorCataleg,
    reserves: reductorReserves
  },
  middleware: (obtenirPerDefecte) => obtenirPerDefecte().concat(persistenciaSessio)
});

// src/pagines/PaginaAcces.jsx (extracte de la lògica)
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router';
import { cercarUsuariPerEmail } from '../api/usuaris.js';
import { accesIniciat, sessioIniciada, accesFallit, seleccionarCarregantSessio, seleccionarErrorSessio }
  from '../funcionalitats/sessio/sliceSessio.js';

function PaginaAcces() {
  const [correu, setCorreu] = useState('');
  const despatxar = useDispatch();
  const navegar = useNavigate();
  const location = useLocation();
  const carregant = useSelector(seleccionarCarregantSessio);
  const error = useSelector(seleccionarErrorSessio);

  // On tornar: ho va deixar RutaProtegida en expulsar
  const desti = location.state?.tornarA?.pathname ?? '/';

  async function gestionarEnviar(esdeveniment) {
    esdeveniment.preventDefault();
    despatxar(accesIniciat());

    try {
      const usuari = await cercarUsuariPerEmail(correu.trim());

      if (!usuari) {
        despatxar(accesFallit('No hi ha cap compte amb aquest correu.'));
        return;
      }

      despatxar(sessioIniciada(usuari));
      navegar(desti, { replace: true });
    } catch (fallada) {
      despatxar(accesFallit(fallada.message));
    }
  }
  // …el marcatge és el d'11-02, amb carregant i error connectats
}

// src/funcionalitats/cataleg/sliceCataleg.js
import { createSlice } from '@reduxjs/toolkit';

const sliceCataleg = createSlice({
  name: 'cataleg',
  initialState: { terme: '', ordre: 'model' },
  reducers: {
    termeCanviat(estat, accio) {
      estat.terme = accio.payload;
    },
    ordreCanviat(estat, accio) {
      estat.ordre = accio.payload;
    },
    filtresReiniciats(estat) {
      estat.terme = '';
      estat.ordre = 'model';
    }
  }
});

export const { termeCanviat, ordreCanviat, filtresReiniciats } = sliceCataleg.actions;

export const seleccionarTerme = (estat) => estat.cataleg.terme;
export const seleccionarOrdre = (estat) => estat.cataleg.ordre;

export default sliceCataleg.reducer;

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

const ContextEstatAvisos = createContext(null);
const ContextAccionsAvisos = createContext(null);

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

  const afegirAvis = useCallback(({ to = 'info', text, duracio = 5000 }) => {
    const id = seguentId.current++;
    setAvisos((actuals) => [...actuals, { id, to, text }]);

    if (duracio > 0) {
      setTimeout(() => {
        setAvisos((actuals) => actuals.filter((avis) => avis.id !== id));
      }, duracio);
    }

    return id;
  }, []);

  const descartarAvis = useCallback((id) => {
    setAvisos((actuals) => actuals.filter((avis) => avis.id !== id));
  }, []);

  // Les accions MAI canvien d'identitat: els emissors no es repinten mai
  const accions = useMemo(() => ({ afegirAvis, descartarAvis }), [afegirAvis, descartarAvis]);

  return (
    <ContextAccionsAvisos.Provider value={accions}>
      <ContextEstatAvisos.Provider value={avisos}>
        {children}
      </ContextEstatAvisos.Provider>
    </ContextAccionsAvisos.Provider>
  );
}

export function useAvisos() {
  const context = useContext(ContextAccionsAvisos);
  if (!context) throw new Error('useAvisos s\'ha d\'usar dins de ProveidorAvisos.');
  return context;
}

export function useLlistaAvisos() {
  const context = useContext(ContextEstatAvisos);
  if (context === null) throw new Error('useLlistaAvisos s\'ha d\'usar dins de ProveidorAvisos.');
  return context;
}

// src/components/LlistaAvisos.jsx
import { memo } from 'react';
import { useLlistaAvisos, useAvisos } from '../contextos/avisos.jsx';
import estils from './LlistaAvisos.module.css';

function LlistaAvisos() {
  const avisos = useLlistaAvisos();
  const { descartarAvis } = useAvisos();

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

  return (
    <div className={estils.llista}>
      {avisos.map((avis) => (
        <div
          key={avis.id}
          className={`${estils.avis} ${estils[avis.to]}`}
          data-testid="aviso"
          /* Els errors interrompen; la resta espera el seu torn */
          role={avis.to === 'error' ? 'alert' : 'status'}
        >
          <p>{avis.text}</p>
          <button type="button" onClick={() => descartarAvis(avis.id)} aria-label="Tancar avís">
            ×
          </button>
        </div>
      ))}
    </div>
  );
}

export default memo(LlistaAvisos);

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

const tipusBrut = parametres.get('tipo') ?? 'todos';
const tipus = TIPUS_VALIDS.includes(tipusBrut) ? tipusBrut : 'todos';

// src/components/RutaProtegida.jsx
import { Navigate, Outlet, useLocation } from 'react-router';
import { useSelector } from 'react-redux';
import { seleccionarUsuari, seleccionarCarregantSessio }
  from '../funcionalitats/sessio/sliceSessio.js';
import EsqueletPagina from './EsqueletPagina.jsx';

function RutaProtegida() {
  const usuari = useSelector(seleccionarUsuari);
  const carregant = useSelector(seleccionarCarregantSessio);
  const location = useLocation();

  // Mentre no se sap si hi ha sessió, NO es decideix res
  if (carregant) return <EsqueletPagina files={3} />;

  if (!usuari) {
    // state.tornarA: PaginaAcces l'usa per tornar aquí després d'identificar-se
    return <Navigate to="/acceso" replace state={{ tornarA: location }} />;
  }

  return <Outlet />;
}

export default RutaProtegida;

// src/components/RequereixRol.jsx
import { Navigate, Outlet } from 'react-router';
import { useSelector } from 'react-redux';
import { seleccionarUsuari } from '../funcionalitats/sessio/sliceSessio.js';

function RequereixRol({ rol }) {
  const usuari = useSelector(seleccionarUsuari);

  // Sense permís NO es redirigeix a /acceso: la persona ja està identificada.
  // Enviar-la a l'accés suggeriria que el problema és de sessió, i no ho és.
  if (usuari?.rol !== rol) {
    return <Navigate to="/sin-permisos" replace />;
  }

  return <Outlet />;
}

export default RequereixRol;

// src/api/client.js — afegit a la gestió d'errors
import { magatzem } from '../magatzem/magatzem.js';
import { sessioTancada } from '../funcionalitats/sessio/sliceSessio.js';

if (resposta.status === 401) {
  magatzem.dispatch(sessioTancada());
  // L'enrutador reaccionarà: RutaProtegida veurà usuari === null i 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 { magatzem } from './magatzem/magatzem.js';
import { clientConsultes } from './consultes/clientConsultes.js';
import { router } from './rutes.jsx';
import LimitError from './components/LimitError.jsx';
import { Proveidors } from './contextos/Proveidors.jsx';
import { registrarError } from './utilitats/monitoritzacio.js';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <LimitError titol="CicloUrbano no està disponible ara mateix" alRegistrar={registrarError}>
      <QueryClientProvider client={clientConsultes}>
        <Provider store={magatzem}>
          <Proveidors>
            <RouterProvider router={router} />
          </Proveidors>
        </Provider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </LimitError>
  </StrictMode>
);

// src/contextos/Proveidors.jsx
import { ProveidorTema } from './ProveidorTema.jsx';
import { ProveidorAvisos } from './avisos.jsx';

export function Proveidors({ children }) {
  return (
    <ProveidorTema>
      <ProveidorAvisos>{children}</ProveidorAvisos>
    </ProveidorTema>
  );
}

// src/consultes/bicicletes.js — continuació
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { actualitzarEstatBicicleta } from '../api/bicicletes.js';

export function useCanviarEstatBicicleta() {
  const client = useQueryClient();

  return useMutation({
    mutationFn: ({ id, estat }) => actualitzarEstatBicicleta(id, estat),

    onMutate: async ({ id, estat }) => {
      // 1) Aturar TOTES les consultes de bicicletes, llistes i detalls
      await client.cancelQueries({ queryKey: claus.bicicletes.totes() });

      // 2) Foto de totes les entrades afectades: hi ha diverses llistes (una per tipus)
      const llistesAnteriors = client.getQueriesData({ queryKey: claus.bicicletes.totes() });

      // 3) Actualitzar cada llista en memòria cau
      client.setQueriesData({ queryKey: claus.bicicletes.totes() }, (dades) => {
        if (!Array.isArray(dades)) return dades;   // el detall no és un array
        return dades.map((bici) => (bici.id === id ? { ...bici, estat } : bici));
      });

      // 4) I la fitxa individual, si està en memòria cau
      client.setQueryData(claus.bicicletes.detall(id), (bici) =>
        bici ? { ...bici, estat } : bici
      );

      return { llistesAnteriors, id };
    },

    onError: (error, variables, context) => {
      // Reversió completa: es restaura cada entrada amb la seva clau original
      context?.llistesAnteriors?.forEach(([clau, dades]) => {
        client.setQueryData(clau, dades);
      });
    },

    onSettled: (dades, error, variables) => {
      client.invalidateQueries({ queryKey: claus.bicicletes.totes() });
      client.invalidateQueries({ queryKey: claus.bicicletes.detall(variables.id) });
    }
  });
}

// src/pagines/PaginaTaller.jsx (extracte)
function PaginaTaller() {
  const consulta = useBicicletes();
  const mutacio = useCanviarEstatBicicleta();
  const { afegirAvis } = useAvisos();

  function gestionarCanvi(bicicleta, estatNou) {
    mutacio.mutate(
      { id: bicicleta.id, estat: estatNou },
      {
        onSuccess: () =>
          afegirAvis({
            to: 'exit',
            text: `${bicicleta.model} ara està ${estatNou === 'mantenimiento' ? 'en manteniment' : 'disponible'}.`
          }),
        onError: (error) =>
          afegirAvis({ to: 'error', text: `No s'ha pogut actualitzar. ${error.message}` })
      }
    );
  }

  if (consulta.isPending) return <EsqueletPagina files={4} />;
  // …resta del marcatge d'11-02, amb onClick={() => gestionarCanvi(bici, 'mantenimiento')}
}

return useMutation({
  scope: { id: 'estat-bicicletes' },   // s'encuen, no se solapen
  mutationFn: ({ id, estat }) => actualitzarEstatBicicleta(id, estat),
  // …
});

const consulta = useBicicletes({ tipus });

// Si es vol conservar la llista anterior durant el canvi de filtre,
// cal DIR-HO a la interfície, no deixar que sembli el resultat final
const mostrantAnterior = consulta.isPlaceholderData;

<ul className={classes(estils.llista, mostrantAnterior && estils.atenuada)} aria-busy={mostrantAnterior}>

export function useBicicletes(filtres = {}) {
  const client = useQueryClient();

  return useQuery({
    queryKey: claus.bicicletes.llista(filtres),
    queryFn: ({ signal }) => obtenirBicicletes({ ...filtres, senyal: signal }),
    placeholderData: () => {
      // Si la llista completa és a la memòria cau, es filtra al client com a valor provisional
      const totes = client.getQueryData(claus.bicicletes.llista({}));
      if (!totes || !filtres.tipus || filtres.tipus === 'todos') return undefined;
      return totes.filter((bici) => bici.tipus === filtres.tipus);
    }
  });
}

// src/funcionalitats/sessio/sliceSessio.js — afegits
const estatInicial = {
  usuari: llegirSessioDesada(),
  carregant: false,
  error: null,
  caducada: false          // hi ha usuari en memòria, però el servidor ja no l'accepta
};

// dins de reducers:
sessioCaducada(estat) {
  estat.caducada = true;   // l'usuari NO s'esborra: es necessita per tornar
},
sessioRenovada(estat, accio) {
  estat.usuari = accio.payload;
  estat.caducada = false;
},

export const seleccionarSessioCaducada = (estat) => estat.sessio.caducada;

// src/consultes/clientConsultes.js — gestor global
import { QueryClient, QueryCache, MutationCache } from '@tanstack/react-query';
import { magatzem } from '../magatzem/magatzem.js';
import { sessioCaducada } from '../funcionalitats/sessio/sliceSessio.js';
import { ErrorApi } from '../api/client.js';

function gestionarErrorGlobal(error) {
  if (error instanceof ErrorApi && error.estat === 401) {
    // Idempotent: encara que fallin cinc peticions, l'estat queda igual
    magatzem.dispatch(sessioCaducada());
  }
}

export const clientConsultes = new QueryClient({
  queryCache: new QueryCache({ onError: gestionarErrorGlobal }),
  mutationCache: new MutationCache({ onError: gestionarErrorGlobal }),
  defaultOptions: { /* …els de l'apartat 5… */ }
});

// src/components/AvisSessioCaducada.jsx
import { useSelector, useDispatch } from 'react-redux';
import { useLocation, useNavigate } from 'react-router';
import { seleccionarSessioCaducada, sessioTancada } from '../funcionalitats/sessio/sliceSessio.js';
import Modal from './base/Modal.jsx';
import Boto from './base/Boto.jsx';

function AvisSessioCaducada() {
  const caducada = useSelector(seleccionarSessioCaducada);
  const location = useLocation();
  const navegar = useNavigate();
  const despatxar = useDispatch();

  if (!caducada) return null;

  return (
    <Modal obert titol="La teva sessió ha caducat" alTancar={() => {}}>
      <p>
        Per seguretat, la sessió s'ha tancat després d'un període d'inactivitat.
        Torna a identificar-te per continuar on eres.
      </p>
      <div>
        <Boto
          onClick={() => navegar('/acceso', { state: { tornarA: location }, replace: false })}
        >
          Tornar a identificar-me
        </Boto>
        <Boto
          variant="secundari"
          onClick={() => {
            despatxar(sessioTancada());
            navegar('/', { replace: true });
          }}
        >
          Sortir
        </Boto>
      </div>
    </Modal>
  );
}

export default AvisSessioCaducada;