"use client";

import React from "react";
import { PageHeader } from "./PageHeader";
import { AnalyticsInnerNav } from "./AnalyticsInnerNav";
import { AnalyticsToolbar } from "../filters/AnalyticsToolbar";
import { ANALYSE_SEITEN } from "./navigation";
import type { SeitenId } from "../../data/filtering";
import type { FilterOptionen } from "../../view-models/filter-optionen";

/**
 * Rahmen des Analytics-Bereichs.
 *
 * „Analytics" ist in der Seitenleiste **ein** Menüpunkt. Die fünf Analyse-Seiten
 * sind darin über Reiter erreichbar und tauchen nicht als Unterpunkte in der
 * Navigation auf, sonst konkurrieren zwei Navigationsebenen um dieselbe Sache.
 *
 * Die Unter-Navigation ist eine **innere Leiste**, kein Reiterband: Das
 * Zielsystem benutzt für Arbeitsbereiche mit Geschwisterseiten durchgängig
 * `SidebarIconsLayout` (Leads, Termine, HR, Einstellungen). Reiter sind dort
 * für Abschnitte *innerhalb einer Seite* reserviert, und sind zugleich der
 * Rückfall der inneren Leiste auf schmalen Fenstern. Begründung ausführlich
 * in docs/NAVIGATION.md.
 *
 * Kopfzeile und Filterleiste liegen hier und nicht in den Seiten: Sie sind für
 * alle fünf gleich, und der Filterzustand gilt bereichsweit.
 */
export function AnalyticsShell({
  aktiv,
  optionen,
  children,
}: {
  aktiv: SeitenId;
  optionen: FilterOptionen;
  children: React.ReactNode;
}) {
  const seite = ANALYSE_SEITEN.find((s) => s.id === aktiv) ?? ANALYSE_SEITEN[0];

  return (
    <AnalyticsInnerNav aktiv={aktiv}>
      <PageHeader titel={seite.label} beschreibung={seite.beschreibung} />
      <AnalyticsToolbar seite={aktiv} optionen={optionen} />
      {children}
    </AnalyticsInnerNav>
  );
}