function FormulariSenzill() {
  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();
    // El valor es llegeix ARA, no abans
    const dades = new FormData(esdeveniment.target);
    console.log(dades.get('model'));
  }

  return (
    <form onSubmit={gestionarEnviament}>
      <label htmlFor="model">Model</label>
      <input id="model" name="model" type="text" />
      <button type="submit">Desar</button>
    </form>
  );
}

{/* ✔ Valor inicial d'un camp NO controlat */}
<input name="hores" type="number" defaultValue={2} />
<textarea name="observacions" defaultValue="Sense observacions" />
<select name="tipus" defaultValue="urbana">
  <option value="urbana">Urbana</option>
  <option value="electrica">Elèctrica</option>
</select>

{/* Per a caselles i ràdios, defaultChecked */}
<input name="condicions" type="checkbox" defaultChecked />
<input name="estat" type="radio" value="disponible" defaultChecked />

// src/components/FormulariIncidencia.jsx

/**
 * Part d'incidència d'una bicicleta, amb camps NO controlats.
 * Props:
 *  - bicicletes (array, opcional, per defecte [])
 *  - alRegistrar (funció, opcional): rep l'objecte d'incidència
 */
function FormulariIncidencia({ bicicletes = [], alRegistrar }) {
  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();

    // esdeveniment.target és el <form>; FormData recull tots els seus camps amb name
    const formulari = esdeveniment.target;
    const dades = new FormData(formulari);

    const incidencia = {
      bicicletaId: dades.get('bicicletaId'),
      descripcio: dades.get('descripcio'),
      // get() SEMPRE retorna cadena (o null): cal convertir
      urgencia: Number(dades.get('urgencia')),
      // Una casella sense marcar NO apareix a FormData: get() retorna null
      bloquejaUs: dades.get('bloquejaUs') === 'on'
    };

    if (alRegistrar) {
      alRegistrar(incidencia);
    }

    formulari.reset();   // en un formulari NO controlat, reset() sí que és correcte
  }

  return (
    <form onSubmit={gestionarEnviament}>
      <label htmlFor="bicicletaId">Bicicleta</label>
      <select id="bicicletaId" name="bicicletaId" defaultValue="">
        <option value="">— Tria una bicicleta —</option>
        {bicicletes.map((bicicleta) => (
          <option key={bicicleta.id} value={bicicleta.id}>
            {bicicleta.model} ({bicicleta.id})
          </option>
        ))}
      </select>

      <label htmlFor="descripcio">Descripció</label>
      <textarea id="descripcio" name="descripcio" rows={3} />

      <label htmlFor="urgencia">Urgència (1-5)</label>
      <input id="urgencia" name="urgencia" type="number" min={1} max={5} defaultValue={3} />

      <label>
        <input name="bloquejaUs" type="checkbox" /> Impedeix l'ús de la bicicleta
      </label>

      <button type="submit">Registrar incidència</button>
    </form>
  );
}

export default FormulariIncidencia;

// Convertir tot el formulari en un objecte pla d'una sola línia
const objecte = Object.fromEntries(new FormData(formulari));

// Recollir tots els valors d'un camp repetit (caselles amb el mateix name)
const tipus = new FormData(formulari).getAll('tipus');   // array de cadenes

import { useRef } from 'react';

function CercadorRapid({ alBuscar }) {
  const campCerca = useRef(null);   // comença buit

  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();
    alBuscar(campCerca.current.value);   // accés directe al node
  }

  return (
    <form onSubmit={gestionarEnviament}>
      <input ref={campCerca} type="text" name="cerca" />
      <button type="submit">Cercar</button>
    </form>
  );
}

function PujadaFoto({ alSeleccionarFoto }) {
  function gestionarCanvi(esdeveniment) {
    const fitxer = esdeveniment.target.files[0];   // FileList, no una cadena

    if (!fitxer) {
      return;
    }

    console.log(fitxer.name, fitxer.size, fitxer.type);
    alSeleccionarFoto(fitxer);
  }

  return (
    <label>
      Foto del desperfecte:{' '}
      <input type="file" accept="image/*" onChange={gestionarCanvi} />
    </label>
  );
}

