// JavaScript sense framework: dones ordres al DOM
const boto = document.querySelector('.boto-reservar');
if (bicicleta.estat === 'disponible') {
  boto.style.display = 'block';
} else {
  boto.style.display = 'none';
}

// React: descrius el resultat, no els passos
{bicicleta.estat === 'disponible' && <button>Reservar</button>}

// src/components/AvisEstat.jsx

/**
 * Missatge explicatiu de l'estat d'una bicicleta.
 * Props:
 *  - bicicleta (objecte, obligatori)
 */
function AvisEstat({ bicicleta }) {
  let missatge;

  if (bicicleta.estat === 'disponible') {
    missatge = <p className="avis avis--ok">Llesta per sortir.</p>;
  } else if (bicicleta.estat === 'alquilada') {
    missatge = <p className="avis avis--espera">En ús; torna a consultar més tard.</p>;
  } else {
    missatge = <p className="avis avis--taller">Al taller: no es pot reservar.</p>;
  }

  return (
    <div className="avis-estat">
      <h4>{bicicleta.model}</h4>
      {missatge}
    </div>
  );
}

export default AvisEstat;

function AvisDisponibilitat({ bicicleta }) {
  return (
    <p className="avis">
      {bicicleta.estat === 'disponible'
        ? 'Llesta per sortir.'
        : 'No disponible ara mateix.'}
    </p>
  );
}

<div className="accions">
  {bicicleta.estat === 'disponible' ? (
    <button type="button">Reservar</button>
  ) : (
    <span className="no-disponible">No reservable</span>
  )}
</div>

<article className={bicicleta.estat === 'disponible' ? 'targeta' : 'targeta targeta--atenuada'}>
<button type="button" disabled={bicicleta.estat !== 'disponible'}>Reservar</button>

{/* Llegible, al límit */}
{estat === 'disponible' ? 'Lliure' : estat === 'alquilada' ? 'En ús' : 'Al taller'}

{/* Il·legible: això és el que cal evitar */}
{estat === 'disponible'
  ? (rol === 'operario' ? <BotoTaller /> : <BotoReservar />)
  : (estat === 'alquilada' ? <Avis text="En ús" /> : <Avis text="Al taller" />)}

{bicicleta.estat === 'disponible' && <button type="button">Reservar</button>}

{/* Un avís que només apareix quan cal */}
{bicicleta.estat === 'mantenimiento' && (
  <p className="avis-taller">Aquesta bicicleta està en revisió.</p>
)}

{/* Un comptador que només apareix si hi ha alguna cosa a comptar */}
{bicicletesDisponibles > 0 && <span>{bicicletesDisponibles} disponibles</span>}

{/* Un bloc d'administració només per a operaris */}
{usuari.rol === 'operario' && <PanellOperari usuari={usuari} />}

function FitxaEstacio({ estacio, notes }) {
  return (
    <div className="fitxa-estacio">
      <h3>{estacio.nom}</h3>
      <p>Barri: {estacio.barri ?? 'Sense assignar'}</p>
      <p>Notes: {notes ?? 'Sense notes de l\'operari.'}</p>
    </div>
  );
}

const placesLliures = 0;

<p>Places lliures: {placesLliures || 'desconegudes'}</p>   // -> "desconegudes"  ✘  són 0!
<p>Places lliures: {placesLliures ?? 'desconegudes'}</p>   // -> "0"             ✔

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

// El mapa viu FORA del component: és una constant, no canvia entre renders
const ESTATS = {
  disponible: { text: 'Disponible', clau: 'disponible' },
  alquilada: { text: 'Llogada', clau: 'alquilada' },
  mantenimiento: { text: 'Al taller', clau: 'mantenimiento' }
};

const ESTAT_DESCONEGUT = { text: 'Estat desconegut', clau: 'desconegut' };

/**
 * Distintiu visual de l'estat d'una bicicleta.
 * Props:
 *  - estat (cadena, opcional, per defecte 'disponible'):
 *    'disponible' | 'alquilada' | 'mantenimiento'
 */
function EtiquetaEstat({ estat = 'disponible' }) {
  const dades = ESTATS[estat] ?? ESTAT_DESCONEGUT;

  return (
    <span className={classes(estils.etiqueta, estils[dades.clau])}>{dades.text}</span>
  );
}

export default EtiquetaEstat;

import AvisDisponible from './AvisDisponible.jsx';
import AvisLlogada from './AvisLlogada.jsx';
import AvisTaller from './AvisTaller.jsx';

