// Loop 8: die Hauptreiter-Leiste der QAF-Vergleichsansicht.
//
// Zeigt die Bereiche in QAF-Terminologie (qaf-primary-navigation.ts) plus die
// Kompatibilitätsansicht „Alle Sektionen". Reine Links auf `?bereich=` — kein
// Client-State, damit die Seite Server Component bleibt und jeder Reiter ein
// teilbarer Deep-Link ist (Roadmap Loop 8: „Deep Links auf semantische
// Bereiche einführen").
//
// Stil aus dem vorhandenen Repo-Idiom (components/pmo/pmo-tab-nav.tsx): 2px
// Unterstrich, `border-primary` aktiv, transparent inaktiv, damit die Auswahl
// die Boxhöhe nicht verändert.
// tdd-guard:skip — presentational; die Auswahl-Logik liegt im getesteten
// qaf-primary-navigation.ts.

import Link from "next/link"
import {
  ALL_SECTIONS_TAB,
  areaTabHref,
  type PrimaryArea,
} from "@/components/qaf-differences/qaf-primary-navigation"

export function QafPrimaryNav({
  areas,
  activeArea,
  coverageUnknown,
}: {
  areas: readonly PrimaryArea[]
  activeArea: string
  /** Kein Capability-Stand für diese Dateien erhoben. Wird benannt, statt die
   *  vollständige Reiterliste als geprüftes Ergebnis auszugeben. */
  coverageUnknown: boolean
}) {
  const tabs: readonly PrimaryArea[] = [ALL_SECTIONS_TAB, ...areas]
  return (
    <div className="sticky top-0 z-10 -mx-4 border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80 print:hidden">
      <nav
        aria-label="QAF-Bereiche"
        className="flex flex-nowrap gap-0.5 overflow-x-auto"
      >
        {tabs.map((tab) => {
          const active = tab.id === activeArea
          return (
            <Link
              key={tab.id}
              href={areaTabHref(tab.id)}
              aria-current={active ? "page" : undefined}
              className={`shrink-0 border-b-2 px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors ${
                active
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:border-border hover:text-foreground"
              }`}
            >
              {tab.label}
            </Link>
          )
        })}
      </nav>
      {coverageUnknown && (
        <p className="pb-1.5 text-[11px] text-muted-foreground">
          Kein Abdeckungs-Stand für diese Dateien erhoben — alle Bereiche werden
          angeboten. Das ist keine Aussage darüber, welche Module die QAF
          wirklich enthält.
        </p>
      )}
    </div>
  )
}

/** Hinweis in einem Bereich, für den es noch keine eigene Detailsicht gibt.
 *  Nicht dasselbe wie „keine Daten": das Modul ist laut Abdeckung vorhanden,
 *  die Ansicht dazu ist nur noch nicht gebaut (Roadmap Loop 8 — die
 *  Langseite hat für Material, Logistik, Rohstoffrisiken und Zusatzmodule
 *  keine eigene Sektion). */
export function AreaWithoutOwnView({ label }: { label: string }) {
  return (
    <section className="rounded border border-border bg-card p-4">
      <h2 className="font-display text-sm font-bold tracking-tight text-foreground uppercase">
        {label}
      </h2>
      <p className="mt-2 text-sm text-muted-foreground">
        Für diesen Bereich meldet die Abdeckung Daten, eine eigene Detailsicht
        gibt es noch nicht. Die zugehörigen Zahlen stecken heute in{" "}
        <span className="font-medium text-foreground">Zusammenfassung</span>{" "}
        (Kostenstruktur und Kennzahlen). Über{" "}
        <span className="font-medium text-foreground">Alle Sektionen</span> ist
        der vollständige Bestand erreichbar.
      </p>
    </section>
  )
}