// src/api/client.js
import { API_URL } from '../config.js';

const TIMEOUT = 10_000;   // 10 s: past that, the network is given up on

/**
 * Data-layer error. Carries the HTTP status so whoever receives it
 * can decide: a 404 isn't the same as a 500, nor the same as a network failure.
 */
export class ApiError extends Error {
  constructor(message, { status = null, url = null, body = null } = {}) {
    super(message);
    this.name = 'ApiError';
    this.status = status;
    this.url = url;
    this.body = body;
  }

  get isNotFound() {
    return this.status === 404;
  }

  get isNetwork() {
    return this.status === null;   // there was never a response
  }

  get isServer() {
    return this.status !== null && this.status >= 500;
  }
}

/**
 * Single fetch wrapper. Every request in the project goes through here.
 */
export async function request(path, options = {}) {
  const { method = 'GET', body, signal, ...rest } = options;

  // Its own timeout: fetch doesn't come with one, and a hung request
  // leaves the UI "loading" forever
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), TIMEOUT);

  // If the caller brings its own signal (TanStack Query passes one), they're combined
  const finalSignal = signal
    ? AbortSignal.any([signal, controller.signal])
    : controller.signal;

  const url = `${API_URL}${path}`;

  try {
    const response = await fetch(url, {
      method,
      signal: finalSignal,
      headers: {
        Accept: 'application/json',
        ...(body ? { 'Content-Type': 'application/json' } : {}),
        ...rest.headers
      },
      ...(body ? { body: JSON.stringify(body) } : {}),
      ...rest
    });

    if (!response.ok) {
      // Try to read the error body, but its absence must not break anything
      let detail = null;
      try {
        detail = await response.json();
      } catch {
        detail = null;
      }

      throw new ApiError(messageForStatus(response.status), {
        status: response.status,
        url,
        body: detail
      });
    }

    // 204 No Content: there's no body to parse
    if (response.status === 204) return null;

    return await response.json();
  } catch (error) {
    if (error instanceof ApiError) throw error;

    if (error.name === 'AbortError') {
      throw new ApiError('The request took too long.', { url });
    }

    // fetch TypeError = no response at all: no network, DNS, CORS…
    throw new ApiError('Could not connect to the server.', { url });
  } finally {
    clearTimeout(timer);
  }
}

function messageForStatus(status) {
  if (status === 404) return 'The requested resource does not exist.';
  if (status === 401) return 'The session has expired.';
  if (status === 403) return 'You do not have permission for this operation.';
  if (status >= 500) return 'The server is not responding correctly.';
  return 'The request could not be completed.';
}

// src/api/bikes.js
import { request } from './client.js';

export function getBikes({ type, signal } = {}) {
  // json-server filters by field with a query parameter
  const params = new URLSearchParams();
  if (type && type !== 'todos') params.set('tipo', type);

  const query = params.toString();
  return request(`/bicicletas${query ? `?${query}` : ''}`, { signal });
}

export function getBike(id, { signal } = {}) {
  return request(`/bicicletas/${id}`, { signal });
}

export function updateBikeStatus(id, status) {
  return request(`/bicicletas/${id}`, { method: 'PATCH', body: { status } });
}

// src/api/bookings.js
import { request } from './client.js';

export function getBookings({ userId, signal } = {}) {
  const path = userId ? `/reservas?user=${userId}` : '/reservas';
  return request(path, { signal });
}

export function createBooking(data) {
  return request('/reservas', { method: 'POST', body: data });
}

export function updateBooking(id, changes) {
  return request(`/reservas/${id}`, { method: 'PATCH', body: changes });
}

// src/api/stations.js
import { request } from './client.js';

export function getStations({ signal } = {}) {
  return request('/estaciones', { signal });
}

export function getStation(id, { signal } = {}) {
  return request(`/estaciones/${id}`, { signal });
}

// src/api/users.js
import { request } from './client.js';

export async function findUserByEmail(email) {
  // json-server returns an array when filtering; here it's normalized to an object or null
  const found = await request(`/usuarios?email=${encodeURIComponent(email)}`);
  return found[0] ?? null;
}

