// Datamin POS/DTE Intelligence — Root app + router + Tweaks

const {
  Sidebar, Topbar, ReliabilityBadge,
  LoginScreen, ExecutiveScreen, ComprasScreen, ProveedoresScreen,
  ProductosScreen, InventarioScreen, CalidadScreen,
  TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "cozy",
  "theme": "light",
  "lang": "es",
  "showReliability": true,
  "sidebarCollapsed": false,
  "execVariant": "topkpis"
}/*EDITMODE-END*/;

const SCREEN_META = {
  es: {
    executive:   { title: "Dashboard ejecutivo",      sub: "Visión rápida del negocio · período actual" },
    compras:     { title: "Compras DTE",              sub: "Documentos tributarios electrónicos recibidos" },
    proveedores: { title: "Proveedores",              sub: "Dependencia, frecuencia y concentración del gasto" },
    productos:   { title: "Productos y catálogo",     sub: "Salud del maestro · calidad antes de margen" },
    inventario:  { title: "Inventario",               sub: "Stock, ajustes y mermas · requiere validación" },
    calidad:     { title: "Calidad de datos",         sub: "Qué módulos puedes usar para decidir hoy" },
  },
  en: {
    executive:   { title: "Executive dashboard",      sub: "Snapshot of the business · current period" },
    compras:     { title: "DTE Purchases",            sub: "Electronic tax documents received" },
    proveedores: { title: "Suppliers",                sub: "Dependence, frequency and spend concentration" },
    productos:   { title: "Products & catalog",       sub: "Master health · clean before computing margin" },
    inventario:  { title: "Inventory",                sub: "Stock, adjustments and shrinkage · needs review" },
    calidad:     { title: "Data quality",             sub: "Which modules are safe to act on today" },
  },
};

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authed, setAuthed] = React.useState(false);
  const [route, setRoute] = React.useState("executive");
  const [company, setCompany] = React.useState("pernia");
  const [period, setPeriod] = React.useState("30d");

  // Sync dark/light to body
  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
  }, [t.theme]);

  // Set data-screen-label for whichever screen is active
  const meta = SCREEN_META[t.lang][route] || SCREEN_META[t.lang].executive;

  if (!authed) {
    return (
      <div data-screen-label="00 Login">
        <LoginScreen
          lang={t.lang}
          setLang={(l) => setTweak("lang", l)}
          onLogin={() => setAuthed(true)}
        />
      </div>
    );
  }

  let screenEl = null;
  if (route === "executive") {
    screenEl = <ExecutiveScreen lang={t.lang} density={t.density} showRel={t.showReliability} variant={t.execVariant}/>;
  } else if (route === "compras") {
    screenEl = <ComprasScreen lang={t.lang} density={t.density} showRel={t.showReliability}/>;
  } else if (route === "proveedores") {
    screenEl = <ProveedoresScreen lang={t.lang} density={t.density} showRel={t.showReliability}/>;
  } else if (route === "productos") {
    screenEl = <ProductosScreen lang={t.lang} density={t.density} showRel={t.showReliability}/>;
  } else if (route === "inventario") {
    screenEl = <InventarioScreen lang={t.lang} density={t.density} showRel={t.showReliability}/>;
  } else if (route === "calidad") {
    screenEl = <CalidadScreen lang={t.lang} density={t.density} showRel={t.showReliability}/>;
  }

  const screenLabel = {
    executive: "01 Ejecutivo",
    compras: "02 Compras DTE",
    proveedores: "03 Proveedores",
    productos: "04 Productos",
    inventario: "05 Inventario",
    calidad: "06 Calidad",
  }[route];

  return (
    <div className="dm-app" data-density={t.density} data-screen-label={screenLabel}>
      <Sidebar
        route={route}
        setRoute={setRoute}
        collapsed={t.sidebarCollapsed}
        setCollapsed={(fn) => setTweak("sidebarCollapsed", typeof fn === "function" ? fn(t.sidebarCollapsed) : fn)}
        lang={t.lang}
        onLogout={() => setAuthed(false)}
      />
      <div className="dm-main">
        <Topbar
          lang={t.lang}
          company={company}
          setCompany={setCompany}
          period={period}
          setPeriod={setPeriod}
          density={t.density}
          setDensity={(d) => setTweak("density", d)}
          screenTitle={meta.title}
          screenSub={meta.sub}
        />
        <div className="dm-route-bar">
          <ReliabilityBadge level={
            route === "compras" || route === "proveedores" ? "reliable" :
            route === "productos" ? "partial" :
            route === "inventario" ? "unreliable" :
            route === "calidad" ? "reliable" : "reliable"
          } show={t.showReliability} lang={t.lang}/>
          <span className="dm-route-meta">
            Última carga <strong>2026-05-15 06:00</strong> · ETL OK · 47 docs nuevos hoy
          </span>
          <span className="dm-route-spacer"></span>
          {route === "executive" && (
            <div className="dm-variant-switch">
              <span>Vista:</span>
              {[
                {k:"topkpis", l:"KPIs arriba"},
                {k:"alertsidebar", l:"Sidebar alertas"},
                {k:"dense", l:"Densa"},
              ].map(v => (
                <button key={v.k} className={t.execVariant === v.k ? "active" : ""}
                  onClick={() => setTweak("execVariant", v.k)}>{v.l}</button>
              ))}
            </div>
          )}
        </div>
        <main className="dm-content">{screenEl}</main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apariencia">
          <TweakRadio label="Tema" value={t.theme} options={[
            {label:"Claro", value:"light"}, {label:"Oscuro", value:"dark"}
          ]} onChange={(v) => setTweak("theme", v)}/>
          <TweakRadio label="Densidad" value={t.density} options={[
            {label:"Cómodo", value:"cozy"}, {label:"Compacto", value:"compact"}
          ]} onChange={(v) => setTweak("density", v)}/>
          <TweakRadio label="Idioma" value={t.lang} options={[
            {label:"Español", value:"es"}, {label:"English", value:"en"}
          ]} onChange={(v) => setTweak("lang", v)}/>
        </TweakSection>
        <TweakSection label="Comportamiento">
          <TweakToggle label="Mostrar badges de confiabilidad" value={t.showReliability} onChange={(v) => setTweak("showReliability", v)}/>
          <TweakToggle label="Sidebar colapsada" value={t.sidebarCollapsed} onChange={(v) => setTweak("sidebarCollapsed", v)}/>
        </TweakSection>
        <TweakSection label="Dashboard ejecutivo">
          <TweakSelect label="Variante" value={t.execVariant} options={[
            {label:"KPIs arriba (default)", value:"topkpis"},
            {label:"Sidebar de alertas", value:"alertsidebar"},
            {label:"Vista densa (analista)", value:"dense"},
          ]} onChange={(v) => setTweak("execVariant", v)}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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