/* =====================================================================
 * Module Habillement JSP : année scolaire, grille, fiches, besoins.
 * ===================================================================== */

function NewYearModal({ fromYear, onClose, onCreate }) {
  const [annee, setAnnee] = useState(nextSchoolYear(fromYear));
  const [reconduire, setReconduire] = useState(true);
  const [conserverEquipement, setConserverEquipement] = useState(true);
  const valid = /^\d{4}-\d{4}$/.test(annee);

  return (
    <Modal
      open
      size="sm"
      icon={CalendarDays}
      title="Nouvelle année scolaire"
      onClose={onClose}
      footer={
        <Fragment>
          <Button variant="secondary" onClick={onClose}>
            Annuler
          </Button>
          <Button icon={Plus} disabled={!valid} onClick={() => onCreate(annee, { reconduire, conserverEquipement })}>
            Créer
          </Button>
        </Fragment>
      }
    >
      <div className="space-y-4">
        <Field label="Année scolaire" hint="Format AAAA-AAAA">
          <TextInput value={annee} onChange={setAnnee} placeholder="2027-2028" />
        </Field>
        <Checkbox checked={reconduire} onChange={setReconduire} label={`Reconduire l'effectif ${fromYear} (passage au niveau supérieur)`} />
        {reconduire && (
          <div className="space-y-2 pl-6">
            <Checkbox checked={conserverEquipement} onChange={setConserverEquipement} label="Conserver l'équipement déjà attribué" />
            <p className="text-xs text-slate-500">Les JSP 4 sont considérés comme sortants et ne sont pas reconduits.</p>
          </div>
        )}
      </div>
    </Modal>
  );
}

