// ============================================================
// EDITOR RICETTA (modale) — ingredienti, quantità, sostituzione AI
// per singolo alimento, totali del pasto vs limiti del paziente
// ============================================================

const PASTO_LABEL = {colazione:"Colazione", pranzo:"Pranzo", cena:"Cena"};

function catHue(cat){
  const m = {Cereali:75, Verdure:150, Frutta:25, "Frutta secca":40, Carne:15, "Carne lavorata":0, Pesce:230,
    Legumi:115, Uova:60, Formaggi:55, Latticini:200, Veg:170, Grassi:90, Conservati:215,
    Dolci:330, Varie:265, Dietetici:300};
  return m[cat] ?? 150;
}

function RecipeModal({recipe, patient, altriPasti, onSave, onDelete, onClose}){
  const E = window.NefroEngine;
  const { FOOD_BY_ID, FOODS } = window.NefroData;
  const [r, setR] = useState(recipe);
  const [adding, setAdding] = useState(false);
  const [thinking, setThinking] = useState(null);
  const [query, setQuery] = useState("");

  const t = E.totals(r);
  const lim = patient.limiti;
  // totali della giornata: gli altri pasti del giorno + questo (live)
  const altri = altriPasti || { proteine:0, sodio:0, potassio:0, fosforo:0, calorie:0 };
  const giorno = Object.fromEntries(Object.keys(altri).map(k => [k, (altri[k]||0) + (t[k]||0)]));

  const setGrammi = (idx, g)=>{
    const ing = r.ingredienti.map((x,i)=> i===idx? {...x, grammi:Math.max(0, g)} : x);
    setR({...r, ingredienti:ing, nome:E.rebuildName(r.pasto, ing)});
  };
  const setCottura = (idx, c)=>{
    const ing = r.ingredienti.map((x,i)=> i===idx? {...x, cottura:c||undefined} : x);
    setR({...r, ingredienti:ing});
  };
  const removeIng = (idx)=>{
    const ing = r.ingredienti.filter((_,i)=>i!==idx);
    setR({...r, ingredienti:ing, nome:E.rebuildName(r.pasto, ing)});
  };
  const addIng = (foodId)=>{
    const f = FOOD_BY_ID[foodId];
    const ing = [...r.ingredienti, {id:foodId, grammi:50, ...(f?.cottura ? {cottura:f.cottura} : {})}];
    setR({...r, ingredienti:ing, nome:E.rebuildName(r.pasto, ing)});
    setAdding(false); setQuery("");
  };
  const aiSubstitute = (oldId)=>{
    setThinking(oldId);
    setTimeout(()=>{
      setR(prev=>{
        const grams = Object.fromEntries(prev.ingredienti.map(i=>[i.id,i.grammi]));
        const nr = E.substitute(prev, oldId, patient, Date.now()%9999);
        const ing = nr.ingredienti.map(x=> ({...x, grammi: grams[x.id] ?? x.grammi}));
        return {...nr, ingredienti:ing, nome:E.rebuildName(nr.pasto, ing)};
      });
      setThinking(null);
    }, 700);
  };

  const NUTS = [
    {k:"proteine", label:"Proteine", unit:"g", lim:lim.proteine},
    {k:"sodio", label:"Sodio", unit:"mg", lim:lim.sodio},
    {k:"potassio", label:"Potassio", unit:"mg", lim:lim.potassio},
    {k:"fosforo", label:"Fosforo", unit:"mg", lim:lim.fosforo},
  ];

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

  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">{PASTO_LABEL[r.pasto]} · piano di {patient.nome} · {r.fonte === "ricettario" ? "dal ricettario" : "ricetta inventata"}{r.adattata ? " · quantità adattate ai limiti" : ""}{r.porzione ? ` · porzione ${r.porzione}%` : ""}</span>
            <h2 className="modal-title-text">{r.nome}</h2>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>

        <div className="modal-body">
          <div className="ing-section">
            <div className="ricetta-cottura">
              <span className="field-label">Preparazione della ricetta</span>
              <select className="ing-cott" value={r.cottura || ""} onChange={(e)=>setR({...r, cottura:e.target.value||undefined})}>
                <option value="">—</option>
                {window.NefroData.COTTURE.map((c)=><option key={c} value={c}>{c}</option>)}
              </select>
            </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;
              const busy = thinking===ing.id;
              return (
                <div key={idx} className={`ing-row ${busy?"ing-busy":""}`}>
                  <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" disabled={busy} onClick={()=>aiSubstitute(ing.id)} title="Sostituisci con AI">
                      {busy ? <span className="spin"><Icon name="refresh" size={15}/></span> : <Icon name="wand" size={15}/>}
                    </button>
                    <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({...r, procedimento:e.target.value})}
                placeholder={"1. …\n2. …"}/>
              <button className="mini-btn proc-regen" title="Rigenera i passaggi dagli ingredienti"
                onClick={()=>setR({...r, procedimento:E.generaPassaggi(r.pasto, r.ingredienti)})}>
                <Icon name="wand" size={14}/> Rigenera dai passaggi degli ingredienti
              </button>
            </div>
          </div>

          <div className="ing-totals">
            <div className="totals-title">Giornata con questo pasto <span>vs. limiti giornalieri</span></div>
            {NUTS.map(n=>(
              <NutrientBar key={n.k} value={giorno[n.k]} limit={n.lim} label={n.label} unit={n.unit} compact/>
            ))}
            <div className="totals-kcal">
              <span>Energia giornata</span><b>{Math.round(giorno.calorie)} / {lim.calorie} kcal</b>
            </div>
            <div className="totals-meal-note">
              Questo pasto: K {Math.round(t.potassio)} · P {Math.round(t.fosforo)} · Na {Math.round(t.sodio)} mg · prot {Math.round(t.proteine)} g · {Math.round(t.calorie)} kcal
            </div>
            <p className="totals-note"><Icon name="alert" size={13}/> Le barre mostrano l'intera giornata (gli altri pasti più questo): modificando gli ingredienti vedi subito l'effetto sui limiti giornalieri.</p>
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn btn-danger-ghost" onClick={()=>onDelete(r)}><Icon name="trash" size={16}/> Elimina ricetta</button>
          <div className="btn-row">
            <button className="btn btn-ghost" onClick={onClose}>Annulla</button>
            <button className="btn btn-primary" onClick={()=>onSave(r)}><Icon name="check" size={16}/> Salva ricetta</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.RecipeModal = RecipeModal;
window.catHue = catHue;
window.PASTO_LABEL = PASTO_LABEL;