<form onSubmit={gestionarEnviament}>
  <input name="email" type="email" required />
  <input name="hores" type="number" min={1} max={24} step={1} required />
  <input name="codi" type="text" pattern="[A-Z]{3}-[0-9]{3}" title="Format: ABC-123" />
  <input name="dataInici" type="datetime-local" required />
  <button type="submit">Enviar</button>
</form>

<form onSubmit={gestionarEnviament} noValidate>

// src/utilitats/validarReserva.js

const MAX_HORES = 24;

/**
 * Valida les dades d'una reserva de CicloUrbano.
 *
 * @param {Object} dades - { bicicletaId, dataInici, hores, condicions }
 * @param {Array}  bicicletes - catàleg, per comprovar la disponibilitat
 * @returns {Object} objecte amb un missatge per cada camp amb error.
 *                   Sense errors, retorna un objecte buit {}.
 */
export function validarReserva(dades, bicicletes = []) {
  const errors = {};

  // --- Bicicleta: obligatòria i disponible ---
  if (!dades.bicicletaId) {
    errors.bicicletaId = 'Tria una bicicleta.';
  } else {
    const bicicleta = bicicletes.find((b) => b.id === dades.bicicletaId);

    if (!bicicleta) {
      errors.bicicletaId = 'La bicicleta seleccionada no existeix.';
    } else if (bicicleta.estat !== 'disponible') {
      errors.bicicletaId = `${bicicleta.model} no està disponible ara mateix.`;
    }
  }

  // --- Data d'inici: obligatòria i no anterior a aquest moment ---
  if (!dades.dataInici) {
    errors.dataInici = 'Indica quan comença la reserva.';
  } else {
    const inici = new Date(dades.dataInici);

    if (Number.isNaN(inici.getTime())) {
      errors.dataInici = 'La data no té un format vàlid.';
    } else if (inici.getTime() < Date.now()) {
      errors.dataInici = 'La reserva no pot començar en el passat.';
    }
  }

  // --- Hores: enter entre 1 i 24 ---
  const hores = Number(dades.hores);

  if (dades.hores === '' || Number.isNaN(hores)) {
    errors.hores = 'Indica quantes hores vols la bicicleta.';
  } else if (!Number.isInteger(hores)) {
    errors.hores = 'Les hores han de ser un nombre enter.';
  } else if (hores < 1) {
    errors.hores = 'La reserva mínima és d\'1 hora.';
  } else if (hores > MAX_HORES) {
    errors.hores = `La reserva màxima és de ${MAX_HORES} hores.`;
  }

  // --- Condicions: cal acceptar-les ---
  if (!dades.condicions) {
    errors.condicions = 'Has d\'acceptar les condicions d\'ús.';
  }

  return errors;
}

const errors = validarReserva(dades, bicicletes);
const esValid = Object.keys(errors).length === 0;

const [tocats, setTocats] = useState({});   // { bicicletaId: true, hores: true, … }

function gestionarBlur(esdeveniment) {
  const { name } = esdeveniment.target;
  setTocats((anterior) => ({ ...anterior, [name]: true }));
}

{tocats.hores && errors.hores && <p className="error">{errors.hores}</p>}

function marcarTotsTocats(dades) {
  const tots = {};
  Object.keys(dades).forEach((camp) => {
    tots[camp] = true;
  });
  return tots;
}

<div className={estils.camp}>
  <label htmlFor="hores">Durada (hores)</label>
  <input id="hores" name="hores" type="number" value={dades.hores} onChange={gestionarCanvi} onBlur={gestionarBlur} />
  {mostrarError('hores') && <p className={estils.error}>{errors.hores}</p>}
</div>

// src/components/FormulariReserva.jsx
import { useState } from 'react';
import { classes } from '../utilitats/classes.js';
import { validarReserva } from '../utilitats/validarReserva.js';
import estils from './FormulariReserva.module.css';

const DADES_INICIALS = {
  bicicletaId: '',
  dataInici: '',
  hores: 2,
  condicions: false
};