const AVISOS = {
  disponible: AvisDisponible,
  alquilada: AvisLlogada,
  mantenimiento: AvisTaller
};

function AvisDEstat({ bicicleta }) {
  // Compte: la variable ha de començar per MAJÚSCULA perquè JSX la tracti com a component
  const Avis = AVISOS[bicicleta.estat];

  if (!Avis) {
    return null;
  }

  return <Avis bicicleta={bicicleta} />;
}

function MissatgeReserva({ reserva }) {
  function renderitzarMissatge() {
    switch (reserva.estat) {
      case 'activa':
        return <p className="msg msg--ok">Reserva activa. Recull la bicicleta a temps.</p>;
      case 'finalizada':
        return <p className="msg">Reserva finalitzada. Gràcies per utilitzar CicloUrbano.</p>;
      case 'cancelada':
        return <p className="msg msg--aviso">Reserva cancel·lada. No s'ha fet cap càrrec.</p>;
      default:
        return <p className="msg">Estat de reserva no reconegut.</p>;
    }
  }

  return (
    <section className="missatge-reserva">
      <h4>Reserva {reserva.id}</h4>
      {renderitzarMissatge()}
    </section>
  );
}

// src/components/AvisManteniment.jsx

/**
 * Avís que només apareix si la bicicleta està al taller.
 * Props:
 *  - bicicleta (objecte, obligatori)
 */
function AvisManteniment({ bicicleta }) {
  // Retorn anticipat: si no hi ha res a avisar, el component no pinta res
  if (bicicleta.estat !== 'mantenimiento') {
    return null;
  }

  return (
    <p className="avis-taller" role="status">
      La bicicleta {bicicleta.model} està en revisió i no es pot reservar.
    </p>
  );
}

export default AvisManteniment;

function PanellReserva({ bicicleta }) {
  if (!bicicleta) {
    return <p>Selecciona una bicicleta per reservar.</p>;
  }

  // A partir d'aquí sabem que "bicicleta" existeix: la resta del codi va sense por
  return <div className="panell-reserva">…</div>;
}