// src/queries/queryClient.js
import { QueryClient } from '@tanstack/react-query';
import { ApiError } from '../api/client.js';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      gcTime: 5 * 60_000,
      refetchOnWindowFocus: true,
      retry: (attempts, error) => {
        // A 404 doesn't get better by retrying: it's a correct answer to a badly formed question
        if (error instanceof ApiError && error.status >= 400 && error.status < 500) {
          return false;
        }
        return attempts < 2;
      }
    },
    mutations: {
      retry: false   // retrying a POST could create two bookings
    }
  }
});

// Stations change month to month, not minute to minute
export function useStations() {
  return useQuery({
    queryKey: keys.stations.all(),
    queryFn: ({ signal }) => getStations({ signal }),
    staleTime: 10 * 60_000        // 10 minutes: overrides the global value
  });
}

// src/queries/keys.js
export const keys = {
  bikes: {
    all: () => ['bikes'],
    list: (filters) => ['bikes', filters],
    detail: (id) => ['bikes', 'detail', id]
  },
  stations: {
    all: () => ['stations'],
    detail: (id) => ['stations', id],
    incidents: (id) => ['stations', id, 'incidents']
  },
  bookings: {
    all: () => ['bookings'],
    byUser: (userId) => ['bookings', { user: userId }]
  }
};

// src/queries/bikes.js
import { useQuery } from '@tanstack/react-query';
import { getBikes, getBike } from '../api/bikes.js';
import { keys } from './keys.js';

export function useBikes(filters = {}) {
  return useQuery({
    queryKey: keys.bikes.list(filters),
    // signal is provided by Query: it cancels the request if the component unmounts
    queryFn: ({ signal }) => getBikes({ ...filters, signal })
  });
}

export function useBike(id) {
  return useQuery({
    queryKey: keys.bikes.detail(id),
    queryFn: ({ signal }) => getBike(id, { signal }),
    enabled: Boolean(id)   // without an id, no request is fired
  });
}

// src/queries/bookings.js
import { useQuery } from '@tanstack/react-query';
import { getBookings } from '../api/bookings.js';
import { keys } from './keys.js';

export function useBookings(userId) {
  return useQuery({
    queryKey: keys.bookings.byUser(userId),
    queryFn: ({ signal }) => getBookings({ userId, signal }),
    enabled: Boolean(userId)   // without a session, there are no bookings to fetch
  });
}

// src/pages/CataloguePage.jsx
import { useMemo, useDeferredValue } from 'react';
import { useSearchParams } from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { useBikes } from '../queries/bikes.js';
import { useStations } from '../queries/stations.js';
import { selectSearchTerm, selectSortOrder, searchTermChanged }
  from '../features/catalogue/catalogueSlice.js';
import Panel from '../components/base/Panel.jsx';
import TypeSelector from '../components/TypeSelector.jsx';
import BikeSearch from '../components/BikeSearch.jsx';
import BikeList from '../components/BikeList.jsx';
import FleetSummary from '../components/FleetSummary.jsx';
import PageSkeleton from '../components/PageSkeleton.jsx';
import Notice from '../components/Notice.jsx';
import Button from '../components/base/Button.jsx';
import styles from './CataloguePage.module.css';