/**
 * Formulari de creació de reserves de CicloUrbano, amb validació.
 * Props:
 *  - bicicletes (array, opcional, per defecte []): catàleg complet
 *  - usuariId (cadena, opcional, per defecte 'usr-01')
 *  - alCrearReserva (funció, opcional): rep l'objecte Reserva validat
 *
 * Estat: `dades` (el que s'escriu) i `tocats` (amb quins camps s'ha interactuat).
 * Els ERRORS no són estat: es deriven de `dades` a cada render.
 */
function FormulariReserva({ bicicletes = [], usuariId = 'usr-01', alCrearReserva }) {
  const [dades, setDades] = useState(DADES_INICIALS);
  const [tocats, setTocats] = useState({});

  // Valors derivats
  const errors = validarReserva(dades, bicicletes);
  const esValid = Object.keys(errors).length === 0;
  const disponibles = bicicletes.filter((bicicleta) => bicicleta.estat === 'disponible');
  const escollida = bicicletes.find((bicicleta) => bicicleta.id === dades.bicicletaId);
  const total = escollida ? escollida.preuHora * Number(dades.hores || 0) : 0;

  // Un error només s'ensenya si el camp ja ha estat tocat
  function mostrarError(camp) {
    return Boolean(tocats[camp] && errors[camp]);
  }

  function gestionarCanvi(esdeveniment) {
    const { name, type, value, checked } = esdeveniment.target;

    let valorFinal = value;
    if (type === 'checkbox') {
      valorFinal = checked;
    } else if (type === 'number') {
      valorFinal = value === '' ? '' : Number(value);
    }

    setDades((anterior) => ({ ...anterior, [name]: valorFinal }));
  }

  function gestionarBlur(esdeveniment) {
    const { name } = esdeveniment.target;
    setTocats((anterior) => ({ ...anterior, [name]: true }));
  }

  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();

    // En enviar, tots els camps passen a tocats: es veuen tots els errors
    const totsTocats = {};
    Object.keys(DADES_INICIALS).forEach((camp) => {
      totsTocats[camp] = true;
    });
    setTocats(totsTocats);

    if (!esValid) {
      return;   // no s'envia res mentre hi hagi errors
    }

    const reserva = {
      id: `res-${crypto.randomUUID().slice(0, 8)}`,
      bicicletaId: dades.bicicletaId,
      usuari: usuariId,
      dataInici: dades.dataInici,
      hores: Number(dades.hores),
      estat: 'activa'
    };

    if (alCrearReserva) {
      alCrearReserva(reserva);
    }

    setDades(DADES_INICIALS);
    setTocats({});
  }

  return (
    // noValidate: desactivem els globus del navegador i fem servir els nostres missatges
    <form className={estils.formulari} onSubmit={gestionarEnviament} noValidate>
      <h2>Nova reserva</h2>

      <div className={estils.camp}>
        <label htmlFor="bicicletaId">Bicicleta</label>
        <select
          id="bicicletaId"
          name="bicicletaId"
          required
          value={dades.bicicletaId}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
          className={classes(estils.control, mostrarError('bicicletaId') && estils.invalid)}
        >
          <option value="">— Tria una bicicleta —</option>
          {disponibles.map((bicicleta) => (
            <option key={bicicleta.id} value={bicicleta.id}>
              {bicicleta.model} · {bicicleta.preuHora.toFixed(2).replace('.', ',')} €/h
            </option>
          ))}
        </select>
        {mostrarError('bicicletaId') && (
          <p className={estils.error}>{errors.bicicletaId}</p>
        )}
      </div>

      <div className={estils.camp}>
        <label htmlFor="dataInici">Inici de la reserva</label>
        <input
          id="dataInici"
          name="dataInici"
          type="datetime-local"
          required
          value={dades.dataInici}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
          className={classes(estils.control, mostrarError('dataInici') && estils.invalid)}
        />
        {mostrarError('dataInici') && (
          <p className={estils.error}>{errors.dataInici}</p>
        )}
      </div>

      <div className={estils.camp}>
        <label htmlFor="hores">Durada (hores)</label>
        <input
          id="hores"
          name="hores"
          type="number"
          min={1}
          max={24}
          step={1}
          required
          value={dades.hores}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
          className={classes(estils.control, mostrarError('hores') && estils.invalid)}
        />
        {mostrarError('hores') && <p className={estils.error}>{errors.hores}</p>}
      </div>

      <div className={estils.campCasella}>
        <label>
          <input
            name="condicions"
            type="checkbox"
            checked={dades.condicions}
            onChange={gestionarCanvi}
            onBlur={gestionarBlur}
          />{' '}
          Accepto les condicions d'ús de CicloUrbano
        </label>
        {mostrarError('condicions') && (
          <p className={estils.error}>{errors.condicions}</p>
        )}
      </div>

      {escollida && esValid && (
        <p className={estils.total}>
          {escollida.model} · {dades.hores} h ·{' '}
          <strong>{total.toFixed(2).replace('.', ',')} €</strong>
        </p>
      )}

      <button type="submit" className={estils.enviar}>
        Crear reserva
      </button>
    </form>
  );
}

