// ============================================================
// MODALE PAZIENTE — nuovo paziente o modifica dati anagrafici
// ============================================================

const STADI = ["CKD 1","CKD 2","CKD 3a","CKD 3b","CKD 4","CKD 5","Dialisi"];

function PatientModal({mode, patient, onSave, onClose}){
  const isNew = mode==="new";
  const [f, setF] = useState(()=> isNew ? {
    id: "p"+Date.now().toString(36),
    nome:"", cognome:"", eta:60, sesso:"M", peso:70,
    stadio:"CKD 3a", dialisi:false, diet:"",
    avatarHue: Math.floor(Math.random()*360),
    esami: [],
    limiti:{proteine:60, sodio:2000, potassio:2500, fosforo:900, calorie:2000},
    preferenze:{esclusi:[], note:""},
  } : {...patient, preferenze:{...patient.preferenze}});

  const set = (k,v)=> setF(s=>({...s, [k]:v}));
  const valid = f.nome.trim() && f.cognome.trim();

  const save = ()=>{
    if(!valid) return;
    const dialisi = f.stadio==="Dialisi";
    onSave({...f, dialisi, diet: f.diet?.trim() ? f.diet.trim() : undefined});
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal modal-narrow" onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-head-main">
            <span className="modal-eyebrow">{isNew?"Nuovo paziente":"Modifica dati paziente"}</span>
            <h2 className="modal-title-text">{isNew? "Anagrafica" : `${f.nome} ${f.cognome}`}</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 field-wide">
              <span className="field-label">Nome</span>
              <input className="field-input" value={f.nome} autoFocus onChange={e=>set("nome", e.target.value)} placeholder="Mario"/>
            </label>
            <label className="field field-wide">
              <span className="field-label">Cognome</span>
              <input className="field-input" value={f.cognome} onChange={e=>set("cognome", e.target.value)} placeholder="Rossi"/>
            </label>
            <label className="field">
              <span className="field-label">Età</span>
              <input className="field-input" type="number" min="0" max="120" value={f.eta} onChange={e=>set("eta", parseInt(e.target.value)||0)}/>
            </label>
            <label className="field">
              <span className="field-label">Peso (kg)</span>
              <input className="field-input" type="number" min="0" max="250" value={f.peso} onChange={e=>set("peso", parseFloat(e.target.value)||0)}/>
            </label>
            <div className="field">
              <span className="field-label">Sesso</span>
              <div className="seg">
                {["M","F"].map(s=>(
                  <button key={s} className={`seg-btn ${f.sesso===s?"on":""}`} onClick={()=>set("sesso", s)}>{s==="M"?"Uomo":"Donna"}</button>
                ))}
              </div>
            </div>
            <label className="field">
              <span className="field-label">Stadio CKD</span>
              <select className="field-input" value={f.stadio} onChange={e=>set("stadio", e.target.value)}>
                {STADI.map(s=><option key={s} value={s}>{s}</option>)}
              </select>
            </label>
            <label className="field field-wide">
              <span className="field-label">Regime alimentare <span className="field-opt">(facoltativo)</span></span>
              <input className="field-input" value={f.diet||""} onChange={e=>set("diet", e.target.value)} placeholder="es. vegetariana, iposodica…"/>
            </label>
            <label className="field field-wide">
              <span className="field-label">Note e restrizioni <span className="field-opt">(facoltativo)</span></span>
              <textarea className="field-input field-textarea" value={f.preferenze.note||""}
                onChange={e=>setF(s=>({...s, preferenze:{...s.preferenze, note:e.target.value}}))}
                placeholder="Allergie, alimenti non graditi, frequenza dialisi…"/>
            </label>
          </div>
          {isNew && <p className="form-hint"><Icon name="droplet" size={13}/> Dopo aver salvato potrai aggiungere i prelievi e impostare i limiti nutrizionali dalle rispettive schede.</p>}
        </div>

        <div className="modal-foot">
          <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 paziente":"Salva modifiche"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PatientModal = PatientModal;