/* src/index.css */

/* ---------- 1. Minimal reset ---------- */
*,
*::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. Design variables ---------- */
:root {
  /* Color */
  --color-brand: #12805c;
  --color-brand-dark: #0d6247;
  --color-rented: #b45309;
  --color-maintenance: #9b1c1c;
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-text: #1f2933;
  --color-text-soft: #52606d;
  --color-border: #d9e2ec;
  --color-focus: #2563eb;

  /* Shape */
  --radius: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-elevated: 0 10px 25px rgba(15, 23, 42, 0.15);

  /* Spacing: a scale, not loose numbers */
  --space: 1rem;
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;

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

  /* Other */
  --max-width: 72rem;
  --transition: 150ms ease;
}

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

/* Focus always visible. Never outline: none without a replacement */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect for those who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* src/index.css — continued */
:root[data-theme='dark'] {
  --color-bg: #131a22;
  --color-surface: #1b242f;
  --color-text: #e4ecf3;
  --color-text-soft: #9aa5b1;
  --color-border: #2c3846;
  --color-brand: #1fa87a;         /* brighter: needs more contrast against a dark background */
  --color-rented: #d97706;
  --color-maintenance: #ef4444;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.5);
}

// src/contexts/ThemeProvider.jsx
import { createContext, useContext, useEffect, useMemo, useCallback } from 'react';
import { useLocalStorage } from '../hooks/useLocalStorage.js';

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useLocalStorage('ciclourbano:tema', 'light');

  // DOM sync effect: the attribute lives outside React
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
  }, [theme]);

  const toggleTheme = useCallback(() => {
    setTheme((current) => (current === 'light' ? 'dark' : 'light'));
  }, [setTheme]);

  // stabilized value: without this, every render of the provider repaints ALL consumers
  const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

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

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === null) {
    throw new Error('useTheme must be used within a ThemeProvider.');
  }
  return context;
}

// src/utils/classNames.js
export function cx(...values) {
  return values.filter(Boolean).join(' ');
}

// src/components/base/Button.jsx
import { cx } from '../../utils/classNames.js';
import styles from './Button.module.css';

function Button({
  variant = 'primary',
  size = 'medium',
  type = 'button',
  loading = false,
  fullWidth = false,
  children,
  className,
  ...rest
}) {
  return (
    <button
      type={type}
      className={cx(
        styles.button,
        styles[variant],
        styles[size],
        fullWidth && styles.fullWidth,
        className
      )}
      aria-busy={loading || undefined}
      disabled={loading || rest.disabled}
      {...rest}
    >
      {loading ? 'One moment…' : children}
    </button>
  );
}

export default Button;

// src/components/base/Field.jsx
import { useId } from 'react';
import { cx } from '../../utils/classNames.js';
import styles from './Field.module.css';