export default FormulariReserva;

function FormulariDevolucio({ estacions }) {
  const [estacio, setEstacio] = useState('');

  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();
    const dades = new FormData(esdeveniment.target);
    console.log({
      estacio,
      quilometres: dades.get('quilometres'),
      incidencia: dades.get('incidencia'),
      foto: dades.get('foto')
    });
    esdeveniment.target.reset();
  }

  return (
    <form onSubmit={gestionarEnviament}>
      <select value={estacio}>
        {estacions.map((e) => <option key={e.id} value={e.id}>{e.nom}</option>)}
      </select>

      <input type="number" defaultValue={0} />

      <input type="checkbox" name="incidencia" />

      <input type="file" name="foto" value="" />

      <button type="submit">Retornar</button>
    </form>
  );
}

// src/components/FormulariDevolucio.jsx

/**
 * Part de devolució d'una bicicleta. Formulari NO controlat:
 * els valors els guarda el DOM i es llegeixen amb FormData en enviar.
 * Props:
 *  - estacions (array, opcional, per defecte [])
 *  - alRetornar (funció, opcional): rep el part de devolució
 */
function FormulariDevolucio({ estacions = [], alRetornar }) {
  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();

    const formulari = esdeveniment.target;
    const dades = new FormData(formulari);

    const part = {
      estacioId: dades.get('estacioId'),
      quilometres: Number(dades.get('quilometres')),
      // Una casella sense marcar no apareix a FormData
      incidencia: dades.get('incidencia') === 'on',
      foto: dades.get('foto')   // objecte File, o un File buit si no s'ha triat res
    };

    if (alRetornar) {
      alRetornar(part);
    }

    formulari.reset();   // correcte: tots els camps són no controlats
  }

  return (
    <form onSubmit={gestionarEnviament}>
      <label htmlFor="estacioId">Estació de devolució</label>
      <select id="estacioId" name="estacioId" defaultValue="" required>
        <option value="">— Tria una estació —</option>
        {estacions.map((estacio) => (
          <option key={estacio.id} value={estacio.id}>
            {estacio.nom} ({estacio.barri})
          </option>
        ))}
      </select>

      <label htmlFor="quilometres">Quilòmetres recorreguts</label>
      <input id="quilometres" name="quilometres" type="number" min={0} defaultValue={0} />

      <label>
        <input name="incidencia" type="checkbox" /> Hi ha una incidència a reportar
      </label>

      <label htmlFor="foto">Foto (opcional)</label>
      <input id="foto" name="foto" type="file" accept="image/*" />

      <button type="submit">Retornar</button>
    </form>
  );
}

export default FormulariDevolucio;

// src/utilitats/validarEstacio.js

const BARRIS_VALIDS = ['Centre', 'Nord', 'Eixample'];
const MIN_PLACES = 5;
const MAX_PLACES = 60;

function normalitzar(text) {
  return String(text ?? '').trim().toLowerCase();
}

