import { useState } from "react";
import { Outlet } from "react-router-dom";
import { useLayout } from "@/store/layoutStore";
import { useReminderNotifications } from "@/hooks/useReminderNotifications";
import { Navbar } from "./Navbar";
import { Sidebar, type SidebarVariant } from "./Sidebar";
import { HorizontalNav } from "./HorizontalNav";

function sidebarVariant(layout: string): SidebarVariant {
  if (layout === "compact") return "compact";
  if (layout === "wide") return "wide";
  return "default";
}

function mainClass(layout: string): string {
  const base = "mx-auto w-full flex-1 px-4 py-6 sm:px-6 sm:py-8";
  if (layout === "topnav") return `${base} max-w-7xl`;
  return `${base} max-w-6xl`;
}

export function AppLayout() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { layout } = useLayout();
  useReminderNotifications();

  if (layout === "topnav") {
    return (
      <div className="flex min-h-screen flex-col">
        <Navbar showMenuToggle={false} />
        <HorizontalNav />
        <main className={mainClass(layout)}>
          <Outlet />
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen lg:flex">
      <Sidebar
        open={sidebarOpen}
        variant={sidebarVariant(layout)}
        onNavigate={() => setSidebarOpen(false)}
      />
      <div className="flex min-h-screen flex-1 flex-col">
        <Navbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
        <main className={mainClass(layout)}>
          <Outlet />
        </main>
      </div>
    </div>
  );
}