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 { useAuth } from '@/context/AuthContext'
import {
  LayoutDashboard,
  Search,
  FileText,
  Stethoscope,
  ShieldCheck,
  FileBarChart,
  FileOutput,
  UserCog,
  Upload,
  ClipboardCheck,
  Users,
  Mail,
  History,
} 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() {
  const { isAdmin } = useAuth()

  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>
                  <li><strong>Jahresvergleich nach Kalenderwoche</strong> — Gruppiertes Säulendiagramm, das die Fallzahlen pro KW über alle Jahre ab 2022 nebeneinander vergleicht. Jedes Jahr wird in einer eigenen Farbe dargestellt.</li>
                  <li><strong>Top 10 ICD-Codes</strong> — Rangliste der häufigsten Diagnosecodes im gewählten Jahr mit farbigen Fortschrittsbalken. Reagiert auf den Jahresfilter.</li>
                </ul>
                <h4 className="font-semibold">Jahresfilter</h4>
                <p>
                  Über das Dropdown oben rechts können Sie das Jahr wechseln. Kennzahlen, Diagramme und
                  die Top-10-ICD-Liste passen sich automatisch an. Der Jahresvergleich zeigt immer alle
                  verfügbaren Jahre ab 2022.
                </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>

      {/* Admin sections */}
      {isAdmin && (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Administration</CardTitle>
            <p className="text-sm text-muted-foreground">
              Diese Funktionen sind nur für Administratoren sichtbar.
            </p>
          </CardHeader>
          <CardContent>
            <Accordion type="multiple" className="w-full">
              {/* A1. CSV-Import */}
              <AccordionItem value="admin-import-csv">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <Upload className="h-4 w-4 text-primary shrink-0" />
                    Fälle importieren (CSV)
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Über die Seite <strong>Import</strong> können Sie Falldaten aus CRM-Exporten (Salesforce)
                    ins Portal laden. Der Import erfolgt als CSV-Datei mit Vorschau und Duplikaterkennung.
                  </p>
                  <h4 className="font-semibold">CSV-Datei vorbereiten</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Format:</strong> <Term>.csv</Term> (UTF-8-BOM), Trennzeichen wird automatisch erkannt (Komma, Semikolon oder Tab).</li>
                    <li><strong>Hauptkontakt</strong> — Pipe-getrennt: <Term>Nachname | Vorname | Geburtsdatum | KVNR</Term>. Geburtsdatum im Format TT.MM.JJJJ.</li>
                    <li><strong>Erstellungsdatum</strong> — Format TT.MM.JJ HH:MM (falls leer: heutiges Datum).</li>
                    <li><strong>Modul</strong> — Wird automatisch zur Fallgruppe zugeordnet (onko, kardio, intensiv, galle, sd).</li>
                    <li><strong>Name</strong> — CRM-Ticket-ID (optional).</li>
                  </ul>
                  <h4 className="font-semibold">Import durchführen</h4>
                  <StepList>
                    <li>Öffnen Sie <strong>Import</strong> in der Sidebar und wählen Sie den Tab <strong>CSV-Import</strong>.</li>
                    <li>Ziehen Sie die CSV-Datei in den Upload-Bereich oder klicken Sie auf <strong>Datei auswählen</strong>.</li>
                    <li>Klicken Sie auf <strong>Vorschau laden</strong>. Das System zeigt: Gesamtzeilen, neue Fälle, Duplikate und eventuelle Fehler.</li>
                    <li>Prüfen Sie die Vorschau-Tabelle. Duplikate werden automatisch übersprungen.</li>
                    <li>Klicken Sie auf <strong>X Fälle importieren</strong> um den Import zu bestätigen.</li>
                    <li>Nach Abschluss sehen Sie eine Zusammenfassung: importiert, übersprungen, aktualisiert.</li>
                  </StepList>
                  <h4 className="font-semibold">Duplikaterkennung</h4>
                  <p>
                    Duplikate werden anhand von Nachname + Vorname + Datum + Fallgruppe erkannt.
                    Erkannte Duplikate werden in der Vorschau als <Badge variant="outline">Duplikat</Badge> markiert
                    und beim Import übersprungen.
                  </p>
                </AccordionContent>
              </AccordionItem>

              {/* A2. ICD-Import */}
              <AccordionItem value="admin-import-icd">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <Upload className="h-4 w-4 text-primary shrink-0" />
                    ICD-Codes importieren (Excel)
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Neben der manuellen ICD-Eingabe können Sie ICD-Codes auch per Excel-Datei
                    in großer Menge aktualisieren.
                  </p>
                  <StepList>
                    <li>Öffnen Sie <strong>Import</strong> und wählen Sie den Tab <strong>ICD-Import</strong>.</li>
                    <li>Laden Sie eine <Term>.xlsx</Term> oder <Term>.xls</Term> Datei hoch.</li>
                    <li>Das System liest den ICD-Code aus der <strong>letzten Spalte</strong> — kompatibel mit altem (7-spaltig) und neuem (5-spaltig) Template.</li>
                    <li>Klicken Sie auf <strong>ICD-Codes importieren</strong>. Die Zuordnung erfolgt automatisch.</li>
                    <li>Sie erhalten eine Zusammenfassung mit Anzahl aktualisierter Fälle und eventuellen Fehlern.</li>
                  </StepList>
                  <h4 className="font-semibold">Import-Verlauf</h4>
                  <p>
                    Im Tab <strong>Import-Verlauf</strong> sehen Sie eine chronologische Liste aller vergangenen
                    Importe mit Dateiname, Typ, Anzahl importierter/übersprungener Zeilen und Fehlern.
                  </p>
                </AccordionContent>
              </AccordionItem>

              {/* A3. Coding */}
              <AccordionItem value="admin-coding">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <ClipboardCheck className="h-4 w-4 text-primary shrink-0" />
                    Coding-Warteschlange
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Auf der Seite <strong>Coding</strong> werden Fälle mit vorhandenem Gutachten klassifiziert.
                    Die Warteschlange zeigt alle Fälle, die noch codiert werden müssen.
                  </p>
                  <h4 className="font-semibold">Felder pro Fall</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Gutachten-Typ</strong> — <Term>Bestätigung</Term> (Erstmeinung bestätigt) oder <Term>Alternative</Term> (abweichende Empfehlung).</li>
                    <li><strong>Therapieänderung</strong> — <Term>Ja</Term> oder <Term>Nein</Term>: Hat sich die Therapie aufgrund des Gutachtens geändert?</li>
                    <li><strong>Diagnosekorrektur</strong> — Checkbox: Die Diagnose wurde korrigiert.</li>
                    <li><strong>Unterversorgung</strong> — Checkbox: Es lag eine medizinische Unterversorgung vor.</li>
                    <li><strong>Übertherapie</strong> — Checkbox: Es wurde eine Übertherapie festgestellt.</li>
                  </ul>
                  <h4 className="font-semibold">Fälle codieren</h4>
                  <StepList>
                    <li>Filtern Sie optional nach <strong>Jahr</strong> und/oder <strong>Fallgruppe</strong>.</li>
                    <li>Jeder Fall wird als Karte angezeigt mit Fall-ID, Name, Fallgruppe und ICD-Code.</li>
                    <li>Wählen Sie <strong>Gutachten-Typ</strong> und <strong>Therapieänderung</strong> aus den Dropdowns.</li>
                    <li>Setzen Sie bei Bedarf die Checkboxen für Diagnosekorrektur, Unterversorgung oder Übertherapie.</li>
                    <li>Klicken Sie auf <strong>Speichern</strong>. Die Karte wird grün markiert.</li>
                  </StepList>
                  <h4 className="font-semibold">Fortschritt</h4>
                  <p>
                    Der Fortschrittsbalken und das Badge oben zeigen, wie viele Fälle auf der aktuellen
                    Seite bereits codiert wurden. Pro Seite werden 50 Fälle angezeigt.
                  </p>
                </AccordionContent>
              </AccordionItem>

              {/* A4. Freigabe-Anfragen */}
              <AccordionItem value="admin-disclosures">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <ShieldCheck className="h-4 w-4 text-primary shrink-0" />
                    Freigabe-Anfragen verwalten
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Wenn DAK-Mitarbeiter Zugriff auf Personendaten benötigen, stellen sie eine Freigabe-Anfrage.
                    Auf der Seite <strong>Freigabe-Anfragen</strong> prüfen und entscheiden Sie über diese Anfragen.
                  </p>
                  <h4 className="font-semibold">Tabs zur Filterung</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Alle</strong> — Sämtliche Anfragen unabhängig vom Status.</li>
                    <li><strong>Ausstehend</strong> — Offene Anfragen, die Ihre Entscheidung erfordern.</li>
                    <li><strong>Genehmigt</strong> — Aktive Freigaben (24h gültig).</li>
                    <li><strong>Abgelehnt</strong> — Abgelehnte Anfragen.</li>
                  </ul>
                  <h4 className="font-semibold">Anfrage bearbeiten</h4>
                  <StepList>
                    <li>Wechseln Sie zum Tab <strong>Ausstehend</strong>.</li>
                    <li>Prüfen Sie <strong>Antragsteller</strong>, <strong>Fall-ID</strong> und <strong>Begründung</strong>.</li>
                    <li>Klicken Sie auf <strong>Genehmigen</strong> (24h Zugriff) oder <strong>Ablehnen</strong>.</li>
                  </StepList>
                  <h4 className="font-semibold">Weitere Aktionen</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Entziehen</strong> — Eine aktive Freigabe sofort widerrufen.</li>
                    <li><strong>Wieder aufleben</strong> — Eine abgelaufene oder abgelehnte Freigabe erneut für 24h aktivieren.</li>
                    <li><strong>Verwerfen</strong> — Abgelehnte oder abgelaufene Einträge aus der Liste entfernen.</li>
                  </ul>
                </AccordionContent>
              </AccordionItem>

              {/* A5. Benutzer */}
              <AccordionItem value="admin-users">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <Users className="h-4 w-4 text-primary shrink-0" />
                    Benutzer verwalten
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Auf der Seite <strong>Benutzer</strong> können Sie Konten erstellen,
                    Rollen zuweisen und Benutzer deaktivieren.
                  </p>
                  <h4 className="font-semibold">Rollen</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><Badge variant="outline">Admin</Badge> — Vollzugriff auf alle Funktionen inkl. Import, Coding, Benutzerverwaltung.</li>
                    <li><Badge variant="outline">DAK Mitarbeiter</Badge> — Kann Fälle einsehen, ICD-Codes eingeben und Freigaben beantragen.</li>
                  </ul>
                  <h4 className="font-semibold">Neuen Benutzer erstellen</h4>
                  <StepList>
                    <li>Klicken Sie auf <strong>Neuen Benutzer erstellen</strong>.</li>
                    <li>Geben Sie <strong>Benutzername</strong>, <strong>E-Mail</strong> und <strong>Passwort</strong> ein.</li>
                    <li>Wählen Sie die <strong>Rolle</strong> (DAK Mitarbeiter oder Admin).</li>
                    <li>Klicken Sie auf <strong>Erstellen</strong>. Der neue Benutzer kann sich sofort anmelden.</li>
                  </StepList>
                  <h4 className="font-semibold">Benutzer bearbeiten</h4>
                  <StepList>
                    <li>Klicken Sie auf das <strong>Stift-Symbol</strong> in der Benutzerzeile.</li>
                    <li>Ändern Sie Benutzername, E-Mail, Rolle oder Aktivstatus.</li>
                    <li>Klicken Sie auf <strong>Speichern</strong>. Änderungen wirken sofort.</li>
                  </StepList>
                  <p>
                    <strong>Hinweis:</strong> Deaktivierte Benutzer können sich nicht mehr anmelden,
                    ihr Konto bleibt aber erhalten.
                  </p>
                </AccordionContent>
              </AccordionItem>

              {/* A6. Einladungen */}
              <AccordionItem value="admin-invitations">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <Mail className="h-4 w-4 text-primary shrink-0" />
                    Einladungen erstellen
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Alternativ zur direkten Benutzererstellung können Sie <strong>Einladungs-Tokens</strong> generieren.
                    Der eingeladene Benutzer registriert sich damit selbstständig.
                  </p>
                  <h4 className="font-semibold">Einladung erstellen</h4>
                  <StepList>
                    <li>Klicken Sie auf <strong>Einladung erstellen</strong>.</li>
                    <li>Optional: Geben Sie die <strong>E-Mail</strong> des Empfängers ein (nur zur Dokumentation, kein automatischer Versand).</li>
                    <li>Wählen Sie die <strong>Rolle</strong> (Standard: DAK Mitarbeiter).</li>
                    <li>Legen Sie die <strong>Gültigkeit</strong> fest (1–90 Tage, Standard: 7).</li>
                    <li>Klicken Sie auf <strong>Erstellen</strong>.</li>
                    <li>Kopieren Sie den angezeigten <strong>Token</strong> und teilen Sie ihn dem Empfänger mit.</li>
                  </StepList>
                  <h4 className="font-semibold">Token-Status</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><Badge className="bg-green-100 text-green-800 hover:bg-green-100">Aktiv</Badge> — Token ist gültig und wurde noch nicht verwendet.</li>
                    <li><Badge className="bg-orange-100 text-orange-800 hover:bg-orange-100">Abgelaufen</Badge> — Gültigkeitszeitraum überschritten.</li>
                    <li><Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">Verwendet</Badge> — Der Benutzer hat sich erfolgreich registriert.</li>
                  </ul>
                  <p>
                    <strong>Hinweis:</strong> Jeder Token kann nur einmal verwendet werden.
                    In der Tabelle können Sie den Token jederzeit über das Kopier-Symbol erneut kopieren.
                  </p>
                </AccordionContent>
              </AccordionItem>

              {/* A7. Audit-Log */}
              <AccordionItem value="admin-audit">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <History className="h-4 w-4 text-primary shrink-0" />
                    Audit-Log einsehen
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Das <strong>Audit-Log</strong> protokolliert alle Systemaktionen — Logins,
                    Datenänderungen, Importe und Admin-Aktionen — für Compliance und Nachvollziehbarkeit.
                  </p>
                  <h4 className="font-semibold">Filtern</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Benutzer-ID</strong> — Aktionen eines bestimmten Benutzers anzeigen.</li>
                    <li><strong>Aktion</strong> — Nach Aktionstyp suchen (z.B. „login", „update_case", „csv_imported").</li>
                    <li><strong>Datum von / bis</strong> — Zeitraum eingrenzen.</li>
                  </ul>
                  <h4 className="font-semibold">Details anzeigen</h4>
                  <StepList>
                    <li>Öffnen Sie <strong>Audit-Log</strong> unter Administration in der Sidebar.</li>
                    <li>Nutzen Sie optional die Filter und klicken Sie auf <strong>Filtern</strong>.</li>
                    <li>Klicken Sie auf eine Zeile mit dem Pfeil-Symbol, um <strong>alte und neue Werte</strong> als JSON einzusehen.</li>
                    <li>Klicken Sie auf <strong>Zurücksetzen</strong>, um alle Filter zu entfernen.</li>
                  </StepList>
                  <h4 className="font-semibold">Protokollierte Informationen</h4>
                  <ul className="list-disc list-inside space-y-1">
                    <li><strong>Zeitpunkt</strong> — Sekundengenauer Zeitstempel.</li>
                    <li><strong>Benutzer-ID</strong> — Wer die Aktion ausgeführt hat.</li>
                    <li><strong>Aktion</strong> — Art der Aktion (Login, Fallaktualisierung, Import etc.).</li>
                    <li><strong>Entität</strong> — Betroffenes Objekt (z.B. „case #123").</li>
                    <li><strong>IP-Adresse</strong> — Von wo aus die Aktion erfolgte.</li>
                  </ul>
                </AccordionContent>
              </AccordionItem>

              {/* A8. Berichte generieren */}
              <AccordionItem value="admin-reports">
                <AccordionTrigger className="text-left">
                  <span className="flex items-center gap-2">
                    <FileBarChart className="h-4 w-4 text-primary shrink-0" />
                    Berichte und Wochenübersichten generieren
                  </span>
                </AccordionTrigger>
                <AccordionContent className="space-y-3 text-sm leading-relaxed">
                  <p>
                    Als Administrator können Sie neue Berichte und Wochenübersichten generieren,
                    die dann allen Benutzern zum Download bereitstehen.
                  </p>
                  <h4 className="font-semibold">Bericht generieren</h4>
                  <StepList>
                    <li>Öffnen Sie <strong>Berichte</strong> in der Sidebar.</li>
                    <li>Geben Sie <strong>Jahr</strong> und <strong>Kalenderwoche</strong> ein.</li>
                    <li>Wählen Sie den <strong>Typ</strong>: Gesamt, Onko-Intensiv oder Galle-Schild.</li>
                    <li>Klicken Sie auf <strong>Bericht generieren</strong>. Der neue Bericht erscheint in der Tabelle.</li>
                  </StepList>
                  <h4 className="font-semibold">Wochenübersicht generieren</h4>
                  <StepList>
                    <li>Öffnen Sie <strong>Wochenübersicht</strong> in der Sidebar.</li>
                    <li>Geben Sie <strong>Jahr</strong>, <strong>KW von</strong> und <strong>KW bis</strong> ein.</li>
                    <li>Wählen Sie den <strong>Exporttyp</strong>: Onko-Intensiv oder Galle-Schild.</li>
                    <li>Klicken Sie auf <strong>Generieren</strong>.</li>
                  </StepList>
                  <p>
                    <strong>Hinweis:</strong> Generierte Berichte und Wochenübersichten können von Ihnen
                    auch wieder gelöscht werden (Papierkorb-Symbol bzw. Checkbox-Auswahl).
                  </p>
                </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>
  )
}