/**
 * Valida l'alta d'una estació de CicloUrbano.
 *
 * @param {Object} dades - { nom, barri, places, enServei, motiu }
 * @param {Array} existents - estacions ja registrades, per evitar duplicats
 * @returns {Object} un missatge per camp amb error; {} si tot és vàlid
 */
export function validarEstacio(dades, existents = []) {
  const errors = {};

  // --- Nom ---
  const nom = String(dades.nom ?? '').trim();

  if (nom === '') {
    errors.nom = 'El nom de l\'estació és obligatori.';
  } else if (nom.length < 3) {
    errors.nom = 'El nom ha de tenir com a mínim 3 caràcters.';
  } else if (nom.length > 40) {
    errors.nom = 'El nom no pot superar els 40 caràcters.';
  } else if (existents.some((estacio) => normalitzar(estacio.nom) === normalitzar(nom))) {
    errors.nom = `Ja existeix una estació anomenada «${nom}».`;
  }

  // --- Barri ---
  if (!dades.barri) {
    errors.barri = 'Tria un barri.';
  } else if (!BARRIS_VALIDS.includes(dades.barri)) {
    errors.barri = `El barri ha de ser un d'aquests: ${BARRIS_VALIDS.join(', ')}.`;
  }

  // --- Places ---
  const places = Number(dades.places);

  if (dades.places === '' || Number.isNaN(places)) {
    errors.places = 'Indica el nombre de places.';
  } else if (!Number.isInteger(places)) {
    errors.places = 'Les places han de ser un nombre enter.';
  } else if (places < MIN_PLACES || places > MAX_PLACES) {
    errors.places = `Les places han d'estar entre ${MIN_PLACES} i ${MAX_PLACES}.`;
  }

  // --- Motiu, només si l'estació no entra en servei ---
  if (dades.enServei === false) {
    const motiu = String(dades.motiu ?? '').trim();

    if (motiu.length < 10) {
      errors.motiu = 'Explica en almenys 10 caràcters per què no entra en servei.';
    }
  }

  return errors;
}

const existents = [
  { id: 'est-01', nom: 'Plaça Major', barri: 'Centre', places: 20 },
  { id: 'est-02', nom: 'Parc Nord', barri: 'Nord', places: 15 }
];

// Cas 1: tot correcte -> {}
validarEstacio(
  { nom: 'Mercat Vell', barri: 'Eixample', places: 25, enServei: true },
  existents
);

// Cas 2: nom duplicat amb caixa diferent i espais, places fora de rang
validarEstacio(
  { nom: '  plaça major  ', barri: 'Centre', places: 100, enServei: true },
  existents
);
// -> {
//      nom: 'Ja existeix una estació anomenada «plaça major».',
//      places: 'Les places han d\'estar entre 5 i 60.'
//    }

// Cas 3: fora de servei sense motiu suficient
validarEstacio(
  { nom: 'Pont Sud', barri: 'Eixample', places: 12, enServei: false, motiu: 'obres' },
  existents
);
// -> { motiu: 'Explica en almenys 10 caràcters per què no entra en servei.' }

// src/components/FormulariIncidencia.jsx
import { useState } from 'react';

const MAX_DESCRIPCIO = 500;
const MIN_DESCRIPCIO = 15;

const DADES_INICIALS = {
  bicicletaId: '',
  descripcio: '',
  urgencia: 3,
  bloquejaUs: false
};

