/* src/index.css */

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

* {
  margin: 0;
}

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

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

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

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

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

/* ---------- 2. Variables de disseny ---------- */
:root {
  /* Color */
  --color-marca: #12805c;
  --color-marca-fosca: #0d6247;
  --color-llogada: #b45309;
  --color-manteniment: #9b1c1c;
  --color-fons: #f5f7fa;
  --color-superficie: #ffffff;
  --color-text: #1f2933;
  --color-text-suau: #52606d;
  --color-vora: #d9e2ec;
  --color-focus: #2563eb;

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

  /* Espaiat: una escala, no nombres solts */
  --espai: 1rem;
  --espai-xs: 0.25rem;
  --espai-s: 0.5rem;
  --espai-l: 1.5rem;
  --espai-xl: 2.5rem;

  /* Tipografia */
  --lletra: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.75rem;

  /* Altres */
  --ample-maxim: 72rem;
  --transicio: 150ms ease;
}

/* ---------- 3. Base ---------- */
body {
  font-family: var(--lletra);
  background-color: var(--color-fons);
  color: var(--color-text);
}

/* Focus visible SEMPRE. Mai outline: none sense substitut */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respecte per qui demana menys moviment */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* src/index.css — continuació */
:root[data-tema='fosc'] {
  --color-fons: #131a22;
  --color-superficie: #1b242f;
  --color-text: #e4ecf3;
  --color-text-suau: #9aa5b1;
  --color-vora: #2c3846;
  --color-marca: #1fa87a;         /* més lluminós: sobre fons fosc necessita més contrast */
  --color-llogada: #d97706;
  --color-manteniment: #ef4444;
  --ombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ombra-elevada: 0 10px 25px rgba(0, 0, 0, 0.5);
}

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

const ContextTema = createContext(null);

export function ProveidorTema({ children }) {
  const [tema, setTema] = useMagatzemLocal('ciclourbano:tema', 'clar');

  // Efecte de sincronització amb el DOM: l'atribut viu fora de React
  useEffect(() => {
    document.documentElement.dataset.tema = tema;
  }, [tema]);

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

  // value estabilitzat: sense això, cada render del proveïdor repinta TOTS els consumidors
  const valor = useMemo(() => ({ tema, alternarTema }), [tema, alternarTema]);

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

export function useTema() {
  const context = useContext(ContextTema);
  if (context === null) {
    throw new Error('useTema s\'ha d\'utilitzar dins de ProveidorTema.');
  }
  return context;
}

// src/utilitats/classes.js
export function classes(...valors) {
  return valors.filter(Boolean).join(' ');
}

// src/components/base/Boto.jsx
import { classes } from '../../utilitats/classes.js';
import estils from './Boto.module.css';

function Boto({
  variant = 'primari',
  mida = 'mitjana',
  tipus = 'button',
  carregant = false,
  ampleComplet = false,
  children,
  className,
  ...resta
}) {
  return (
    <button
      type={tipus}
      className={classes(
        estils.boto,
        estils[variant],
        estils[mida],
        ampleComplet && estils.ampleComplet,
        className
      )}
      aria-busy={carregant || undefined}
      disabled={carregant || resta.disabled}
      {...resta}
    >
      {carregant ? 'Un moment…' : children}
    </button>
  );
}

export default Boto;

// src/components/base/Camp.jsx
import { useId } from 'react';
import { classes } from '../../utilitats/classes.js';
import estils from './Camp.module.css';

function Camp({ etiqueta, error, ajuda, obligatori = false, children }) {
  const id = useId();
  const idError = `${id}-error`;
  const idAjuda = `${id}-ajuda`;

  // Es descriu amb l'ajuda i, si n'hi ha, amb l'error
  const descritPer = classes(ajuda && idAjuda, error && idError) || undefined;

  return (
    <div className={classes(estils.camp, error && estils.ambError)}>
      <label className={estils.etiqueta} htmlFor={id}>
        {etiqueta}
        {obligatori && (
          <span className={estils.obligatori} aria-hidden="true">
            {' '}*
          </span>
        )}
      </label>

      {ajuda && (
        <p className={estils.ajuda} id={idAjuda}>
          {ajuda}
        </p>
      )}

      {/* El control es rep com a funció per poder-hi injectar id i aria-* */}
      {children({
        id,
        'aria-invalid': error ? true : undefined,
        'aria-describedby': descritPer,
        'aria-required': obligatori || undefined
      })}

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

export default Camp;

// Ús
<Camp etiqueta="Durada (hores)" obligatori error={errors.hores} ajuda="Entre 1 i 24 hores">
  {(props) => (
    <input {...props} type="number" min="1" max="24" value={hores} onChange={gestionarHores} />
  )}
</Camp>

// src/components/base/Panell.jsx
import { classes } from '../../utilitats/classes.js';
import estils from './Panell.module.css';

function Panell({ titol, nivell = 2, accions, children, className }) {
  const Encapcalament = `h${nivell}`;   // el nivell el decideix la pantalla, no el component

  return (
    <section className={classes(estils.panell, className)}>
      {(titol || accions) && (
        <header className={estils.capcalera}>
          {titol && <Encapcalament className={estils.titol}>{titol}</Encapcalament>}
          {accions && <div className={estils.accions}>{accions}</div>}
        </header>
      )}
      <div className={estils.cos}>{children}</div>
    </section>
  );
}

export default Panell;

// src/components/base/Etiqueta.jsx  (EtiquetaEstat n'és l'especialització)
import { classes } from '../../utilitats/classes.js';
import estils from './Etiqueta.module.css';

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

export function EtiquetaEstat({ estat }) {
  return (
    <span className={classes(estils.etiqueta, estils[estat])}>
      {TEXTOS[estat] ?? estat}
    </span>
  );
}

// src/components/base/Modal.jsx
import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { useEsdevenimentTeclat } from '../../hooks/useEsdevenimentTeclat.js';
import estils from './Modal.module.css';

function Modal({ obert, titol, alTancar, children }) {
  const contenidor = useRef(null);
  const elementPrevi = useRef(null);

  useEsdevenimentTeclat('Escape', alTancar, { actiu: obert });

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

    // 1) Recordar el focus d'origen i 2) portar-lo al diàleg
    elementPrevi.current = document.activeElement;
    contenidor.current?.focus();

    // 3) Bloquejar el desplaçament del fons
    const overflowPrevi = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = overflowPrevi;
      // 4) Retornar el focus a on era
      elementPrevi.current?.focus?.();
    };
  }, [obert]);

  if (!obert) return null;

  return createPortal(
    <div className={estils.vel} onClick={alTancar}>
      <div
        ref={contenidor}
        className={estils.dialeg}
        role="dialog"
        aria-modal="true"
        aria-labelledby="titol-modal"
        tabIndex={-1}
        onClick={(esdeveniment) => esdeveniment.stopPropagation()}
      >
        <h2 id="titol-modal" className={estils.titol}>{titol}</h2>
        {children}
      </div>
    </div>,
    document.body
  );
}

