/* ============================================================
   JIT BATCH — App shell (sidebar, routing, topbar, tweaks, mount)
   ============================================================ */
const Icon = window.Icon;
const S = window.Sezioni;
const { Toaster } = window.UI;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;

const NAV = [
  { group: { it: "Operatività", en: "Operations" }, items: [
    { id: "dashboard", it: "Dashboard", en: "Dashboard", icon: "dashboard", comp: S.SezDashboard },
    { id: "produzione", it: "Produzione", en: "Production", icon: "factory", comp: S.SezProduzione },
    { id: "ordini", it: "Ordini", en: "Orders", icon: "clipboard", comp: S.SezOrdini },
  ]},
  { group: { it: "Anagrafiche", en: "Master data" }, items: [
    { id: "ricette", it: "Ricette Calcestruzzo", en: "Concrete recipes", icon: "flask", comp: S.SezRicette },
    { id: "clienti", it: "Clienti e Cantieri", en: "Customers & sites", icon: "users", comp: S.SezClienti },
  ]},
  { group: { it: "Risorse", en: "Resources" }, items: [
    { id: "materie", it: "Materie Prime", en: "Raw materials", icon: "package", comp: S.SezMaterie },
    { id: "silos", it: "Silos e Aggregati", en: "Silos & aggregates", icon: "silo", comp: S.SezSilos },
    { id: "automezzi", it: "Automezzi", en: "Fleet", icon: "truck", comp: S.SezAutomezzi },
  ]},
  { group: { it: "Controllo", en: "Control" }, items: [
    { id: "allarmi", it: "Allarmi", en: "Alarms", icon: "bell", comp: S.SezAllarmi },
    { id: "report", it: "Report", en: "Reports", icon: "chart", comp: S.SezReport },
    { id: "impostazioni", it: "Impostazioni", en: "Settings", icon: "settings", comp: S.SezImpostazioni },
  ]},
];
const ALL_ITEMS = NAV.flatMap(g => g.items);

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfort",
  "lang": "it"
}/*EDITMODE-END*/;

const T = {
  search: { it: "Cerca ordini, clienti, mezzi…", en: "Search orders, customers, fleet…" },
  online: { it: "PLC connesso", en: "PLC online" },
};

function BrandMark() {
  return (
    <svg viewBox="0 0 50 40" aria-hidden="true">
      <path d="M4 22 Q26 4 47 13" stroke="#F2941F" fill="none" strokeWidth="4.5" strokeLinecap="round" />
      <text x="25" y="34" fontFamily="Titillium Web, sans-serif" fontWeight="900" fontSize="20" fill="#23416A" textAnchor="middle" letterSpacing="-0.5">JIT</text>
    </svg>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang || "it";
  const tr = (o) => o[lang] || o.it;

  const [route, setRoute] = React.useState("dashboard");
  const contentRef = React.useRef(null);

  // shared state
  const [ordini, setOrdini] = React.useState(window.DB.ordini.map(o => ({ ...o })));
  const [ricette, setRicette] = React.useState(window.DB.ricette.map(r => ({ ...r })));
  const [silos, setSilos] = React.useState(window.DB.silos.map(s => ({ ...s })));
  const [materie, setMaterie] = React.useState(window.DB.materie.map(m => ({ ...m })));
  const [allarmi, setAllarmi] = React.useState(window.DB.allarmi.map(a => ({ ...a })));
  const [automezzi, setAutomezzi] = React.useState(window.DB.automezzi.map(a => ({ ...a })));
  const [prodOrder, setProdOrder] = React.useState(null);

  // apply theme/density to root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme === "dark" ? "dark" : "light");
    document.documentElement.setAttribute("data-density", t.density === "compatta" ? "compact" : "comfort");
  }, [t.theme, t.density]);

  const navigate = (id) => { setRoute(id); if (contentRef.current) contentRef.current.scrollTop = 0; };

  const openAlarms = allarmi.filter(a => a.stato === "aperto").length;

  const ctx = {
    ordini, setOrdini, ricette, setRicette, silos, setSilos, materie, setMaterie,
    allarmi, setAllarmi, automezzi, setAutomezzi, clienti: window.DB.clienti,
    prodOrder, setProdOrder, navigate, kpi: window.DB.kpi,
    prodSettimana: window.DB.prodSettimana, consumoOggi: window.DB.consumoOggi,
    lang, setLang: (v) => setTweak("lang", v),
  };
  window.JIT_BATCH_CONTEXT = ctx;
  window.JIT_BATCH_NAVIGATE = navigate;

  const current = ALL_ITEMS.find(i => i.id === route) || ALL_ITEMS[0];
  const currentGroup = NAV.find(g => g.items.some(i => i.id === route));
  const Comp = current.comp;

  return (
    <div className="app-shell">
      {/* ---- Sidebar ---- */}
      <aside className="sidebar">
        <div className="sidebar-brand">
          <div className="brand-mark"><BrandMark /></div>
          <div className="brand-logo-plate"><img src="assets/logo-jit-full.png" alt="JIT Engineering" /></div>
          <div className="brand-caption"><span className="bc-dot" />BATCH · Gestione Betonaggio</div>
        </div>
        <nav className="sidebar-nav">
          {NAV.map((g, gi) => (
            <div key={gi}>
              <div className="nav-group-label">{tr(g.group)}</div>
              {g.items.map(it => (
                <div key={it.id} className={`nav-item ${route === it.id ? "active" : ""}`} onClick={() => navigate(it.id)}>
                  <Icon name={it.icon} size={18} />
                  <span className="lbl">{tr(it)}</span>
                  {it.id === "allarmi" && openAlarms > 0 && <span className="nav-badge">{openAlarms}</span>}
                </div>
              ))}
            </div>
          ))}
        </nav>
        <div className="sidebar-foot">
          <div className="plc-status">
            <span className="dot" />
            <span className="pf-txt">{tr(T.online)} · S7-1500</span>
          </div>
        </div>
      </aside>

      {/* ---- Main ---- */}
      <div className="main-col">
        <header className="topbar">
          <div className="topbar-title">
            <span className="tt-crumb">{currentGroup ? tr(currentGroup.group) : ""} · {window.DB.meta.plant}</span>
            <span className="tt-main">{tr(current)}</span>
          </div>
          <span className="topbar-spacer" />
          <div className="search-box"><Icon name="search" size={15} /><input placeholder={tr(T.search)} /></div>
          <button className="icon-btn" onClick={() => navigate("allarmi")} title="Allarmi">
            <Icon name="bell" size={18} />
            {openAlarms > 0 && <span className="nd">{openAlarms}</span>}
          </button>
          <div className="user-chip" title="Sara Lombardi">
            <span className="avatar">SL</span>
            <div><div className="uc-name">Sara Lombardi</div><div className="uc-role">Resp. produzione</div></div>
          </div>
        </header>

        <main className="content" ref={contentRef}>
          <div className="content-inner">
            <Comp ctx={ctx} />
          </div>
        </main>
      </div>

      <Toaster />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aspetto" />
        <TweakRadio label="Tema" value={t.theme} options={[{ value: "light", label: "Chiaro" }, { value: "dark", label: "Control Room" }]} onChange={(v) => setTweak("theme", v)} />
        <TweakRadio label="Densità" value={t.density} options={[{ value: "comfort", label: "Comfort" }, { value: "compatta", label: "Compatta" }]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Lingua" />
        <TweakRadio label="Interfaccia" value={t.lang} options={[{ value: "it", label: "Italiano" }, { value: "en", label: "English" }]} onChange={(v) => setTweak("lang", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);