dak.c2s/frontend/src/pages/AnleitungPage.tsx

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  LayoutDashboard,
  Search,
  FileText,
  Stethoscope,
  ShieldCheck,
  FileBarChart,
  FileOutput,
  UserCog,
} from 'lucide-react'

function Term({ children }: { children: React.ReactNode }) {
  return <Badge variant="secondary" className="font-mono text-xs">{children}</Badge>
}

function StepList({ children }: { children: React.ReactNode }) {
  return <ol className="list-decimal list-inside space-y-2 text-sm leading-relaxed">{children}</ol>
}

export function AnleitungPage() {
  return (
    <div className="p-6 space-y-6 max-w-4xl">
      <div>
        <h1 className="text-2xl font-bold">Anleitung</h1>
        <p className="text-muted-foreground mt-1">
          So nutzen Sie das DAK-Portal — Schritt-für-Schritt-Anleitungen für die wichtigsten Funktionen.
        </p>
      </div>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-lg">Funktionsübersicht</CardTitle>
        </CardHeader>
        <CardContent>
          <Accordion type="multiple" className="w-full">
            {/* 1. Dashboard */}
            <AccordionItem value="dashboard">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <LayoutDashboard className="h-4 w-4 text-primary shrink-0" />
                  Dashboard verstehen
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Das Dashboard zeigt Ihnen eine Übersicht der wichtigsten Kennzahlen und Trends
                  auf einen Blick.
                </p>
                <h4 className="font-semibold">Kennzahlen (KPI-Karten)</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Fälle gesamt</strong> — Gesamtzahl aller erfassten Fälle im gewählten Jahr. Klicken Sie darauf, um zur Fallliste zu navigieren.</li>
                  <li><strong>Offene ICD</strong> — Fälle, denen noch ein <Term>ICD-10</Term> Diagnosecode zugewiesen werden muss. Klick führt zur ICD-Eingabe.</li>
                  <li><strong>Gutachten gesamt</strong> — Anzahl der Fälle mit erstelltem medizinischem Gutachten.</li>
                </ul>
                <h4 className="font-semibold">Diagramme</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Wöchentliche Übersicht</strong> — Balkendiagramm mit Ablehnungen, fehlenden Rückmeldungen und Gutachten pro Kalenderwoche.</li>
                  <li><strong>Fallgruppen</strong> — Kreisdiagramm mit der Verteilung der Fälle nach medizinischer Fachgruppe (Onkologie, Kardiologie, Intensivmedizin, Gallenblase, Schilddrüse).</li>
                </ul>
                <h4 className="font-semibold">Jahresfilter</h4>
                <p>
                  Über das Dropdown oben rechts können Sie das Jahr wechseln. Alle Kennzahlen und Diagramme
                  passen sich automatisch an.
                </p>
              </AccordionContent>
            </AccordionItem>

            {/* 2. Fälle suchen */}
            <AccordionItem value="cases-search">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <Search className="h-4 w-4 text-primary shrink-0" />
                  Fälle suchen und filtern
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Auf der Seite <strong>Fälle</strong> sehen Sie alle erfassten Fälle in einer Tabelle.
                  Nutzen Sie die Filter, um gezielt Fälle zu finden.
                </p>
                <h4 className="font-semibold">Verfügbare Filter</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Suchfeld</strong> — Suche nach <Term>Fall-ID</Term> oder <Term>KVNR</Term> (Krankenversichertennummer).</li>
                  <li><strong>Jahr</strong> — Filtert Fälle nach Erfassungsjahr.</li>
                  <li><strong>Fallgruppe</strong> — Filtert nach medizinischer Fachgruppe (z.B. Onkologie, Kardiologie).</li>
                  <li><strong>ICD-Filter</strong> — Zeigt alle Fälle, nur Fälle mit ICD-Code oder nur Fälle ohne ICD-Code.</li>
                </ul>
                <h4 className="font-semibold">Tabellenspalten</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><Term>Fall-ID</Term> — Eindeutige Kennung im Format Jahr-KW-Fallgruppe-KVNR (z.B. 2026-06-onko-A123456789).</li>
                  <li><Term>KVNR</Term> — Krankenversichertennummer des Versicherten.</li>
                  <li><Term>ICD</Term> — ICD-10-Diagnosecode, falls bereits zugewiesen.</li>
                  <li><strong>Gutachten</strong> — Grüner Haken wenn ein Gutachten vorliegt, graues X wenn nicht.</li>
                  <li><strong>Status</strong> — Farbige Badges zeigen den Bearbeitungsstatus (Unterlagen, Gutachten, Abgerechnet, Abgelehnt, Abbruch).</li>
                </ul>
                <StepList>
                  <li>Geben Sie einen Suchbegriff ein oder wählen Sie einen Filter aus.</li>
                  <li>Die Tabelle aktualisiert sich automatisch.</li>
                  <li>Blättern Sie mit <strong>Zurück</strong> / <strong>Weiter</strong> durch die Seiten.</li>
                  <li>Klicken Sie auf eine Zeile, um die Falldetails zu öffnen.</li>
                </StepList>
              </AccordionContent>
            </AccordionItem>

            {/* 3. Falldetails */}
            <AccordionItem value="case-detail">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <FileText className="h-4 w-4 text-primary shrink-0" />
                  Falldetails anzeigen
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Wenn Sie auf einen Fall klicken, öffnet sich ein Detail-Panel auf der rechten Seite
                  mit allen verfügbaren Informationen zum Fall.
                </p>
                <h4 className="font-semibold">Sichtbare Informationen</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Fall-ID</strong> und <strong>CRM-Ticket-ID</strong> — Eindeutige Kennungen.</li>
                  <li><strong>Datum</strong>, <strong>Kalenderwoche</strong> und <strong>Jahr</strong> — Zeitliche Einordnung.</li>
                  <li><strong>Status-Badges</strong> — Aktueller Bearbeitungsstatus mit farbigen Markierungen.</li>
                  <li><strong>ICD-Code</strong> — Eingabefeld zum Zuweisen eines Diagnosecodes.</li>
                </ul>
                <h4 className="font-semibold">Personendaten</h4>
                <p>
                  Aus Datenschutzgründen sind Personendaten (Name, Geburtsdatum, Adresse) standardmäßig
                  <strong> nicht sichtbar</strong>. Sie können eine zeitlich begrenzte Freigabe beantragen
                  (siehe Abschnitt „Personendaten anfordern").
                </p>
                <h4 className="font-semibold">KVNR bearbeiten</h4>
                <StepList>
                  <li>Klicken Sie auf <strong>Bearbeiten</strong> im Detail-Panel.</li>
                  <li>Ändern Sie die <Term>KVNR</Term> im entsprechenden Feld.</li>
                  <li>Klicken Sie auf <strong>Speichern</strong>. Die Fall-ID wird automatisch aktualisiert.</li>
                </StepList>
              </AccordionContent>
            </AccordionItem>

            {/* 4. ICD-Codes */}
            <AccordionItem value="icd">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <Stethoscope className="h-4 w-4 text-primary shrink-0" />
                  ICD-Codes eingeben
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Die Seite <strong>ICD-Eingabe</strong> zeigt nur Fälle, denen noch kein
                  <Term>ICD-10</Term> Diagnosecode zugewiesen wurde. Hier können Sie
                  effizient alle offenen Fälle abarbeiten.
                </p>
                <h4 className="font-semibold">Was ist ein ICD-Code?</h4>
                <p>
                  <Term>ICD-10-GM</Term> ist die „Internationale statistische Klassifikation der Krankheiten
                  und verwandter Gesundheitsprobleme". Beispiele: <Term>C50.9</Term> (Bösartige Neubildung
                  der Brustdrüse), <Term>I25.1</Term> (Atherosklerotische Herzkrankheit).
                </p>
                <h4 className="font-semibold">ICD-Code zuweisen</h4>
                <StepList>
                  <li>Öffnen Sie die Seite <strong>ICD-Eingabe</strong> über die Sidebar.</li>
                  <li>Klicken Sie auf einen Fall in der Liste.</li>
                  <li>Im Detail-Panel finden Sie das Feld <strong>ICD-Code</strong>.</li>
                  <li>Geben Sie den Diagnosecode ein (z.B. <Term>C50.9</Term>).</li>
                  <li>Klicken Sie auf <strong>Speichern</strong>. Der Fall verschwindet aus der offenen Liste.</li>
                </StepList>
                <h4 className="font-semibold">Alternativer Weg: ICD-Upload</h4>
                <p>
                  Wenn Sie viele ICD-Codes auf einmal einpflegen möchten, nutzen Sie den
                  Upload-Bereich auf der Seite <strong>Wochenübersicht</strong> (siehe Abschnitt weiter unten).
                </p>
              </AccordionContent>
            </AccordionItem>

            {/* 5. Freigaben */}
            <AccordionItem value="disclosures">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <ShieldCheck className="h-4 w-4 text-primary shrink-0" />
                  Personendaten anfordern (Freigaben)
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Zum Schutz der Patientendaten sind Personendaten (Name, Geburtsdatum, Kontaktdaten)
                  standardmäßig ausgeblendet. Wenn Sie diese Daten benötigen, können Sie eine
                  <strong> zeitlich begrenzte Freigabe</strong> beantragen.
                </p>
                <h4 className="font-semibold">Freigabe beantragen</h4>
                <StepList>
                  <li>Öffnen Sie die <strong>Falldetails</strong> eines Falls.</li>
                  <li>Klicken Sie auf <strong>Personendaten anfordern</strong>.</li>
                  <li>Geben Sie eine <strong>Begründung</strong> an (z.B. „KVNR-Fehler, Identifikation nötig").</li>
                  <li>Senden Sie die Anfrage ab. Ein Administrator prüft Ihre Anfrage.</li>
                </StepList>
                <h4 className="font-semibold">Status Ihrer Freigaben</h4>
                <p>
                  Auf der Seite <strong>Meine Freigaben</strong> in der Sidebar sehen Sie alle Ihre Anfragen:
                </p>
                <ul className="list-disc list-inside space-y-1">
                  <li><Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">Ausstehend</Badge> — Ihre Anfrage wird vom Administrator geprüft.</li>
                  <li><Badge className="bg-green-100 text-green-800 hover:bg-green-100">Genehmigt</Badge> — Personendaten sind <strong>24 Stunden</strong> sichtbar.</li>
                  <li><Badge className="bg-red-100 text-red-800 hover:bg-red-100">Abgelehnt</Badge> — Der Administrator hat Ihre Anfrage abgelehnt.</li>
                  <li><Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">Abgelaufen</Badge> — Die 24-Stunden-Frist ist abgelaufen.</li>
                </ul>
                <h4 className="font-semibold">Weitere Aktionen</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Als erledigt markieren</strong> — Freigabe vorzeitig beenden, Personendaten werden wieder ausgeblendet.</li>
                  <li><strong>Erneute Anfrage</strong> — Bei Ablehnung oder Ablauf können Sie eine neue Anfrage mit geänderter Begründung stellen.</li>
                  <li><strong>Verwerfen</strong> — Abgelehnte oder abgelaufene Anfragen aus Ihrer Liste entfernen.</li>
                </ul>
              </AccordionContent>
            </AccordionItem>

            {/* 6. Berichte */}
            <AccordionItem value="reports">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <FileBarChart className="h-4 w-4 text-primary shrink-0" />
                  Berichte herunterladen
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Auf der Seite <strong>Berichte</strong> finden Sie fertige Auswertungen, die als
                  Excel-Datei heruntergeladen werden können.
                </p>
                <h4 className="font-semibold">Verfügbare Berichtstypen</h4>
                <ul className="list-disc list-inside space-y-1">
                  <li><strong>Gesamt</strong> — Gesamtauswertung über alle Fallgruppen.</li>
                  <li><strong>Onko-Intensiv</strong> — Auswertung für Onkologie und Intensivmedizin.</li>
                  <li><strong>Galle-Schild</strong> — Auswertung für Gallenblase und Schilddrüse.</li>
                </ul>
                <h4 className="font-semibold">Bericht herunterladen</h4>
                <StepList>
                  <li>Öffnen Sie die Seite <strong>Berichte</strong> über die Sidebar.</li>
                  <li>Finden Sie den gewünschten Bericht in der Tabelle (nach Datum, KW und Typ).</li>
                  <li>Klicken Sie auf das <strong>Download-Symbol</strong> rechts in der Zeile.</li>
                  <li>Die Excel-Datei (.xlsx) wird heruntergeladen.</li>
                </StepList>
                <h4 className="font-semibold">Vorschau</h4>
                <p>
                  Klicken Sie auf eine Zeile, um eine Vorschau der Berichtsdaten direkt im Browser anzuzeigen,
                  ohne die Datei herunterladen zu müssen.
                </p>
              </AccordionContent>
            </AccordionItem>

            {/* 7. Wochenübersicht */}
            <AccordionItem value="weekly">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <FileOutput className="h-4 w-4 text-primary shrink-0" />
                  Wochenübersicht & ICD-Upload
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Die <strong>Wochenübersicht</strong> dient dem Austausch von Falldaten zwischen dem
                  Portal und der DAK. Excel-Dateien mit Falldaten pro Kalenderwoche können heruntergeladen
                  und nach Ergänzung der ICD-Codes wieder hochgeladen werden.
                </p>
                <h4 className="font-semibold">Wochenübersicht herunterladen</h4>
                <StepList>
                  <li>Öffnen Sie <strong>Wochenübersicht</strong> in der Sidebar.</li>
                  <li>Finden Sie die gewünschte Übersicht in der Tabelle.</li>
                  <li>Klicken Sie auf das <strong>Download-Symbol</strong>.</li>
                  <li>Die Excel-Datei enthält Fälle mit <Term>KVNR</Term>, Datum, Status-Flags und eine leere ICD-Spalte.</li>
                </StepList>
                <h4 className="font-semibold">ICD-Codes per Upload einpflegen</h4>
                <p>
                  Wenn Sie die heruntergeladene Datei mit ICD-Codes ergänzt haben, können Sie sie wieder
                  hochladen. Das System ordnet die Codes automatisch anhand der <Term>KVNR</Term> zu.
                </p>
                <StepList>
                  <li>Scrollen Sie zum Bereich <strong>ICD-Codes importieren</strong>.</li>
                  <li>Ziehen Sie die Excel-Datei in den Upload-Bereich oder klicken Sie auf <strong>Datei auswählen</strong>.</li>
                  <li>Unterstützte Formate: <Term>.xlsx</Term> und <Term>.xls</Term>.</li>
                  <li>Klicken Sie auf <strong>Hochladen</strong>.</li>
                  <li>Nach dem Upload sehen Sie eine Zusammenfassung: Anzahl aktualisierter Codes und eventuelle Fehler.</li>
                </StepList>
                <h4 className="font-semibold">Fehlerbehandlung</h4>
                <p>
                  Falls einzelne Zeilen nicht zugeordnet werden können (z.B. unbekannte KVNR), wird eine
                  Fehlerliste angezeigt. Klicken Sie auf <strong>Details</strong>, um die einzelnen Fehlermeldungen
                  einzusehen.
                </p>
              </AccordionContent>
            </AccordionItem>

            {/* 8. Konto */}
            <AccordionItem value="account">
              <AccordionTrigger className="text-left">
                <span className="flex items-center gap-2">
                  <UserCog className="h-4 w-4 text-primary shrink-0" />
                  Konto & Sicherheit
                </span>
              </AccordionTrigger>
              <AccordionContent className="space-y-3 text-sm leading-relaxed">
                <p>
                  Unter <strong>Kontoverwaltung</strong> in der Sidebar können Sie Ihr Profil,
                  Ihr Passwort und die Zwei-Faktor-Authentifizierung verwalten.
                </p>
                <h4 className="font-semibold">Profil bearbeiten</h4>
                <StepList>
                  <li>Öffnen Sie <strong>Kontoverwaltung</strong> und wählen Sie den Tab <strong>Profil</strong>.</li>
                  <li>Ändern Sie Name, Anzeigename, Benutzername oder E-Mail.</li>
                  <li>Optional: Laden Sie ein Profilbild hoch (JPEG oder PNG).</li>
                  <li>Klicken Sie auf <strong>Speichern</strong>.</li>
                </StepList>
                <h4 className="font-semibold">Passwort ändern</h4>
                <StepList>
                  <li>Wechseln Sie zum Tab <strong>Sicherheit</strong>.</li>
                  <li>Geben Sie Ihr <strong>aktuelles Passwort</strong> ein.</li>
                  <li>Geben Sie das <strong>neue Passwort</strong> ein und bestätigen Sie es. Mindestlänge: 8 Zeichen.</li>
                  <li>Klicken Sie auf <strong>Passwort ändern</strong>.</li>
                </StepList>
                <h4 className="font-semibold">Zwei-Faktor-Authentifizierung (2FA)</h4>
                <p>
                  2FA bietet zusätzlichen Schutz für Ihr Konto. Nach der Aktivierung benötigen Sie
                  neben Ihrem Passwort einen 6-stelligen Code aus einer Authenticator-App.
                </p>
                <StepList>
                  <li>Wechseln Sie zum Tab <strong>Zwei-Faktor</strong>.</li>
                  <li>Klicken Sie auf <strong>2FA aktivieren</strong>.</li>
                  <li>Scannen Sie den angezeigten <strong>QR-Code</strong> mit Ihrer Authenticator-App (z.B. Google Authenticator, Authy).</li>
                  <li>Geben Sie den 6-stelligen Code aus der App ein und klicken Sie auf <strong>Bestätigen</strong>.</li>
                </StepList>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </CardContent>
      </Card>

      {/* Glossary */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-lg">Glossar — Wichtige Begriffe</CardTitle>
        </CardHeader>
        <CardContent>
          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
            <dt><Term>Fall-ID</Term></dt>
            <dd>Eindeutige Kennung eines Falls im Format Jahr-KW-Fallgruppe-KVNR.</dd>

            <dt><Term>KVNR</Term></dt>
            <dd>Krankenversichertennummer — die eindeutige Nummer des Versicherten bei der DAK.</dd>

            <dt><Term>ICD-10</Term></dt>
            <dd>Internationale Klassifikation der Krankheiten, 10. Revision, German Modification. Beispiel: C50.9.</dd>

            <dt><Term>Fallgruppe</Term></dt>
            <dd>Medizinische Fachgruppe: Onkologie, Kardiologie, Intensivmedizin, Gallenblase oder Schilddrüse.</dd>

            <dt><Term>Gutachten</Term></dt>
            <dd>Schriftliche medizinische Stellungnahme eines Facharztes zu einem Fall.</dd>

            <dt><Term>KW</Term></dt>
            <dd>Kalenderwoche — ISO-Wochennummer (1–53) zur zeitlichen Einordnung von Fällen.</dd>

            <dt><Term>Freigabe</Term></dt>
            <dd>Zeitlich begrenzte (24h) Genehmigung zur Einsicht in Personendaten eines Falls.</dd>
          </dl>
        </CardContent>
      </Card>
    </div>
  )
}