export default Modal;

// src/components/Disseny.jsx
import { Outlet } from 'react-router';
import Capcalera from './Capcalera.jsx';
import MollesDePa from './MollesDePa.jsx';
import LlistaAvisos from './LlistaAvisos.jsx';
import PeuDePagina from './PeuDePagina.jsx';
import estils from './Disseny.module.css';

function Disseny() {
  return (
    <div className={estils.contenidor}>
      <a className={estils.salta} href="#contingut">
        Salta al contingut principal
      </a>

      <Capcalera />
      <main className={estils.principal} id="contingut" tabIndex={-1}>
        <MollesDePa />
        <LlistaAvisos />
        <Outlet />
      </main>

      <PeuDePagina />
    </div>
  );
}

export default Disseny;

/* src/components/Disseny.module.css */
.contenidor {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.principal {
  flex: 1;
  width: 100%;
  max-width: var(--ample-maxim);
  margin: 0 auto;
  padding: var(--espai-l) var(--espai);
}

/* L'enllaç de salt: fora de pantalla fins que rep el focus */
.salta {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--espai-s) var(--espai);
  background: var(--color-marca);
  color: #fff;
  border-radius: 0 0 var(--radi) 0;
  text-decoration: none;
}

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

// src/components/Capcalera.jsx
import { NavLink, Link } from 'react-router';
import MenuUsuari from './MenuUsuari.jsx';
import BotoTema from './BotoTema.jsx';
import { classes } from '../utilitats/classes.js';
import { NOM_APP } from '../configuracio.js';
import estils from './Capcalera.module.css';

const ENLLACOS = [
  { a: '/', text: 'Catàleg', exacte: true },
  { a: '/estaciones', text: 'Estacions' },
  { a: '/reservas', text: 'Les meves reserves' },
  { a: '/taller', text: 'Taller', nomesOperari: true }
];

