/* =========================================================
   ANTARES — Schermata CRM
   Contatti · Pipeline trattative · Promemoria
   Richiede la migrazione db/21_crm.sql
   ========================================================= */

const { useState: useS4, useMemo: useM4 } = React;
const { fmt: fmt4, CRM_CONTATTI, CRM_TRATTATIVE, CRM_PROMEMORIA, PROGETTI: PROG4 } = window.AntaresData;
const Icon4 = window.AntaresScreens1.Icon;
const { Modal: Modal4, EmptyState: Empty4 } = window.AntaresUI;

/* ---- helper date: il DB usa ISO (aaaa-mm-gg), l'app mostra gg/mm/aaaa ---- */
const isoToIt4 = (iso) => (iso ? iso.split("-").reverse().join("/") : "");
const oggiIso4 = () => new Date().toISOString().slice(0, 10);

/* ---- stati della pipeline, in ordine di avanzamento ---- */
const STATI_TRATTATIVA = [
  { id: "nuova",              label: "Nuova",             colore: "" },
  { id: "contattato",         label: "Contattato",        colore: "blue" },
  { id: "preventivo_inviato", label: "Preventivo inviato", colore: "yellow" },
  { id: "in_trattativa",      label: "In trattativa",     colore: "yellow" },
  { id: "vinta",              label: "Vinta",             colore: "teal" },
  { id: "persa",              label: "Persa",             colore: "coral" },
];
const statoLabel4 = (id) => (STATI_TRATTATIVA.find(s => s.id === id) || {}).label || id;
const statoColore4 = (id) => (STATI_TRATTATIVA.find(s => s.id === id) || {}).colore || "";

const TIPI_ATTIVITA = [
  { id: "promemoria", label: "Promemoria" },
  { id: "chiamata",   label: "Chiamata" },
  { id: "email",      label: "Email" },
  { id: "incontro",   label: "Incontro" },
  { id: "nota",       label: "Nota" },
];

// un cliente non sentito da più di questi giorni finisce tra quelli "da ricontattare"
const GIORNI_RICONTATTO = 120;

/* ============================================================
   SCHERMATA PRINCIPALE
   ============================================================ */
