import { ArrowUp, BookOpenCheck } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type FaqSection = {
  id: string;
  title: string;
  description: string;
  items: string[];
};

const faqSections: FaqSection[] = [
  {
    id: "grundprinzip",
    title: "Grundprinzip",
    description: "TicketTracker ersetzt weder Ticketsystem noch CRM. Die App misst Zeiten, bewertet Sessions und bereitet den Monatsabschluss vor.",
    items: [
      "Session-Zeit ist die gemessene oder manuell erfasste Arbeitszeit einer Tätigkeit.",
      "Teamspace-Zeit ist der Tageswert, der für ein Ticket wirklich im CRM eingetragen wurde.",
      "Abgeschlossen wird nur ein Monat. Tickets werden nicht geschlossen, sondern nur über ihre Sessions bewertet."
    ]
  },
  {
    id: "timer",
    title: "Timer",
    description: "Timer sind für laufende Arbeit an Tickets gedacht.",
    items: [
      "Ticketnummer im Format Ticket#XXXXXX eingeben und Timer starten.",
      "Es können mehrere Timer vorbereitet sein, aber immer nur einer läuft aktiv.",
      "Wird ein Timer aktiviert, werden alle anderen automatisch pausiert.",
      "Beim Klick auf Beenden stoppt die Zeit sofort. Danach werden Tätigkeit und gegebenenfalls Organisation und Art gespeichert."
    ]
  },
  {
    id: "session-nachtragen",
    title: "Session Nachtragen",
    description: "Vergessene Zeiten können nachträglich als Session angelegt werden.",
    items: [
      "Benutzer tragen eigene Sessions nach. Admins können Sessions auch anderen Benutzern zuweisen.",
      "Pflichtangaben sind Ticket, Organisation, Art, Datum, Von, Bis und Tätigkeit.",
      "Das Tätigkeitsfeld ist mehrzeilig. Zeilenumbrüche bleiben in den Auswertungen erhalten."
    ]
  },
  {
    id: "ticketdaten",
    title: "Ticketdaten",
    description: "Ticketdaten können in der Ticketdetailansicht korrigiert werden.",
    items: [
      "Bearbeitbar sind Ticketnummer, Organisation und Art.",
      "Änderungen an Organisation und Art werden auf vorhandene manuelle Sessions des Tickets übernommen.",
      "Bei wiederkehrenden Sessions kommt die Art aus der Regel der fixen Abrechnung."
    ]
  },
  {
    id: "organisationen",
    title: "Organisationen",
    description: "Organisationen werden aus Zammad synchronisiert und danach aus der lokalen Liste gewählt.",
    items: [
      "Freitext ist nicht mehr erlaubt, damit Auswertungen je Organisation sauber möglich sind.",
      "Alte Freitexte müssen manuell korrigiert werden.",
      "Der Zammad-Sync speichert nur interne ID, Zammad-ID, Name und Zeitstempel."
    ]
  },
  {
    id: "auswertung",
    title: "Auswertung",
    description: "Die Auswertung zeigt Monats- oder Tageswerte und listet Tickets im gewählten Zeitraum.",
    items: [
      "Mit den Pfeilen neben Monat oder Datum wechselst du den Zeitraum. Die Daten aktualisieren sich automatisch.",
      "Tickets können gefiltert, gruppiert und sortiert werden. Diese Einstellungen bleiben gespeichert.",
      "Der Graph zeigt den Gesamtaufwand des gewählten Zeitraums."
    ]
  },
  {
    id: "ticketdetail",
    title: "Ticketdetailansicht",
    description: "Hier werden alle Sessions eines Tickets im gewählten Monat oder Tag bearbeitet.",
    items: [
      "Sessions sind nach Tagen gruppiert.",
      "Pro Tag wird die getrackte Zeit angezeigt.",
      "Das Teamspace-Feld speichert die Stunden, die für diesen Ticket-Tag wirklich im CRM eingetragen wurden.",
      "Der Teamspace-Wert ist in Monats- und Tagesansicht derselbe."
    ]
  },
  {
    id: "sessions-bewerten",
    title: "Sessions Bewerten",
    description: "Jede Session braucht eine Bewertung für die Abrechnung.",
    items: [
      "Möglich sind Abgerechnet und Nicht abrechenbar.",
      "Ein erneuter Klick auf die gewählte Bewertung nimmt sie zurück.",
      "Bewertungen können bei abgeschlossenem Monat erst geändert werden, nachdem der Monat wieder geöffnet wurde."
    ]
  },
  {
    id: "sessions-bearbeiten",
    title: "Sessions Bearbeiten und Löschen",
    description: "Sessions können korrigiert oder gelöscht werden.",
    items: [
      "Bearbeitbar sind Datum, Von, Bis, Organisation, Tätigkeit und Art.",
      "Bei wiederkehrenden Sessions ist die Art gesperrt und wird über die Regel geändert.",
      "Wird die letzte Session eines Tickets gelöscht, wird das leere Ticket entfernt.",
      "Gelöschte wiederkehrende Sessions werden als Ausnahme gespeichert und nicht automatisch neu erzeugt."
    ]
  },
  {
    id: "monatsabschluss",
    title: "Monatsabschluss",
    description: "Der Monatsabschluss bündelt offene Bewertungen und Teamspace-Prüfpunkte.",
    items: [
      "Ein Monat kann abgeschlossen werden, sobald alle Sessions des Monats bewertet sind.",
      "Tage ohne Teamspace-Wert können zur Kenntnis genommen werden, wenn sie bewusst nicht ins CRM gehören.",
      "Zur Kenntnis genommene Teamspace-Punkte können eingeblendet und zurückgenommen werden.",
      "Einen Tagesabschluss gibt es nicht."
    ]
  },
  {
    id: "fixe-abrechnungen",
    title: "Fixe Abrechnungen",
    description: "Fixe Abrechnungen erzeugen wiederkehrende Sessions für den eigenen Account.",
    items: [
      "Ticket ist optional. Ohne Ticket wird automatisch Fix#ID verwendet.",
      "Muster können Wochentage oder alle X Wochen sein.",
      "Gültig bis ist optional. Wird es später gesetzt, werden nicht mehr gültige erzeugte Sessions entfernt.",
      "Bayerische Feiertage werden übersprungen."
    ]
  },
  {
    id: "statistiken",
    title: "Statistiken",
    description: "Die Statistikseite vergleicht getrackte Sessions mit Teamspace-Zeiten.",
    items: [
      "Sessions und Teamspace haben eigene Farben.",
      "Eine positive oder ausgeglichene Differenz ist grün.",
      "Eine negative Differenz ist rot und bedeutet: in Teamspace ist weniger eingetragen als getrackt.",
      "Organisationen, Typen und Ticket-Hotspots helfen bei der Monatskontrolle."
    ]
  },
  {
    id: "profil",
    title: "Profil",
    description: "Jeder Benutzer kann eigene Accountdaten pflegen.",
    items: [
      "Benutzername und voller Name können geändert werden.",
      "Passwortänderungen benötigen das aktuelle Passwort.",
      "Der volle Name wird in der App angezeigt."
    ]
  },
  {
    id: "admin",
    title: "Adminbereich",
    description: "Admins verwalten Benutzer, Sessions und Zammad-Organisationen.",
    items: [
      "Admins legen Benutzer an und können deren Daten bearbeiten.",
      "Sessions können zwischen Benutzern umverteilt werden.",
      "Admins können Sessions für andere Benutzer nachtragen.",
      "Der Zammad-Zugang wird gespeichert und der Organisationssync aktualisiert die lokale Organisationsliste."
    ]
  }
];

