/* ============================================================
   JIT BATCH — Sezioni: Dashboard, Produzione (simulazione ciclo)
   ============================================================ */
const Icon = window.Icon;
const { Card: KCard, KPI: KKPI, Badge: KBadge, StatusBadge: KSB, Tag: KTag, LevelBar: KLB, toast: KToast, fmt: KFmt } = window.UI;
const KPlant = window.PlantSchema;
const { BarChart: KBar, Donut: KDonut, MiniSpark: KSpark } = window.Charts;

/* ---- mini level gauge for dashboard ---- */
function MiniLevel({ icon, label, pct, detail, color }) {
  const st = pct <= 15 ? "critico" : pct <= 30 ? "basso" : "ok";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      <div className="row" style={{ gap: 8 }}>
        <Icon name={icon} size={15} style={{ color: color || "var(--navy-500)" }} />
        <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--fg-2)" }}>{label}</span>
        <span className="data" style={{ marginLeft: "auto", fontSize: 13, color: "var(--fg-1)" }}>{pct}%</span>
      </div>
      <KLB pct={pct} status={st} />
      <span className="muted" style={{ fontSize: 11 }}>{detail}</span>
    </div>
  );
}

/* =================== DASHBOARD =================== */
function SezDashboard({ ctx }) {
  const { silos, ordini, allarmi, navigate, kpi } = ctx;
  const sL = {}; silos.forEach(s => sL[s.id] = s.liv);
  const cemento = Math.round((sL.S1 + sL.S2) / 2);
  const aggreg = Math.round((sL.TS + sL.TF + sL.TG) / 3);
  const completati = ordini.filter(o => o.stato === "completato").length;
  const coda = ordini.filter(o => o.stato === "programmato" || o.stato === "in_produzione").length;
  const prodPct = Math.round((kpi.prodGiorno / kpi.prodTarget) * 100);
  const recentAlarms = allarmi.slice(0, 5);
  const gIco = { info: "info", warning: "triangle", critico: "alertCircle" };
  const gCol = { info: "var(--status-info)", warning: "var(--status-warn)", critico: "var(--status-alarm)" };

  return (
    <div>
      {/* status banner */}
      <div className="card" style={{ marginBottom: "var(--gap)", display: "flex", alignItems: "center", gap: 18, padding: "14px 20px", flexWrap: "wrap", borderLeft: "4px solid var(--status-run)" }}>
        <div className="row" style={{ gap: 12 }}>
          <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--status-run-bg)", color: "var(--status-run)", display: "grid", placeItems: "center" }}><Icon name="power" size={24} /></span>
          <div><div className="eyebrow" style={{ color: "var(--fg-3)" }}>Stato impianto</div><div style={{ fontSize: 20, fontWeight: 700, fontFamily: "var(--font-display)" }}>In funzione</div></div>
        </div>
        <div style={{ width: 1, height: 38, background: "var(--border)" }} />
        <div><div className="muted" style={{ fontSize: 12 }}>Ultimo ciclo</div><div className="data" style={{ fontSize: 15 }}>{kpi.ultimoCiclo.id} · {kpi.ultimoCiclo.ricetta} · {kpi.ultimoCiclo.qta} m³</div><div className="muted" style={{ fontSize: 11.5 }}>ore {kpi.ultimoCiclo.ora}</div></div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <KBadge cls="run" label="6 nodi I/O online" pulse />
          <button className="btn btn-accent" onClick={() => navigate("produzione")}><Icon name="play" size={16} />Nuovo ciclo</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: "var(--gap)" }}>
        <div className="kpi">
          <div className="kpi-top"><span className="kpi-ico" style={{ background: "var(--orange-100)", color: "var(--orange-600)" }}><Icon name="factory" size={17} /></span><span className="kpi-label">Produzione giornaliera</span></div>
          <div className="kpi-val">{kpi.prodGiorno}<small> m³</small></div>
          <div className="progress" style={{ height: 6 }}><span style={{ width: `${prodPct}%` }} /></div>
          <div className="kpi-foot muted">{prodPct}% del target ({kpi.prodTarget} m³)</div>
        </div>
        <KKPI icon="checkCircle" label="Ordini completati" value={completati} accent="var(--status-run)" accentBg="var(--status-run-bg)" foot="oggi" />
        <KKPI icon="clipboard" label="Ordini in coda" value={coda} accent="var(--status-info)" accentBg="var(--status-info-bg)" foot="da evadere" footIcon="clock" />
        <KKPI icon="refresh" label="Cicli oggi" value={kpi.cicliOggi} accent="var(--navy-600)" accentBg="var(--navy-50)" foot="+4 vs ieri" footIcon="arrowUp" trend="up" />
      </div>

      {/* main grid */}
      <div className="grid" style={{ gridTemplateColumns: "1.7fr 1fr", alignItems: "start" }}>
        <KCard title="Impianto in tempo reale" icon="factory" sub="vista sinottica · live" action={<KBadge cls="run" label="LIVE" pulse />}>
          <KPlant auto height={360} levels={sL} />
        </KCard>

        <KCard title="Livelli impianto" icon="gauge" sub="silos · vasche · tramogge">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <MiniLevel icon="silo" label="Silos cemento" pct={cemento} color="var(--navy-500)" detail={`S1 ${sL.S1}% · S2 ${sL.S2}%`} />
            <MiniLevel icon="droplet" label="Acqua di impasto" pct={sL.VA} color="#5BA7D6" detail={`${KFmt.n(30 * sL.VA / 100, 0)} m³ disponibili`} />
            <MiniLevel icon="beaker" label="Additivi" pct={sL.AD} color="var(--jit-orange)" detail={`${KFmt.n(1000 * sL.AD / 100)} l fluidificante`} />
            <MiniLevel icon="layers" label="Aggregati" pct={aggreg} color="#938D81" detail={`sabbia ${sL.TS}% · ghiaia ${Math.round((sL.TF + sL.TG) / 2)}%`} />
          </div>
        </KCard>
      </div>

      {/* charts row */}
      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", marginTop: "var(--gap)", alignItems: "start" }}>
        <KCard title="Produzione settimanale" icon="chart" sub="m³ / giorno">
          <KBar data={ctx.prodSettimana} target={350} unit="m³" height={200} />
        </KCard>
        <KCard title="Consumo materiali" icon="package" sub="oggi">
          <KDonut segments={ctx.consumoOggi.map(c => ({ label: c.mat, v: c.v, col: c.col, um: c.um }))} center={{ v: kpi.cicliOggi, label: "CICLI" }} size={140} thickness={18} />
        </KCard>
      </div>

      {/* alarms */}
      <div className="grid" style={{ gridTemplateColumns: "1fr", marginTop: "var(--gap)" }}>
        <KCard title="Ultimi allarmi" icon="bell" sub={`${allarmi.filter(a => a.stato === "aperto").length} aperti`}
          action={<button className="btn btn-sm btn-ghost" onClick={() => navigate("allarmi")}>Vedi tutti <Icon name="chevronR" size={14} /></button>}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {recentAlarms.map((a, i) => (
              <div key={a.id} className="row" style={{ gap: 12, padding: "10px 0", borderBottom: i < recentAlarms.length - 1 ? "1px solid var(--border)" : "none" }}>
                <Icon name={gIco[a.grav]} size={18} style={{ color: gCol[a.grav], flex: "none" }} />
                <span className="id-cell" style={{ minWidth: 78 }}>{a.id}</span>
                <span style={{ flex: 1, fontSize: 13.5, color: "var(--fg-1)" }}>{a.desc}</span>
                <KTag>{a.area}</KTag>
                <span className="mono muted" style={{ fontSize: 12, minWidth: 110, textAlign: "right" }}>{a.ts.split(" ")[1]}</span>
                <KSB map="allarmeStato" value={a.stato} />
              </div>
            ))}
          </div>
        </KCard>
      </div>
    </div>
  );
}