function Capcalera() {
  // A 11-03 sortirà de la sessió real; ara es fixa per poder veure la pantalla
  const esOperari = true;

  const visibles = ENLLACOS.filter((enllac) => !enllac.nomesOperari || esOperari);

  return (
    <header className={estils.capcalera}>
      <div className={estils.interior}>
        <Link to="/" className={estils.marca}>
          <span aria-hidden="true">🚲</span> {NOM_APP}
        </Link>

        <nav className={estils.navegacio} aria-label="Principal">
          <ul className={estils.llista}>
            {visibles.map((enllac) => (
              <li key={enllac.a}>
                <NavLink
                  to={enllac.a}
                  end={enllac.exacte}
                  className={({ isActive }) =>
                    classes(estils.enllac, isActive && estils.actiu)
                  }
                >
                  {enllac.text}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>

        <div className={estils.accions}>
          <BotoTema />
          <MenuUsuari />
        </div>
      </div>
    </header>
  );
}

export default Capcalera;

/* src/components/Capcalera.module.css — l'estat actiu */
.enllac {
  display: block;
  padding: var(--espai-s) var(--espai);
  color: var(--color-text-suau);
  text-decoration: none;
  border-radius: var(--radi);
  transition: background-color var(--transicio);
}

.enllac:hover {
  background-color: var(--color-fons);
  color: var(--color-text);
}

.actiu {
  color: var(--color-marca);
  font-weight: 600;
  /* El color NO pot ser l'única senyal: s'afegeix una marca de forma */
  box-shadow: inset 0 -2px 0 var(--color-marca);
}

// src/components/MollesDePa.jsx
import { Link, useMatches } from 'react-router';
import estils from './MollesDePa.module.css';

function MollesDePa() {
  const coincidencies = useMatches().filter((m) => m.handle?.molla);

  if (coincidencies.length <= 1) return null;   // a l'inici no aporten res

  return (
    <nav aria-label="Ruta de navegació" className={estils.molles}>
      <ol className={estils.llista}>
        {coincidencies.map((coincidencia, index) => {
          const esDarrera = index === coincidencies.length - 1;
          const text =
            typeof coincidencia.handle.molla === 'function'
              ? coincidencia.handle.molla(coincidencia)
              : coincidencia.handle.molla;

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

export default MollesDePa;

// src/dades/domini.js — còpia estàtica de db.json per treballar sense API
export const bicicletes = [
  { id: 'bici-001', model: 'Urbana Clàssica', tipus: 'urbana', estat: 'disponible', estacioId: 'est-01', preuHora: 2.5 },
  { id: 'bici-002', model: 'Elèctrica Pro', tipus: 'electrica', estat: 'alquilada', estacioId: 'est-01', preuHora: 4.0 },
  { id: 'bici-003', model: 'Càrrega Max', tipus: 'carga', estat: 'mantenimiento', estacioId: 'est-02', preuHora: 5.5 },
  { id: 'bici-004', model: 'Urbana Clàssica', tipus: 'urbana', estat: 'disponible', estacioId: 'est-03', preuHora: 2.5 },
  { id: 'bici-005', model: 'Elèctrica Pro', tipus: 'electrica', estat: 'disponible', estacioId: 'est-02', preuHora: 4.0 }
];

export const estacions = [
  { id: 'est-01', nom: 'Plaça Major', barri: 'Centre', places: 20 },
  { id: 'est-02', nom: 'Parc Nord', barri: 'Nord', places: 15 },
  { id: 'est-03', nom: 'Estació Central', barri: 'Eixample', places: 30 }
];

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

export const reserves = [
  { id: 'res-01', bicicletaId: 'bici-002', usuari: 'usr-01', dataInici: '2026-05-04T09:00', hores: 2, estat: 'activa' }
];

// src/components/EsqueletPagina.jsx
import estils from './EsqueletPagina.module.css';

function EsqueletPagina({ files = 3, ambCapcalera = true }) {
  return (
    <div className={estils.esquelet} data-testid="esqueleto-pagina" aria-hidden="true">
      {ambCapcalera && <div className={estils.titol} />}
      {Array.from({ length: files }, (_, index) => (
        <div key={index} className={estils.fila} />
      ))}
    </div>
  );
}

export default EsqueletPagina;

// L'anunci per a lectors de pantalla va a part, perquè l'esquelet és aria-hidden
function IndicadorDeCarrega({ text = 'Carregant…' }) {
  return (
    <p role="status" aria-live="polite" className="visualment-ocult">
      {text}
    </p>
  );
}

// Malament: no diu res
<p>No hi ha reserves.</p>

// Bé: explica i ofereix la sortida
<div className={estils.buit}>
  <h2>Encara no tens reserves</h2>
  <p>Quan reservis una bicicleta apareixerà aquí amb la seva hora d'inici i la seva durada.</p>
  <Boto onClick={() => navegar('/')}>Veure el catàleg</Boto>
</div>

// src/pagines/PaginaCataleg.jsx
import { useState, useMemo, useDeferredValue } from 'react';
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 { bicicletes, estacions } from '../dades/domini.js';
import estils from './PaginaCataleg.module.css';

// Interruptors temporals per revisar els estats. A 11-03 els substitueixen isPending i isError
const CARREGANT = false;
const AMB_ERROR = false;

function PaginaCataleg() {
  const [tipus, setTipus] = useState('todos');
  const [terme, setTerme] = useState('');

  // El terme diferit manté el camp fluid amb llistes grans (08-03)
  const termeDiferit = useDeferredValue(terme);

  const visibles = useMemo(() => {
    const text = termeDiferit.trim().toLowerCase();
    return bicicletes
      .filter((bici) => tipus === 'todos' || bici.tipus === tipus)
      .filter((bici) => bici.model.toLowerCase().includes(text));
  }, [tipus, termeDiferit]);

  if (CARREGANT) return <EsqueletPagina files={5} />;

  if (AMB_ERROR) {
    return (
      <Avis to="error" titol="No s'han pogut carregar les bicicletes">
        Comprova la teva connexió i torna-ho a provar.
      </Avis>
    );
  }

  return (
    <>
      <h1 className={estils.titol}>Catàleg de bicicletes</h1>
      <p className={estils.entradeta}>
        {visibles.length} de {bicicletes.length} bicicletes
      </p>

      <ResumFlota bicicletes={bicicletes} />

      <Panell titol="Filtres" nivell={2} className={estils.filtres}>
        <SelectorTipus tipusEscollit={tipus} alCanviarTipus={setTipus} />
        <CercadorBicicletes terme={terme} alCercar={setTerme} />
      </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/components/SelectorTipus.jsx
import { useTransition } from 'react';
import { classes } from '../utilitats/classes.js';
import estils from './SelectorTipus.module.css';

const TIPUS = [
  { valor: 'todos', text: 'Totes' },
  { valor: 'urbana', text: 'Urbana' },
  { valor: 'electrica', text: 'Elèctrica' },
  { valor: 'carga', text: 'De càrrega' }
];

function SelectorTipus({ tipusEscollit, alCanviarTipus }) {
  const [pendent, iniciarTransicio] = useTransition();

  return (
    <div
      className={classes(estils.grup, pendent && estils.pendent)}
      role="group"
      aria-label="Filtrar per tipus de bicicleta"
    >
      {TIPUS.map((tipus) => (
        <button
          key={tipus.valor}
          type="button"
          className={classes(estils.boto, tipusEscollit === tipus.valor && estils.actiu)}
          aria-pressed={tipusEscollit === tipus.valor}
          onClick={() => iniciarTransicio(() => alCanviarTipus(tipus.valor))}
        >
          {tipus.text}
        </button>
      ))}
    </div>
  );
}

export default SelectorTipus;

// src/components/TargetaBicicleta.jsx
import { memo } from 'react';
import { Link } from 'react-router';
import { EtiquetaEstat } from './base/Etiqueta.jsx';
import Boto from './base/Boto.jsx';
import estils from './TargetaBicicleta.module.css';

function TargetaBicicleta({ bicicleta, estacio, alReservar }) {
  const disponible = bicicleta.estat === 'disponible';

  return (
    <article
      className={estils.targeta}
      data-testid="tarjeta-bicicleta"
      data-bicicleta={bicicleta.id}
    >
      <header className={estils.capcalera}>
        <h3 className={estils.model}>
          <Link to={`/bicicletas/${bicicleta.id}`}>{bicicleta.model}</Link>
        </h3>
        <EtiquetaEstat estat={bicicleta.estat} />
      </header>

      <dl className={estils.dades}>
        <div>
          <dt>Estació</dt>
          <dd>{estacio?.nom ?? 'Sense assignar'}</dd>
        </div>
        <div>
          <dt>Preu</dt>
          <dd>{bicicleta.preuHora.toFixed(2)} €/h</dd>
        </div>
      </dl>

      <Boto
        variant="primari"
        disabled={!disponible}
        onClick={() => alReservar?.(bicicleta.id)}
        aria-label={`Reservar ${bicicleta.model}`}
      >
        {disponible ? 'Reservar' : 'No disponible'}
      </Boto>
    </article>
  );
}

export default memo(TargetaBicicleta);

// src/pagines/PaginaFitxaBicicleta.jsx
import { useParams, useNavigate, Link } from 'react-router';
import Panell from '../components/base/Panell.jsx';
import Boto from '../components/base/Boto.jsx';
import { EtiquetaEstat } from '../components/base/Etiqueta.jsx';
import { bicicletes, estacions } from '../dades/domini.js';
import estils from './PaginaFitxaBicicleta.module.css';

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

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

  // L'identificador inexistent NO és una pantalla en blanc (H3)
  if (!bicicleta) {
    return (
      <div className={estils.noTrobada}>
        <h1>Aquesta bicicleta no existeix</h1>
        <p>L'identificador <code>{bicicletaId}</code> no correspon a cap bicicleta.</p>
        <Link to="/">Tornar al catàleg</Link>
      </div>
    );
  }

  const estacio = estacions.find((e) => e.id === bicicleta.estacioId);
  const disponible = bicicleta.estat === 'disponible';

  return (
    <>
      <header className={estils.capcalera}>
        <h1>{bicicleta.model}</h1>
        <EtiquetaEstat estat={bicicleta.estat} />
      </header>

      <div className={estils.columnes}>
        <Panell titol="Dades de la bicicleta" nivell={2}>
          <dl className={estils.dades}>
            <div><dt>Identificador</dt><dd>{bicicleta.id}</dd></div>
            <div><dt>Tipus</dt><dd>{bicicleta.tipus}</dd></div>
            <div><dt>Preu per hora</dt><dd>{bicicleta.preuHora.toFixed(2)} €</dd></div>
          </dl>
        </Panell>

        <Panell titol="Ubicació" nivell={2}>
          {estacio ? (
            <p>
              <Link to={`/estaciones/${estacio.id}`}>{estacio.nom}</Link>
              {' · '}Barri {estacio.barri} · {estacio.places} places
            </p>
          ) : (
            <p>Aquesta bicicleta no està assignada a cap estació.</p>
          )}
        </Panell>
      </div>

      <div className={estils.accions}>
        <Boto
          disabled={!disponible}
          onClick={() => navegar(`/reservas/nueva?bicicleta=${bicicleta.id}`)}
        >
          {disponible ? 'Reservar aquesta bicicleta' : 'No disponible ara mateix'}
        </Boto>
        {!disponible && (
          <p className={estils.motiu}>
            {bicicleta.estat === 'alquilada'
              ? 'Està llogada. Torna a consultar-la més tard.'
              : 'Està en manteniment. L\'equip del taller l\'està revisant.'}
          </p>
        )}
      </div>
    </>
  );
}

export default PaginaFitxaBicicleta;

// src/pagines/PaginaEstacions.jsx
import TargetaEstacio from '../components/TargetaEstacio.jsx';
import { estacions, bicicletes } from '../dades/domini.js';
import estils from './PaginaEstacions.module.css';

function PaginaEstacions() {
  return (
    <>
      <h1>Estacions</h1>
      <p className={estils.entradeta}>{estacions.length} estacions en servei.</p>

      <ul className={estils.graella}>
        {estacions.map((estacio) => {
          const deLEstacio = bicicletes.filter((b) => b.estacioId === estacio.id);
          return (
            <li key={estacio.id}>
              <TargetaEstacio
                estacio={estacio}
                totalBicicletes={deLEstacio.length}
                disponibles={deLEstacio.filter((b) => b.estat === 'disponible').length}
              />
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default PaginaEstacions;

// src/pagines/PaginaDetallEstacio.jsx
import { NavLink, Outlet, useParams } from 'react-router';
import { classes } from '../utilitats/classes.js';
import { estacions } from '../dades/domini.js';
import estils from './PaginaDetallEstacio.module.css';

function PaginaDetallEstacio() {
  const { estacionId } = useParams();
  const estacio = estacions.find((e) => e.id === estacionId);

  if (!estacio) {
    return <h1>Aquesta estació no existeix</h1>;
  }

  const classeEnllac = ({ isActive }) => classes(estils.pestanya, isActive && estils.activa);

  return (
    <>
      <h1>{estacio.nom}</h1>
      <p className={estils.entradeta}>
        Barri {estacio.barri} · {estacio.places} places
      </p>

      <nav className={estils.pestanyes} aria-label="Seccions de l'estació">
        <NavLink to="." end className={classeEnllac}>Flota</NavLink>
        <NavLink to="incidencias" className={classeEnllac}>Incidències</NavLink>
      </nav>

      {/* El contingut de la pestanya activa */}
      <Outlet context={{ estacio }} />
    </>
  );
}

export default PaginaDetallEstacio;

// src/pagines/PaginaReserves.jsx
import { useState } from 'react';
import { Link } from 'react-router';
import PanellReserves from '../components/PanellReserves.jsx';
import Modal from '../components/base/Modal.jsx';
import Boto from '../components/base/Boto.jsx';
import { reserves, bicicletes } from '../dades/domini.js';
import estils from './PaginaReserves.module.css';

function PaginaReserves() {
  // Estat local pur: quina reserva està pendent de confirmació de cancel·lació
  const [reservaACancellar, setReservaACancellar] = useState(null);

  return (
    <>
      <div className={estils.capcalera}>
        <h1>Les meves reserves</h1>
        <Link to="/reservas/nueva" className={estils.enllacAccio}>
          Nova reserva
        </Link>
      </div>

      {reserves.length === 0 ? (
        <div className={estils.buit}>
          <h2>Encara no tens reserves</h2>
          <p>Quan reservis una bicicleta apareixerà aquí amb la seva hora d'inici i la seva durada.</p>
          <Link to="/">Veure el catàleg</Link>
        </div>
      ) : (
        <PanellReserves
          reserves={reserves}
          bicicletes={bicicletes}
          alCancellar={setReservaACancellar}
        />
      )}

      <Modal
        obert={reservaACancellar !== null}
        titol="Cancel·lar la reserva"
        alTancar={() => setReservaACancellar(null)}
      >
        <p>Segur que vols cancel·lar aquesta reserva? Aquesta acció no es pot desfer.</p>
        <div className={estils.accionsModal}>
          <Boto variant="secundari" onClick={() => setReservaACancellar(null)}>
            Tornar
          </Boto>
          <Boto variant="perill" onClick={() => setReservaACancellar(null)}>
            Sí, cancel·la
          </Boto>
        </div>
      </Modal>
    </>
  );
}

export default PaginaReserves;

// src/components/PanellReserves.jsx (extracte)
<table className={estils.taula}>
  <caption className="visualment-ocult">Llista de les teves reserves</caption>
  <thead>
    <tr>
      <th scope="col">Bicicleta</th>
      <th scope="col">Inici</th>
      <th scope="col">Hores</th>
      <th scope="col">Estat</th>
      <th scope="col"><span className="visualment-ocult">Accions</span></th>
    </tr>
  </thead>
  <tbody>
    {reserves.map((reserva) => (
      <tr key={reserva.id} data-testid="fila-reserva">
        <td>{bicicletaDe(reserva)?.model ?? 'Desconeguda'}</td>
        <td>{formatarData(reserva.dataInici)}</td>
        <td>{reserva.hores}</td>
        <td><EtiquetaEstat estat={reserva.estat} /></td>
        <td>
          <Boto
            variant="text"
            onClick={() => alCancellar(reserva)}
            disabled={reserva.estat === 'cancelada'}
          >
            Cancel·la
          </Boto>
        </td>
      </tr>
    ))}
  </tbody>
</table>

// src/components/FormulariReserva.jsx
import { useState } from 'react';
import Camp from './base/Camp.jsx';
import Boto from './base/Boto.jsx';
import estils from './FormulariReserva.module.css';

function FormulariReserva({ bicicletes, valorInicial, enviant = false, alEnviar }) {
  const [dades, setDades] = useState(valorInicial);
  const [errors, setErrors] = useState({});

  const reservables = bicicletes.filter((b) => b.estat === 'disponible');
  const escollida = bicicletes.find((b) => b.id === dades.bicicletaId);
  const total = escollida ? escollida.preuHora * Number(dades.hores || 0) : 0;

  function gestionarCanvi(camp, valor) {
    setDades((actual) => ({ ...actual, [camp]: valor }));
  }

  function gestionarEnviar(esdeveniment) {
    esdeveniment.preventDefault();
    // A 11-03 aquí entra validarReserva i la mutació
    alEnviar?.(dades);
  }

  return (
    <form className={estils.formulari} onSubmit={gestionarEnviar} noValidate>
      <Camp etiqueta="Bicicleta" obligatori error={errors.bicicletaId}>
        {(props) => (
          <select
            {...props}
            value={dades.bicicletaId}
            onChange={(e) => gestionarCanvi('bicicletaId', e.target.value)}
          >
            <option value="">Tria una bicicleta</option>
            {reservables.map((bici) => (
              <option key={bici.id} value={bici.id}>
                {bici.model} — {bici.preuHora.toFixed(2)} €/h
              </option>
            ))}
          </select>
        )}
      </Camp>

      <Camp
        etiqueta="Inici de la reserva"
        obligatori
        error={errors.dataInici}
        ajuda="No pot començar en el passat"
      >
        {(props) => (
          <input
            {...props}
            type="datetime-local"
            value={dades.dataInici}
            onChange={(e) => gestionarCanvi('dataInici', e.target.value)}
          />
        )}
      </Camp>

      <Camp etiqueta="Durada (hores)" obligatori error={errors.hores} ajuda="Entre 1 i 24">
        {(props) => (
          <input
            {...props}
            type="number"
            min="1"
            max="24"
            value={dades.hores}
            onChange={(e) => gestionarCanvi('hores', e.target.value)}
          />
        )}
      </Camp>

      <Camp etiqueta="Accepto les condicions d'ús" error={errors.condicions}>
        {(props) => (
          <input
            {...props}
            type="checkbox"
            checked={dades.condicions}
            onChange={(e) => gestionarCanvi('condicions', e.target.checked)}
          />
        )}
      </Camp>

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

      <Boto tipus="submit" carregant={enviant} ampleComplet>
        Crear reserva
      </Boto>
    </form>
  );
}

export default FormulariReserva;

// src/pagines/PaginaAcces.jsx (extracte)
function PaginaAcces() {
  const [correu, setCorreu] = useState('');
  const [error, setError] = useState(null);

  function gestionarEnviar(esdeveniment) {
    esdeveniment.preventDefault();
    // A 11-03: despatx a sliceSessio i redirecció a l'origen
  }

  return (
    <div className={estils.centre}>
      <h1>Accedir a CicloUrbano</h1>

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

      <form onSubmit={gestionarEnviar} noValidate>
        <Camp etiqueta="Correu electrònic" obligatori ajuda="Prova amb [email protected]">
          {(props) => (
            <input
              {...props}
              type="email"
              autoComplete="email"
              value={correu}
              onChange={(e) => setCorreu(e.target.value)}
            />
          )}
        </Camp>

        <Boto tipus="submit" ampleComplet>Entrar</Boto>
      </form>
    </div>
  );
}

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

function RutaProtegida() {
  // TODO(11-03): comprovar la sessió real i redirigir a /acceso conservant l'origen
  return <Outlet />;
}

export default RutaProtegida;

// src/pagines/PaginaTaller.jsx (extracte)
function PaginaTaller() {
  const enManteniment = bicicletes.filter((b) => b.estat === 'mantenimiento');
  const resta = bicicletes.filter((b) => b.estat !== 'mantenimiento');

  return (
    <>
      <h1>Taller</h1>
      <p className={estils.entradeta}>
        Gestió de l'estat de la flota. Només per a personal operari.
      </p>

      <Panell titol={`En manteniment (${enManteniment.length})`} nivell={2}>
        {enManteniment.length === 0 ? (
          <p>Tota la flota està operativa.</p>
        ) : (
          <ul className={estils.llista}>
            {enManteniment.map((bici) => (
              <li key={bici.id}>
                {bici.model} <code>{bici.id}</code>
                <Boto variant="secundari" mida="petita">Retornar al servei</Boto>
              </li>
            ))}
          </ul>
        )}
      </Panell>

      <Panell titol={`Resta de la flota (${resta.length})`} nivell={2}>
        {/* mateix patró, amb el botó "Enviar a manteniment" */}
      </Panell>
    </>
  );
}

// src/pagines/PaginaNoTrobada.jsx — ruta * : la URL no existeix
function PaginaNoTrobada() {
  return (
    <div className={estils.centre}>
      <h1>Aquesta pàgina no existeix</h1>
      <p>Pot ser que l'enllaç estigui mal escrit o que la pàgina s'hagi mogut.</p>
      <Link to="/">Anar al catàleg</Link>
    </div>
  );
}

// src/pagines/PaginaSensePermisos.jsx — la URL existeix, però el rol no n'hi ha prou
function PaginaSensePermisos() {
  return (
    <div className={estils.centre}>
      <h1>No tens permís per veure aquesta pàgina</h1>
      <p>L'àrea de taller està reservada al personal operari.</p>
      <Link to="/">Tornar al catàleg</Link>
    </div>
  );
}

// src/pagines/PaginaErrorRuta.jsx — errorElement: alguna cosa ha fallat en renderitzar la ruta
import { useRouteError, isRouteErrorResponse, Link } from 'react-router';
import { registrarError } from '../utilitats/monitoritzacio.js';

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

  const missatge = isRouteErrorResponse(error)
    ? `Error ${error.status}: ${error.statusText}`
    : 'S\'ha produït un problema en mostrar aquesta pantalla.';

  return (
    <div className={estils.centre} role="alert">
      <h1>Alguna cosa no ha anat bé</h1>
      <p>{missatge}</p>
      <Link to="/">Tornar al catàleg</Link>
      {import.meta.env.DEV && <pre className={estils.detall}>{String(error)}</pre>}
    </div>
  );
}

/* src/components/LlistaBicicletes.module.css */
.llista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espai);
  /* Tantes columnes com hi càpiguen, amb un mínim de 260px cadascuna */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* src/components/Capcalera.module.css */
.llista {
  display: flex;
  gap: var(--espai-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

  .llista {
    overflow-x: auto;          /* la navegació es desplaça en horitzontal */
    scrollbar-width: none;
    padding-bottom: var(--espai-xs);
  }
}

// src/components/ResumFlota.jsx
import { memo, useMemo } from 'react';
import estils from './ResumFlota.module.css';

const ESTATS = [
  { clau: 'disponible', text: 'Disponibles', simbol: '●' },
  { clau: 'alquilada', text: 'Llogades', simbol: '▲' },
  { clau: 'mantenimiento', text: 'En manteniment', simbol: '■' }
];

function ResumFlota({ bicicletes }) {
  const recompte = useMemo(() => {
    return bicicletes.reduce(
      (acumulat, bici) => ({ ...acumulat, [bici.estat]: (acumulat[bici.estat] ?? 0) + 1 }),
      { disponible: 0, alquilada: 0, mantenimiento: 0 }
    );
  }, [bicicletes]);

  const total = bicicletes.length;

  // Estat buit: sense això hi hauria una divisió per zero en el percentatge
  if (total === 0) {
    return (
      <section className={estils.resum} aria-labelledby="titol-resum">
        <h2 id="titol-resum" className={estils.titol}>Estat de la flota</h2>
        <p>No hi ha bicicletes registrades.</p>
      </section>
    );
  }

  return (
    <section className={estils.resum} aria-labelledby="titol-resum">
      <h2 id="titol-resum" className={estils.titol}>Estat de la flota</h2>

      <ul className={estils.llista}>
        {ESTATS.map(({ clau, text, simbol }) => {
          const quantitat = recompte[clau];
          const percentatge = Math.round((quantitat / total) * 100);

          return (
            <li key={clau} className={estils.item}>
              <span className={estils.encapcalament}>
                {/* Símbol: segona senyal a més del color */}
                <span className={estils[clau]} aria-hidden="true">{simbol}</span>
                <span className={estils.text}>{text}</span>
                <span className={estils.quantitat}>
                  {quantitat}
                  <span className="visualment-ocult"> de {total} bicicletes</span>
                </span>
              </span>

              {/* La barra és purament visual: la dada ja és al text */}
              <div className={estils.pista} aria-hidden="true">
                <div
                  className={`${estils.barra} ${estils[clau]}`}
                  style={{ inlineSize: `${percentatge}%` }}
                />
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

export default memo(ResumFlota);

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

  elementPrevi.current = document.activeElement;
  contenidor.current?.focus();

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

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

    const previ = elementPrevi.current;
    // Només si encara existeix I està connectat al document
    if (previ instanceof HTMLElement && previ.isConnected) {
      previ.focus();
    } else {
      // Reserva: el contingut principal, que és enfocable per tabIndex={-1}
      document.getElementById('contingut')?.focus();
    }
  };
}, [obert]);

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

.taula {
  width: 100%;
  min-width: 34rem;      /* per sota, les columnes s'apilen: millor desplaçar */
  border-collapse: collapse;
}

/* I en mòbil, columnes menys crítiques fora */
@media (max-width: 30rem) {
  .columnaHores {
    display: none;
  }
}

// PanellReserves.jsx
<div className={estils.contenidorTaula}>
  <table className={estils.taula}>…</table>
</div>

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espai-xs);
  padding: 0.15rem var(--espai-s);
  border-radius: 999px;
  font-size: var(--text-s);
  font-weight: 600;
  border: 1px solid currentColor;   /* la vora dona forma a més de color */
}

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

// src/components/SelectorTipus.jsx — variant adaptable
function SelectorTipus({ tipusEscollit, alCanviarTipus, variant = 'auto' }) {
  const [pendent, iniciarTransicio] = useTransition();

  const canviar = (valor) => iniciarTransicio(() => alCanviarTipus(valor));

  if (variant === 'desplegable' || TIPUS.length > 6) {
    return (
      <Camp etiqueta="Tipus de bicicleta">
        {(props) => (
          <select {...props} value={tipusEscollit} onChange={(e) => canviar(e.target.value)}>
            {TIPUS.map((tipus) => (
              <option key={tipus.valor} value={tipus.valor}>{tipus.text}</option>
            ))}
          </select>
        )}
      </Camp>
    );
  }

  return (
    <div className={classes(estils.grup, pendent && estils.pendent)}
         role="group" aria-label="Filtrar per tipus de bicicleta">
      {TIPUS.map((tipus) => (
        <button key={tipus.valor} type="button"
                className={classes(estils.boto, tipusEscollit === tipus.valor && estils.actiu)}
                aria-pressed={tipusEscollit === tipus.valor}
                onClick={() => canviar(tipus.valor)}>
          {tipus.text}
        </button>
      ))}
    </div>
  );
}