function CataloguePage() {
  // 1) The filter lives in the URL
  const [params, setParams] = useSearchParams();
  const type = params.get('tipo') ?? 'todos';

  // 2) The search term and the sort order live in Redux
  const searchTerm = useSelector(selectSearchTerm);
  const sort = useSelector(selectSortOrder);
  const dispatch = useDispatch();

  // 3) The data lives on the server
  const query = useBikes({ type });
  const { data: stations = [] } = useStations();

  const deferredSearchTerm = useDeferredValue(searchTerm);

  const visible = useMemo(() => {
    const text = deferredSearchTerm.trim().toLowerCase();
    const list = (query.data ?? []).filter((bike) =>
      bike.model.toLowerCase().includes(text)
    );

    return [...list].sort((a, b) =>
      sort === 'price' ? a.pricePerHour - b.pricePerHour : a.model.localeCompare(b.model)
    );
  }, [query.data, deferredSearchTerm, sort]);

  function handleTypeChange(newType) {
    // replace: true keeps every filter click from filling up the history
    if (newType === 'todos') {
      setParams({}, { replace: true });
    } else {
      setParams({ tipo: newType }, { replace: true });
    }
  }

  if (query.isPending) return <PageSkeleton rows={5} />;

  if (query.isError) {
    return (
      <Notice tone="error" title="Could not load the bikes">
        <p>{query.error.friendlyMessage ?? query.error.message}</p>
        <Button onClick={() => query.refetch()}>Retry</Button>
      </Notice>
    );
  }

  return (
    <>
      <h1 className={styles.title}>Bike catalogue</h1>
      <p className={styles.intro} aria-live="polite">
        {visible.length} of {query.data.length} bikes
        {query.isFetching && <span className={styles.updating}> · updating…</span>}
      </p>

      <FleetSummary bikes={query.data} />

      <Panel title="Filters" level={2} className={styles.filters}>
        <TypeSelector selectedType={type} onTypeChange={handleTypeChange} />
        <BikeSearch
          searchTerm={searchTerm}
          onSearchTermChange={(value) => dispatch(searchTermChanged(value))}
        />
      </Panel>

      {visible.length === 0 ? (
        <div className={styles.empty}>
          <h2>No bike matches the search</h2>
          <p>Try another type or clear the search text.</p>
        </div>
      ) : (
        <BikeList bikes={visible} stations={stations} />
      )}
    </>
  );
}

export default CataloguePage;

// src/queries/bookings.js — continued
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { createBooking } from '../api/bookings.js';
import { keys } from './keys.js';

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

  return useMutation({
    mutationFn: createBooking,

    onSuccess: (createdBooking) => {
      // The user's booking list has changed
      client.invalidateQueries({
        queryKey: keys.bookings.byUser(createdBooking.user)
      });
      // The bike is now committed: the entire catalogue may have changed
      client.invalidateQueries({ queryKey: keys.bikes.all() });
    }
  });
}

