/* ============================================================
   JIT BATCH — Sezioni: Allarmi, Report, Impostazioni
   ============================================================ */
const Icon = window.Icon;
const { Card: OCard, KPI: OKPI, Badge: OBadge, StatusBadge: OSB, Tag: OTag, toast: OToast, fmt: OFmt } = window.UI;
const { BarChart: OBar, LineChart: OLine, HBars: OHB, Donut: ODonut } = window.Charts;

/* =================== ALLARMI =================== */
function SezAllarmi({ ctx }) {
  const { allarmi, setAllarmi } = ctx;
  const [fg, setFg] = React.useState("tutte");
  const [fs, setFs] = React.useState("tutti");

  const rows = allarmi.filter(a => (fg === "tutte" || a.grav === fg) && (fs === "tutti" || a.stato === fs));
  const aperti = allarmi.filter(a => a.stato === "aperto").length;
  const critici = allarmi.filter(a => a.grav === "critico" && a.stato !== "risolto").length;
  const ric = allarmi.filter(a => a.stato === "riconosciuto").length;

  const setStato = (id, stato) => {
    setAllarmi(allarmi.map(a => a.id === id ? { ...a, stato } : a));
    OToast({ type: stato === "risolto" ? "run" : "info", title: stato === "risolto" ? "Allarme risolto" : "Allarme riconosciuto", msg: id });
  };
  const gIco = { info: "info", warning: "triangle", critico: "alertCircle" };
  const gCol = { info: "var(--status-info)", warning: "var(--status-warn)", critico: "var(--status-alarm)" };

  return (
    <div>
      <div className="page-head">
        <div className="ph-titles"><h1>Allarmi</h1><p>Registro eventi e diagnostica impianto</p></div>
        <div className="ph-actions">
          <button className="btn" onClick={() => { setAllarmi(allarmi.map(a => a.stato === "aperto" ? { ...a, stato: "riconosciuto" } : a)); OToast({ type: "info", title: "Allarmi riconosciuti", msg: "Tutti gli allarmi aperti sono stati presi in carico." }); }}><Icon name="check" size={16} />Riconosci tutti</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(3,1fr)", marginBottom: "var(--gap)" }}>
        <OKPI icon="alertCircle" label="Allarmi aperti" value={aperti} accent="var(--status-alarm)" accentBg="var(--status-alarm-bg)" foot={critici ? `${critici} critici` : "Nessun critico"} footIcon={critici ? "triangle" : "check"} />
        <OKPI icon="bell" label="Da gestire" value={ric} accent="var(--status-warn)" accentBg="var(--status-warn-bg)" foot="Riconosciuti, in attesa" />
        <OKPI icon="checkCircle" label="Risolti oggi" value={allarmi.filter(a => a.stato === "risolto").length} accent="var(--status-run)" accentBg="var(--status-run-bg)" />
      </div>

      <div className="filterbar">
        <div className="chip-toggle">
          {[["tutte", "Tutte"], ["critico", "Critico"], ["warning", "Warning"], ["info", "Info"]].map(([k, l]) => <button key={k} className={fg === k ? "on" : ""} onClick={() => setFg(k)}>{l}</button>)}
        </div>
        <select className="input" value={fs} onChange={e => setFs(e.target.value)}>
          <option value="tutti">Tutti gli stati</option><option value="aperto">Aperto</option><option value="riconosciuto">Riconosciuto</option><option value="risolto">Risolto</option>
        </select>
        <span className="muted" style={{ fontSize: 12.5, marginLeft: "auto" }}>{rows.length} eventi</span>
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Codice</th><th>Descrizione</th><th>Area</th><th>Gravità</th><th>Data / ora</th><th>Stato</th><th></th></tr></thead>
            <tbody>
              {rows.map(a => (
                <tr key={a.id}>
                  <td><span className="id-cell">{a.id}</span></td>
                  <td><div className="row" style={{ gap: 8 }}><Icon name={gIco[a.grav]} size={16} style={{ color: gCol[a.grav], flex: "none" }} /><span className="strong" style={{ fontWeight: 500 }}>{a.desc}</span></div></td>
                  <td><OTag>{a.area}</OTag></td>
                  <td><OSB map="gravita" value={a.grav} /></td>
                  <td className="mono" style={{ fontSize: 12.5 }}>{a.ts}</td>
                  <td><OSB map="allarmeStato" value={a.stato} /></td>
                  <td>
                    <div className="row" style={{ gap: 6, justifyContent: "flex-end" }}>
                      {a.stato === "aperto" && <button className="btn btn-sm" onClick={() => setStato(a.id, "riconosciuto")}>Riconosci</button>}
                      {a.stato !== "risolto" && <button className="btn btn-sm btn-primary" onClick={() => setStato(a.id, "risolto")}><Icon name="check" size={13} />Risolvi</button>}
                      {a.stato === "risolto" && <span className="muted" style={{ fontSize: 12 }}>Chiuso</span>}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* =================== REPORT =================== */
function SezReport({ ctx }) {
  const D = window.DB;
  const scost = [
    { ciclo: "#4472", mat: "Acqua", teo: 1320, real: 1361, ric: "C25/30" },
    { ciclo: "#4471", mat: "Acqua", teo: 1320, real: 1361, ric: "C25/30" },
    { ciclo: "#4468", mat: "Cemento", teo: 2560, real: 2498, ric: "C28/35" },
    { ciclo: "#4465", mat: "Sabbia", teo: 6240, real: 6201, ric: "C25/30" },
    { ciclo: "#4460", mat: "Additivo", teo: 25.6, real: 26.1, ric: "C30/37" },
  ];
  const consegne = [
    { ora: "08:30", ord: "ORD-2415", cli: "Galassi Costruzioni", mezzo: "GL 337 MZ", m3: 42, esito: "Consegnato" },
    { ora: "09:15", ord: "ORD-2416", cli: "Veronese Prefabbricati", mezzo: "EK 905 BN", m3: 28, esito: "Consegnato" },
    { ora: "10:45", ord: "ORD-2417", cli: "Costruzioni Bianchi", mezzo: "GH 482 KP", m3: 24, esito: "In transito" },
  ];
  const exp = (t) => OToast({ type: "run", title: `Esportazione ${t}`, msg: "Report generato e pronto al download (demo)." });

  return (
    <div>
      <div className="page-head">
        <div className="ph-titles"><h1>Report</h1><p>Analisi produzione, consumi e consegne</p></div>
        <div className="ph-actions">
          <button className="btn" onClick={() => exp("Excel")}><Icon name="fileSheet" size={16} />Excel</button>
          <button className="btn btn-primary" onClick={() => exp("PDF")}><Icon name="fileText" size={16} />Esporta PDF</button>
        </div>
      </div>

      <div className="filterbar card" style={{ padding: 12, alignItems: "flex-end" }}>
        <div className="field"><label>Dal</label><input className="input" type="date" defaultValue="2026-06-08" /></div>
        <div className="field"><label>Al</label><input className="input" type="date" defaultValue="2026-06-15" /></div>
        <div className="field"><label>Cliente</label><select className="input"><option>Tutti</option>{D.clienti.map(c => <option key={c.id}>{c.nome}</option>)}</select></div>
        <div className="field"><label>Ricetta</label><select className="input"><option>Tutte</option>{D.ricette.map(r => <option key={r.id}>{r.id}</option>)}</select></div>
        <div className="field"><label>Automezzo</label><select className="input"><option>Tutti</option>{D.automezzi.map(a => <option key={a.targa}>{a.targa}</option>)}</select></div>
        <button className="btn btn-accent" onClick={() => OToast({ type: "info", title: "Filtri applicati", msg: "Report aggiornato per il periodo selezionato." })}><Icon name="filter" size={16} />Applica</button>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", marginTop: "var(--gap)" }}>
        <OCard title="Produzione per giorno" icon="chart" sub="m³ · ultima settimana">
          <OBar data={D.prodSettimana} target={350} unit="m³" height={210} />
          <div className="row" style={{ gap: 16, marginTop: 12, fontSize: 12 }}>
            <span className="row" style={{ gap: 6 }}><span style={{ width: 18, height: 3, background: "var(--jit-orange)", borderRadius: 2 }} />Target 350 m³</span>
            <span className="muted">Totale settimana: <b className="data" style={{ color: "var(--fg-1)" }}>{OFmt.n(D.prodSettimana.reduce((s, d) => s + d.v, 0))} m³</b></span>
          </div>
        </OCard>
        <OCard title="Consumo materie prime" icon="package" sub="oggi">
          <ODonut segments={D.consumoOggi.map(c => ({ label: c.mat, v: c.v, col: c.col, um: c.um }))} center={{ v: D.consumoOggi.length, label: "VOCI" }} size={150} thickness={20} />
        </OCard>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1fr 1.4fr", marginTop: "var(--gap)" }}>
        <OCard title="Produzione per cliente" icon="users" sub="m³ · mese">
          <OHB data={D.prodPerCliente} unit="m³" />
        </OCard>
        <OCard title="Scostamenti dosaggio" icon="activity" sub="ultimi cicli">
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Ciclo</th><th>Ricetta</th><th>Materiale</th><th className="num">Teorico</th><th className="num">Reale</th><th className="num">Scost.</th></tr></thead>
              <tbody>
                {scost.map((s, i) => {
                  const d = ((s.real - s.teo) / s.teo) * 100;
                  const cls = Math.abs(d) < 1 ? "scost-zero" : d > 0 ? "scost-neg" : "scost-pos";
                  return <tr key={i}><td className="id-cell">{s.ciclo}</td><td><OTag>{s.ric}</OTag></td><td>{s.mat}</td><td className="num">{OFmt.n(s.teo, s.teo < 100 ? 1 : 0)}</td><td className="num">{OFmt.n(s.real, s.real < 100 ? 1 : 0)}</td><td className={`num ${cls}`} style={{ fontWeight: 700 }}>{d > 0 ? "+" : ""}{d.toFixed(1)}%</td></tr>;
                })}
              </tbody>
            </table>
          </div>
        </OCard>
      </div>

      <OCard title="Report consegne" icon="truck" sub="oggi" style={{ marginTop: "var(--gap)" }}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Ora</th><th>Ordine</th><th>Cliente</th><th>Mezzo</th><th className="num">m³</th><th>Esito</th></tr></thead>
            <tbody>
              {consegne.map((c, i) => <tr key={i}><td className="mono">{c.ora}</td><td className="id-cell">{c.ord}</td><td className="strong">{c.cli}</td><td className="mono" style={{ fontSize: 12.5 }}>{c.mezzo}</td><td className="num data">{c.m3}</td><td><OBadge cls={c.esito === "Consegnato" ? "run" : "warn"} label={c.esito} /></td></tr>)}
            </tbody>
          </table>
        </div>
      </OCard>
    </div>
  );
}

/* =================== IMPOSTAZIONI =================== */
function Toggle({ on, onChange }) {
  return <button onClick={() => onChange(!on)} style={{ width: 42, height: 24, borderRadius: 99, border: "none", cursor: "pointer", background: on ? "var(--status-run)" : "var(--gray-300)", position: "relative", transition: "background 160ms", flex: "none" }}>
    <span style={{ position: "absolute", top: 3, left: on ? 21 : 3, width: 18, height: 18, borderRadius: 99, background: "#fff", transition: "left 160ms", boxShadow: "0 1px 3px rgba(0,0,0,0.2)" }} /></button>;
}
function SettingRow({ title, desc, children }) {
  return <div className="defrow" style={{ alignItems: "center" }}><div><div className="dd" style={{ textAlign: "left", fontSize: 14 }}>{title}</div>{desc && <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{desc}</div>}</div><div style={{ flex: "none" }}>{children}</div></div>;
}

function SezImpostazioni({ ctx }) {
  const [tab, setTab] = React.useState("impianto");
  const [plc, setPlc] = React.useState(true);
  const [toggles, setToggles] = React.useState({ autostart: true, mailAlarm: true, ricalc: false, backupAuto: true });
  const [tol, setTol] = React.useState({ cemento: 2, acqua: 1.5, aggregati: 3, additivo: 5 });
  const set = (k, v) => setToggles({ ...toggles, [k]: v });
  const D = window.DB;
  const tabs = [["impianto", "Parametri impianto"], ["ciclo", "Tempi ciclo & tolleranze"], ["utenti", "Utenti e ruoli"], ["sistema", "Lingua & sistema"], ["plc", "Connessione PLC"]];

  return (
    <div>
      <div className="page-head">
        <div className="ph-titles"><h1>Impostazioni</h1><p>Configurazione impianto, dosaggio e sistema</p></div>
        <div className="ph-actions"><button className="btn btn-primary" onClick={() => OToast({ type: "run", title: "Configurazione salvata", msg: "Parametri applicati all'impianto." })}><Icon name="save" size={16} />Salva modifiche</button></div>
      </div>

      <div className="tabs">{tabs.map(([k, l]) => <button key={k} className={tab === k ? "on" : ""} onClick={() => setTab(k)}>{l}</button>)}</div>

      {tab === "impianto" && (
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <OCard title="Identificazione impianto" icon="factory">
            <div className="deflist">
              <div className="field" style={{ marginBottom: 12 }}><label>Nome impianto</label><input className="input" defaultValue="Impianto Verona Est" /></div>
              <div className="field" style={{ marginBottom: 12 }}><label>Linea di produzione</label><input className="input" defaultValue="Linea 1 — Torre 2 m³" /></div>
              <div className="field"><label>Capacità nominale</label><input className="input mono" defaultValue="60 m³/h" /></div>
            </div>
          </OCard>
          <OCard title="Automazioni" icon="cpu">
            <div className="deflist">
              <SettingRow title="Avvio automatico ciclo" desc="Avvia il dosaggio alla conferma ordine"><Toggle on={toggles.autostart} onChange={v => set("autostart", v)} /></SettingRow>
              <SettingRow title="Notifica allarmi via e-mail" desc="Invio al responsabile di produzione"><Toggle on={toggles.mailAlarm} onChange={v => set("mailAlarm", v)} /></SettingRow>
              <SettingRow title="Ricalcolo umidità aggregati" desc="Correzione acqua da sonda igrometrica"><Toggle on={toggles.ricalc} onChange={v => set("ricalc", v)} /></SettingRow>
            </div>
          </OCard>
        </div>
      )}

      {tab === "ciclo" && (
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <OCard title="Tempi di ciclo" icon="clock">
            <div className="field" style={{ marginBottom: 12 }}><label>Tempo dosaggio aggregati (s)</label><input className="input mono" type="number" defaultValue="22" /></div>
            <div className="field" style={{ marginBottom: 12 }}><label>Tempo dosaggio cemento (s)</label><input className="input mono" type="number" defaultValue="14" /></div>
            <div className="field" style={{ marginBottom: 12 }}><label>Tempo dosaggio acqua/additivi (s)</label><input className="input mono" type="number" defaultValue="12" /></div>
            <div className="field"><label>Tempo miscelazione minimo (s)</label><input className="input mono" type="number" defaultValue="35" /></div>
          </OCard>
          <OCard title="Tolleranze di dosaggio" icon="gauge" sub="± % sul valore teorico">
            {Object.entries(tol).map(([k, v]) => (
              <div key={k} style={{ marginBottom: 16 }}>
                <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}><span style={{ fontSize: 13.5, fontWeight: 600, textTransform: "capitalize" }}>{k}</span><span className="data" style={{ color: "var(--fg-accent)" }}>± {v}%</span></div>
                <input type="range" min="0.5" max="6" step="0.5" value={v} onChange={e => setTol({ ...tol, [k]: parseFloat(e.target.value) })} style={{ width: "100%", accentColor: "var(--jit-orange)" }} />
              </div>
            ))}
          </OCard>
        </div>
      )}

      {tab === "utenti" && (
        <OCard title="Utenti e ruoli" icon="users" action={<button className="btn btn-sm btn-accent" onClick={() => OToast({ type: "info", title: "Nuovo utente", msg: "Apertura modulo (demo)." })}><Icon name="plus" size={14} />Aggiungi</button>}>
          <div className="tbl-wrap"><table className="tbl">
            <thead><tr><th>Nome</th><th>Ruolo</th><th>E-mail</th><th>Stato</th><th></th></tr></thead>
            <tbody>{D.utenti.map((u, i) => <tr key={i}>
              <td><div className="row" style={{ gap: 9 }}><span className="avatar" style={{ width: 30, height: 30, fontSize: 12 }}>{u.nome.split(" ").map(s => s[0]).join("")}</span><span className="strong">{u.nome}</span></div></td>
              <td>{u.ruolo}</td><td className="mono" style={{ fontSize: 12.5 }}>{u.email}</td>
              <td><OBadge cls={u.stato === "attivo" ? "run" : "idle"} label={u.stato === "attivo" ? "Attivo" : "Sospeso"} /></td>
              <td><button className="btn btn-sm btn-ghost"><Icon name="edit" size={14} /></button></td></tr>)}</tbody>
          </table></div>
        </OCard>
      )}

      {tab === "sistema" && (
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <OCard title="Lingua e formato" icon="globe">
            <div className="field" style={{ marginBottom: 12 }}><label>Lingua interfaccia</label><select className="input" value={ctx.lang} onChange={e => ctx.setLang(e.target.value)}><option value="it">Italiano</option><option value="en">English</option></select></div>
            <div className="field" style={{ marginBottom: 12 }}><label>Unità di misura</label><select className="input"><option>Sistema metrico (kg, m³, l)</option></select></div>
            <div className="field"><label>Fuso orario</label><select className="input"><option>Europe/Rome (CET)</option></select></div>
          </OCard>
          <OCard title="Backup dati" icon="hardDrive">
            <div className="deflist">
              <SettingRow title="Backup automatico" desc="Ogni giorno alle 02:00"><Toggle on={toggles.backupAuto} onChange={v => set("backupAuto", v)} /></SettingRow>
              <SettingRow title="Ultimo backup" desc="15/06/2026 02:00 · 248 MB"><OBadge cls="run" label="Completato" /></SettingRow>
            </div>
            <button className="btn" style={{ marginTop: 14, width: "100%" }} onClick={() => OToast({ type: "run", title: "Backup avviato", msg: "Copia di sicurezza in corso (demo)." })}><Icon name="download" size={16} />Esegui backup manuale</button>
          </OCard>
        </div>
      )}

      {tab === "plc" && (
        <OCard title="Connessione PLC / SCADA" icon="cpu" sub="JIT Engineering">
          <div className="row" style={{ gap: 16, flexWrap: "wrap" }}>
            <div style={{ flex: 1, minWidth: 240 }}>
              <div className="deflist">
                <SettingRow title="Stato collegamento" desc={plc ? "Connesso · latenza 8 ms" : "Disconnesso"}><OBadge cls={plc ? "run" : "alarm"} label={plc ? "Online" : "Offline"} pulse={plc} /></SettingRow>
                <SettingRow title="Controllore"><span className="mono">Siemens S7-1500</span></SettingRow>
                <SettingRow title="Protocollo"><span className="mono">OPC-UA</span></SettingRow>
                <SettingRow title="Indirizzo gateway"><span className="mono">192.168.10.20</span></SettingRow>
                <SettingRow title="Ultimo handshake"><span className="mono">15/06/2026 10:18:42</span></SettingRow>
              </div>
              <div className="row" style={{ gap: 8, marginTop: 14 }}>
                <button className="btn" onClick={() => { setPlc(!plc); OToast({ type: plc ? "warn" : "run", title: plc ? "PLC disconnesso" : "PLC riconnesso", msg: plc ? "Comunicazione interrotta (simulata)." : "Handshake completato." }); }}><Icon name="power" size={16} />{plc ? "Disconnetti" : "Riconnetti"}</button>
                <button className="btn btn-ghost" onClick={() => OToast({ type: "info", title: "Test comunicazione", msg: "Ping nodi I/O completato — 64/64 OK." })}><Icon name="refresh" size={16} />Test I/O</button>
              </div>
            </div>
            <div style={{ width: 220, flex: "none", padding: 16, borderRadius: 10, background: "var(--bg-dark)", color: "var(--fg-on-dark)" }}>
              <div className="row" style={{ gap: 8, marginBottom: 12 }}><Icon name="signal" size={18} style={{ color: plc ? "var(--status-run)" : "var(--status-alarm)" }} /><span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em" }}>NODI I/O</span></div>
              {[["Pesatura cemento", true], ["Pesatura aggregati", true], ["Dosaggio acqua", true], ["Mescolatore", true], ["Sonda umidità", false]].map(([n, ok], i) => (
                <div key={i} className="row" style={{ justifyContent: "space-between", padding: "5px 0", fontSize: 12.5, borderBottom: i < 4 ? "1px solid rgba(255,255,255,0.08)" : "none" }}>
                  <span style={{ color: "var(--fg-on-dark-2)" }}>{n}</span>
                  <span style={{ width: 8, height: 8, borderRadius: 99, background: ok && plc ? "var(--status-run)" : "var(--status-alarm)" }} />
                </div>
              ))}
            </div>
          </div>
        </OCard>
      )}
    </div>
  );
}

window.Sezioni = Object.assign(window.Sezioni || {}, { SezAllarmi, SezReport, SezImpostazioni });