// ============================================================
// MEDICI — modale profilo (nuovo/modifica) e pagina di gestione,
// raggiungibile solo dal menu accanto al nome del medico.
// ============================================================

function DoctorModal({ mode, doctor, onSave, onDelete, onClose, canDelete }) {
  const isNew = mode === "new";
  const [f, setF] = useState(() => isNew ? {
    id: "d" + Date.now().toString(36),
    nome: "", cognome: "", ruolo: "Dietista", email: "",
    avatarHue: Math.floor(Math.random() * 360),
  } : { ...doctor });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const valid = f.nome.trim() && f.cognome.trim();

  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 medico" : "Modifica profilo"}</span>
            <h2 className="modal-title-text">{(f.nome + " " + f.cognome).trim() || "Anagrafica"}</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="Maria" />
            </label>
            <label className="field">
              <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 field-wide">
              <span className="field-label">Ruolo</span>
              <input className="field-input" value={f.ruolo || ""}
              onChange={(e) => set("ruolo", e.target.value)} placeholder="es. Dietista, Nefrologo, Infermiere…" />
            </label>
            <label className="field field-wide">
              <span className="field-label">Email <span className="field-opt">(facoltativa)</span></span>
              <input className="field-input" type="email" value={f.email || ""}
              onChange={(e) => set("email", e.target.value)} placeholder="nome.cognome@aulss7.it" />
            </label>
          </div>
        </div>

        <div className="modal-foot">
          {!isNew && canDelete ?
          <button className="btn btn-danger-ghost" onClick={() => onDelete(f)}><Icon name="trash" size={16} /> Elimina medico</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({ ...f, nome: f.nome.trim(), cognome: f.cognome.trim(), ruolo: (f.ruolo || "").trim(), email: (f.email || "").trim() }, isNew)}>
              <Icon name="check" size={16} /> {isNew ? "Crea medico" : "Salva modifiche"}
            </button>
          </div>
        </div>
      </div>
    </div>);

}

function DoctorsView({ doctors, currentId, onUse, onEdit, onNew }) {
  return (
    <div className="main">
      <div className="topbar">
        <div className="crumbs">Gestione medici</div>
        <div className="patient-hero">
          <div className="hero-main">
            <div className="hero-name" style={{ fontFamily: "\"Open Sans\"", fontSize: "28px" }}>Gestione medici</div>
            <div className="hero-sub">
              <Tag tone="neutral">{doctors.length} profil{doctors.length === 1 ? "o" : "i"}</Tag>
              <Tag tone="brand">accessibile dal menu del profilo</Tag>
            </div>
          </div>
        </div>
      </div>

      <div className="content">
        <div className="panel">
          <div className="panel-head">
            <div>
              <h3 className="panel-title">Medici e operatori</h3>
              <p className="panel-sub">Apri un profilo per modificarlo, oppure attivalo con «Usa profilo».</p>
            </div>
            <button className="btn btn-primary" onClick={onNew}><Icon name="plus" size={16} /> Nuovo medico</button>
          </div>

          <div className="recipe-list">
            {doctors.map((d) =>
            <button key={d.id} className="recipe-row" onClick={() => onEdit(d)}>
                <Avatar nome={d.nome} cognome={d.cognome} hue={d.avatarHue ?? 250} size={40} />
                <div className="recipe-row-main">
                  <div className="recipe-row-name">{d.nome} {d.cognome}</div>
                  <div className="recipe-row-ings">{d.ruolo || "—"}{d.email ? ` · ${d.email}` : ""}</div>
                </div>
                {d.id === currentId ?
              <Tag tone="brand">profilo in uso</Tag> :
              <span className="btn btn-ghost sm" role="button"
              onClick={(e) => {e.stopPropagation();onUse(d.id);}}>Usa profilo</span>}
                <Icon name="chevron" size={15} />
              </button>
            )}
          </div>
        </div>
      </div>
    </div>);

}

window.DoctorsView = DoctorsView;
window.DoctorModal = DoctorModal;