/**
 * Automira — App
 * --------------------------------------------------------------
 * Komponerar layouten och mountar React-trädet.
 */

function App() {
  const [bookings, setBookings] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(true);
  const [activePage, setActivePage] = React.useState("overview");

  async function loadBookings() {
    try {
      setIsLoading(true);
      const data = await window.AutomiraData.getBookings();
      setBookings(data);
    } catch (error) {
      console.error("Failed to load bookings:", error);
      setBookings([]);
    } finally {
      setIsLoading(false);
    }
  }

  React.useEffect(() => {
    loadBookings();
  }, []);

  const pendingCount = bookings.filter((b) => b.status === "pending").length;

  return (
    <div className="app" data-screen-label="Översikt">
      <Sidebar
        pendingCount={pendingCount}
        activePage={activePage}
        onNavigate={setActivePage}
      />

      <main className="main">
        <Topbar onBookingCreated={loadBookings} />

        {activePage === "overview" && (
          <>
            <KpiCards bookings={bookings} isLoading={isLoading} />
            <FlowSteps bookings={bookings} />
            <BookingsTable bookings={bookings} isLoading={isLoading} />
            <ValueSection />
          </>
        )}

        {activePage === "bookings" && (
          <BookingsPage bookings={bookings} isLoading={isLoading} />
        )}

        {activePage === "automations" && (
          <AutomationPage bookings={bookings} isLoading={isLoading} />
        )}

        {activePage === "noshow" && (
          <NoShowPage bookings={bookings} isLoading={isLoading} />
        )}

        <Footer />
      </main>
    </div>
  );
}

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