"use client";

import { useCallback, useState, type ReactNode } from "react";
import type { OpenNote } from "@/lib/notes";
import { Sidebar } from "./Sidebar";
import { Topbar } from "./Topbar";

// Owns the one piece of state the shell needs (is the mobile drawer open),
// so app/(app)/layout.tsx can stay a Server Component and keep doing its
// auth check and data loading on the server.
export function AppShell({ userLabel, openNotes, children }: { userLabel: string; openNotes: OpenNote[]; children: ReactNode }) {
  const [navOpen, setNavOpen] = useState(false);
  const closeNav = useCallback(() => setNavOpen(false), []);

  // Auf Papier gehört von der Hülle nichts hin: Navigation, Glocke und
  // Abmelde-Knopf sind Bedienelemente, und gedruckt sind sie bestenfalls
  // Zierrat — auf einer Checkliste, die in eine Personalakte geht, sogar
  // irreführend. Die Regel steht hier und nicht auf der einzelnen Druckseite,
  // damit jede weitere sie mitbekommt, statt sie zu wiederholen.
  //
  // Auch die Ränder fallen weg: die Satzfläche bestimmt @page auf der
  // Druckseite selbst, und die Polsterung der Hülle käme obendrauf.
  return (
    <div className="min-h-dvh print:min-h-0">
      <div className="print:hidden">
        <Sidebar open={navOpen} onClose={closeNav} />
      </div>
      <div className="flex min-h-dvh flex-col lg:ml-[236px] print:ml-0 print:block print:min-h-0">
        <div className="print:hidden">
          <Topbar userLabel={userLabel} openNotes={openNotes} onOpenNav={() => setNavOpen(true)} />
        </div>
        <main className="flex-1 px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 sm:py-6 print:p-0">
          <div className="mx-auto w-full max-w-[1280px] print:max-w-none">{children}</div>
        </main>
      </div>
    </div>
  );
}