// ============================================================
// RICETTARIO — elenco delle ricette salvate su MongoDB,
// con editor (ingredienti, quantità, pasto) e CRUD completo.
// ============================================================

function RecipeEditModal({ recipe, onSave, onDelete, onClose }) {
  const E = window.NefroEngine;
  const { FOODS, FOOD_BY_ID } = window.NefroData;
  const isNew = !recipe;
  const [r, setR] = useState(() => recipe
    ? { ...recipe, ingredienti: recipe.ingredienti.map((i) => ({ ...i })) }
    : { id: "rc" + Date.now().toString(36), nome: "", pasto: "pranzo", ingredienti: [] });
  const [adding, setAdding] = useState(false);
  const [query, setQuery] = useState("");

  const t = E.totals(r);
  const valid = r.nome.trim() && r.ingredienti.length > 0;

  const setGrammi = (idx, g) => setR((s) => ({ ...s, ingredienti: s.ingredienti.map((x, i) => i === idx ? { ...x, grammi: Math.max(0, g) } : x) }));
  const setCottura = (idx, c) => setR((s) => ({ ...s, ingredienti: s.ingredienti.map((x, i) => i === idx ? { ...x, cottura: c || undefined } : x) }));
  const removeIng = (idx) => setR((s) => ({ ...s, ingredienti: s.ingredienti.filter((_, i) => i !== idx) }));
  const addIng = (foodId) => {
    const f = FOOD_BY_ID[foodId];
    setR((s) => ({ ...s, ingredienti: [...s.ingredienti, { id: foodId, grammi: 50, ...(f?.cottura ? { cottura: f.cottura } : {}) }] }));
    setAdding(false);setQuery("");
  };

  const matches = FOODS.filter((f) => {
    if (r.ingredienti.some((i) => i.id === f.id)) return false;
    if (!query) return true;
    return f.nome.toLowerCase().includes(query.toLowerCase()) || f.categoria.toLowerCase().includes(query.toLowerCase());
  }).slice(0, 40);

  const TOT = [
  { k: "proteine", label: "Proteine", unit: "g" },
  { k: "potassio", label: "Potassio", unit: "mg" },
  { k: "fosforo", label: "Fosforo", unit: "mg" },
  { k: "sodio", label: "Sodio", unit: "mg" },
  { k: "calorie", label: "Energia", unit: "kcal" }];


  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 ? "Nuova ricetta" : "Modifica ricetta"} · Ricettario</span>
            <h2 className="modal-title-text">{r.nome.trim() || "Senza nome"}</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>

        <div className="modal-body">
          <div className="ing-section">
            <div className="form-grid" style={{ marginBottom: 14 }}>
              <label className="field field-wide">
                <span className="field-label">Nome ricetta</span>
                <input className="field-input" value={r.nome} autoFocus={isNew}
                onChange={(e) => setR((s) => ({ ...s, nome: e.target.value }))} placeholder="es. Pasta al pomodoro" />
              </label>
              <div className="field">
                <span className="field-label">Pasto</span>
                <div className="seg">
                  {["colazione", "pranzo", "cena"].map((p) =>
                  <button key={p} className={`seg-btn ${r.pasto === p ? "on" : ""}`} onClick={() => setR((s) => ({ ...s, pasto: p }))}>
                      {PASTO_LABEL[p]}
                    </button>
                  )}
                </div>
              </div>
              <div className="field">
                <span className="field-label">Preparazione <span className="field-opt">(facoltativa)</span></span>
                <select className="field-input" value={r.cottura || ""} onChange={(e) => setR((s) => ({ ...s, cottura: e.target.value || undefined }))}>
                  <option value="">—</option>
                  {window.NefroData.COTTURE.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
            </div>

            <div className="ing-head-row">
              <span>Ingrediente</span><span>Quantità</span><span>Cottura</span><span>K / P / Na (mg)</span><span></span>
            </div>
            {r.ingredienti.map((ing, idx) => {
              const f = FOOD_BY_ID[ing.id];if (!f) return null;
              const k = ing.grammi / 100;
              return (
                <div key={idx} className="ing-row">
                  <div className="ing-name">
                    <span className="ing-cat-dot" style={{ background: `oklch(0.62 0.13 ${catHue(f.categoria)})` }}></span>
                    <div>
                      <div className="ing-title">{f.nome}</div>
                      <div className="ing-cat">{f.categoria}</div>
                    </div>
                  </div>
                  <div className="ing-qty">
                    <input type="number" min="0" step="5" value={ing.grammi}
                    onChange={(e) => setGrammi(idx, parseFloat(e.target.value) || 0)} />
                    <span>g</span>
                  </div>
                  <select className="ing-cott" value={ing.cottura || ""} onChange={(e) => setCottura(idx, e.target.value)}>
                    <option value="">—</option>
                    {window.NefroData.COTTURE.map((c) => <option key={c} value={c}>{c}</option>)}
                  </select>
                  <div className="ing-micro">
                    <b>{Math.round(f.potassio * k)}</b> · <b>{Math.round(f.fosforo * k)}</b> · <b>{Math.round(f.sodio * k)}</b>
                  </div>
                  <div className="ing-actions">
                    <button className="mini-btn mini-danger" onClick={() => removeIng(idx)} title="Rimuovi"><Icon name="x" size={15} /></button>
                  </div>
                </div>);

            })}

            {adding ?
            <div className="add-pop">
                <div className="add-search">
                  <Icon name="search" size={16} />
                  <input autoFocus placeholder="Cerca un alimento del prontuario…" value={query} onChange={(e) => setQuery(e.target.value)} />
                  <button className="icon-btn sm" onClick={() => {setAdding(false);setQuery("");}}><Icon name="x" size={16} /></button>
                </div>
                <div className="add-results">
                  {matches.map((f) =>
                  <button key={f.id} className="add-item" onClick={() => addIng(f.id)}>
                      <span className="ing-cat-dot" style={{ background: `oklch(0.62 0.13 ${catHue(f.categoria)})` }}></span>
                      <span className="add-item-name">{f.nome}</span>
                      <span className="add-item-cat">{f.categoria}</span>
                      <span className="add-item-micro">K {f.potassio} · P {f.fosforo}</span>
                    </button>
                  )}
                  {!matches.length && <div className="add-empty">Nessun alimento trovato.</div>}
                </div>
              </div> :

            <button className="add-row-btn" onClick={() => setAdding(true)}><Icon name="plus" size={16} /> Aggiungi ingrediente</button>
            }

            <div className="proc-section">
              <span className="field-label">Passaggi di preparazione <span className="field-opt">(un passaggio per riga)</span></span>
              <textarea className="field-input field-textarea proc-text" value={r.procedimento || ""}
              onChange={(e) => setR((s) => ({ ...s, procedimento: e.target.value }))}
              placeholder={"1. …\n2. …"} />
              <button className="mini-btn proc-regen" title="Rigenera i passaggi dagli ingredienti"
              onClick={() => setR((s) => ({ ...s, procedimento: E.generaPassaggi(s.pasto, s.ingredienti) }))}>
                <Icon name="wand" size={14} /> Rigenera dai passaggi degli ingredienti
              </button>
            </div>
          </div>

          <div className="ing-totals">
            <div className="totals-title">Apporto della ricetta <span>per porzione</span></div>
            <div className="recipe-tot-list">
              {TOT.map((n) =>
              <div key={n.k} className="recipe-tot-row">
                  <span>{n.label}</span><b>{Math.round(t[n.k])} {n.unit}</b>
                </div>
              )}
            </div>
            <p className="totals-note"><Icon name="alert" size={13} /> I limiti per paziente si valutano quando la ricetta è inserita in un piano.</p>
          </div>
        </div>

        <div className="modal-foot">
          {!isNew ?
          <button className="btn btn-danger-ghost" onClick={() => onDelete(r)}><Icon name="trash" size={16} /> Elimina ricetta</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={() => onSave(r, isNew)}>
              <Icon name="check" size={16} /> {isNew ? "Crea ricetta" : "Salva ricetta"}
            </button>
          </div>
        </div>
      </div>
    </div>);

}

