import { useEffect } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { ErrorBoundary } from "../components/common/ErrorBoundary";
import { Sidebar } from "../components/navigation/Sidebar";
import { Topbar } from "../components/navigation/Topbar";
import { resolvePageMeta } from "../features/navigation/schema";
import { writeRecentVisit } from "../lib/recentVisits";

export function AppShellLayout() {
  const location = useLocation();

  useEffect(() => {
    const pathname = location.pathname;
    if (!pathname || pathname === "/login" || pathname.startsWith("/mobile/")) {
      return;
    }
    writeRecentVisit(pathname, resolvePageMeta(pathname).title);
  }, [location.pathname]);

  return (
    <div className="flex min-h-screen bg-[var(--color-bg-canvas)]">
      <Sidebar />

      <main className="flex min-w-0 flex-1 flex-col lg:ml-72">
        <Topbar />

        <div className="flex-1 px-4 py-6 sm:px-8 sm:py-8">
          <div className="layout-container max-w-none">
            <ErrorBoundary>
              <Outlet />
            </ErrorBoundary>
          </div>
        </div>
      </main>
    </div>
  );
}