Dashboard/features/dashboard/components/layout/AnalyticsInnerNav.tsx

"use client";

import React from "react";
import Link from "next/link";
import { SidebarInside } from "@/ui/components/SidebarInside";
import { Tabs } from "@/ui/components/Tabs";
import { FeatherIcon } from "./FeatherIcon";
import { ANALYSE_SEITEN } from "./navigation";
import type { SeitenId } from "../../data/filtering";

/**
 * Innere Navigation des Analytics-Bereichs.
 *
 * Nachbau von `SidebarIconsLayout` aus dem Zielsystem — der Leiste, die dort
 * jeder Arbeitsbereich mit Geschwisterseiten benutzt (Leads, Termine, HR,
 * Einstellungen; 17 Aufrufstellen). Analytics mit fünf Analyse-Seiten ist
 * derselbe Fall.
 *
 * Verhalten wie dort: eine schmale Icon-Leiste, die bei Zeigerkontakt oder
 * Tastaturfokus auf Beschriftungen aufklappt — verzögert, damit sie beim
 * bloßen Überstreichen nicht aufspringt. Unterhalb `sm` tritt an ihre Stelle
 * eine Reiterleiste; auch das ist aus dem Original übernommen.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * BEIM EINBAU: Dieser Nachbau wird NICHT portiert.
 *
 * Verbindlich ist die Verabredung — Analytics bekommt eine innere Leiste mit
 * den fünf Analyse-Seiten. Gebaut wird sie in HiveGrid mit dem dortigen
 * `SidebarIconsLayout`, das genau diesen Zweck hat (Leads, Termine, HR,
 * Einstellungen nutzen es bereits). Diese Datei beschreibt das Ziel, sie ist
 * nicht das Bauteil. Rangfolge: docs/ZIELSYSTEM.md Abschnitt 0.
 * ────────────────────────────────────────────────────────────────────────────
 */

const OEFFNEN_MS = 300;
const SCHLIESSEN_MS = 350;

export function AnalyticsInnerNav({
  aktiv,
  children,
}: {
  aktiv: SeitenId;
  children: React.ReactNode;
}) {
  const [zeigerDrauf, setZeigerDrauf] = React.useState(false);
  const [fokusInnen, setFokusInnen] = React.useState(false);
  const oeffnen = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const schliessen = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  React.useEffect(
    () => () => {
      if (oeffnen.current) clearTimeout(oeffnen.current);
      if (schliessen.current) clearTimeout(schliessen.current);
    },
    []
  );

  const ausgeklappt = zeigerDrauf || fokusInnen;

  return (
    <div className="sm:flex sm:flex-row">
      <div
        className="relative hidden sm:sticky sm:top-14 sm:flex sm:self-start"
        onMouseEnter={() => {
          if (schliessen.current) clearTimeout(schliessen.current);
          oeffnen.current = setTimeout(() => setZeigerDrauf(true), OEFFNEN_MS);
        }}
        onMouseLeave={() => {
          if (oeffnen.current) clearTimeout(oeffnen.current);
          schliessen.current = setTimeout(() => setZeigerDrauf(false), SCHLIESSEN_MS);
        }}
        onFocusCapture={() => setFokusInnen(true)}
        onBlurCapture={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
            setFokusInnen(false);
          }
        }}
      >
        <SidebarInside
          visible
          variant={ausgeklappt ? "open" : "closed"}
          className="min-h-[calc(100svh-3.5rem)]"
        >
          {ANALYSE_SEITEN.map((seite) => (
            <Link
              key={seite.id}
              href={seite.href}
              title={seite.label}
              aria-current={seite.id === aktiv ? "page" : undefined}
              className="flex w-full justify-start no-underline"
            >
              <SidebarInside.NavItem
                icon={<FeatherIcon name={seite.icon} />}
                selected={seite.id === aktiv}
                variant={ausgeklappt ? "icon-and-text" : "icon-only"}
              >
                {seite.label}
              </SidebarInside.NavItem>
            </Link>
          ))}
        </SidebarInside>
      </div>

      {/* Schmale Fenster: Reiter statt Leiste — wie im Original.
          Waagerecht scrollend statt umbrechend: Fünf Reiter brauchen mindestens
          425 px, bei 375 px lief die ganze Seite dadurch seitlich über. Über
          zwei Zeilen gebrochen liest sich ein Reiterband als zwei Steuerelemente
          — dasselbe Mittel wie beim Zeitraum-Segment in der Filterleiste. */}
      <div className="dv-scroll-x w-full min-w-0 overflow-x-auto border-b border-solid border-border-default bg-white px-4 py-2 sm:hidden">
        <Tabs className="w-max min-w-full">
          {ANALYSE_SEITEN.map((seite) => (
            <Link key={seite.id} href={seite.href} className="contents no-underline">
              <Tabs.Item active={seite.id === aktiv} className="whitespace-nowrap">
                {seite.label}
              </Tabs.Item>
            </Link>
          ))}
        </Tabs>
      </div>

      <div className="w-full min-w-0 overflow-x-clip">{children}</div>
    </div>
  );
}