function RecipesView() {
  const E = window.NefroEngine;
  const { FOOD_BY_ID } = window.NefroData;
  const [recipes, setRecipes] = useState(null);
  const [modal, setModal] = useState(null); // {recipe} | {recipe:null} per nuova
  const [q, setQ] = useState("");

  // il ricettario è anche in window.NefroData.RECIPES: il generatore dei
  // piani lo usa per proporre ricette "recuperate" — va tenuto allineato
  const sync = (rs) => {window.NefroData.RECIPES = rs;return rs;};

  useEffect(() => {
    window.NefroAPI.getRecipes().then((rs) => setRecipes(sync(rs))).catch((e) => {console.error(e);setRecipes([]);});
  }, []);

  const save = async (r, isNew) => {
    try {
      isNew ? await window.NefroAPI.createRecipe(r) : await window.NefroAPI.updateRecipe(r);
    } catch (e) {
      alert("Salvataggio non riuscito: " + e.message);
      return;
    }
    setRecipes((rs) => sync(isNew ? [...rs, r] : rs.map((x) => x.id === r.id ? r : x)));
    setModal(null);
  };

  const remove = async (r) => {
    if (!confirm(`Eliminare la ricetta «${r.nome}»?`)) return;
    try {
      await window.NefroAPI.deleteRecipe(r.id);
    } catch (e) {
      alert("Eliminazione non riuscita: " + e.message);
      return;
    }
    setRecipes((rs) => sync(rs.filter((x) => x.id !== r.id)));
    setModal(null);
  };

  if (recipes === null) {
    return <div className="main"><div className="content"><div className="panel"><p className="panel-sub">Caricamento del ricettario…</p></div></div></div>;
  }

  const list = recipes.filter((r) => r.nome.toLowerCase().includes(q.toLowerCase()));
  const PASTI_ORDER = ["colazione", "pranzo", "cena"];

  return (
    <div className="main">
      <div className="topbar">
        <div className="crumbs">Ricettario</div>
        <div className="patient-hero">
          <div className="hero-main">
            <div className="hero-name" style={{ fontFamily: "\"Open Sans\"", fontSize: "28px" }}>Ricettario</div>
            <div className="hero-sub">
              <Tag tone="neutral">{recipes.length} ricett{recipes.length === 1 ? "a" : "e"}</Tag>
              <Tag tone="brand">condiviso tra tutti i pazienti</Tag>
            </div>
          </div>
        </div>
      </div>

      <div className="content">
        <div className="panel">
          <div className="panel-head">
            <div>
              <h3 className="panel-title">Elenco ricette</h3>
              <p className="panel-sub">Apri una ricetta per modificarne ingredienti e quantità.</p>
            </div>
            <div className="btn-row">
              <div className="side-search recipes-search">
                <Icon name="search" size={16} />
                <input placeholder="Cerca ricetta…" value={q} onChange={(e) => setQ(e.target.value)} />
              </div>
              <button className="btn btn-primary" onClick={() => setModal({ recipe: null })}><Icon name="plus" size={16} /> Nuova ricetta</button>
            </div>
          </div>

          {list.length === 0 ?
          <div className="empty-state">
              <div className="empty-orb"><Icon name="bowl" size={22} /></div>
              <p>{recipes.length === 0 ? "Nessuna ricetta nel ricettario. Crea la prima." : "Nessuna ricetta corrisponde alla ricerca."}</p>
              {recipes.length === 0 && <button className="btn btn-ghost" onClick={() => setModal({ recipe: null })}><Icon name="plus" size={16} /> Nuova ricetta</button>}
            </div> :

          <div className="recipe-list">
              {PASTI_ORDER.filter((p) => list.some((r) => r.pasto === p)).map((p) =>
            <React.Fragment key={p}>
                  <div className="recipe-group">{PASTO_LABEL[p]}</div>
                  {list.filter((r) => r.pasto === p).map((r) => {
                const t = E.totals(r);
                const ings = r.ingredienti.map((i) => FOOD_BY_ID[i.id]?.nome).filter(Boolean);
                return (
                  <button key={r.id} className="recipe-row" onClick={() => setModal({ recipe: r })}>
                        <div className="recipe-row-main">
                          <div className="recipe-row-name">{r.nome}{r.cottura && <span className="recipe-row-cott"> · {r.cottura}</span>}</div>
                          <div className="recipe-row-ings">{ings.join(" · ") || "nessun ingrediente"}</div>
                        </div>
                        <div className="recipe-row-micro">
                          <span><i>K</i>{Math.round(t.potassio)}</span>
                          <span><i>P</i>{Math.round(t.fosforo)}</span>
                          <span><i>Na</i>{Math.round(t.sodio)}</span>
                          <span><i>kcal</i>{Math.round(t.calorie)}</span>
                        </div>
                        <Icon name="chevron" size={15} />
                      </button>);

              })}
                </React.Fragment>
            )}
            </div>
          }
        </div>
      </div>

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

}

window.RecipesView = RecipesView;