/* =================== PRODUZIONE =================== */
const PHASES = [
  { key: "aggregati", label: "Dosaggio aggregati", dur: 3600 },
  { key: "cemento", label: "Dosaggio cemento", dur: 2600 },
  { key: "acqua", label: "Dosaggio acqua + additivi", dur: 2600 },
  { key: "miscelazione", label: "Miscelazione", dur: 3600 },
  { key: "scarico", label: "Scarico", dur: 2600 },
];
const STEPPER = ["attesa", ...PHASES.map(p => p.key), "completato"];
const STEP_LABEL = { attesa: "Attesa", aggregati: "Aggregati", cemento: "Cemento", acqua: "Acqua", miscelazione: "Miscelazione", scarico: "Scarico", completato: "Completato" };
const TOTAL = PHASES.reduce((s, p) => s + p.dur, 0);

function SezProduzione({ ctx }) {
  const { ordini, setOrdini, ricette, prodOrder, setProdOrder, silos } = ctx;
  const candidates = ordini.filter(o => o.stato === "in_produzione" || o.stato === "programmato");
  const [orderId, setOrderId] = React.useState(prodOrder || (candidates[0] && candidates[0].id) || ordini[0].id);
  React.useEffect(() => { if (prodOrder) setOrderId(prodOrder); }, [prodOrder]);
  const order = ordini.find(o => o.id === orderId) || ordini[0];
  const [ricettaId, setRicettaId] = React.useState(order.ricetta);
  React.useEffect(() => { setRicettaId(order.ricetta); }, [orderId]);
  const ricetta = ricette.find(r => r.id === ricettaId) || ricette[0];
  const remaining = Math.max(order.tot - order.prodotto, 0);
  const [qty, setQty] = React.useState(Math.min(8, remaining || 8));

  const [elapsed, setElapsed] = React.useState(0);
  const [running, setRunning] = React.useState(false);
  const [paused, setPaused] = React.useState(false);
  const [devs, setDevs] = React.useState({});
  const finishedRef = React.useRef(false);

  // material recipe rows (kg or l per m³)
  const mats = [
    { k: "sabbia", lbl: "Sabbia 0/4", per: ricetta.sabbia, um: "kg", phase: "aggregati", tol: 1.2 },
    { k: "ghiaiaF", lbl: "Ghiaia 4/12", per: ricetta.ghiaiaF, um: "kg", phase: "aggregati", tol: 1.2 },
    { k: "ghiaiaG", lbl: "Ghiaia 12/20", per: ricetta.ghiaiaG, um: "kg", phase: "aggregati", tol: 1.2 },
    { k: "cemento", lbl: "Cemento", per: ricetta.cemento, um: "kg", phase: "cemento", tol: 2 },
    { k: "acqua", lbl: "Acqua", per: ricetta.acqua, um: "l", phase: "acqua", tol: 1.8 },
    { k: "additivo", lbl: "Additivo", per: ricetta.additivo, um: "l", phase: "acqua", tol: 4 },
  ].filter(m => m.per > 0);

  // current phase
  let cum = 0, phaseKey = "attesa", phaseStart = 0, phaseDur = 1;
  if (running || elapsed > 0) {
    if (elapsed >= TOTAL) { phaseKey = "completato"; }
    else {
      for (const p of PHASES) {
        if (elapsed < cum + p.dur) { phaseKey = p.key; phaseStart = cum; phaseDur = p.dur; break; }
        cum += p.dur;
      }
    }
  }
  const progress = Math.round((elapsed / TOTAL) * 100);
  const schemaPhase = !running && elapsed === 0 ? "idle" : phaseKey;

  // ticking
  React.useEffect(() => {
    if (!running || paused) return;
    const id = setInterval(() => setElapsed(e => Math.min(e + 90, TOTAL)), 90);
    return () => clearInterval(id);
  }, [running, paused]);

  // finish handling
  React.useEffect(() => {
    if (running && elapsed >= TOTAL && !finishedRef.current) {
      finishedRef.current = true;
      setRunning(false);
      const newProdotto = Math.min(order.tot, order.prodotto + qty);
      setOrdini(ordini.map(o => o.id === order.id ? { ...o, prodotto: newProdotto, stato: newProdotto >= o.tot ? "completato" : "in_produzione" } : o));
      KToast({ type: "run", title: "Ciclo completato", msg: `${qty} m³ di ${ricetta.id} prodotti per ${order.id}.` });
      // deviation warning
      const wdev = (devs.acqua || 0) * 100;
      if (wdev > 1.8) setTimeout(() => KToast({ type: "warn", title: "Scostamento acqua", msg: `Sovradosaggio rilevato (+${wdev.toFixed(1)}%) oltre tolleranza.` }), 600);
      if (newProdotto >= order.tot) setTimeout(() => KToast({ type: "info", title: `${order.id} completato`, msg: "Tutti i m³ ordinati sono stati prodotti." }), 1100);
    }
  }, [elapsed, running]);

  const start = () => {
    if (qty <= 0) { KToast({ type: "warn", title: "Quantità non valida", msg: "Imposta una quantità maggiore di zero." }); return; }
    if (paused) { setPaused(false); return; }
    const d = {};
    mats.forEach(m => { d[m.k] = (Math.random() * 2 - 1) * (m.tol / 100) * 0.85; });
    if (Math.random() < 0.5) d.acqua = (1.9 + Math.random() * 1.4) / 100; // occasional water over-dose
    setDevs(d);
    finishedRef.current = false;
    setElapsed(0); setRunning(true); setPaused(false);
    KToast({ type: "info", title: "Ciclo avviato", msg: `${order.id} · ${ricetta.id} · ${qty} m³` });
  };
  const pause = () => { if (running) { setPaused(p => !p); KToast({ type: "info", title: paused ? "Ciclo ripreso" : "Ciclo in pausa" }); } };
  const stop = () => { if (running || elapsed > 0) { setRunning(false); setPaused(false); KToast({ type: "warn", title: "Ciclo interrotto", msg: "Produzione fermata dall'operatore." }); } };
  const reset = () => { setRunning(false); setPaused(false); setElapsed(0); finishedRef.current = false; };

  const sL = {}; silos.forEach(s => sL[s.id] = s.liv);
  const phaseIdx = STEPPER.indexOf(phaseKey);

  // compute dosed value for a material
  const dosedVal = (m) => {
    const teo = m.per * qty;
    const real = teo * (1 + (devs[m.k] || 0));
    const pIdx = PHASES.findIndex(p => p.key === m.phase);
    const pStart = PHASES.slice(0, pIdx).reduce((s, p) => s + p.dur, 0);
    const pEnd = pStart + PHASES[pIdx].dur;
    let frac = 0;
    if (elapsed >= pEnd || phaseKey === "completato") frac = 1;
    else if (elapsed > pStart) frac = (elapsed - pStart) / PHASES[pIdx].dur;
    return { teo, real, cur: real * frac, done: frac >= 1, active: elapsed > pStart && elapsed < pEnd && running };
  };

  return (
    <div>
      <div className="page-head">
        <div className="ph-titles"><h1>Produzione</h1><p>Simulazione ciclo di betonaggio · Linea 1</p></div>
        <div className="ph-actions">
          <KBadge cls={phaseKey === "completato" ? "idle" : running ? (paused ? "warn" : "run") : "idle"} label={phaseKey === "completato" ? "Completato" : running ? (paused ? "In pausa" : "In esecuzione") : "Pronto"} pulse={running && !paused} />
        </div>
      </div>

      {/* setup row */}
      <div className="card" style={{ marginBottom: "var(--gap)" }}>
        <div className="card-body" style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "flex-end" }}>
          <div className="field" style={{ minWidth: 240, flex: 1 }}>
            <label>Ordine</label>
            <select className="input" value={orderId} disabled={running} onChange={e => setProdOrder(e.target.value) || setOrderId(e.target.value)}>
              {ordini.map(o => <option key={o.id} value={o.id}>{o.id} · {o.cliente} · {o.tot} m³ ({o.stato.replace("_", " ")})</option>)}
            </select>
          </div>
          <div className="field" style={{ minWidth: 180 }}>
            <label>Ricetta</label>
            <select className="input" value={ricettaId} disabled={running} onChange={e => setRicettaId(e.target.value)}>
              {ricette.filter(r => r.attiva).map(r => <option key={r.id} value={r.id}>{r.id} — {r.nome}</option>)}
            </select>
          </div>
          <div className="field" style={{ width: 150 }}>
            <label>Quantità (m³)</label>
            <input className="input mono" type="number" min="1" max="12" value={qty} disabled={running} onChange={e => setQty(Math.max(0, parseFloat(e.target.value) || 0))} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 120 }}>
            <label className="muted" style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em", whiteSpace: "nowrap" }}>Residuo ordine</label>
            <span className="data" style={{ fontSize: 17, color: "var(--fg-1)" }}>{remaining} m³</span>
          </div>
        </div>
      </div>

      {/* controls + progress */}
      <div className="card" style={{ marginBottom: "var(--gap)" }}>
        <div className="card-body">
          <div className="row" style={{ gap: 10, flexWrap: "wrap", marginBottom: 16 }}>
            <button className="btn btn-accent" onClick={start} disabled={running && !paused}><Icon name="play" size={16} />{paused ? "Riprendi" : "Avvia ciclo"}</button>
            <button className="btn" onClick={pause} disabled={!running}><Icon name="pause" size={16} />Pausa</button>
            <button className="btn btn-danger" onClick={stop} disabled={!running && elapsed === 0}><Icon name="stop" size={16} />Ferma</button>
            <button className="btn btn-ghost" onClick={reset} disabled={running}><Icon name="reset" size={16} />Reset</button>
            <div style={{ marginLeft: "auto" }} className="row">
              <span className="muted" style={{ fontSize: 12.5 }}>Fase corrente:</span>
              <KBadge cls={phaseKey === "completato" ? "run" : phaseKey === "attesa" ? "idle" : "info"} label={phaseKey === "completato" ? "Ciclo completato" : phaseKey === "attesa" ? "In attesa" : PHASES.find(p => p.key === phaseKey).label} pulse={running && !paused && phaseKey !== "attesa"} />
            </div>
          </div>

          {/* stepper */}
          <div className="row" style={{ gap: 0, marginBottom: 16, flexWrap: "wrap" }}>
            {STEPPER.map((s, i) => {
              const state = i < phaseIdx ? "done" : i === phaseIdx ? "active" : "todo";
              return (
                <React.Fragment key={s}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5, minWidth: 64 }}>
                    <div style={{ width: 30, height: 30, borderRadius: 99, display: "grid", placeItems: "center", flex: "none",
                      background: state === "done" ? "var(--status-run)" : state === "active" ? "var(--jit-orange)" : "var(--bg-sunken)",
                      color: state === "todo" ? "var(--fg-3)" : "#fff", border: state === "todo" ? "1px solid var(--border-strong)" : "none",
                      boxShadow: state === "active" ? "0 0 0 4px rgba(242,148,31,0.2)" : "none", transition: "all 200ms" }}>
                      {state === "done" ? <Icon name="check" size={15} /> : <span className="data" style={{ fontSize: 12 }}>{i}</span>}
                    </div>
                    <span style={{ fontSize: 10.5, fontWeight: 600, color: state === "active" ? "var(--fg-accent)" : "var(--fg-3)", textAlign: "center" }}>{STEP_LABEL[s]}</span>
                  </div>
                  {i < STEPPER.length - 1 && <div style={{ flex: 1, height: 2, minWidth: 12, background: i < phaseIdx ? "var(--status-run)" : "var(--border-strong)", marginTop: -16, transition: "background 300ms" }} />}
                </React.Fragment>
              );
            })}
          </div>

          {/* progress bar */}
          <div className="row" style={{ gap: 12 }}>
            <div className="progress" style={{ flex: 1, height: 16 }}><span style={{ width: `${progress}%` }} /></div>
            <span className="data" style={{ fontSize: 18, minWidth: 54, textAlign: "right", color: phaseKey === "completato" ? "var(--status-run)" : "var(--fg-1)" }}>{progress}%</span>
          </div>
        </div>
      </div>

      {/* schema + dosing table */}
      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", alignItems: "start" }}>
        <KCard title="Impianto" icon="factory" sub="reattivo alla fase">
          <KPlant phase={schemaPhase} levels={sL} height={340} />
        </KCard>

        <KCard title="Materiali dosati" icon="gauge" sub="teorico vs reale">
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Materiale</th><th className="num">Teorico</th><th className="num">Reale</th><th className="num">Scost.</th></tr></thead>
              <tbody>
                {mats.map(m => {
                  const dv = dosedVal(m);
                  const started = dv.cur > 0 || dv.done;
                  const devPct = started ? ((dv.real - dv.teo) / dv.teo) * 100 : 0;
                  const over = Math.abs(devPct) > m.tol;
                  return (
                    <tr key={m.k}>
                      <td><div className="row" style={{ gap: 7 }}>{dv.active && <span className="bd" style={{ width: 7, height: 7, borderRadius: 99, background: "var(--jit-orange)", animation: "dotpulse 1s infinite" }} />}<span className="strong" style={{ fontWeight: 500 }}>{m.lbl}</span></div></td>
                      <td className="num">{KFmt.n(dv.teo, dv.teo < 100 ? 1 : 0)} <span className="muted" style={{ fontSize: 11 }}>{m.um}</span></td>
                      <td className="num data" style={{ color: started ? "var(--fg-1)" : "var(--fg-3)" }}>{started ? KFmt.n(dv.cur, dv.cur < 100 ? 1 : 0) : "—"}</td>
                      <td className={`num ${!started ? "scost-zero" : over ? "scost-neg" : "scost-pos"}`} style={{ fontWeight: 700 }}>
                        {!dv.done ? (started ? "…" : "—") : `${devPct > 0 ? "+" : ""}${devPct.toFixed(1)}%`}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div style={{ marginTop: 12, padding: 10, borderRadius: 8, background: "var(--bg-sunken)", fontSize: 12, color: "var(--fg-3)", display: "flex", gap: 8, alignItems: "center" }}>
            <Icon name="info" size={15} /><span>Scostamenti entro tolleranza in <span style={{ color: "var(--status-run)", fontWeight: 600 }}>verde</span>, oltre soglia in <span style={{ color: "var(--status-alarm)", fontWeight: 600 }}>rosso</span>.</span>
          </div>
        </KCard>
      </div>
    </div>
  );
}

window.Sezioni = Object.assign(window.Sezioni || {}, { SezDashboard, SezProduzione });