import { useState } from "react";

import { AppShell } from "../components/layout/AppShell";

import { DashboardPage } from "../features/dashboard/pages/DashboardPage";
import { MeteoPage } from "../features/meteo/pages/MeteoPage";
import { ClimateChartsPage } from "../features/climate/pages/ClimateChartsPage";
import { ConsolePage } from "../features/console/pages/ConsolePage";
import { MainChartsPage } from "../features/maincharts/pages/MainChartsPage";
import { ChartWindowPage } from "../features/chartworkspace/pages/ChartWindowPage";
import { SettingsPage } from "../features/settings/pages/SettingsPage";
import SynopticPage from "../features/synoptic/pages/SynopticPage";

export type AppPage =
  | "dashboard"
  | "meteo"
  | "console"
  | "maincharts"
  | "synoptic"
  | "settings"
  | "climate"
  | "climateCharts"
  | "climateLighting"
  | "climateVentilation"
  | "irrigation"
  | "irrigationCharts"
  | "irrigationFilters"
  | "irrigationConsumption"
  | "irrigationDrainage"

function App() {
  const [activePage, setActivePage] = useState<AppPage>("dashboard");

  const isChartWindow = window.location.pathname.startsWith("/chart-window/");

  if (isChartWindow) {
    const params = new URLSearchParams(window.location.search);
    const theme = params.get("theme") === "light" ? "light" : "dark";

    return <ChartWindowPage theme={theme} />;
  }

  return (
    <AppShell activePage={activePage} onNavigate={setActivePage}>
      {({ theme }) => {
        if (activePage === "meteo") return <MeteoPage theme={theme} />;

        if (activePage === "climateCharts") {
          return <ClimateChartsPage theme={theme} />;
        }

        if (activePage === "console") return <ConsolePage theme={theme} />;

        if (activePage === "maincharts") {
          return <MainChartsPage theme={theme} />;
        }

        if (activePage === "settings") {
          return <SettingsPage theme={theme} />;
        }

        if (activePage === "synoptic") {
          return <SynopticPage theme={theme} />;
        }

        return (
          <DashboardPage
            theme={theme}
            onOpenMeteo={() => setActivePage("meteo")}
            onNavigate={setActivePage}
          />
        );
      }}
    </AppShell>
  );
}

export default App;