// Main app composition

function App() {
  const [auth, setAuth] = React.useState(null);
  const [session, setSession] = React.useState(() => loadSession());
  const [state, setState] = React.useState(() => loadState());
  const [tweaks, setTweaks] = React.useState(() => window.__TWEAKS__ || {});
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  // Bootstrap auth (creates ADMIN/MAB26$ on first run)
  React.useEffect(() => {
    ensureAuth().then(a => setAuth(a));
    // Hydrate from IndexedDB and request persistent storage
    hydrateFromIDB(setState);
  }, []);

  React.useEffect(() => { saveState(state); }, [state]);
  // Force one final save before the page unloads (covers quick close)
  React.useEffect(() => {
    const onUnload = () => { try { saveState(state); } catch(_){} };
    window.addEventListener("beforeunload", onUnload);
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") saveState(state);
    });
    return () => window.removeEventListener("beforeunload", onUnload);
  }, [state]);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);
  React.useEffect(() => { if (auth) saveAuth(auth); }, [auth]);
  React.useEffect(() => { saveSession(session); }, [session]);

  // Re-validate session: user must still exist
  React.useEffect(() => {
    if (session && auth) {
      const u = auth.users.find(u => u.id === session.id);
      if (!u) setSession(null);
    }
  }, [auth]);

  useEditModeBridge(tweaksOpen, setTweaksOpen);

  window.state = state;

  React.useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("sw.js").then(reg => {
        // Force update check + skip waiting so new SW activates immediately
        reg.update().catch(() => {});
      }).catch(() => {});
      // When a new SW takes control, reload once to pick up fresh assets
      let refreshing = false;
      navigator.serviceWorker.addEventListener("controllerchange", () => {
        if (refreshing) return;
        refreshing = true;
        location.reload();
      });
    }
  }, []);

  // Auth still loading
  if (!auth) {
    return <div className="login-shell"><div className="login-bg" /><div className="muted">Cargando…</div></div>;
  }

  if (!session) {
    return (
      <LoginScreen auth={auth}
        onLogin={(u) => setSession({ id: u.id, username: u.username, name: u.name, role: u.role })}
      />
    );
  }

  const totals = quoteTotals(state.quote, tweaks);
  const setRoute = (r) => setState(s => ({ ...s, route: r }));

  window.__storeHelpers = { matsCount: state.materials.length };

  let view;
  try {
    switch (state.route) {
      case "quote":     view = <QuoteView state={state} setState={setState} totals={totals} tweaks={tweaks} />; break;
      case "materials": view = <MaterialsView state={state} setState={setState} />; break;
      case "clients":   view = <ClientsView state={state} setState={setState} />; break;
      case "hh":        view = <HHView state={state} setState={setState} />; break;
      case "print":     view = <PrintView state={state} setState={setState} totals={totals} tweaks={tweaks} />; break;
      case "users":     view = <UsersView auth={auth} setAuth={setAuth} session={session} />; break;
      case "accounting":
        if (typeof AccountingView !== "function") throw new Error("Módulo de contabilidad no cargó. Recarga la página (Ctrl+F5).");
        view = <AccountingView state={state} setState={setState} totals={totals} />; break;
      case "backup":    view = <BackupView state={state} setState={setState} auth={auth} setAuth={setAuth} tweaks={tweaks} session={session} />; break;
      default:          view = <Dashboard state={state} setState={setState} setRoute={setRoute} totals={totals} />;
    }
  } catch (err) {
    view = (
      <div style={{padding:"40px 24px",maxWidth:560,margin:"0 auto"}}>
        <h2 style={{color:"var(--danger)"}}>Error al cargar la sección</h2>
        <p style={{lineHeight:1.6}}>{err.message}</p>
        <div className="row" style={{gap:10,marginTop:16}}>
          <button className="btn" onClick={() => setRoute("dashboard")}>Volver al panel</button>
          <button className="btn primary" onClick={() => location.reload()}>Recargar</button>
        </div>
      </div>
    );
  }

  // Pull title/actions for mobile topbar from route
  const routeTitles = {
    dashboard:  { crumb: "MAB · Cotizaciones", title: "Panel" },
    quote:      { crumb: `Cotización ${state.quote.id}`, title: state.quote.projectName },
    clients:    { crumb: "Catálogo", title: "Clientes" },
    materials:  { crumb: "Catálogo", title: "Materiales" },
    hh:         { crumb: "Biblioteca", title: "Horas Hombre" },
    print:      { crumb: state.quote.id, title: "Imprimir / Exportar" },
    users:      { crumb: "Administración", title: "Usuarios" },
    accounting: { crumb: "Finanzas", title: "Contabilidad" },
    backup:     { crumb: "Datos", title: "Respaldo" },
  }[state.route] || { crumb: "", title: "" };

  const mobileActions = (state.route === "quote") ? (
    <button className="btn primary" onClick={() => setRoute("print")}>
      <Icon.print />
    </button>
  ) : (state.route === "dashboard") ? (
    <button className="btn primary" onClick={() => setRoute("quote")}>
      <Icon.plus />
    </button>
  ) : null;

  const onLogout = () => { setSession(null); setDrawerOpen(false); };

  return (
    <div className="app">
      <Sidebar route={state.route} setRoute={setRoute} tweaks={tweaks}
               session={session} onLogout={onLogout} />
      <MobileTopbar title={routeTitles.title} crumb={routeTitles.crumb}
                    actions={mobileActions} onMenu={() => setDrawerOpen(true)} />
      <MobileDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)}
                    route={state.route} setRoute={setRoute}
                    session={session} onLogout={onLogout} tweaks={tweaks} />
      <main className="main">{view}</main>
      <MobileBottomNav route={state.route} setRoute={setRoute} />
      <TweaksPanel open={tweaksOpen} setOpen={setTweaksOpen}
                   tweaks={tweaks} setTweaks={setTweaks} />
    </div>
  );
}

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