/* ============================================================
   App principal — Redes y Bigotes · Panel
   ============================================================ */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const CLOUD_META = {
  online:     { dot: "#3C9A6B", label: "En la nube · en vivo", help: "Tu equipo ve los cambios al instante." },
  connecting: { dot: "#C2934A", label: "Conectando…",        help: "Estableciendo conexión con la nube." },
  local:      { dot: "#9AA39C", label: "Solo en esta compu",    help: "Aún sin conectar. Cargá tus datos de Supabase en config.js para compartir." },
  error:      { dot: "#C2603F", label: "Sin conexión",          help: "No se pudo conectar con la nube. Revisá los datos de config.js o tu internet." },
};

function CloudStatus({ status }) {
  const m = CLOUD_META[status] || CLOUD_META.local;
  const live = status === "online";
  return (
    <div className="cloud-pill" title={m.help}>
      <span className={"cloud-dot" + (live ? " live" : "")} style={{ background: m.dot }}></span>
      <span className="cloud-label">{m.label}</span>
    </div>
  );
}

const NAV = [
  { group: "General", items: [
    { key: "dashboard", label: "Dashboard", icon: "dashboard" },
  ]},
  { group: "Operación", items: [
    { key: "productos", label: "Productos", icon: "box" },
    { key: "stock", label: "Stock", icon: "stock" },
    { key: "compras", label: "Lista de compras", icon: "cart" },
  ]},
  { group: "Gestión", items: [
    { key: "costos", label: "Costos y precios", icon: "trending" },
    { key: "proveedores", label: "Proveedores", icon: "truck" },
  ]},
];