function JspModule() {
  const { jsps, jspYears, jspYear, setJspYear, upsertJsp, deleteJsp, addJspYear, notify } = useApp();
  const [tab, setTab] = useState('grille');
  const [query, setQuery] = useState('');
  const [niveau, setNiveau] = useState('');
  const [editing, setEditing] = useState(null);
  const [newYearOpen, setNewYearOpen] = useState(false);
  const [vue, setVue] = useState(() => (window.matchMedia('(max-width: 767px)').matches ? 'fiches' : 'tableau'));

  const yearJsps = useMemo(() => sortJsps(jsps.filter((j) => j.annee === jspYear)), [jsps, jspYear]);
  const visible = useMemo(() => {
    const q = query.trim().toLowerCase();
    return yearJsps.filter((j) => (!niveau || j.niveau === niveau) && (!q || `${j.nom} ${j.prenom}`.toLowerCase().includes(q)));
  }, [yearJsps, query, niveau]);
  const nbCommandes = useMemo(() => jspCommandes(yearJsps).length, [yearJsps]);

  const save = (jsp) => {
    upsertJsp(jsp);
    setEditing(null);
    notify('Fiche JSP enregistrée');
  };

  const remove = (jsp) => {
    if (window.confirm(`Supprimer ${jspFullName(jsp)} de l'année ${jsp.annee} ?`)) {
      deleteJsp(jsp.id);
      setEditing(null);
      notify('JSP supprimé', 'red');
    }
  };

  const createYear = (annee, options) => {
    addJspYear(annee, options);
    setNewYearOpen(false);
    notify(`Année ${annee} créée`);
  };

  const exportCsv = () => {
    const rows = [
      ['Nom', 'Prénom', 'Niveau', ...JSP_CHECK_FIELDS.map((f) => f.label), ...JSP_TEXT_FIELDS.map((f) => f.label), 'Notes'],
      ...yearJsps.map((j) => [
        j.nom,
        j.prenom,
        j.niveau,
        ...JSP_CHECK_FIELDS.map((f) => (j[f.key] ? 'X' : '')),
        ...JSP_TEXT_FIELDS.map((f) => j[f.key]),
        j.notes,
      ]),
    ];
    downloadFile(`habillement-jsp-${jspYear}.csv`, toCsv(rows), 'text/csv;charset=utf-8');
  };

  return (
    <div>
      <PageHeader
        title="Habillement JSP"
        subtitle="Stock et affectation des tenues de la section Jeunes Sapeurs-Pompiers"
        icon={Shirt}
        actions={
          <Fragment>
            <SelectInput className="w-auto font-semibold" placeholder={null} value={jspYear} onChange={setJspYear} options={jspYears} />
            <Button variant="secondary" icon={CalendarDays} onClick={() => setNewYearOpen(true)}>
              Nouvelle année
            </Button>
            <Button icon={UserPlus} onClick={() => setEditing(newJsp(jspYear))}>
              Ajouter un JSP
            </Button>
          </Fragment>
        }
      />

      {/* Compteurs par niveau */}
      <div className="mb-5 grid grid-cols-2 gap-3 md:grid-cols-5">
        {JSP_NIVEAUX.map((n) => {
          const count = yearJsps.filter((j) => j.niveau === n.value).length;
          const active = niveau === n.value;
          return (
            <button
              key={n.value}
              type="button"
              onClick={() => setNiveau(active ? '' : n.value)}
              className={cx('flex items-center justify-between rounded-xl border px-4 py-3 text-left transition', n.row, active ? 'border-slate-800 ring-2 ring-slate-800' : 'border-slate-200 hover:border-slate-400')}
            >
              <span className="flex items-center gap-2 font-semibold text-slate-700">
                <span className={cx('h-3 w-3 rounded-full', n.dot)} />
                {n.label}
              </span>
              <span className="text-2xl font-bold text-slate-900">{count}</span>
            </button>
          );
        })}
        <button
          type="button"
          onClick={() => setTab('besoins')}
          className="col-span-2 flex items-center justify-between rounded-xl border border-orange-200 bg-orange-50 px-4 py-3 text-left transition hover:border-orange-400 md:col-span-1"
        >
          <span className="flex items-center gap-2 font-semibold text-orange-800">
            <ShoppingCart className="h-4 w-4" /> À commander
          </span>
          <span className="text-2xl font-bold text-orange-700">{nbCommandes}</span>
        </button>
      </div>

      {/* Onglets */}
      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div className="inline-flex max-w-full flex-wrap rounded-lg border border-slate-200 bg-white p-1 shadow-sm">
          {[
            { id: 'grille', label: 'Tableau récapitulatif', icon: ClipboardList },
            { id: 'appel', label: 'Appel', icon: Users },
            { id: 'besoins', label: 'Besoins & commandes', icon: ShoppingCart },
            { id: 'stock', label: 'Stock', icon: Package },
          ].map((t) => (
            <button
              key={t.id}
              type="button"
              onClick={() => setTab(t.id)}
              className={cx(
                'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition',
                tab === t.id ? 'bg-slate-800 text-white shadow' : 'text-slate-600 hover:bg-slate-100',
              )}
            >
              <t.icon className="h-4 w-4" />
              {t.label}
            </button>
          ))}
        </div>
        {tab === 'grille' && (
          <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
            <div className="inline-flex rounded-lg border border-slate-200 bg-white p-1 shadow-sm">
              {[
                ['tableau', 'Tableau'],
                ['fiches', 'Fiches'],
              ].map(([id, label]) => (
                <button
                  key={id}
                  type="button"
                  onClick={() => setVue(id)}
                  className={cx('rounded-md px-3 py-1.5 text-sm font-medium', vue === id ? 'bg-slate-800 text-white' : 'text-slate-600')}
                >
                  {label}
                </button>
              ))}
            </div>
            <SearchInput className="w-full sm:w-64" value={query} onChange={setQuery} placeholder="Rechercher un JSP…" />
            <Button variant="secondary" icon={Download} onClick={exportCsv} disabled={!yearJsps.length}>
              CSV
            </Button>
          </div>
        )}
      </div>

      {tab === 'grille' ? (
        <Fragment>
          {vue === 'fiches' ? <JspPhoneList jsps={visible} onOpen={(j) => setEditing(j)} /> : <JspGrid jsps={visible} onOpen={(j) => setEditing(j)} />}
          <div className="mt-3 flex flex-wrap items-center gap-4 text-xs text-slate-500">
            {JSP_NIVEAUX.map((n) => (
              <span key={n.value} className="flex items-center gap-1.5">
                <span className={cx('h-3 w-3 rounded border border-slate-300', n.row)} /> {n.label}
              </span>
            ))}
            <span className="flex items-center gap-1.5">
              <span className="h-3 w-3 rounded bg-orange-100 ring-1 ring-orange-300" /> Article à commander
            </span>
            <span>· Les cellules sont modifiables directement, la sauvegarde est automatique.</span>
          </div>
        </Fragment>
      ) : tab === 'appel' ? (
        <JspAppel jsps={yearJsps} annee={jspYear} />
      ) : tab === 'besoins' ? (
        <JspBesoins jsps={yearJsps} annee={jspYear} />
      ) : (
        <JspStock jsps={yearJsps} />
      )}

      {editing && <JspFiche key={editing.id} jsp={editing} onClose={() => setEditing(null)} onSave={save} onDelete={remove} />}
      {newYearOpen && <NewYearModal fromYear={jspYear} onClose={() => setNewYearOpen(false)} onCreate={createYear} />}
    </div>
  );
}