/* Maschera Anagrafiche — gestione CRUD dei dati di base (su SQLite) */
const { useState: anus, useEffect: anuef } = React;

function MaskAnagrafiche() {
  const D = window.DATA;
  const [entities, setEntities] = anus(null);   // meta entità
  const [entity, setEntity] = anus("dipartimenti");
  const [data, setData] = anus(null);            // { rows, fields, pk, label }
  const [editing, setEditing] = anus(null);      // null | { _isNew:true } | row
  const [confirmDel, setConfirmDel] = anus(null);
  const [busy, setBusy] = anus(false);
  const [err, setErr] = anus(null);
  const [flash, setFlash] = anus(null);
  const [q, setQ] = anus("");

  anuef(() => { D.api.anag.meta().then(m => setEntities(m.entities)).catch(e => setErr(e.message)); }, []);
  anuef(() => {
    let alive = true;
    setData(null); setEditing(null); setConfirmDel(null); setErr(null); setQ("");
    D.api.anag.list(entity).then(d => { if (alive) setData(d); }).catch(e => { if (alive) setErr(e.message); });
    return () => { alive = false; };
  }, [entity]);

  function reload() { return D.api.anag.list(entity).then(setData); }
  function notify(msg) { setFlash(msg); setTimeout(() => setFlash(null), 2600); }

  async function save(form) {
    setBusy(true); setErr(null);
    try {
      if (editing._isNew) await D.api.anag.create(entity, form);
      else await D.api.anag.update(entity, editing[data.pk], form);
      await reload();
      await D.api.bootstrap();            // aggiorna anagrafiche in window.DATA (filtri/etichette)
      setEditing(null);
      notify(editing._isNew ? "Record creato" : "Record aggiornato");
    } catch (e) { setErr(e.message); }
    finally { setBusy(false); }
  }

  async function doDelete(id) {
    setBusy(true); setErr(null);
    try {
      await D.api.anag.remove(entity, id);
      await reload();
      await D.api.bootstrap();
      setConfirmDel(null);
      notify("Record eliminato");
    } catch (e) { setErr(e.message); setConfirmDel(null); }
    finally { setBusy(false); }
  }

  const curMeta = entities && entities.find(e => e.key === entity);
  const rows = data ? data.rows.filter(r => {
    if (!q.trim()) return true;
    const s = q.toLowerCase();
    return Object.values(r).some(v => v != null && String(v).toLowerCase().includes(s));
  }) : [];

  return (
    <div>
      <div className="content__header">
        <div>
          <h1 className="page-title">Anagrafiche</h1>
          <div className="page-sub">Gestione dei dati di base — creazione, modifica ed eliminazione (persistenza su database SQLite).</div>
        </div>
        {data && !editing && (
          <div className="row">
            <button className="btn btn--primary" onClick={() => { setErr(null); setEditing({ _isNew: true }); }}>
              <Icon name="plus" size={12} color="white" /> Nuovo {curMeta ? curMeta.label.replace(/i$/, "o").replace(/ti$/, "to") : "record"}
            </button>
          </div>
        )}
      </div>

      {/* Selettore entità */}
      <div className="anag-tabs">
        {(entities || []).map(e => (
          <button
            key={e.key}
            className={"anag-tab " + (entity === e.key ? "is-active" : "")}
            onClick={() => setEntity(e.key)}
          >
            {e.label}
          </button>
        ))}
      </div>

      {flash && <div className="anag-flash"><Icon name="check" size={13} color="#008A3D" /> {flash}</div>}
      {err && <div className="anag-error"><Icon name="alerts" size={13} color="#C8102E" /> {err}</div>}

      {editing && data && (
        <FormAnag
          fields={data.fields}
          pk={data.pk}
          label={data.label}
          initial={editing._isNew ? {} : editing}
          isNew={!!editing._isNew}
          busy={busy}
          onCancel={() => { setEditing(null); setErr(null); }}
          onSave={save}
        />
      )}

      {!data && !err && <div className="muted" style={{ padding: 24 }}>Caricamento anagrafica…</div>}

      {data && !editing && (
        <Card
          title={data.label}
          sub={data.rows.length + " record · " + (curMeta && curMeta.autoId ? "ID generato automaticamente" : "chiave manuale")}
          action={
            <div className="anag-search">
              <Icon name="search" size={13} color="#94A3B8" />
              <input placeholder="Cerca…" value={q} onChange={e => setQ(e.target.value)} />
            </div>
          }
          flush
        >
          <table className="table">
            <thead>
              <tr>
                {data.fields.map(f => <th key={f.name} className={f.type === "number" ? "num" : ""}>{f.label}</th>)}
                <th className="num">Uso</th>
                <th style={{ width: 120 }}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r[data.pk]}>
                  {data.fields.map(f => (
                    <td key={f.name} className={f.type === "number" ? "num tnum" : ""}>
                      {fmtCell(f, r[f.name])}
                    </td>
                  ))}
                  <td className="num tnum">
                    {r._uso > 0 ? <Pill tone="info">{D.fmtNum(r._uso)}</Pill> : <span className="muted">0</span>}
                  </td>
                  <td>
                    {confirmDel === r[data.pk] ? (
                      <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                        <button className="btn btn--sm btn--danger" disabled={busy} onClick={() => doDelete(r[data.pk])}>Conferma</button>
                        <button className="btn btn--sm" disabled={busy} onClick={() => setConfirmDel(null)}>Annulla</button>
                      </div>
                    ) : (
                      <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                        <button className="btn btn--sm" title="Modifica" onClick={() => { setErr(null); setEditing(r); }}>
                          <Icon name="save" size={12} /> Modifica
                        </button>
                        <button className="btn btn--sm btn--ghost-danger" title="Elimina" onClick={() => { setErr(null); setConfirmDel(r[data.pk]); }}>
                          <Icon name="close" size={12} />
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
              {!rows.length && (
                <tr><td colSpan={data.fields.length + 2} className="muted" style={{ padding: 18, textAlign: "center" }}>Nessun record{q ? " per «" + q + "»" : ""}.</td></tr>
              )}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

function fmtCell(f, v) {
  if (v == null || v === "") return <span className="muted">—</span>;
  if (f.name === "costo_unit" || f.name === "tariffa") return window.DATA.fmtEuro(v);
  if (f.pk) return <span className="mono" style={{ color: "var(--c-primary)", fontWeight: 600 }}>{v}</span>;
  return String(v);
}

function FormAnag({ fields, pk, label, initial, isNew, busy, onCancel, onSave }) {
  const [form, setForm] = anus(() => {
    const o = {};
    fields.forEach(f => { o[f.name] = initial[f.name] != null ? initial[f.name] : (f.default != null ? f.default : ""); });
    return o;
  });
  function set(name, val) { setForm(s => ({ ...s, [name]: val })); }

  return (
    <Card title={(isNew ? "Nuovo — " : "Modifica — ") + label} tight>
      <form
        className="anag-form"
        onSubmit={e => { e.preventDefault(); onSave(form); }}
      >
        <div className="anag-form__grid">
          {fields.map(f => {
            const locked = f.pk && !isNew;
            return (
              <label key={f.name} className="anag-field">
                <span className="anag-field__label">
                  {f.label}{f.required ? " *" : ""}
                  {locked && <span className="muted"> (non modificabile)</span>}
                </span>
                {f.enum ? (
                  <select value={form[f.name] ?? ""} disabled={locked || busy} onChange={e => set(f.name, e.target.value)}>
                    <option value="">—</option>
                    {f.enum.map(o => <option key={o} value={o}>{o}</option>)}
                  </select>
                ) : f.fk ? (
                  <FkSelect fk={f.fk} value={form[f.name] ?? ""} disabled={locked || busy} onChange={v => set(f.name, v)} />
                ) : (
                  <input
                    type={f.type === "number" ? "number" : "text"}
                    step="any"
                    value={form[f.name] ?? ""}
                    placeholder={f.placeholder || ""}
                    disabled={locked || busy}
                    onChange={e => set(f.name, e.target.value)}
                  />
                )}
              </label>
            );
          })}
        </div>
        <div className="row" style={{ gap: 8, marginTop: 12 }}>
          <button type="submit" className="btn btn--primary" disabled={busy}>
            <Icon name="check" size={12} color="white" /> {isNew ? "Crea" : "Salva modifiche"}
          </button>
          <button type="button" className="btn" disabled={busy} onClick={onCancel}>Annulla</button>
        </div>
      </form>
    </Card>
  );
}

// Select per chiavi esterne (dipartimenti / drg) basata sulle anagrafiche caricate
function FkSelect({ fk, value, disabled, onChange }) {
  const D = window.DATA;
  let opts = [];
  if (fk === "dipartimenti") opts = D.dipartimenti.map(d => ({ v: d.id, l: d.id + " — " + d.nome }));
  else if (fk === "drg") opts = D.drgList.map(d => ({ v: d.codice, l: d.codice + " — " + (d.desc || "").slice(0, 40) }));
  return (
    <select value={value ?? ""} disabled={disabled} onChange={e => onChange(e.target.value)}>
      <option value="">— (nessuno)</option>
      {opts.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
    </select>
  );
}

Object.assign(window, { MaskAnagrafiche });