// src/pages/NewBookingPage.jsx
import { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router';
import { useSelector } from 'react-redux';
import { useBikes } from '../queries/bikes.js';
import { useCreateBooking } from '../queries/bookings.js';
import { selectUser } from '../features/session/sessionSlice.js';
import { useNotices } from '../contexts/notices.js';
import { validateBooking } from '../utils/validateBooking.js';
import BookingForm from '../components/BookingForm.jsx';
import PageSkeleton from '../components/PageSkeleton.jsx';
import Notice from '../components/Notice.jsx';

function NewBookingPage() {
  const navigate = useNavigate();
  const [params] = useSearchParams();
  const user = useSelector(selectUser);
  const { addNotice } = useNotices();

  const bikesQuery = useBikes();
  const mutation = useCreateBooking();

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

  const initialValue = {
    // Preselected from the detail page: /reservas/nueva?bicicleta=bici-001
    bicicletaId: params.get('bicicleta') ?? '',
    startDate: '',
    hours: 1,
    terms: false
  };

  function handleSubmit(data) {
    // 1) Validate against the REAL data, not a copy
    const foundErrors = validateBooking(data, bikesQuery.data ?? []);
    setErrors(foundErrors);

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

    // 2) Submit
    mutation.mutate(
      {
        id: `res-${Date.now()}`,          // json-server accepts the id; a real API would generate it
        bicicletaId: data.bicicletaId,
        user: user.id,
        startDate: data.startDate,
        hours: Number(data.hours),
        status: 'activa'
      },
      {
        // 3) Success: notice and redirect
        onSuccess: () => {
          addNotice({ tone: 'success', text: 'Booking created successfully.' });
          navigate('/reservas', { replace: true });
        },
        // 4) Error: inline notice, without leaving the screen
        onError: (error) => {
          addNotice({
            tone: 'error',
            text: `Could not create the booking. ${error.message}`
          });
        }
      }
    );
  }

  if (bikesQuery.isPending) return <PageSkeleton rows={4} />;

  if (bikesQuery.isError) {
    return (
      <Notice tone="error" title="Could not load the catalogue">
        Without the bike list, a booking can't be created. Please try again.
      </Notice>
    );
  }

  return (
    <>
      <h1>New booking</h1>
      <BookingForm
        bikes={bikesQuery.data}
        initialValue={initialValue}
        errors={errors}
        submitting={mutation.isPending}
        onSubmit={handleSubmit}
      />
    </>
  );
}

export default NewBookingPage;

// src/queries/bookings.js — continued
export function useCancelBooking(userId) {
  const client = useQueryClient();
  const key = keys.bookings.byUser(userId);

  return useMutation({
    mutationFn: (bookingId) => updateBooking(bookingId, { status: 'cancelada' }),

    onMutate: async (bookingId) => {
      // 1) Stop in-flight queries: if one lands later, it would overwrite the change
      await client.cancelQueries({ queryKey: key });

      // 2) Save the current snapshot so it can be rolled back
      const previous = client.getQueryData(key);

      // 3) Render the result now
      client.setQueryData(key, (bookings = []) =>
        bookings.map((booking) =>
          booking.id === bookingId ? { ...booking, status: 'cancelada' } : booking
        )
      );

      // What's returned reaches onError and onSettled as "context"
      return { previous };
    },

    onError: (error, bookingId, context) => {
      // 4) Roll back to the exact previous state
      if (context?.previous) {
        client.setQueryData(key, context.previous);
      }
    },

    onSettled: () => {
      // 5) Whatever happens, sync with the server
      client.invalidateQueries({ queryKey: key });
      client.invalidateQueries({ queryKey: keys.bikes.all() });
    }
  });
}

// src/features/session/sessionSlice.js
import { createSlice } from '@reduxjs/toolkit';

const STORAGE_KEY = 'ciclourbano:sesion';

function readStoredSession() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : null;
  } catch {
    // Corrupted JSON or blocked storage: start without a session
    return null;
  }
}

const initialState = {
  user: readStoredSession(),
  loading: false,
  error: null
};

const sessionSlice = createSlice({
  name: 'session',
  initialState,
  reducers: {
    signInStarted(state) {
      state.loading = true;
      state.error = null;
    },
    signedIn(state, action) {
      state.user = action.payload;
      state.loading = false;
      state.error = null;
    },
    signInFailed(state, action) {
      state.user = null;
      state.loading = false;
      state.error = action.payload;
    },
    signedOut(state) {
      state.user = null;
      state.error = null;
    }
  }
});

export const { signInStarted, signedIn, signInFailed, signedOut } =
  sessionSlice.actions;

// Selectors: the slice is the only one that knows the shape of the state
export const selectUser = (state) => state.session.user;
export const selectIsSignedIn = (state) => state.session.user !== null;
export const selectIsOperator = (state) => state.session.user?.role === 'operario';
export const selectSessionLoading = (state) => state.session.loading;
export const selectSessionError = (state) => state.session.error;

export default sessionSlice.reducer;

// src/store/sessionPersistence.js
const STORAGE_KEY = 'ciclourbano:sesion';

export const sessionPersistence = (store) => (next) => (action) => {
  const result = next(action);

  // Only reacts to session actions: it doesn't write on every keystroke in the search box
  if (action.type.startsWith('session/')) {
    const user = store.getState().session.user;
    try {
      if (user) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(user));
      } else {
        localStorage.removeItem(STORAGE_KEY);
      }
    } catch {
      // Private mode or quota full: the app keeps working without persistence
    }
  }

  return result;
};

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import sessionReducer from '../features/session/sessionSlice.js';
import catalogueReducer from '../features/catalogue/catalogueSlice.js';
import bookingsReducer from '../features/bookings/bookingsSlice.js';
import { sessionPersistence } from './sessionPersistence.js';

export const store = configureStore({
  reducer: {
    session: sessionReducer,
    catalogue: catalogueReducer,
    bookings: bookingsReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sessionPersistence)
});