function validarIncidencia(dades) {
  const errors = {};

  if (!dades.bicicletaId) {
    errors.bicicletaId = 'Tria la bicicleta afectada.';
  }

  const descripcio = dades.descripcio.trim();
  if (descripcio.length === 0) {
    errors.descripcio = 'Descriu la incidència.';
  } else if (descripcio.length < MIN_DESCRIPCIO) {
    errors.descripcio = `Descriu la incidència amb almenys ${MIN_DESCRIPCIO} caràcters.`;
  } else if (descripcio.length > MAX_DESCRIPCIO) {
    errors.descripcio = `La descripció no pot superar els ${MAX_DESCRIPCIO} caràcters.`;
  }

  const urgencia = Number(dades.urgencia);
  if (dades.urgencia === '' || Number.isNaN(urgencia)) {
    errors.urgencia = 'Indica el nivell d\'urgència.';
  } else if (!Number.isInteger(urgencia) || urgencia < 1 || urgencia > 5) {
    errors.urgencia = 'La urgència ha de ser un enter entre 1 i 5.';
  } else if (dades.bloquejaUs && urgencia < 4) {
    // Validació CREUADA entre dos camps
    errors.urgencia = 'Si la incidència impedeix l\'ús, la urgència ha de ser 4 o 5.';
  }

  return errors;
}

/**
 * Part d'incidència d'una bicicleta, controlat i validat.
 * Props:
 *  - bicicletes (array, opcional, per defecte [])
 *  - alRegistrar (funció, opcional): rep la incidència validada
 */
function FormulariIncidencia({ bicicletes = [], alRegistrar }) {
  const [dades, setDades] = useState(DADES_INICIALS);
  const [tocats, setTocats] = useState({});

  const errors = validarIncidencia(dades);
  const esValid = Object.keys(errors).length === 0;
  const restants = MAX_DESCRIPCIO - dades.descripcio.length;

  function mostrarError(camp) {
    return Boolean(tocats[camp] && errors[camp]);
  }

  function gestionarCanvi(esdeveniment) {
    const { name, type, value, checked } = esdeveniment.target;

    let valorFinal = value;
    if (type === 'checkbox') {
      valorFinal = checked;
    } else if (type === 'number') {
      valorFinal = value === '' ? '' : Number(value);
    }

    setDades((anterior) => ({ ...anterior, [name]: valorFinal }));
  }

  function gestionarBlur(esdeveniment) {
    const { name } = esdeveniment.target;
    setTocats((anterior) => ({ ...anterior, [name]: true }));
  }

  function gestionarEnviament(esdeveniment) {
    esdeveniment.preventDefault();

    const tots = {};
    Object.keys(DADES_INICIALS).forEach((camp) => {
      tots[camp] = true;
    });
    setTocats(tots);

    if (!esValid) {
      return;
    }

    if (alRegistrar) {
      alRegistrar({ ...dades, descripcio: dades.descripcio.trim() });
    }

    setDades(DADES_INICIALS);
    setTocats({});
  }

  return (
    <form onSubmit={gestionarEnviament} noValidate>
      <div>
        <label htmlFor="bicicletaId">Bicicleta</label>
        <select
          id="bicicletaId"
          name="bicicletaId"
          value={dades.bicicletaId}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
        >
          <option value="">— Tria una bicicleta —</option>
          {bicicletes.map((bicicleta) => (
            <option key={bicicleta.id} value={bicicleta.id}>
              {bicicleta.model} ({bicicleta.id})
            </option>
          ))}
        </select>
        {mostrarError('bicicletaId') && <p className="error">{errors.bicicletaId}</p>}
      </div>

      <div>
        <label htmlFor="descripcio">Descripció</label>
        <textarea
          id="descripcio"
          name="descripcio"
          rows={3}
          maxLength={MAX_DESCRIPCIO}
          value={dades.descripcio}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
        />
        <small>Queden {restants} caràcters.</small>
        {mostrarError('descripcio') && <p className="error">{errors.descripcio}</p>}
      </div>

      <div>
        <label htmlFor="urgencia">Urgència (1-5)</label>
        <input
          id="urgencia"
          name="urgencia"
          type="number"
          min={1}
          max={5}
          value={dades.urgencia}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
        />
        {mostrarError('urgencia') && <p className="error">{errors.urgencia}</p>}
      </div>

      <label>
        <input
          name="bloquejaUs"
          type="checkbox"
          checked={dades.bloquejaUs}
          onChange={gestionarCanvi}
          onBlur={gestionarBlur}
        />{' '}
        Impedeix l'ús de la bicicleta
      </label>

      <button type="submit">Registrar incidència</button>
    </form>
  );
}

export default FormulariIncidencia;