const PAGE_META = {
  dashboard: { title: "Buenas tardes 🌿", sub: "Resumen general de Redes y Bigotes — 2 jun 2026" },
  productos: { title: "Catálogo de productos", sub: "Alta, edición y baja de productos" },
  stock: { title: "Control de stock", sub: "Semáforo: crítico, bajo y en orden" },
  compras: { title: "Lista de compras", sub: "Reposición automática agrupada por proveedor" },
  costos: { title: "Costos y precios", sub: "Inflación, márgenes y precios sugeridos" },
  proveedores: { title: "Proveedores", sub: "Contactos y productos asociados" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandGreen": "#2F6249",
  "accent": "#C2734A",
  "displayFont": "Spectral",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateA(() => location.hash.replace("#", "") || "dashboard");
  const [navOpen, setNavOpen] = useStateA(false);
  const [store, setStore] = useStateA(() => RB.load());
  const [cloudStatus, setCloudStatus] = useStateA(RBCloud.status);
  const remoteEcho = useRefA(null);
  const { toasts, push } = useToasts();

  // Conexión en tiempo real (Supabase). Si no hay credenciales, queda en modo local.
  useEffectA(() => {
    const off = RBCloud.onStatus(setCloudStatus);
    RBCloud.init((remote) => {
      remoteEcho.current = JSON.stringify(remote);
      setStore(remote);
    });
    return off;
  }, []);

  useEffectA(() => {
    RB.save(store);
    const json = JSON.stringify(store);
    // Evitar reenviar a la nube lo que recién llegó de la nube (eco)
    if (json !== remoteEcho.current) RBCloud.push(store);
  }, [store]);
  useEffectA(() => { location.hash = view; }, [view]);

  // aplicar tweaks a variables CSS
  useEffectA(() => {
    const r = document.documentElement.style;
    r.setProperty("--pine", t.brandGreen);
    r.setProperty("--clay", t.accent);
    r.setProperty("--font-display", t.displayFont + (t.displayFont === "Spectral" ? ", Georgia, serif" : ", system-ui, sans-serif"));
    const dens = { compact: ["24px", "16px"], regular: ["30px", "24px"], comfy: ["38px", "30px"] }[t.density];
    r.setProperty("--content-y", dens[0]); r.setProperty("--content-x", dens[1]);
  }, [t]);

  const onChange = (fn) => setStore((s) => fn(s));
  const go = (v) => { setView(v); setNavOpen(false); };

  const alertsCount = store.products.filter((p) => RB.stockState(p) === "crit").length;
  const meta = PAGE_META[view];

  const common = { products: store.products, suppliers: store.suppliers, onChange, toast: push, go };

  return (
    <div className={"app" + (navOpen ? " drawer-open" : "")}>
      <div className="nav-scrim" onClick={() => setNavOpen(false)}></div>
      {/* Sidebar */}
      <aside className="sidebar">
        <button className="drawer-close" onClick={() => setNavOpen(false)} aria-label="Cerrar menú"><Icon name="x" /></button>
        <div className="brand">
          <img className="brand-logo" src="assets/logo-white.png" alt="Redes y Bigotes" />
          <div>
            <div className="brand-name">Redes y Bigotes</div>
            <div className="brand-tag">Cuidando a tus seres queridos</div>
          </div>
        </div>

        {NAV.map((grp) => (
          <div key={grp.group}>
            <div className="nav-group-label">{grp.group}</div>
            {grp.items.map((it) => (
              <button key={it.key} className={"nav-item" + (view === it.key ? " active" : "")} onClick={() => go(it.key)}>
                <Icon name={it.icon} />
                <span>{it.label}</span>
                {it.key === "stock" && alertsCount > 0 && <span className="nav-badge">{alertsCount}</span>}
              </button>
            ))}
          </div>
        ))}

        <div className="sidebar-foot">
          <div className="avatar">RB</div>
          <div>
            <div className="uname">Administración</div>
            <div className="urole">Local · CABA</div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div className="main">
        <header className="topbar">
          <button className="hamburger" onClick={() => setNavOpen(true)} aria-label="Abrir menú"><Icon name="menu" /></button>
          <div className="page-head">
            <div className="page-title">{meta.title}</div>
            <div className="page-sub">{meta.sub}</div>
          </div>
          <span className="topbar-spacer"></span>
          <CloudStatus status={cloudStatus} />
          <div className="search">
            <Icon name="search" />
            <input placeholder="Buscar en el panel…" onFocus={() => go("productos")} readOnly />
          </div>
          <button className="btn btn-ghost btn-icon" title="Notificaciones" style={{ position: "relative" }}>
            <Icon name="bell" />
            {alertsCount > 0 && <span style={{ position: "absolute", top: 6, right: 6, width: 8, height: 8, borderRadius: "50%", background: "var(--crit)" }}></span>}
          </button>
          <button className="btn btn-primary" onClick={() => go("productos")}><Icon name="plus" size={17} />Producto</button>
        </header>

        <main className="content" style={{ padding: "var(--content-y, 30px) var(--content-x, 36px) 60px" }}>
          {view === "dashboard" && <Dashboard {...common} />}
          {view === "productos" && <Productos {...common} />}
          {view === "stock" && <Stock {...common} />}
          {view === "compras" && <Compras {...common} />}
          {view === "costos" && <Costos {...common} />}
          {view === "proveedores" && <Proveedores {...common} />}
        </main>
      </div>

      <ToastHost toasts={toasts} />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Verde de marca" value={t.brandGreen}
          options={["#2F6249", "#356B57", "#41684A", "#2C5848"]}
          onChange={(v) => setTweak("brandGreen", v)} />
        <TweakColor label="Acento tierra" value={t.accent}
          options={["#C2734A", "#B5803F", "#CA6E55", "#A8784C"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Tipografía y densidad" />
        <TweakRadio label="Títulos" value={t.displayFont}
          options={["Spectral", "Hanken Grotesk"]}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakRadio label="Densidad" value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Datos" />
        <TweakButton label="Restablecer datos de muestra"
          onClick={() => { RB.reset(); setStore(RB.load()); push("Datos restablecidos"); }} />
      </TweaksPanel>
    </div>
  );
}

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