// src/pages/SignInPage.jsx (logic excerpt)
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router';
import { findUserByEmail } from '../api/users.js';
import { signInStarted, signedIn, signInFailed, selectSessionLoading, selectSessionError }
  from '../features/session/sessionSlice.js';

function SignInPage() {
  const [email, setEmail] = useState('');
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();
  const loading = useSelector(selectSessionLoading);
  const error = useSelector(selectSessionError);

  // Where to go back to: ProtectedRoute left it there when it kicked the person out
  const returnTo = location.state?.from?.pathname ?? '/';

  async function handleSubmit(event) {
    event.preventDefault();
    dispatch(signInStarted());

    try {
      const user = await findUserByEmail(email.trim());

      if (!user) {
        dispatch(signInFailed('There is no account with that email.'));
        return;
      }

      dispatch(signedIn(user));
      navigate(returnTo, { replace: true });
    } catch (failure) {
      dispatch(signInFailed(failure.message));
    }
  }
  // …the markup is the one from 11-02, wired up with loading and error
}

// src/features/catalogue/catalogueSlice.js
import { createSlice } from '@reduxjs/toolkit';

const catalogueSlice = createSlice({
  name: 'catalogue',
  initialState: { searchTerm: '', sort: 'model' },
  reducers: {
    searchTermChanged(state, action) {
      state.searchTerm = action.payload;
    },
    sortChanged(state, action) {
      state.sort = action.payload;
    },
    filtersReset(state) {
      state.searchTerm = '';
      state.sort = 'model';
    }
  }
});

export const { searchTermChanged, sortChanged, filtersReset } = catalogueSlice.actions;

export const selectSearchTerm = (state) => state.catalogue.searchTerm;
export const selectSortOrder = (state) => state.catalogue.sort;

export default catalogueSlice.reducer;

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

const NoticesStateContext = createContext(null);
const NoticesActionsContext = createContext(null);

export function NoticesProvider({ children }) {
  const [notices, setNotices] = useState([]);
  const nextId = useRef(1);

  const addNotice = useCallback(({ tone = 'info', text, duration = 5000 }) => {
    const id = nextId.current++;
    setNotices((current) => [...current, { id, tone, text }]);

    if (duration > 0) {
      setTimeout(() => {
        setNotices((current) => current.filter((notice) => notice.id !== id));
      }, duration);
    }

    return id;
  }, []);

  const removeNotice = useCallback((id) => {
    setNotices((current) => current.filter((notice) => notice.id !== id));
  }, []);

  // Actions NEVER change identity: emitters never re-render because of them
  const actions = useMemo(() => ({ addNotice, removeNotice }), [addNotice, removeNotice]);

  return (
    <NoticesActionsContext.Provider value={actions}>
      <NoticesStateContext.Provider value={notices}>
        {children}
      </NoticesStateContext.Provider>
    </NoticesActionsContext.Provider>
  );
}

export function useNotices() {
  const context = useContext(NoticesActionsContext);
  if (!context) throw new Error('useNotices must be used within NoticesProvider.');
  return context;
}

export function useNoticeList() {
  const context = useContext(NoticesStateContext);
  if (context === null) throw new Error('useNoticeList must be used within NoticesProvider.');
  return context;
}

// src/components/NoticeList.jsx
import { memo } from 'react';
import { useNoticeList, useNotices } from '../contexts/notices.jsx';
import styles from './NoticeList.module.css';

function NoticeList() {
  const notices = useNoticeList();
  const { removeNotice } = useNotices();

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

  return (
    <div className={styles.list}>
      {notices.map((notice) => (
        <div
          key={notice.id}
          className={`${styles.notice} ${styles[notice.tone]}`}
          data-testid="aviso"
          /* Errors interrupt; the rest wait their turn */
          role={notice.tone === 'error' ? 'alert' : 'status'}
        >
          <p>{notice.text}</p>
          <button type="button" onClick={() => removeNotice(notice.id)} aria-label="Close notice">
            ×
          </button>
        </div>
      ))}
    </div>
  );
}

