"use client";

import React from "react";
import Link from "next/link";
import { Tabs } from "@/ui/components/Tabs";
import { PageHeader } from "./PageHeader";
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 Reiter folgen dem Hausmuster aus `SettingsHubShell.tsx` im Zielsystem:
 * ein `Link` um ein `Tabs.Item`. Damit ist jeder Reiter eine echte Navigation —
 * mittelklickbar, kopierbar, mit eigener Adresse — und kein Klick-Handler, der
 * so tut als ob.
 *
 * 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 (
    <>
      <PageHeader titel={seite.label} beschreibung={seite.beschreibung} />

      {/* Die Subframe-Tabs strecken ihre Einträge über die volle Breite. Auf
          einem breiten Analyse-Bildschirm reißt das die Beschriftungen weit
          auseinander, deshalb eine Maximalbreite — dasselbe Mittel nutzt das
          Zielsystem in LeadSettingsPage mit `min-w-[720px]`. */}
      <div className="flex w-full flex-col px-6 pb-1">
        <Tabs className="max-w-[760px]">
          {ANALYSE_SEITEN.map((s) => (
            <Link key={s.id} href={s.href} className="contents no-underline">
              <Tabs.Item active={s.id === aktiv}>{s.label}</Tabs.Item>
            </Link>
          ))}
        </Tabs>
      </div>

      <AnalyticsToolbar seite={aktiv} optionen={optionen} />
      {children}
    </>
  );
}