function Field({ label, error, hint, required = false, children }) {
  const id = useId();
  const errorId = `${id}-error`;
  const hintId = `${id}-hint`;

  // Described by the hint and, if there is one, by the error
  const describedBy = cx(hint && hintId, error && errorId) || undefined;

  return (
    <div className={cx(styles.field, error && styles.withError)}>
      <label className={styles.label} htmlFor={id}>
        {label}
        {required && (
          <span className={styles.required} aria-hidden="true">
            {' '}*
          </span>
        )}
      </label>

      {hint && (
        <p className={styles.hint} id={hintId}>
          {hint}
        </p>
      )}

      {/* The control is received as a function so id and aria-* can be injected into it */}
      {children({
        id,
        'aria-invalid': error ? true : undefined,
        'aria-describedby': describedBy,
        'aria-required': required || undefined
      })}

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

export default Field;

// Usage
<Field label="Duration (hours)" required error={errors.hours} hint="Between 1 and 24 hours">
  {(props) => (
    <input {...props} type="number" min="1" max="24" value={hours} onChange={handleHours} />
  )}
</Field>

// src/components/base/Panel.jsx
import { cx } from '../../utils/classNames.js';
import styles from './Panel.module.css';

function Panel({ title, level = 2, actions, children, className }) {
  const Heading = `h${level}`;   // the screen decides the level, not the component

  return (
    <section className={cx(styles.panel, className)}>
      {(title || actions) && (
        <header className={styles.header}>
          {title && <Heading className={styles.title}>{title}</Heading>}
          {actions && <div className={styles.actions}>{actions}</div>}
        </header>
      )}
      <div className={styles.body}>{children}</div>
    </section>
  );
}

export default Panel;

// src/components/base/Label.jsx  (StatusBadge is its specialization)
import { cx } from '../../utils/classNames.js';
import styles from './Label.module.css';

const LABELS = {
  disponible: 'Available',
  alquilada: 'Rented',
  mantenimiento: 'In maintenance'
};

export function StatusBadge({ status }) {
  return (
    <span className={cx(styles.label, styles[status])}>
      {LABELS[status] ?? status}
    </span>
  );
}

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

function Modal({ open, title, onClose, children }) {
  const container = useRef(null);
  const previousElement = useRef(null);

  useKeyEvent('Escape', onClose, { active: open });

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

    // 1) Remember where focus came from, and 2) move it to the dialog
    previousElement.current = document.activeElement;
    container.current?.focus();

    // 3) Lock background scrolling
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = previousOverflow;
      // 4) Return focus to where it was
      previousElement.current?.focus?.();
    };
  }, [open]);

  if (!open) return null;

  return createPortal(
    <div className={styles.backdrop} onClick={onClose}>
      <div
        ref={container}
        className={styles.dialog}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        tabIndex={-1}
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="modal-title" className={styles.title}>{title}</h2>
        {children}
      </div>
    </div>,
    document.body
  );
}

export default Modal;

// src/components/Layout.jsx
import { Outlet } from 'react-router';
import Header from './Header.jsx';
import Breadcrumbs from './Breadcrumbs.jsx';
import NoticeList from './NoticeList.jsx';
import Footer from './Footer.jsx';
import styles from './Layout.module.css';

function Layout() {
  return (
    <div className={styles.container}>
      <a className={styles.skipLink} href="#content">
        Skip to main content
      </a>

      <Header />

      <main className={styles.main} id="content" tabIndex={-1}>
        <Breadcrumbs />
        <NoticeList />
        <Outlet />
      </main>

      <Footer />
    </div>
  );
}

export default Layout;

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

.main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-l) var(--space);
}

/* The skip link: off-screen until it receives focus */
.skipLink {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--space-s) var(--space);
  background: var(--color-brand);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}

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

// src/components/Header.jsx
import { NavLink, Link } from 'react-router';
import UserMenu from './UserMenu.jsx';
import ThemeButton from './ThemeButton.jsx';
import { cx } from '../utils/classNames.js';
import { APP_NAME } from '../config.js';
import styles from './Header.module.css';

const LINKS = [
  { to: '/', label: 'Catalogue', end: true },
  { to: '/estaciones', label: 'Stations' },
  { to: '/reservas', label: 'My bookings' },
  { to: '/taller', label: 'Workshop', operatorOnly: true }
];