export default memo(NoticeList);

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

const rawType = params.get('tipo') ?? 'todos';
const type = VALID_TYPES.includes(rawType) ? rawType : 'todos';

// src/components/ProtectedRoute.jsx
import { Navigate, Outlet, useLocation } from 'react-router';
import { useSelector } from 'react-redux';
import { selectUser, selectSessionLoading }
  from '../features/session/sessionSlice.js';
import PageSkeleton from './PageSkeleton.jsx';

function ProtectedRoute() {
  const user = useSelector(selectUser);
  const loading = useSelector(selectSessionLoading);
  const location = useLocation();

  // While it's not known whether there's a session, NOTHING is decided
  if (loading) return <PageSkeleton rows={3} />;

  if (!user) {
    // state.from: SignInPage uses it to come back here after signing in
    return <Navigate to="/acceso" replace state={{ from: location }} />;
  }

  return <Outlet />;
}

export default ProtectedRoute;

// src/components/RequireRole.jsx
import { Navigate, Outlet } from 'react-router';
import { useSelector } from 'react-redux';
import { selectUser } from '../features/session/sessionSlice.js';

function RequireRole({ role }) {
  const user = useSelector(selectUser);

  // Without permission, there's NO redirect to /acceso: the person is already signed in.
  // Sending them to sign-in would suggest the problem is with the session, and it isn't.
  if (user?.role !== role) {
    return <Navigate to="/sin-permisos" replace />;
  }

  return <Outlet />;
}

export default RequireRole;

// src/api/client.js — added to error handling
import { store } from '../store/store.js';
import { signedOut } from '../features/session/sessionSlice.js';

if (response.status === 401) {
  store.dispatch(signedOut());
  // The router will react: ProtectedRoute will see user === null and redirect
}

// 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 { store } from './store/store.js';
import { queryClient } from './queries/queryClient.js';
import { router } from './routes.jsx';
import ErrorBoundary from './components/ErrorBoundary.jsx';
import { Providers } from './contexts/Providers.jsx';
import { reportError } from './utils/monitoring.js';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ErrorBoundary title="CicloUrbano is not available right now" onReport={reportError}>
      <QueryClientProvider client={queryClient}>
        <Provider store={store}>
          <Providers>
            <RouterProvider router={router} />
          </Providers>
        </Provider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </ErrorBoundary>
  </StrictMode>
);

// src/contexts/Providers.jsx
import { ThemeProvider } from './ThemeProvider.jsx';
import { NoticesProvider } from './notices.jsx';

export function Providers({ children }) {
  return (
    <ThemeProvider>
      <NoticesProvider>{children}</NoticesProvider>
    </ThemeProvider>
  );
}

// src/queries/bikes.js — continued
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { updateBikeStatus } from '../api/bikes.js';

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

  return useMutation({
    mutationFn: ({ id, status }) => updateBikeStatus(id, status),

    onMutate: async ({ id, status }) => {
      // 1) Stop ALL bike queries, lists and details
      await client.cancelQueries({ queryKey: keys.bikes.all() });

      // 2) Snapshot every affected entry: there are several lists (one per type)
      const previousLists = client.getQueriesData({ queryKey: keys.bikes.all() });

      // 3) Update every cached list
      client.setQueriesData({ queryKey: keys.bikes.all() }, (data) => {
        if (!Array.isArray(data)) return data;   // the detail entry isn't an array
        return data.map((bike) => (bike.id === id ? { ...bike, status } : bike));
      });

      // 4) And the individual detail page, if it's cached
      client.setQueryData(keys.bikes.detail(id), (bike) =>
        bike ? { ...bike, status } : bike
      );

      return { previousLists, id };
    },

    onError: (error, variables, context) => {
      // Full rollback: every entry is restored with its original key
      context?.previousLists?.forEach(([key, data]) => {
        client.setQueryData(key, data);
      });
    },

    onSettled: (data, error, variables) => {
      client.invalidateQueries({ queryKey: keys.bikes.all() });
      client.invalidateQueries({ queryKey: keys.bikes.detail(variables.id) });
    }
  });
}