function Crm() {
  const [view, setView]     = useS4("promemoria"); // promemoria | pipeline | contatti
  const [search, setSearch] = useS4("");
  const [toast, setToast]   = useS4(null);

  // modali
  const [contattoEdit, setContattoEdit]   = useS4(null); // oggetto contatto | {} per nuovo
  const [trattativaEdit, setTrattativaEdit] = useS4(null);
  const [attivitaEdit, setAttivitaEdit]   = useS4(null);

  const flash = (msg, kind = "ok") => { setToast({ msg, kind }); setTimeout(() => setToast(null), 2600); };
  const ricarica = () => window.AntaresStore.refresh("crm");

  /* ---- dati derivati ---- */
  const oggi = oggiIso4();

  const promemoria = useM4(() => {
    const q = search.trim().toLowerCase();
    return (CRM_PROMEMORIA || [])
      .filter(p => !q || (p.azienda || "").toLowerCase().includes(q) || (p.titolo || "").toLowerCase().includes(q))
      .slice()
      .sort((a, b) => (a.data || "").localeCompare(b.data || ""));
  }, [CRM_PROMEMORIA, search]);

  const scaduti = promemoria.filter(p => p.data < oggi).length;

  const trattativeAperte = useM4(
    () => (CRM_TRATTATIVE || []).filter(t => t.stato !== "vinta" && t.stato !== "persa"),
    [CRM_TRATTATIVE]
  );
  const valorePipeline = trattativeAperte.reduce((s, t) => s + Number(t.valore_stimato || 0), 0);

  // clienti già acquisiti che non lavorano con noi da un po': la lista su cui rifarsi vivi
  const daRicontattare = useM4(
    () => (CRM_CONTATTI || [])
      .filter(c => c.tipo === "cliente" && c.giorni_da_ultimo_lavoro != null && c.giorni_da_ultimo_lavoro > GIORNI_RICONTATTO)
      .sort((a, b) => b.giorni_da_ultimo_lavoro - a.giorni_da_ultimo_lavoro),
    [CRM_CONTATTI]
  );

  const contattiFiltrati = useM4(() => {
    const q = search.trim().toLowerCase();
    return (CRM_CONTATTI || []).filter(c =>
      !q || (c.azienda || "").toLowerCase().includes(q) || (c.referente || "").toLowerCase().includes(q)
    );
  }, [CRM_CONTATTI, search]);

  const contattoDi = (id) => (CRM_CONTATTI || []).find(c => c.id === id);

  /* ---- azioni ---- */
  const completa = async (id) => {
    const res = await window.AntaresStore.completaCrmAttivita(id, true);
    if (res.error) { flash(res.error.message, "err"); return; }
    await ricarica();
    flash("Promemoria completato");
  };

  const eliminaContatto = async (c) => {
    if (!confirm(`Eliminare "${c.azienda}"? Verranno rimosse anche le sue trattative e attività.`)) return;
    const res = await window.AntaresStore.deleteCrmContatto(c.id);
    if (res.error) { flash(res.error.message, "err"); return; }
    await ricarica();
    flash("Contatto eliminato");
  };

  const eliminaTrattativa = async (t) => {
    if (!confirm(`Eliminare la trattativa "${t.titolo}"?`)) return;
    const res = await window.AntaresStore.deleteCrmTrattativa(t.id);
    if (res.error) { flash(res.error.message, "err"); return; }
    await ricarica();
    flash("Trattativa eliminata");
  };

  // la migrazione non è stata ancora applicata: niente tabelle, niente dati
  const dbMancante = (CRM_CONTATTI || []).length === 0 && (CRM_TRATTATIVE || []).length === 0
    && (CRM_PROMEMORIA || []).length === 0;

  return (
    <div className="stack">
      <div className="page-head">
        <div className="page-title-block">
          <span className="eyebrow">Clienti e trattative</span>
          <h1 className="h1">CRM</h1>
        </div>
        <div className="page-actions">
          <button className="btn ghost" onClick={() => setAttivitaEdit({ tipo: "promemoria", data: oggi, fatta: false })}>
            <Icon4 name="clock" /> Nuovo promemoria
          </button>
          <button className="btn ghost" onClick={() => setTrattativaEdit({ stato: "nuova" })}>
            <Icon4 name="plus" /> Nuova trattativa
          </button>
          <button className="btn primary" onClick={() => setContattoEdit({ tipo: "lead" })}>
            <Icon4 name="plus" /> Nuovo contatto
          </button>
        </div>
      </div>

      {/* KPI */}
      <div className="kpi-grid">
        <div className={"kpi" + (scaduti > 0 ? " coral" : "")}>
          <div className="kpi-label">Promemoria da fare</div>
          <div className="kpi-value">{promemoria.length}</div>
          <div className={"kpi-sub" + (scaduti > 0 ? " warn" : "")}>
            {scaduti > 0 ? `⚠ ${scaduti} già scadut${scaduti === 1 ? "o" : "i"}` : "nessuno scaduto"}
          </div>
        </div>
        <div className="kpi blue">
          <div className="kpi-label">Trattative aperte</div>
          <div className="kpi-value">{trattativeAperte.length}</div>
          <div className="kpi-sub">su {(CRM_TRATTATIVE || []).length} totali</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Valore in pipeline</div>
          <div className="kpi-value">{fmt4(valorePipeline)}</div>
          <div className="kpi-sub">somma delle trattative aperte</div>
        </div>
        <div className={"kpi" + (daRicontattare.length > 0 ? " yellow" : "")}>
          <div className="kpi-label">Clienti da ricontattare</div>
          <div className="kpi-value">{daRicontattare.length}</div>
          <div className="kpi-sub">fermi da oltre {GIORNI_RICONTATTO} giorni</div>
        </div>
      </div>

      {dbMancante && (
        <div className="alert">
          <span className="alert-icon">!</span>
          <div>
            <strong>Il CRM non è ancora attivo sul database.</strong><br />
            Esegui una volta <code>db/21_crm.sql</code> nell'SQL Editor di Supabase: crea le tabelle
            e importa automaticamente come contatti i clienti che hanno già fatturato.
          </div>
        </div>
      )}

      {/* Barra vista + ricerca */}
      <div className="card">
        <div className="card-bar" />
        <div className="card-head" style={{ flexWrap: "wrap", gap: 12 }}>
          <div className="segmented compact">
            <button className={view === "promemoria" ? "active" : ""} onClick={() => setView("promemoria")}>
              Promemoria{promemoria.length > 0 ? ` (${promemoria.length})` : ""}
            </button>
            <button className={view === "pipeline" ? "active" : ""} onClick={() => setView("pipeline")}>Pipeline</button>
            <button className={view === "contatti" ? "active" : ""} onClick={() => setView("contatti")}>
              Contatti{(CRM_CONTATTI || []).length > 0 ? ` (${CRM_CONTATTI.length})` : ""}
            </button>
          </div>
          <div style={{ position: "relative" }}>
            <input className="input" style={{ paddingLeft: 34, minWidth: 220 }}
              placeholder="Cerca azienda o referente…" value={search} onChange={e => setSearch(e.target.value)} />
            <div style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--muted)" }}>
              <Icon4 name="search" size={14} />
            </div>
          </div>
        </div>

        {view === "promemoria" && (
          <VistaPromemoria
            righe={promemoria} oggi={oggi}
            onCompleta={completa}
            onNuovo={() => setAttivitaEdit({ tipo: "promemoria", data: oggi, fatta: false })}
            onModifica={(p) => setAttivitaEdit({
              id: p.id, tipo: p.tipo, data: p.data, titolo: p.titolo, note: p.note,
              contatto_id: p.contatto_id, trattativa_id: p.trattativa_id, fatta: p.fatta,
            })}
          />
        )}

        {view === "pipeline" && (
          <VistaPipeline
            trattative={CRM_TRATTATIVE || []} contattoDi={contattoDi} search={search}
            onNuova={() => setTrattativaEdit({ stato: "nuova" })}
            onModifica={setTrattativaEdit}
            onElimina={eliminaTrattativa}
            onPromemoria={(t) => setAttivitaEdit({
              tipo: "promemoria", data: oggi, fatta: false,
              trattativa_id: t.id, contatto_id: t.contatto_id,
              titolo: "Ricontattare per " + t.titolo,
            })}
          />
        )}

        {view === "contatti" && (
          <VistaContatti
            contatti={contattiFiltrati}
            onNuovo={() => setContattoEdit({ tipo: "lead" })}
            onModifica={setContattoEdit}
            onElimina={eliminaContatto}
            onTrattativa={(c) => setTrattativaEdit({ stato: "nuova", contatto_id: c.id })}
            onPromemoria={(c) => setAttivitaEdit({
              tipo: "promemoria", data: oggi, fatta: false,
              contatto_id: c.id, titolo: "Ricontattare " + c.azienda,
            })}
          />
        )}
      </div>

      {/* Clienti fermi da un po' — la lista per rifarsi vivi */}
      {view === "contatti" && daRicontattare.length > 0 && (
        <div className="card">
          <div className="card-bar yellow" />
          <div className="card-head">
            <div>
              <h3 className="h3">Da ricontattare</h3>
              <div className="muted" style={{ fontSize: 12 }}>
                Clienti che hanno già lavorato con noi ma sono fermi da oltre {GIORNI_RICONTATTO} giorni
              </div>
            </div>
          </div>
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>Cliente</th><th className="num">Fatturato</th>
                  <th className="num">Ultimo lavoro</th><th className="num">Fermo da</th><th></th>
                </tr>
              </thead>
              <tbody>
                {daRicontattare.map(c => (
                  <tr key={c.id}>
                    <td><strong>{c.azienda}</strong>{c.referente && <span className="muted"> · {c.referente}</span>}</td>
                    <td className="num">{fmt4(c.fatturato_totale || 0)}</td>
                    <td className="num mono" style={{ fontSize: 12 }}>{isoToIt4(c.ultima_fattura)}</td>
                    <td className="num"><span className="pill yellow">{c.giorni_da_ultimo_lavoro} gg</span></td>
                    <td className="row-actions">
                      <button className="btn-row" onClick={() => setAttivitaEdit({
                        tipo: "promemoria", data: oggi, fatta: false,
                        contatto_id: c.id, titolo: "Ricontattare " + c.azienda,
                      })}>Ricontatta</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Modali */}
      {contattoEdit && (
        <ContattoModal contatto={contattoEdit} onClose={() => setContattoEdit(null)}
          onSaved={async (msg) => { setContattoEdit(null); await ricarica(); flash(msg); }} />
      )}
      {trattativaEdit && (
        <TrattativaModal trattativa={trattativaEdit} contatti={CRM_CONTATTI || []}
          onClose={() => setTrattativaEdit(null)}
          onSaved={async (msg) => { setTrattativaEdit(null); await ricarica(); flash(msg); }} />
      )}
      {attivitaEdit && (
        <AttivitaModal attivita={attivitaEdit} contatti={CRM_CONTATTI || []} trattative={CRM_TRATTATIVE || []}
          onClose={() => setAttivitaEdit(null)}
          onSaved={async (msg) => { setAttivitaEdit(null); await ricarica(); flash(msg); }} />
      )}

      {toast && (
        <div className={"toast " + (toast.kind === "err" ? "err" : "ok")}>
          <div className="toast-icon">{toast.kind === "err" ? "!" : "✓"}</div>
          {toast.msg}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   VISTA — PROMEMORIA
   ============================================================ */
function VistaPromemoria({ righe, oggi, onCompleta, onNuovo, onModifica }) {
  if (righe.length === 0) {
    return (
      <Empty4 title="Nessun promemoria aperto"
        action={<button className="btn primary" onClick={onNuovo}>Crea il primo promemoria</button>}>
        Segna qui chi ricontattare e quando: i promemoria scaduti compaiono in rosso.
      </Empty4>
    );
  }
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            <th style={{ width: 110 }}>Quando</th>
            <th>Cosa</th><th>Chi</th><th>Tipo</th><th></th>
          </tr>
        </thead>
        <tbody>
          {righe.map(p => {
            const scaduto = p.data < oggi;
            const oggiStesso = p.data === oggi;
            return (
              <tr key={p.id} className={scaduto ? "row-danger" : (oggiStesso ? "row-warn" : "")}>
                <td className="mono" style={{ fontSize: 12 }}>
                  {isoToIt4(p.data)}
                  <div className={scaduto ? "neg" : "muted"} style={{ fontSize: 11 }}>
                    {scaduto ? `scaduto da ${Math.abs(p.giorni_mancanti)} gg`
                      : oggiStesso ? "oggi" : `tra ${p.giorni_mancanti} gg`}
                  </div>
                </td>
                <td>
                  <strong>{p.titolo}</strong>
                  {p.note && <div className="muted" style={{ fontSize: 12 }}>{p.note}</div>}
                </td>
                <td>
                  {p.azienda || "—"}
                  {p.referente && <div className="muted" style={{ fontSize: 12 }}>{p.referente}</div>}
                  {p.trattativa && <div className="muted" style={{ fontSize: 11 }}>↳ {p.trattativa}</div>}
                </td>
                <td><span className="pill">{(TIPI_ATTIVITA.find(t => t.id === p.tipo) || {}).label || p.tipo}</span></td>
                <td className="row-actions">
                  <button className="btn-row" onClick={() => onModifica(p)} style={{ marginRight: 4 }}>Modifica</button>
                  <button className="btn-row" onClick={() => onCompleta(p.id)}>✓ Fatto</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

/* ============================================================
   VISTA — PIPELINE (trattative raggruppate per stato)
   ============================================================ */
function VistaPipeline({ trattative, contattoDi, search, onNuova, onModifica, onElimina, onPromemoria }) {
  const q = search.trim().toLowerCase();
  const filtrate = trattative.filter(t => {
    if (!q) return true;
    const c = contattoDi(t.contatto_id);
    return (t.titolo || "").toLowerCase().includes(q) || (c?.azienda || "").toLowerCase().includes(q);
  });

  if (filtrate.length === 0) {
    return (
      <Empty4 title="Nessuna trattativa"
        action={<button className="btn primary" onClick={onNuova}>Apri la prima trattativa</button>}>
        Una trattativa è un lavoro possibile: la segui da "nuova" fino a vinta o persa.
      </Empty4>
    );
  }

  return (
    <div className="card-body" style={{ display: "grid", gap: 18 }}>
      {STATI_TRATTATIVA.map(stato => {
        const gruppo = filtrate.filter(t => t.stato === stato.id);
        if (gruppo.length === 0) return null;
        const tot = gruppo.reduce((s, t) => s + Number(t.valore_stimato || 0), 0);
        return (
          <div key={stato.id}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 8, alignItems: "center" }}>
              <span className={"pill " + stato.colore}>{stato.label} · {gruppo.length}</span>
              <span className="mono muted" style={{ fontSize: 13 }}>{fmt4(tot)}</span>
            </div>
            <div style={{ display: "grid", gap: 8 }}>
              {gruppo.map(t => {
                const c = contattoDi(t.contatto_id);
                return (
                  <div key={t.id} style={{
                    border: "1px solid var(--border)", borderRadius: "var(--r)",
                    padding: "12px 14px", background: "var(--surface-2)",
                    display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap",
                  }}>
                    <div style={{ flex: 1, minWidth: 200 }}>
                      <strong>{t.titolo}</strong>
                      <div className="muted" style={{ fontSize: 12 }}>
                        {c?.azienda || "contatto rimosso"}
                        {t.data_prevista && <> · chiusura prevista {isoToIt4(t.data_prevista)}</>}
                        {t.probabilita != null && <> · {t.probabilita}%</>}
                      </div>
                      {t.stato === "persa" && t.motivo_perdita && (
                        <div className="neg" style={{ fontSize: 12 }}>Persa: {t.motivo_perdita}</div>
                      )}
                    </div>
                    <span className="mono" style={{ fontSize: 15, fontWeight: 600 }}>
                      {t.valore_stimato ? fmt4(t.valore_stimato) : "—"}
                    </span>
                    <div className="row-actions">
                      <button className="btn-row" onClick={() => onPromemoria(t)} style={{ marginRight: 4 }}>Promemoria</button>
                      <button className="btn-row" onClick={() => onModifica(t)} style={{ marginRight: 4 }}>Modifica</button>
                      <button className="btn-row danger" onClick={() => onElimina(t)}>Elimina</button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================
   VISTA — CONTATTI
   ============================================================ */
function VistaContatti({ contatti, onNuovo, onModifica, onElimina, onTrattativa, onPromemoria }) {
  if (contatti.length === 0) {
    return (
      <Empty4 title="Nessun contatto"
        action={<button className="btn primary" onClick={onNuovo}>Aggiungi il primo contatto</button>}>
        Qui stanno anche i potenziali clienti, non solo chi ha già fatturato.
      </Empty4>
    );
  }
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            <th>Azienda</th><th>Referente</th><th>Contatti</th><th>Tipo</th>
            <th className="num">Fatturato</th><th className="num">Ultimo lavoro</th><th></th>
          </tr>
        </thead>
        <tbody>
          {contatti.map(c => (
            <tr key={c.id}>
              <td>
                <strong>{c.azienda}</strong>
                {c.citta && <div className="muted" style={{ fontSize: 12 }}>{c.citta}</div>}
                {c.trattative_aperte > 0 && (
                  <div style={{ fontSize: 11 }} className="muted">
                    {c.trattative_aperte} trattativ{c.trattative_aperte === 1 ? "a" : "e"} in corso
                  </div>
                )}
              </td>
              <td>
                {c.referente || "—"}
                {c.ruolo && <div className="muted" style={{ fontSize: 12 }}>{c.ruolo}</div>}
              </td>
              <td style={{ fontSize: 12 }}>
                {c.email && <div><a href={"mailto:" + c.email} style={{ color: "var(--teal)" }}>{c.email}</a></div>}
                {c.telefono && <div className="muted">{c.telefono}</div>}
                {!c.email && !c.telefono && <span className="muted">—</span>}
              </td>
              <td>
                <span className={"pill " + (c.tipo === "cliente" ? "teal" : c.tipo === "lead" ? "blue" : "")}>{c.tipo}</span>
              </td>
              <td className="num">{c.fatturato_totale ? fmt4(c.fatturato_totale) : "—"}</td>
              <td className="num mono" style={{ fontSize: 12 }}>
                {c.ultima_fattura ? isoToIt4(c.ultima_fattura) : "—"}
                {c.giorni_da_ultimo_lavoro != null && (
                  <div className="muted" style={{ fontSize: 11 }}>{c.giorni_da_ultimo_lavoro} gg fa</div>
                )}
              </td>
              <td className="row-actions">
                <button className="btn-row" onClick={() => onTrattativa(c)} style={{ marginRight: 4 }}>+ Trattativa</button>
                <button className="btn-row" onClick={() => onPromemoria(c)} style={{ marginRight: 4 }}>Promemoria</button>
                <button className="btn-row" onClick={() => onModifica(c)} style={{ marginRight: 4 }}>Modifica</button>
                <button className="btn-row danger" onClick={() => onElimina(c)}>Elimina</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ============================================================
   MODALE — CONTATTO
   ============================================================ */
function ContattoModal({ contatto, onClose, onSaved }) {
  const [f, setF]     = useS4({
    azienda: "", referente: "", ruolo: "", email: "", telefono: "", citta: "", sito: "",
    tipo: "lead", origine: "", controparte: "", note: "", ...contatto,
  });
  const [busy, setBusy] = useS4(false);
  const [err, setErr]   = useS4("");
  const nuovo = !contatto.id;
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const salva = async () => {
    if (!f.azienda.trim()) { setErr("L'azienda è obbligatoria"); return; }
    setBusy(true); setErr("");
    try {
      const payload = { ...f };
      // i campi vuoti vanno salvati come NULL, non come stringa vuota
      Object.keys(payload).forEach(k => { if (payload[k] === "") payload[k] = null; });
      payload.azienda = f.azienda.trim();
      const res = await window.AntaresStore.saveCrmContatto(payload);
      if (res.error) { setErr(res.error.message); return; }
      onSaved(nuovo ? "Contatto creato" : "Contatto aggiornato");
    } catch (ex) {
      setErr(ex.message || String(ex));
    } finally { setBusy(false); }
  };

  return (
    <Modal4
      title={nuovo ? "Nuovo contatto" : f.azienda}
      subtitle={nuovo ? "Anche un potenziale cliente che non ha mai fatturato" : "Modifica i dati del contatto"}
      onClose={onClose} width={620}
      footer={<>
        <button type="button" className="btn" onClick={onClose}>Annulla</button>
        <button type="button" className="btn primary" onClick={salva} disabled={busy}>
          {busy ? "Salvo…" : "Salva"}
        </button>
      </>}
    >
      {err && <div className="login-error" style={{ marginBottom: 12 }}>{err}</div>}
      <div className="form-grid">
        <div className="field">
          <label className="label">Azienda *</label>
          <input className="input" value={f.azienda || ""} onChange={set("azienda")} autoFocus />
        </div>
        <div className="field">
          <label className="label">Tipo</label>
          <select className="select" value={f.tipo || "lead"} onChange={set("tipo")}>
            <option value="lead">Lead (potenziale)</option>
            <option value="cliente">Cliente</option>
            <option value="fornitore">Fornitore</option>
            <option value="partner">Partner</option>
          </select>
        </div>
        <div className="field">
          <label className="label">Referente</label>
          <input className="input" value={f.referente || ""} onChange={set("referente")} placeholder="Nome e cognome" />
        </div>
        <div className="field">
          <label className="label">Ruolo</label>
          <input className="input" value={f.ruolo || ""} onChange={set("ruolo")} placeholder="es. produttore" />
        </div>
        <div className="field">
          <label className="label">Email</label>
          <input className="input" type="email" value={f.email || ""} onChange={set("email")} />
        </div>
        <div className="field">
          <label className="label">Telefono</label>
          <input className="input" value={f.telefono || ""} onChange={set("telefono")} />
        </div>
        <div className="field">
          <label className="label">Città</label>
          <input className="input" value={f.citta || ""} onChange={set("citta")} />
        </div>
        <div className="field">
          <label className="label">Come ci ha trovati</label>
          <input className="input" value={f.origine || ""} onChange={set("origine")} placeholder="passaparola, sito, fiera…" />
        </div>
      </div>
      <div className="field" style={{ marginTop: 12 }}>
        <label className="label">Nome in fattura</label>
        <input className="input" value={f.controparte || ""} onChange={set("controparte")}
          placeholder="come compare nel registro fatture" />
        <span className="help">
          Se combacia con la controparte delle fatture, la scheda mostra il fatturato reale e i giorni dall'ultimo lavoro.
        </span>
      </div>
      <div className="field" style={{ marginTop: 12 }}>
        <label className="label">Note</label>
        <textarea className="textarea" rows={3} value={f.note || ""} onChange={set("note")} />
      </div>
    </Modal4>
  );
}

/* ============================================================
   MODALE — TRATTATIVA
   ============================================================ */
function TrattativaModal({ trattativa, contatti, onClose, onSaved }) {
  const [f, setF] = useS4({
    contatto_id: "", titolo: "", valore_stimato: "", stato: "nuova", probabilita: "",
    data_prevista: "", motivo_perdita: "", progetto_id: "", note: "", ...trattativa,
  });
  const [busy, setBusy] = useS4(false);
  const [err, setErr]   = useS4("");
  const nuova = !trattativa.id;
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const salva = async () => {
    if (!f.contatto_id) { setErr("Scegli il contatto"); return; }
    if (!f.titolo.trim()) { setErr("Il titolo è obbligatorio"); return; }
    setBusy(true); setErr("");
    try {
      const payload = {
        ...f,
        titolo: f.titolo.trim(),
        valore_stimato: f.valore_stimato === "" ? null : Number(String(f.valore_stimato).replace(",", ".")),
        probabilita: f.probabilita === "" ? null : parseInt(f.probabilita, 10),
        data_prevista: f.data_prevista || null,
        progetto_id: f.progetto_id || null,
        motivo_perdita: f.motivo_perdita || null,
        note: f.note || null,
      };
      const res = await window.AntaresStore.saveCrmTrattativa(payload);
      if (res.error) { setErr(res.error.message); return; }
      onSaved(nuova ? "Trattativa creata" : "Trattativa aggiornata");
    } catch (ex) {
      setErr(ex.message || String(ex));
    } finally { setBusy(false); }
  };

  return (
    <Modal4
      title={nuova ? "Nuova trattativa" : f.titolo}
      subtitle="Un lavoro possibile, da seguire fino a vinta o persa"
      onClose={onClose} width={620}
      footer={<>
        <button type="button" className="btn" onClick={onClose}>Annulla</button>
        <button type="button" className="btn primary" onClick={salva} disabled={busy}>
          {busy ? "Salvo…" : "Salva"}
        </button>
      </>}
    >
      {err && <div className="login-error" style={{ marginBottom: 12 }}>{err}</div>}
      <div className="form-grid">
        <div className="field">
          <label className="label">Contatto *</label>
          <select className="select" value={f.contatto_id || ""} onChange={set("contatto_id")}>
            <option value="">— scegli —</option>
            {contatti.map(c => <option key={c.id} value={c.id}>{c.azienda}</option>)}
          </select>
        </div>
        <div className="field">
          <label className="label">Stato</label>
          <select className="select" value={f.stato || "nuova"} onChange={set("stato")}>
            {STATI_TRATTATIVA.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
          </select>
        </div>
      </div>
      <div className="field" style={{ marginTop: 12 }}>
        <label className="label">Titolo *</label>
        <input className="input" value={f.titolo || ""} onChange={set("titolo")}
          placeholder="es. Spot istituzionale 2026" autoFocus />
      </div>
      <div className="form-grid cols-3" style={{ marginTop: 12 }}>
        <div className="field">
          <label className="label">Valore stimato €</label>
          <input className="input num" value={f.valore_stimato ?? ""} onChange={set("valore_stimato")} />
        </div>
        <div className="field">
          <label className="label">Probabilità %</label>
          <input className="input num" type="number" min="0" max="100"
            value={f.probabilita ?? ""} onChange={set("probabilita")} />
        </div>
        <div className="field">
          <label className="label">Chiusura prevista</label>
          <input className="input" type="date" value={f.data_prevista || ""} onChange={set("data_prevista")} />
        </div>
      </div>
      {f.stato === "vinta" && (
        <div className="field" style={{ marginTop: 12 }}>
          <label className="label">Progetto collegato</label>
          <select className="select" value={f.progetto_id || ""} onChange={set("progetto_id")}>
            <option value="">— nessuno —</option>
            {(PROG4 || []).map(p => <option key={p.id} value={p.id}>{p.nome}</option>)}
          </select>
          <span className="help">Collega la trattativa vinta al progetto che ne è nato.</span>
        </div>
      )}
      {f.stato === "persa" && (
        <div className="field" style={{ marginTop: 12 }}>
          <label className="label">Perché l'abbiamo persa</label>
          <input className="input" value={f.motivo_perdita || ""} onChange={set("motivo_perdita")}
            placeholder="prezzo, tempi, concorrente…" />
          <span className="help">Serve a capire cosa migliorare la prossima volta.</span>
        </div>
      )}
      <div className="field" style={{ marginTop: 12 }}>
        <label className="label">Note</label>
        <textarea className="textarea" rows={3} value={f.note || ""} onChange={set("note")} />
      </div>
    </Modal4>
  );
}

/* ============================================================
   MODALE — ATTIVITÀ / PROMEMORIA
   ============================================================ */
function AttivitaModal({ attivita, contatti, trattative, onClose, onSaved }) {
  const [f, setF] = useS4({
    contatto_id: "", trattativa_id: "", tipo: "promemoria",
    data: oggiIso4(), titolo: "", note: "", fatta: false, ...attivita,
  });
  const [busy, setBusy] = useS4(false);
  const [err, setErr]   = useS4("");
  const nuova = !attivita.id;
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));

  const salva = async () => {
    if (!f.titolo.trim()) { setErr("Scrivi cosa devi fare"); return; }
    if (!f.contatto_id && !f.trattativa_id) { setErr("Collega il promemoria a un contatto o a una trattativa"); return; }
    if (!f.data) { setErr("Indica la data"); return; }
    setBusy(true); setErr("");
    try {
      const payload = {
        ...f,
        titolo: f.titolo.trim(),
        contatto_id: f.contatto_id || null,
        trattativa_id: f.trattativa_id || null,
        note: f.note || null,
      };
      const res = await window.AntaresStore.saveCrmAttivita(payload);
      if (res.error) { setErr(res.error.message); return; }
      onSaved(nuova ? "Promemoria creato" : "Promemoria aggiornato");
    } catch (ex) {
      setErr(ex.message || String(ex));
    } finally { setBusy(false); }
  };

  const elimina = async () => {
    if (!confirm("Eliminare questo promemoria?")) return;
    setBusy(true);
    const res = await window.AntaresStore.deleteCrmAttivita(f.id);
    setBusy(false);
    if (res.error) { setErr(res.error.message); return; }
    onSaved("Promemoria eliminato");
  };

  return (
    <Modal4
      title={nuova ? "Nuovo promemoria" : "Modifica promemoria"}
      subtitle="Cosa fare, con chi e quando"
      onClose={onClose} width={560}
      footer={<>
        {!nuova && (
          <button type="button" className="btn danger modal-foot-left" onClick={elimina} disabled={busy}>Elimina</button>
        )}
        <button type="button" className="btn" onClick={onClose}>Annulla</button>
        <button type="button" className="btn primary" onClick={salva} disabled={busy}>
          {busy ? "Salvo…" : "Salva"}
        </button>
      </>}
    >
      {err && <div className="login-error" style={{ marginBottom: 12 }}>{err}</div>}
      <div className="field">
        <label className="label">Cosa *</label>
        <input className="input" value={f.titolo || ""} onChange={set("titolo")}
          placeholder="es. Richiamare per il preventivo" autoFocus />
      </div>
      <div className="form-grid" style={{ marginTop: 12 }}>
        <div className="field">
          <label className="label">Quando *</label>
          <input className="input" type="date" value={f.data || ""} onChange={set("data")} />
        </div>
        <div className="field">
          <label className="label">Tipo</label>
          <select className="select" value={f.tipo || "promemoria"} onChange={set("tipo")}>
            {TIPI_ATTIVITA.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
          </select>
        </div>
      </div>
      <div className="form-grid" style={{ marginTop: 12 }}>
        <div className="field">
          <label className="label">Contatto</label>
          <select className="select" value={f.contatto_id || ""} onChange={set("contatto_id")}>
            <option value="">— nessuno —</option>
            {contatti.map(c => <option key={c.id} value={c.id}>{c.azienda}</option>)}
          </select>
        </div>
        <div className="field">
          <label className="label">Trattativa</label>
          <select className="select" value={f.trattativa_id || ""} onChange={set("trattativa_id")}>
            <option value="">— nessuna —</option>
            {trattative.map(t => <option key={t.id} value={t.id}>{t.titolo}</option>)}
          </select>
        </div>
      </div>
      <div className="field" style={{ marginTop: 12 }}>
        <label className="label">Note</label>
        <textarea className="textarea" rows={3} value={f.note || ""} onChange={set("note")} />
      </div>
    </Modal4>
  );
}

window.AntaresScreens4 = { Crm };