export function FaqPage() {
  return (
    <div id="top" className="space-y-5">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-normal">FAQ und Anleitung</h2>
          <p className="text-sm text-muted-foreground">Kurzanleitung für Timer, Auswertung, Teamspace, fixe Abrechnungen und Adminfunktionen.</p>
        </div>
        <Badge variant="outline">{faqSections.length} Abschnitt(e)</Badge>
      </div>

      <Card>
        <CardHeader className="p-4">
          <div className="flex items-center gap-2">
            <BookOpenCheck className="size-5 text-muted-foreground" />
            <CardTitle>Schnellnavigation</CardTitle>
          </div>
          <CardDescription>Die Fragezeichen in der App springen direkt in diese Abschnitte.</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2 px-4 pb-4">
          {faqSections.map((section) => (
            <Button key={section.id} asChild variant="secondary" size="sm">
              <a href={`#${section.id}`}>{section.title}</a>
            </Button>
          ))}
        </CardContent>
      </Card>

      <div className="grid gap-3 xl:grid-cols-2">
        {faqSections.map((section) => (
          <Card key={section.id} id={section.id} className="scroll-mt-16">
            <CardHeader className="p-4">
              <CardTitle>{section.title}</CardTitle>
              <CardDescription>{section.description}</CardDescription>
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <ul className="space-y-2 text-sm text-muted-foreground">
                {section.items.map((item) => (
                  <li key={item} className="flex gap-2">
                    <span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-4 flex justify-end">
                <Button asChild variant="ghost" size="sm">
                  <a href="#top">
                    <ArrowUp className="size-4" />
                    Nach oben
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