// src/pages/WorkshopPage.jsx (excerpt)
function WorkshopPage() {
  const query = useBikes();
  const mutation = useChangeBikeStatus();
  const { addNotice } = useNotices();

  function handleChange(bike, newStatus) {
    mutation.mutate(
      { id: bike.id, status: newStatus },
      {
        onSuccess: () =>
          addNotice({
            tone: 'success',
            text: `${bike.model} is now ${newStatus === 'mantenimiento' ? 'in maintenance' : 'available'}.`
          }),
        onError: (error) =>
          addNotice({ tone: 'error', text: `Could not update it. ${error.message}` })
      }
    );
  }

  if (query.isPending) return <PageSkeleton rows={4} />;
  // …the rest of the markup from 11-02, with onClick={() => handleChange(bike, 'mantenimiento')}
}

return useMutation({
  scope: { id: 'bike-status' },   // queued, never overlapping
  mutationFn: ({ id, status }) => updateBikeStatus(id, status),
  // …
});

const query = useBikes({ type });

// If you want to keep the previous list during the filter change,
// you have to SAY SO in the UI, not let it look like the final result
const showingPrevious = query.isPlaceholderData;

<ul className={cx(styles.list, showingPrevious && styles.dimmed)} aria-busy={showingPrevious}>

export function useBikes(filters = {}) {
  const client = useQueryClient();

  return useQuery({
    queryKey: keys.bikes.list(filters),
    queryFn: ({ signal }) => getBikes({ ...filters, signal }),
    placeholderData: () => {
      // If the full list is cached, it's filtered client-side as a provisional value
      const all = client.getQueryData(keys.bikes.list({}));
      if (!all || !filters.type || filters.type === 'todos') return undefined;
      return all.filter((bike) => bike.type === filters.type);
    }
  });
}

// src/features/session/sessionSlice.js — additions
const initialState = {
  user: readStoredSession(),
  loading: false,
  error: null,
  expired: false          // there's a user in memory, but the server no longer accepts it
};

// inside reducers:
sessionExpired(state) {
  state.expired = true;   // the user is NOT cleared: it's needed to go back
},
sessionRenewed(state, action) {
  state.user = action.payload;
  state.expired = false;
},

export const selectSessionExpired = (state) => state.session.expired;

// src/queries/queryClient.js — global handler
import { QueryClient, QueryCache, MutationCache } from '@tanstack/react-query';
import { store } from '../store/store.js';
import { sessionExpired } from '../features/session/sessionSlice.js';
import { ApiError } from '../api/client.js';

function handleGlobalError(error) {
  if (error instanceof ApiError && error.status === 401) {
    // Idempotent: even if five requests fail, the state ends up the same
    store.dispatch(sessionExpired());
  }
}

export const queryClient = new QueryClient({
  queryCache: new QueryCache({ onError: handleGlobalError }),
  mutationCache: new MutationCache({ onError: handleGlobalError }),
  defaultOptions: { /* …the ones from section 5… */ }
});

// src/components/SessionExpiredNotice.jsx
import { useSelector, useDispatch } from 'react-redux';
import { useLocation, useNavigate } from 'react-router';
import { selectSessionExpired, signedOut } from '../features/session/sessionSlice.js';
import Modal from './base/Modal.jsx';
import Button from './base/Button.jsx';

function SessionExpiredNotice() {
  const expired = useSelector(selectSessionExpired);
  const location = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  if (!expired) return null;

  return (
    <Modal open title="Your session has expired" onClose={() => {}}>
      <p>
        For security, the session was closed after a period of inactivity.
        Sign in again to continue where you left off.
      </p>
      <div>
        <Button
          onClick={() => navigate('/acceso', { state: { from: location }, replace: false })}
        >
          Sign in again
        </Button>
        <Button
          variant="secondary"
          onClick={() => {
            dispatch(signedOut());
            navigate('/', { replace: true });
          }}
        >
          Log out
        </Button>
      </div>
    </Modal>
  );
}

export default SessionExpiredNotice;