function Header() {
  // In 11-03 this will come from the real session; for now it's hard-coded so the screen can be reviewed
  const isOperator = true;

  const visibleLinks = LINKS.filter((link) => !link.operatorOnly || isOperator);

  return (
    <header className={styles.header}>
      <div className={styles.inner}>
        <Link to="/" className={styles.brand}>
          <span aria-hidden="true">🚲</span> {APP_NAME}
        </Link>

        <nav className={styles.nav} aria-label="Main">
          <ul className={styles.list}>
            {visibleLinks.map((link) => (
              <li key={link.to}>
                <NavLink
                  to={link.to}
                  end={link.end}
                  className={({ isActive }) =>
                    cx(styles.link, isActive && styles.active)
                  }
                >
                  {link.label}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>

        <div className={styles.actions}>
          <ThemeButton />
          <UserMenu />
        </div>
      </div>
    </header>
  );
}

export default Header;

/* src/components/Header.module.css — the active state */
.link {
  display: block;
  padding: var(--space-s) var(--space);
  color: var(--color-text-soft);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.link:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.active {
  color: var(--color-brand);
  font-weight: 600;
  /* Color CANNOT be the only signal: a shape marker is added */
  box-shadow: inset 0 -2px 0 var(--color-brand);
}

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

function Breadcrumbs() {
  const matches = useMatches().filter((m) => m.handle?.crumb);

  if (matches.length <= 1) return null;   // nothing to add on the home screen

  return (
    <nav aria-label="Breadcrumb" className={styles.breadcrumbs}>
      <ol className={styles.list}>
        {matches.map((match, index) => {
          const isLast = index === matches.length - 1;
          const label =
            typeof match.handle.crumb === 'function'
              ? match.handle.crumb(match)
              : match.handle.crumb;

          return (
            <li key={match.id} className={styles.crumb}>
              {isLast ? (
                <span aria-current="page">{label}</span>
              ) : (
                <>
                  <Link to={match.pathname}>{label}</Link>
                  <span aria-hidden="true" className={styles.separator}>/</span>
                </>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export default Breadcrumbs;

// src/data/domain.js — static copy of db.json for working without an API
export const bikes = [
  { id: 'bici-001', model: 'Classic Urban', type: 'urbana', status: 'disponible', stationId: 'est-01', pricePerHour: 2.5 },
  { id: 'bici-002', model: 'Electric Pro', type: 'electrica', status: 'alquilada', stationId: 'est-01', pricePerHour: 4.0 },
  { id: 'bici-003', model: 'Cargo Max', type: 'carga', status: 'mantenimiento', stationId: 'est-02', pricePerHour: 5.5 },
  { id: 'bici-004', model: 'Classic Urban', type: 'urbana', status: 'disponible', stationId: 'est-03', pricePerHour: 2.5 },
  { id: 'bici-005', model: 'Electric Pro', type: 'electrica', status: 'disponible', stationId: 'est-02', pricePerHour: 4.0 }
];

export const stations = [
  { id: 'est-01', name: 'Main Square', district: 'Downtown', docks: 20 },
  { id: 'est-02', name: 'North Park', district: 'North', docks: 15 },
  { id: 'est-03', name: 'Central Station', district: 'Riverside', docks: 30 }
];

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

export const bookings = [
  { id: 'res-01', bicicletaId: 'bici-002', user: 'usr-01', startDate: '2026-05-04T09:00', hours: 2, status: 'activa' }
];

// src/components/PageSkeleton.jsx
import styles from './PageSkeleton.module.css';

function PageSkeleton({ rows = 3, withHeader = true }) {
  return (
    <div className={styles.skeleton} data-testid="esqueleto-pagina" aria-hidden="true">
      {withHeader && <div className={styles.title} />}
      {Array.from({ length: rows }, (_, index) => (
        <div key={index} className={styles.row} />
      ))}
    </div>
  );
}

export default PageSkeleton;

// The screen-reader announcement is kept separate, because the skeleton is aria-hidden
function LoadingIndicator({ text = 'Loading…' }) {
  return (
    <p role="status" aria-live="polite" className="visually-hidden">
      {text}
    </p>
  );
}

// Bad: says nothing
<p>No bookings.</p>

// Good: explains and offers a way out
<div className={styles.empty}>
  <h2>You don't have any bookings yet</h2>
  <p>Once you book a bike it'll show up here with its start time and duration.</p>
  <Button onClick={() => navigate('/')}>View the catalogue</Button>
</div>

// src/pages/CataloguePage.jsx
import { useState, useMemo, useDeferredValue } from 'react';
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 { bikes, stations } from '../data/domain.js';
import styles from './CataloguePage.module.css';

// Temporary switches to review the states. In 11-03 they're replaced by isPending and isError
const LOADING = false;
const WITH_ERROR = false;

function CataloguePage() {
  const [type, setType] = useState('todos');
  const [term, setTerm] = useState('');

  // The deferred term keeps the field responsive with large lists (08-03)
  const deferredTerm = useDeferredValue(term);

  const visible = useMemo(() => {
    const text = deferredTerm.trim().toLowerCase();
    return bikes
      .filter((bike) => type === 'todos' || bike.type === type)
      .filter((bike) => bike.model.toLowerCase().includes(text));
  }, [type, deferredTerm]);

  if (LOADING) return <PageSkeleton rows={5} />;

  if (WITH_ERROR) {
    return (
      <Notice tone="error" title="The bikes couldn't be loaded">
        Check your connection and try again.
      </Notice>
    );
  }

  return (
    <>
      <h1 className={styles.title}>Bike catalogue</h1>
      <p className={styles.intro}>
        {visible.length} of {bikes.length} bikes
      </p>

      <FleetSummary bikes={bikes} />

      <Panel title="Filters" level={2} className={styles.filters}>
        <TypeSelector selectedType={type} onTypeChange={setType} />
        <BikeSearch term={term} onSearch={setTerm} />
      </Panel>

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

export default CataloguePage;

// src/components/TypeSelector.jsx
import { useTransition } from 'react';
import { cx } from '../utils/classNames.js';
import styles from './TypeSelector.module.css';

const TYPES = [
  { value: 'todos', label: 'All' },
  { value: 'urbana', label: 'Urban' },
  { value: 'electrica', label: 'Electric' },
  { value: 'carga', label: 'Cargo' }
];

function TypeSelector({ selectedType, onTypeChange }) {
  const [pending, startTransition] = useTransition();

  return (
    <div
      className={cx(styles.group, pending && styles.pending)}
      role="group"
      aria-label="Filter by bike type"
    >
      {TYPES.map((type) => (
        <button
          key={type.value}
          type="button"
          className={cx(styles.button, selectedType === type.value && styles.active)}
          aria-pressed={selectedType === type.value}
          onClick={() => startTransition(() => onTypeChange(type.value))}
        >
          {type.label}
        </button>
      ))}
    </div>
  );
}

export default TypeSelector;

// src/components/BikeCard.jsx
import { memo } from 'react';
import { Link } from 'react-router';
import { StatusBadge } from './base/Label.jsx';
import Button from './base/Button.jsx';
import styles from './BikeCard.module.css';

function BikeCard({ bike, station, onBook }) {
  const available = bike.status === 'disponible';

  return (
    <article
      className={styles.card}
      data-testid="tarjeta-bicicleta"
      data-bicicleta={bike.id}
    >
      <header className={styles.header}>
        <h3 className={styles.model}>
          <Link to={`/bicicletas/${bike.id}`}>{bike.model}</Link>
        </h3>
        <StatusBadge status={bike.status} />
      </header>

      <dl className={styles.data}>
        <div>
          <dt>Station</dt>
          <dd>{station?.name ?? 'Unassigned'}</dd>
        </div>
        <div>
          <dt>Price</dt>
          <dd>€{bike.pricePerHour.toFixed(2)}/h</dd>
        </div>
      </dl>

      <Button
        variant="primary"
        disabled={!available}
        onClick={() => onBook?.(bike.id)}
        aria-label={`Book ${bike.model}`}
      >
        {available ? 'Book' : 'Not available'}
      </Button>
    </article>
  );
}

export default memo(BikeCard);

// src/pages/BikeDetailPage.jsx
import { useParams, useNavigate, Link } from 'react-router';
import Panel from '../components/base/Panel.jsx';
import Button from '../components/base/Button.jsx';
import { StatusBadge } from '../components/base/Label.jsx';
import { bikes, stations } from '../data/domain.js';
import styles from './BikeDetailPage.module.css';

function BikeDetailPage() {
  const { bicicletaId } = useParams();
  const navigate = useNavigate();

  const bike = bikes.find((b) => b.id === bicicletaId);

  // A nonexistent identifier is NOT a blank screen (H3)
  if (!bike) {
    return (
      <div className={styles.notFound}>
        <h1>This bike doesn't exist</h1>
        <p>The identifier <code>{bicicletaId}</code> doesn't match any bike.</p>
        <Link to="/">Back to the catalogue</Link>
      </div>
    );
  }

  const station = stations.find((s) => s.id === bike.stationId);
  const available = bike.status === 'disponible';

  return (
    <>
      <header className={styles.header}>
        <h1>{bike.model}</h1>
        <StatusBadge status={bike.status} />
      </header>

      <div className={styles.columns}>
        <Panel title="Bike details" level={2}>
          <dl className={styles.data}>
            <div><dt>Identifier</dt><dd>{bike.id}</dd></div>
            <div><dt>Type</dt><dd>{bike.type}</dd></div>
            <div><dt>Price per hour</dt><dd>€{bike.pricePerHour.toFixed(2)}</dd></div>
          </dl>
        </Panel>

        <Panel title="Location" level={2}>
          {station ? (
            <p>
              <Link to={`/estaciones/${station.id}`}>{station.name}</Link>
              {' · '}District {station.district} · {station.docks} docks
            </p>
          ) : (
            <p>This bike isn't assigned to any station.</p>
          )}
        </Panel>
      </div>

      <div className={styles.actions}>
        <Button
          disabled={!available}
          onClick={() => navigate(`/reservas/nueva?bicicleta=${bike.id}`)}
        >
          {available ? 'Book this bike' : 'Not available right now'}
        </Button>
        {!available && (
          <p className={styles.reason}>
            {bike.status === 'alquilada'
              ? "It's rented. Check back later."
              : "It's in maintenance. The workshop team is looking at it."}
          </p>
        )}
      </div>
    </>
  );
}

export default BikeDetailPage;

// src/pages/StationsPage.jsx
import StationCard from '../components/StationCard.jsx';
import { stations, bikes } from '../data/domain.js';
import styles from './StationsPage.module.css';

function StationsPage() {
  return (
    <>
      <h1>Stations</h1>
      <p className={styles.intro}>{stations.length} stations in service.</p>

      <ul className={styles.grid}>
        {stations.map((station) => {
          const stationBikes = bikes.filter((b) => b.stationId === station.id);
          return (
            <li key={station.id}>
              <StationCard
                station={station}
                totalBikes={stationBikes.length}
                available={stationBikes.filter((b) => b.status === 'disponible').length}
              />
            </li>
          );
        })}
      </ul>
    </>
  );
}

export default StationsPage;

// src/pages/StationDetailPage.jsx
import { NavLink, Outlet, useParams } from 'react-router';
import { cx } from '../utils/classNames.js';
import { stations } from '../data/domain.js';
import styles from './StationDetailPage.module.css';

function StationDetailPage() {
  const { estacionId } = useParams();
  const station = stations.find((s) => s.id === estacionId);

  if (!station) {
    return <h1>This station doesn't exist</h1>;
  }

  const linkClass = ({ isActive }) => cx(styles.tab, isActive && styles.active);

  return (
    <>
      <h1>{station.name}</h1>
      <p className={styles.intro}>
        District {station.district} · {station.docks} docks
      </p>

      <nav className={styles.tabs} aria-label="Station sections">
        <NavLink to="." end className={linkClass}>Fleet</NavLink>
        <NavLink to="incidencias" className={linkClass}>Incidents</NavLink>
      </nav>

      {/* The active tab's content */}
      <Outlet context={{ station }} />
    </>
  );
}

export default StationDetailPage;

// src/pages/BookingsPage.jsx
import { useState } from 'react';
import { Link } from 'react-router';
import BookingsPanel from '../components/BookingsPanel.jsx';
import Modal from '../components/base/Modal.jsx';
import Button from '../components/base/Button.jsx';
import { bookings, bikes } from '../data/domain.js';
import styles from './BookingsPage.module.css';

function BookingsPage() {
  // Pure local state: which booking is pending cancellation confirmation
  const [bookingToCancel, setBookingToCancel] = useState(null);

  return (
    <>
      <div className={styles.header}>
        <h1>My bookings</h1>
        <Link to="/reservas/nueva" className={styles.actionLink}>
          New booking
        </Link>
      </div>

      {bookings.length === 0 ? (
        <div className={styles.empty}>
          <h2>You don't have any bookings yet</h2>
          <p>Once you book a bike it'll show up here with its start time and duration.</p>
          <Link to="/">View the catalogue</Link>
        </div>
      ) : (
        <BookingsPanel
          bookings={bookings}
          bikes={bikes}
          onCancel={setBookingToCancel}
        />
      )}

      <Modal
        open={bookingToCancel !== null}
        title="Cancel the booking"
        onClose={() => setBookingToCancel(null)}
      >
        <p>Are you sure you want to cancel this booking? This action can't be undone.</p>
        <div className={styles.modalActions}>
          <Button variant="secondary" onClick={() => setBookingToCancel(null)}>
            Back
          </Button>
          <Button variant="danger" onClick={() => setBookingToCancel(null)}>
            Yes, cancel
          </Button>
        </div>
      </Modal>
    </>
  );
}

export default BookingsPage;

// src/components/BookingsPanel.jsx (excerpt)
<table className={styles.table}>
  <caption className="visually-hidden">List of your bookings</caption>
  <thead>
    <tr>
      <th scope="col">Bike</th>
      <th scope="col">Start</th>
      <th scope="col">Hours</th>
      <th scope="col">Status</th>
      <th scope="col"><span className="visually-hidden">Actions</span></th>
    </tr>
  </thead>
  <tbody>
    {bookings.map((booking) => (
      <tr key={booking.id} data-testid="fila-reserva">
        <td>{bikeFor(booking)?.model ?? 'Unknown'}</td>
        <td>{formatDate(booking.startDate)}</td>
        <td>{booking.hours}</td>
        <td><StatusBadge status={booking.status} /></td>
        <td>
          <Button
            variant="text"
            onClick={() => onCancel(booking)}
            disabled={booking.status === 'cancelada'}
          >
            Cancel
          </Button>
        </td>
      </tr>
    ))}
  </tbody>
</table>

// src/components/BookingForm.jsx
import { useState } from 'react';
import Field from './base/Field.jsx';
import Button from './base/Button.jsx';
import styles from './BookingForm.module.css';

function BookingForm({ bikes, initialValue, submitting = false, onSubmit }) {
  const [formData, setFormData] = useState(initialValue);
  const [errors, setErrors] = useState({});

  const bookable = bikes.filter((b) => b.status === 'disponible');
  const selected = bikes.find((b) => b.id === formData.bicicletaId);
  const total = selected ? selected.pricePerHour * Number(formData.hours || 0) : 0;

  function handleChange(field, value) {
    setFormData((current) => ({ ...current, [field]: value }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    // In 11-03 this is where validateBooking and the mutation come in
    onSubmit?.(formData);
  }

  return (
    <form className={styles.form} onSubmit={handleSubmit} noValidate>
      <Field label="Bike" required error={errors.bicicletaId}>
        {(props) => (
          <select
            {...props}
            value={formData.bicicletaId}
            onChange={(e) => handleChange('bicicletaId', e.target.value)}
          >
            <option value="">Choose a bike</option>
            {bookable.map((bike) => (
              <option key={bike.id} value={bike.id}>
                {bike.model} — €{bike.pricePerHour.toFixed(2)}/h
              </option>
            ))}
          </select>
        )}
      </Field>

      <Field
        label="Booking start"
        required
        error={errors.startDate}
        hint="Can't start in the past"
      >
        {(props) => (
          <input
            {...props}
            type="datetime-local"
            value={formData.startDate}
            onChange={(e) => handleChange('startDate', e.target.value)}
          />
        )}
      </Field>

      <Field label="Duration (hours)" required error={errors.hours} hint="Between 1 and 24">
        {(props) => (
          <input
            {...props}
            type="number"
            min="1"
            max="24"
            value={formData.hours}
            onChange={(e) => handleChange('hours', e.target.value)}
          />
        )}
      </Field>

      <Field label="I accept the terms of use" error={errors.terms}>
        {(props) => (
          <input
            {...props}
            type="checkbox"
            checked={formData.terms}
            onChange={(e) => handleChange('terms', e.target.checked)}
          />
        )}
      </Field>

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

      <Button type="submit" loading={submitting} fullWidth>
        Create booking
      </Button>
    </form>
  );
}

export default BookingForm;

// src/pages/SignInPage.jsx (excerpt)
function SignInPage() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(null);

  function handleSubmit(event) {
    event.preventDefault();
    // In 11-03: dispatch to sessionSlice and redirect to the origin
  }

  return (
    <div className={styles.center}>
      <h1>Sign in to CicloUrbano</h1>

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

      <form onSubmit={handleSubmit} noValidate>
        <Field label="Email" required hint="Try [email protected]">
          {(props) => (
            <input
              {...props}
              type="email"
              autoComplete="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          )}
        </Field>

        <Button type="submit" fullWidth>Sign in</Button>
      </form>
    </div>
  );
}

// src/components/ProtectedRoute.jsx — 11-02 version
import { Outlet } from 'react-router';

function ProtectedRoute() {
  // TODO(11-03): check the real session and redirect to /acceso, preserving the origin
  return <Outlet />;
}

export default ProtectedRoute;

// src/pages/WorkshopPage.jsx (excerpt)
function WorkshopPage() {
  const inMaintenance = bikes.filter((b) => b.status === 'mantenimiento');
  const rest = bikes.filter((b) => b.status !== 'mantenimiento');

  return (
    <>
      <h1>Workshop</h1>
      <p className={styles.intro}>
        Fleet status management. Operator staff only.
      </p>

      <Panel title={`In maintenance (${inMaintenance.length})`} level={2}>
        {inMaintenance.length === 0 ? (
          <p>The whole fleet is operational.</p>
        ) : (
          <ul className={styles.list}>
            {inMaintenance.map((bike) => (
              <li key={bike.id}>
                {bike.model} <code>{bike.id}</code>
                <Button variant="secondary" size="small">Return to service</Button>
              </li>
            ))}
          </ul>
        )}
      </Panel>

      <Panel title={`Rest of the fleet (${rest.length})`} level={2}>
        {/* same pattern, with the "Send to maintenance" button */}
      </Panel>
    </>
  );
}

// src/pages/NotFoundPage.jsx — route * : the URL doesn't exist
function NotFoundPage() {
  return (
    <div className={styles.center}>
      <h1>This page doesn't exist</h1>
      <p>The link might be mistyped, or the page might have moved.</p>
      <Link to="/">Go to the catalogue</Link>
    </div>
  );
}

// src/pages/ForbiddenPage.jsx — the URL exists, but the role isn't enough
function ForbiddenPage() {
  return (
    <div className={styles.center}>
      <h1>You don't have permission to view this page</h1>
      <p>The workshop area is reserved for operator staff.</p>
      <Link to="/">Back to the catalogue</Link>
    </div>
  );
}

// src/pages/RouteErrorPage.jsx — errorElement: something failed while rendering the route
import { useRouteError, isRouteErrorResponse, Link } from 'react-router';
import { reportError } from '../utils/monitoring.js';

function RouteErrorPage() {
  const error = useRouteError();
  reportError(error, { source: 'errorElement' });

  const message = isRouteErrorResponse(error)
    ? `Error ${error.status}: ${error.statusText}`
    : 'A problem occurred while showing this screen.';

  return (
    <div className={styles.center} role="alert">
      <h1>Something went wrong</h1>
      <p>{message}</p>
      <Link to="/">Back to the catalogue</Link>
      {import.meta.env.DEV && <pre className={styles.detail}>{String(error)}</pre>}
    </div>
  );
}

/* src/components/BikeList.module.css */
.list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space);
  /* As many columns as fit, with a minimum of 260px each */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

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

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

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

  .list {
    overflow-x: auto;          /* the navigation scrolls horizontally */
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }
}

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

const STATUSES = [
  { key: 'disponible', label: 'Available', symbol: '●' },
  { key: 'alquilada', label: 'Rented', symbol: '▲' },
  { key: 'mantenimiento', label: 'In maintenance', symbol: '■' }
];

function FleetSummary({ bikes }) {
  const count = useMemo(() => {
    return bikes.reduce(
      (accumulated, bike) => ({ ...accumulated, [bike.status]: (accumulated[bike.status] ?? 0) + 1 }),
      { disponible: 0, alquilada: 0, mantenimiento: 0 }
    );
  }, [bikes]);

  const total = bikes.length;

  // Empty state: without this there'd be a division by zero in the percentage
  if (total === 0) {
    return (
      <section className={styles.summary} aria-labelledby="summary-title">
        <h2 id="summary-title" className={styles.title}>Fleet status</h2>
        <p>No bikes registered.</p>
      </section>
    );
  }

  return (
    <section className={styles.summary} aria-labelledby="summary-title">
      <h2 id="summary-title" className={styles.title}>Fleet status</h2>

      <ul className={styles.list}>
        {STATUSES.map(({ key, label, symbol }) => {
          const quantity = count[key];
          const percentage = Math.round((quantity / total) * 100);

          return (
            <li key={key} className={styles.item}>
              <span className={styles.itemHeader}>
                {/* Symbol: a second signal besides color */}
                <span className={styles[key]} aria-hidden="true">{symbol}</span>
                <span className={styles.label}>{label}</span>
                <span className={styles.quantity}>
                  {quantity}
                  <span className="visually-hidden"> of {total} bikes</span>
                </span>
              </span>

              {/* The bar is purely visual: the data is already in the text */}
              <div className={styles.track} aria-hidden="true">
                <div
                  className={`${styles.bar} ${styles[key]}`}
                  style={{ inlineSize: `${percentage}%` }}
                />
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

export default memo(FleetSummary);

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

  previousElement.current = document.activeElement;
  container.current?.focus();

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

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

    const previous = previousElement.current;
    // Only if it still exists AND is connected to the document
    if (previous instanceof HTMLElement && previous.isConnected) {
      previous.focus();
    } else {
      // Fallback: the main content, which is focusable via tabIndex={-1}
      document.getElementById('content')?.focus();
    }
  };
}, [open]);

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

.table {
  width: 100%;
  min-width: 34rem;      /* below this, the columns get cramped: better to scroll */
  border-collapse: collapse;
}

/* And on mobile, less critical columns go */
@media (max-width: 30rem) {
  .hoursColumn {
    display: none;
  }
}

// BookingsPanel.jsx
<div className={styles.tableContainer}>
  <table className={styles.table}>…</table>
</div>

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.15rem var(--space-s);
  border-radius: 999px;
  font-size: var(--text-s);
  font-weight: 600;
  border: 1px solid currentColor;   /* the border gives shape in addition to color */
}

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

// src/components/TypeSelector.jsx — adaptable variant
function TypeSelector({ selectedType, onTypeChange, variant = 'auto' }) {
  const [pending, startTransition] = useTransition();

  const change = (value) => startTransition(() => onTypeChange(value));

  if (variant === 'dropdown' || TYPES.length > 6) {
    return (
      <Field label="Bike type">
        {(props) => (
          <select {...props} value={selectedType} onChange={(e) => change(e.target.value)}>
            {TYPES.map((type) => (
              <option key={type.value} value={type.value}>{type.label}</option>
            ))}
          </select>
        )}
      </Field>
    );
  }

  return (
    <div className={cx(styles.group, pending && styles.pending)}
         role="group" aria-label="Filter by bike type">
      {TYPES.map((type) => (
        <button key={type.value} type="button"
                className={cx(styles.button, selectedType === type.value && styles.active)}
                aria-pressed={selectedType === type.value}
                onClick={() => change(type.value)}>
          {type.label}
        </button>
      ))}
    </div>
  );
}