'use client';

import { useEffect, useState } from 'react';
import { useSidebarStore } from '@/lib/stores/sidebar-store';
import { installErrorBuffer } from '@/lib/error-buffer';
import { Header } from '@/components/layout/header';
import { Sidebar } from '@/components/layout/sidebar';
import { ReleaseNoticeHost } from '@/components/release-notice/release-notice-host';
import { ReminderNotifier } from '@/components/reminders/reminder-notifier';

export function AppShell({ children }: { children: React.ReactNode }) {
  const isCollapsed = useSidebarStore((s) => s.isCollapsed);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Fehlerpuffer fuer den Fehler-melden-Knopf (quick-260914-m97): einmal je
  // Seitenladung, SSR-sicher, idempotent (StrictMode-Doppeleffekt unschaedlich).
  useEffect(() => {
    installErrorBuffer();
  }, []);

  // Desktop: sidebar pushes content via margin-left
  // Mobile: sidebar overlays, no margin needed (handled by app-shell-main class in globals.css)
  const sidebarWidth = isCollapsed
    ? 'var(--sidebar-width-collapsed)'
    : 'var(--sidebar-width)';

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <Sidebar />
      {/* Seitenrahmen seit quick-260916-bwo halbiert: p-3 (12 px) statt vorher 24 px (Stufe 6), gilt fuer alle Seiten. */}
      <main
        className="app-shell-main min-h-[calc(100vh-var(--header-height))] transition-all duration-200 p-3"
        style={mounted ? { '--current-sidebar-width': sidebarWidth } as React.CSSProperties : undefined}
      >
        {children}
      </main>
      {/* "Was ist neu"-Fenster nach einem Versionswechsel (quick-260925-bow):
          nur hier im Portal-Rahmen, nie auf der Anmeldeseite. */}
      <ReleaseNoticeHost />
      {/* Erinnerungen (quick-260929-if2): bewusst GLOBAL im Rahmen, damit die
          Benachrichtigung auf jeder Portalseite ausloest — nicht nur, wenn die
          Kachel auf dem Dashboard sichtbar ist. Rendert nichts. */}
      <ReminderNotifier />
    </div>
  );
}