/* app.jsx — Router + persistence + theme */

const SCREENS = {
  home:       { title: "Home",                  icon: "layout-dashboard", Comp: HomeScreen },
  fechamento: { title: "Fechamento do dia",      icon: "sun-medium",       Comp: FechamentoScreen },
  visao:      { title: "Visão Geral",            icon: "store",            Comp: VisaoGeralScreen },
  produtos:   { title: "Análise de Produtos",    icon: "package",          Comp: ProdutosScreen },
  forecast:   { title: "Previsão de Vendas",     icon: "line-chart",       Comp: ForecastScreen },
  ruptura:    { title: "Ruptura & Cobertura",    icon: "shield-alert",     Comp: RupturaScreen },
  alerts:     { title: "Alertas de Reposição",   icon: "bell",             Comp: AlertasScreen },
  carteira:   { title: "Carteira de Pedidos",    icon: "clipboard-list",   Comp: CarteiraScreen },
  pedidos:    { title: "Cadastro de Pedidos",    icon: "file-plus-2",      Comp: PedidosCadastroScreen },
  otb:        { title: "Open to Buy (OTB)",      icon: "shopping-cart",    Comp: OTBScreen },
  campanhas:  { title: "Campanhas",              icon: "megaphone",        Comp: CampanhasScreen },
  vendedores: { title: "Performance de Operadores", icon: "users",         Comp: VendedoresScreen },
  admin:      { title: "Administração",           icon: "shield-check",     Comp: AdminScreen },
};

function App() {
  // Persist auth + screen + theme to localStorage so navigation/refresh feels natural
  const [auth, setAuth] = useState(() => localStorage.getItem("dm_auth") === "1");
  const [active, setActive] = useState(() => localStorage.getItem("dm_screen") || "home");
  const [theme, setTheme] = useState(() => {
    // One-time migration: new default is "light" — reset any pre-existing theme stamp.
    if (typeof window !== "undefined" && localStorage.getItem("dm_v") !== "2") {
      localStorage.removeItem("dm_theme");
      localStorage.setItem("dm_v", "2");
      return "light";
    }
    return localStorage.getItem("dm_theme") || "light";
  });
  const [mobilePreview, setMobilePreview] = useState(false);
  const [adminTab, setAdminTab] = useState("plano");

  useEffect(() => { localStorage.setItem("dm_auth", auth ? "1" : "0"); }, [auth]);
  useEffect(() => { localStorage.setItem("dm_screen", active); }, [active]);
  useEffect(() => {
    localStorage.setItem("dm_theme", theme);
    document.documentElement.classList.toggle("dark", theme === "dark");
  }, [theme]);

  // Login → home
  const handleLogin = () => { setAuth(true); setActive("home"); };
  const handleLogout = () => { setAuth(false); };

  if (!auth) {
    return (
      <ToastProvider>
        <LoginScreen onLogin={handleLogin} />
      </ToastProvider>
    );
  }

  const screen = SCREENS[active] || SCREENS.home;
  const ScreenComp = screen.Comp;

  return (
    <ToastProvider>
      <Shell
        active={active}
        onNavigate={setActive}
        theme={theme}
        onTheme={setTheme}
        onLogout={handleLogout}
        onMobilePreview={() => setMobilePreview(true)}
        adminTab={adminTab}
        onAdminTab={setAdminTab}
        screenTitle={screen.title}
        screenIcon={screen.icon}
      >
        <ScreenComp onNavigate={setActive} adminTab={adminTab} onAdminTab={setAdminTab} />
      </Shell>
      {mobilePreview && <MobilePreview onClose={() => setMobilePreview(false)} theme={theme} onTheme={setTheme} />}
    </ToastProvider>
  );
}

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