// ============================================================
// ALIMENTI — gestione del prontuario (valori per 100 g):
// elenco con ricerca e filtro categoria, editor, CRUD su MongoDB.
// ============================================================

const FOOD_FIELDS = [
{ k: "proteine", label: "Proteine", unit: "g" },
{ k: "lipidi", label: "Lipidi", unit: "g" },
{ k: "carbo", label: "Carboidrati", unit: "g" },
{ k: "fibre", label: "Fibre", unit: "g" },
{ k: "calorie", label: "Calorie", unit: "kcal" },
{ k: "sodio", label: "Sodio", unit: "mg" },
{ k: "potassio", label: "Potassio", unit: "mg" },
{ k: "fosforo", label: "Fosforo", unit: "mg" },
{ k: "calcio", label: "Calcio", unit: "mg" },
{ k: "liquidi", label: "Liquidi", unit: "ml", a3: true },
{ k: "grassi_saturi", label: "Grassi saturi", unit: "g", a3: true },
{ k: "fosforo_inorganico", label: "Fosforo inorg. (additivi)", unit: "mg", a3: true }];


function foodSlug(name) {
  return name.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().
  replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
}

function FoodEditModal({ food, categories, onSave, onDelete, onClose }) {
  const isNew = !food;
  const [f, setF] = useState(() => food ? { ...food } : {
    nome: "", categoria: categories[0] || "Cereali",
    proteine: 0, lipidi: 0, carbo: 0, fibre: 0, calorie: 0, sodio: 0, potassio: 0, fosforo: 0, calcio: 0,
    liquidi: 0, grassi_saturi: 0, fosforo_inorganico: 0,
  });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const valid = f.nome.trim();

  const save = () => {
    if (!valid) return;
    const food = { ...f, nome: f.nome.trim() };
    if (isNew) food.id = foodSlug(food.nome);
    onSave(food, isNew);
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-head-main">
            <span className="modal-eyebrow">{isNew ? "Nuovo alimento" : "Modifica alimento"} · valori per 100 g</span>
            <h2 className="modal-title-text">{f.nome.trim() || "Senza nome"}</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>

        <div className="modal-body single">
          <div className="form-grid">
            <label className="field">
              <span className="field-label">Nome</span>
              <input className="field-input" value={f.nome} autoFocus={isNew}
              onChange={(e) => set("nome", e.target.value)} placeholder="es. Pasta di semola" />
            </label>
            <label className="field">
              <span className="field-label">Categoria</span>
              <select className="field-input" value={f.categoria} onChange={(e) => set("categoria", e.target.value)}>
                {categories.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </label>
          </div>

          <div className="nutri-section-label">Valori nutrizionali per 100 g</div>
          <div className="nutri-grid">
            {FOOD_FIELDS.map((fd) =>
            <label key={fd.k} className="field">
                <span className="field-label">{fd.label} <span className="field-opt">({fd.unit}{fd.a3 && f.a3Stimato ? " · stima" : ""})</span></span>
                <input className="field-input" type="number" min="0" step="0.1" value={f[fd.k] ?? 0}
              onChange={(e) => set(fd.k, parseFloat(e.target.value) || 0)} />
              </label>
            )}
          </div>

          <div className="nutri-section-label">Preparazione</div>
          <div className="form-grid">
            <label className="field">
              <span className="field-label">Cottura predefinita <span className="field-opt">(proposta quando si usa l'alimento)</span></span>
              <select className="field-input" value={f.cottura || ""} onChange={(e) => set("cottura", e.target.value || undefined)}>
                <option value="">—</option>
                {window.NefroData.COTTURE.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </label>
            <label className="field field-wide">
              <span className="field-label">Procedimento <span className="field-opt">(passaggi suggeriti; usato anche nei passaggi delle ricette generate)</span></span>
              <textarea className="field-input field-textarea" value={f.procedimento || ""}
              onChange={(e) => set("procedimento", e.target.value || undefined)}
              placeholder="es. Sciacquare, lessare in acqua non salata per 10 minuti, scolare…" />
            </label>
            <label className="field field-wide">
              <span className="field-label">Nota <span className="field-opt">(facoltativa)</span></span>
              <input className="field-input" value={f.note || ""} onChange={(e) => set("note", e.target.value)}
              placeholder="es. fonte etichetta, da verificare…" />
            </label>
          </div>
          {!isNew &&
          <p className="form-hint"><Icon name="alert" size={13} /> Le modifiche valgono per i nuovi calcoli; il prossimo «npm run import» dall'Excel sostituisce l'intero prontuario.</p>
          }
        </div>

        <div className="modal-foot">
          {!isNew ?
          <button className="btn btn-danger-ghost" onClick={() => onDelete(f)}><Icon name="trash" size={16} /> Elimina alimento</button> :
          <span></span>}
          <div className="btn-row">
            <button className="btn btn-ghost" onClick={onClose}>Annulla</button>
            <button className={`btn btn-primary ${valid ? "" : "btn-disabled"}`} disabled={!valid} onClick={save}>
              <Icon name="check" size={16} /> {isNew ? "Crea alimento" : "Salva modifiche"}
            </button>
          </div>
        </div>
      </div>
    </div>);

}

function FoodsView() {
  const [foods, setFoods] = useState(window.NefroData.FOODS);
  const [modal, setModal] = useState(null); // {food} | {food:null}
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("tutte");
  const fileRef = useRef(null);
  const [importing, setImporting] = useState(false);

  const categories = [...new Set(foods.map((f) => f.categoria))];
  const sync = (fs) => {window.NefroData.setFoods(fs);return fs;};

  const importExcel = async (e) => {
    const file = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!file) return;
    if (!confirm("L'import SOSTITUISCE l'intero prontuario e azzera i piani settimanali salvati (si rigenerano alla prossima apertura dei pazienti).\n\nImportare «" + file.name + "»?")) return;
    setImporting(true);
    try {
      const r = await window.NefroAPI.importFoods(file);
      alert(`Importati ${r.importati} alimenti.` + (r.saltati ? `\nRighe ignorate (non alimento): ${r.saltati}.` : "") + `\nPiani settimanali azzerati: ${r.pianiAzzerati}.\n\nLa pagina verrà ricaricata.`);
      location.reload();
    } catch (err) {
      alert("Import non riuscito: " + err.message);
      setImporting(false);
    }
  };

  const save = async (f, isNew) => {
    if (isNew && window.NefroData.FOOD_BY_ID[f.id]) {
      alert(`Esiste già un alimento con lo stesso nome (id «${f.id}»).`);
      return;
    }
    try {
      isNew ? await window.NefroAPI.createFood(f) : await window.NefroAPI.updateFood(f);
    } catch (e) {
      alert("Salvataggio non riuscito: " + e.message);
      return;
    }
    setFoods((fs) => sync(isNew ? [...fs, f] : fs.map((x) => x.id === f.id ? f : x)));
    setModal(null);
  };

  const remove = async (f) => {
    if (!confirm(`Eliminare «${f.nome}»? Le ricette e i piani che lo usano lo perderanno.`)) return;
    try {
      await window.NefroAPI.deleteFood(f.id);
    } catch (e) {
      alert("Eliminazione non riuscita: " + e.message);
      return;
    }
    setFoods((fs) => sync(fs.filter((x) => x.id !== f.id)));
    setModal(null);
  };

  const list = foods.filter((f) =>
  (cat === "tutte" || f.categoria === cat) &&
  f.nome.toLowerCase().includes(q.toLowerCase())
  );

  return (
    <div className="main">
      <div className="topbar">
        <div className="crumbs">Alimenti</div>
        <div className="patient-hero">
          <div className="hero-main">
            <div className="hero-name" style={{ fontFamily: "\"Open Sans\"", fontSize: "28px" }}>Prontuario alimenti</div>
            <div className="hero-sub">
              <Tag tone="neutral">{foods.length} alimenti · valori per 100 g</Tag>
              <Tag tone="brand">{categories.length} categorie</Tag>
            </div>
          </div>
        </div>
      </div>

      <div className="content">
        <div className="panel">
          <div className="panel-head">
            <div>
              <h3 className="panel-title">Elenco alimenti</h3>
              <p className="panel-sub">Apri un alimento per modificarne i valori nutrizionali.</p>
            </div>
            <div className="btn-row">
              <select className="field-input foods-cat-filter" value={cat} onChange={(e) => setCat(e.target.value)}>
                <option value="tutte">Tutte le categorie</option>
                {categories.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
              <div className="side-search recipes-search">
                <Icon name="search" size={16} />
                <input placeholder="Cerca alimento…" value={q} onChange={(e) => setQ(e.target.value)} />
              </div>
              <button className="btn btn-ghost" disabled={importing} onClick={() => fileRef.current && fileRef.current.click()}
              title="Carica il FILE CALCOLO (.xlsx): sostituisce l'intero prontuario">
                <Icon name="arrowUp" size={16} /> {importing ? "Import in corso…" : "Importa Excel"}
              </button>
              <button className="btn btn-primary" onClick={() => setModal({ food: null })}><Icon name="plus" size={16} /> Nuovo alimento</button>
              <input ref={fileRef} type="file" accept=".xlsx,.xls" style={{ display: "none" }} onChange={importExcel} />
            </div>
          </div>

          {list.length === 0 ?
          <div className="empty-state">
              <div className="empty-orb"><Icon name="leaf" size={22} /></div>
              <p>Nessun alimento corrisponde ai filtri.</p>
            </div> :

          <div className="recipe-list">
              {list.map((f) =>
            <button key={f.id} className="recipe-row" onClick={() => setModal({ food: f })}>
                  <span className="ing-cat-dot" style={{ background: `oklch(0.62 0.13 ${catHue(f.categoria)})` }}></span>
                  <div className="recipe-row-main">
                    <div className="recipe-row-name">{f.nome}{f.cottura && <span className="recipe-row-cott"> · {f.cottura}</span>}</div>
                    <div className="recipe-row-ings">{f.categoria}{f.procedimento ? ` · ${f.procedimento}` : ""}{f.note ? ` · ${f.note}` : ""}</div>
                  </div>
                  <div className="recipe-row-micro">
                    <span><i>kcal</i>{Math.round(f.calorie)}</span>
                    <span><i>Pr</i>{f.proteine}</span>
                    <span><i>Na</i>{Math.round(f.sodio)}</span>
                    <span><i>K</i>{Math.round(f.potassio)}</span>
                    <span><i>P</i>{Math.round(f.fosforo)}</span>
                  </div>
                  <Icon name="chevron" size={15} />
                </button>
            )}
            </div>
          }
        </div>
      </div>

      {modal &&
      <FoodEditModal food={modal.food} categories={categories} onSave={save} onDelete={remove} onClose={() => setModal(null)} />
      }
    </div>);

}

window.FoodsView = FoodsView;