// MALAMENT: quan el catàleg és buit, en pantalla apareix un "0" solt
function Cataleg({ bicicletas }) {
  return (
    <section>
      <h2>Catàleg</h2>
      {bicicletas.length && <p>S'han trobat {bicicletas.length} bicicletes.</p>}
    </section>
  );
}

{/* 1. Comparació explícita: l'esquerra és un booleà de veritat. LA RECOMANADA */}
{bicicletas.length > 0 && <p>S'han trobat {bicicletas.length} bicicletes.</p>}

{/* 2. Ternari, que a més deixa escrit el cas contrari */}
{bicicletas.length > 0
  ? <p>S'han trobat {bicicletas.length} bicicletes.</p>
  : <p>No hi ha bicicletes per mostrar.</p>}

{/* 3. Doble negació: correcta, però comunica pitjor la intenció */}
{!!bicicletas.length && <p>S'han trobat {bicicletas.length} bicicletes.</p>}

const nota = '';

{nota && <p className="nota">{nota}</p>}

{nota !== '' && <p className="nota">{nota}</p>}
{typeof nota === 'string' && nota.length > 0 && <p className="nota">{nota}</p>}

function AccionsBicicleta({ bicicleta, usuari }) {
  return (
    <div className="accions">
      {bicicleta.estat === 'disponible'
        ? (usuari.rol === 'operario'
            ? <button type="button">Enviar a taller</button>
            : <button type="button">Reservar</button>)
        : (bicicleta.estat === 'alquilada'
            ? <span>En ús fins a les 12:00</span>
            : <span>En revisió</span>)}
    </div>
  );
}

// src/components/AccionsBicicleta.jsx

function AccioReservar({ bicicleta, alReservar }) {
  return (
    <button type="button" onClick={() => alReservar(bicicleta)}>
      Reservar per {bicicleta.preuHora.toFixed(2).replace('.', ',')} €/hora
    </button>
  );
}

function AccioTaller({ bicicleta, alEnviarATaller }) {
  return (
    <button type="button" onClick={() => alEnviarATaller(bicicleta)}>
      Enviar a taller
    </button>
  );
}

function AvisNoDisponible({ bicicleta }) {
  const text = bicicleta.estat === 'alquilada' ? 'En ús ara mateix' : 'En revisió';
  return <span className="no-disponible">{text}</span>;
}

/**
 * Accions disponibles per a una bicicleta segons el seu estat i el rol de l'usuari.
 * Props:
 *  - bicicleta (objecte, obligatori)
 *  - usuari (objecte, obligatori) { id, nom, email, rol }
 *  - alReservar, alEnviarATaller (funcions, opcionals)
 */
function AccionsBicicleta({ bicicleta, usuari, alReservar, alEnviarATaller }) {
  if (bicicleta.estat !== 'disponible') {
    return (
      <div className="accions">
        <AvisNoDisponible bicicleta={bicicleta} />
      </div>
    );
  }

  return (
    <div className="accions">
      {usuari.rol === 'operario' ? (
        <AccioTaller bicicleta={bicicleta} alEnviarATaller={alEnviarATaller} />
      ) : (
        <AccioReservar bicicleta={bicicleta} alReservar={alReservar} />
      )}
    </div>
  );
}

export default AccionsBicicleta;

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

/**
 * Targeta d'una bicicleta del catàleg de CicloUrbano.
 * Props:
 *  - bicicleta (objecte, obligatori) { id, model, tipus, estat, estacioId, preuHora }
 *  - nomEstacio (cadena, opcional, per defecte 'Estació desconeguda')
 *  - alSeleccionar (funció, opcional): rep la bicicleta en prémer la targeta
 *  - alReservar (funció, opcional): rep la bicicleta en prémer «Reservar»
 */
function TargetaBicicleta({
  bicicleta,
  nomEstacio = 'Estació desconeguda',
  alSeleccionar,
  alReservar
}) {
  // Valors derivats: es calculen a cada render, no són estat
  const disponible = bicicleta.estat === 'disponible';
  const enTaller = bicicleta.estat === 'mantenimiento';
  const preuFormatat = bicicleta.preuHora.toFixed(2).replace('.', ',');

  function gestionarClicTargeta() {
    if (alSeleccionar) {
      alSeleccionar(bicicleta);
    }
  }

  function gestionarClicReservar(esdeveniment) {
    esdeveniment.stopPropagation();
    if (alReservar) {
      alReservar(bicicleta);
    }
  }

  return (
    <article
      className={classes(estils.targeta, estils[bicicleta.tipus], !disponible && estils.atenuada)}
      onClick={gestionarClicTargeta}
    >
      <h3 className={estils.titol}>
        {bicicleta.model} <EtiquetaEstat estat={bicicleta.estat} />
      </h3>

      <p className={estils.dada}>Tipus: {bicicleta.tipus}</p>
      <p className={estils.dada}>Estació: {nomEstacio ?? 'Estació desconeguda'}</p>
      <p className={estils.preu}>{preuFormatat} € / hora</p>

      {/* Avís: es mostra o no es mostra. Cas de manual per a && */}
      {enTaller && (
        <p className={estils.avisTaller}>En revisió: no admet reserves de moment.</p>
      )}

      {/* Acció: dues alternatives concretes. Cas de manual per al ternari */}
      {disponible ? (
        <button type="button" className={estils.accio} onClick={gestionarClicReservar}>
          Reservar
        </button>
      ) : (
        <p className={estils.senseAccio}>Torna a consultar-la més tard.</p>
      )}
    </article>
  );
}

export default TargetaBicicleta;

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

/**
 * Secció del catàleg de CicloUrbano.
 * Props:
 *  - primera, segona, tercera (objectes bicicleta, opcionals)
 *  - alSeleccionar, alReservar (funcions, opcionals)
 *
 * (A 03-03 aquestes tres props desapareixen i passa a rebre l'array complet.)
 */
function LlistaBicicletes({ primera, segona, tercera, alSeleccionar, alReservar }) {
  // Comptem quantes props porten realment una bicicleta
  const rebudes = [primera, segona, tercera].filter(Boolean);
  const hiHaBicicletes = rebudes.length > 0;

  return (
    <section className={estils.llista}>
      <h2>Bicicletes del catàleg</h2>

      {hiHaBicicletes ? (
        <>
          <p className={estils.recompte}>
            {rebudes.length === 1
              ? "S'ha trobat 1 bicicleta."
              : `S'han trobat ${rebudes.length} bicicletes.`}
          </p>

          {primera && (
            <TargetaBicicleta
              bicicleta={primera}
              nomEstacio="Plaça Major"
              alSeleccionar={alSeleccionar}
              alReservar={alReservar}
            />
          )}
          {segona && (
            <TargetaBicicleta
              bicicleta={segona}
              nomEstacio="Plaça Major"
              alSeleccionar={alSeleccionar}
              alReservar={alReservar}
            />
          )}
          {tercera && (
            <TargetaBicicleta
              bicicleta={tercera}
              nomEstacio="Parc Nord"
              alSeleccionar={alSeleccionar}
              alReservar={alReservar}
            />
          )}
        </>
      ) : (
        <p className={estils.buit}>
          No hi ha bicicletes que coincideixin amb el filtre. Prova amb un altre tipus.
        </p>
      )}
    </section>
  );
}

export default LlistaBicicletes;

function ResumEstacio({ estacio, bicicletesEnEstacio, notaOperari }) {
  return (
    <div className="resum-estacio">
      <h3>{estacio.nom}</h3>
      <p>Barri: {estacio.barri || 'Sense assignar'}</p>
      {bicicletesEnEstacio.length && <p>{bicicletesEnEstacio.length} bicicletes aparcades</p>}
      <p>Places lliures: {estacio.places - bicicletesEnEstacio.length || 'cap'}</p>
      {notaOperari ? <p className="nota">{notaOperari}</p> : null}
    </div>
  );
}

// src/components/ResumEstacio.jsx

/**
 * Resum d'ocupació d'una estació de CicloUrbano.
 * Props:
 *  - estacio (objecte, obligatori) { id, nom, barri, places }
 *  - bicicletesEnEstacio (array, opcional, per defecte [])
 *  - notaOperari (cadena, opcional)
 */
function ResumEstacio({ estacio, bicicletesEnEstacio = [], notaOperari }) {
  const aparcades = bicicletesEnEstacio.length;
  const lliures = estacio.places - aparcades;

  return (
    <div className="resum-estacio">
      <h3>{estacio.nom}</h3>
      <p>Barri: {estacio.barri ?? 'Sense assignar'}</p>

      {aparcades > 0 ? (
        <p>{aparcades === 1 ? '1 bicicleta aparcada' : `${aparcades} bicicletes aparcades`}</p>
      ) : (
        <p>No hi ha bicicletes aparcades.</p>
      )}

      <p>Places lliures: {lliures}</p>
      {lliures === 0 && <p className="avis">Estació completa.</p>}

      {typeof notaOperari === 'string' && notaOperari.length > 0 && (
        <p className="nota">{notaOperari}</p>
      )}
    </div>
  );
}

export default ResumEstacio;

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

const MOTIUS_NO_DISPONIBLE = {
  alquilada: 'Aquesta bicicleta està llogada ara mateix.',
  mantenimiento: 'Aquesta bicicleta és al taller i no admet reserves.'
};

/**
 * Panell de confirmació d'una reserva de CicloUrbano.
 * Props:
 *  - bicicleta (objecte, opcional): si falta, el panell convida a triar-ne una
 *  - hores (número, opcional, per defecte 1)
 *  - alConfirmar (funció, opcional): rep { bicicleta, hores, total }
 */
function PanellReserva({ bicicleta, hores = 1, alConfirmar }) {
  // Clàusula de guarda: sense bicicleta no hi ha res a calcular
  if (!bicicleta) {
    return <p className={estils.buit}>Selecciona una bicicleta del catàleg.</p>;
  }

  const disponible = bicicleta.estat === 'disponible';

  if (!disponible) {
    const motiu = MOTIUS_NO_DISPONIBLE[bicicleta.estat] ?? 'Aquesta bicicleta no està disponible.';
    return (
      <div className={estils.panell}>
        <h3>{bicicleta.model}</h3>
        <p className={estils.avis}>{motiu}</p>
      </div>
    );
  }

  const total = bicicleta.preuHora * hores;
  const totalFormatat = total.toFixed(2).replace('.', ',');

  return (
    <div className={estils.panell}>
      <h3>{bicicleta.model}</h3>
      <p>Durada: {hores === 1 ? '1 hora' : `${hores} hores`}</p>
      <p className={estils.total}>Total: {totalFormatat} €</p>

      {total > 10 && (
        <p className={estils.avisLlarg}>
          Reserva de llarga durada: cal confirmació per correu.
        </p>
      )}

      <button
        type="button"
        onClick={() => alConfirmar && alConfirmar({ bicicleta, hores, total })}
      >
        Confirmar reserva
      </button>
    </div>
  );
}

export default PanellReserva;