import { redirect } from "next/navigation";
import { isAdminSession, hasPermission, getAllPermissions } from "@/lib/adminAuth";
import { AdminNavLinks } from "@/components/admin/AdminNavLinks";
import { AdminPageHeader } from "@/components/admin/AdminPageHeader";

export const dynamic = "force-dynamic";

function Category({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <section id={id} className="mb-10 scroll-mt-24">
      <h2 className="rk-wordmark text-lg mb-4">{title}</h2>
      <div className="flex flex-col gap-2">{children}</div>
    </section>
  );
}

function Topic({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <details className="bg-[var(--rk-surface)] border border-white/10 rounded-xl group">
      <summary className="cursor-pointer px-5 py-3 text-sm font-medium text-[var(--rk-ink)] transition-colors list-none flex items-center justify-between gap-3">
        {title}
        <span className="text-xs text-[var(--rk-ink-muted)] shrink-0 transition-transform group-open:rotate-180">▾</span>
      </summary>
      <div className="px-5 pb-5 pt-1 text-sm text-[var(--rk-ink-muted)] leading-relaxed flex flex-col gap-2.5 border-t border-white/5">
        {children}
      </div>
    </details>
  );
}

function TocLink({ href, label }: { href: string; label: string }) {
  return (
    <a
      href={href}
      className="text-xs uppercase tracking-[0.1em] border border-white/15 rounded-full px-3.5 py-1.5 text-[var(--rk-ink-muted)] hover:border-white/40 hover:text-[var(--rk-ink)] transition-colors"
    >
      {label}
    </a>
  );
}

export default async function AdminGuidePage() {
  if (!(await isAdminSession())) redirect("/de/login?next=%2Fde%2Fadmin%2Forders");
  if (!(await hasPermission("guide"))) redirect("/de/account");

  const permissions = await getAllPermissions();

  return (
    <main className="px-6 pt-4 pb-24 max-w-5xl mx-auto">
      <AdminNavLinks permissions={permissions} />
      <AdminPageHeader
        title="Handbuch"
        subtitle="Alle Funktionen der Seite an einem Ort — öffentliche Seite, Kundenkonto und Admin-Dashboard. Zum Nachschlagen und Einarbeiten, kein Ersatz für die einzelnen Seiten selbst."
      />

      <div className="flex flex-wrap gap-2 mb-10">
        <TocLink href="#oeffentlich" label="Öffentliche Seite" />
        <TocLink href="#konto" label="Kundenkonto" />
        <TocLink href="#auftraege" label="Admin: Aufträge" />
        <TocLink href="#inhalte" label="Admin: Inhalte" />
        <TocLink href="#finanzen" label="Admin: Finanzen" />
        <TocLink href="#intranet" label="Admin: Intranet" />
        <TocLink href="#verwaltung" label="Admin: Verwaltung" />
        <TocLink href="#automatisierung" label="Automatisierungen" />
        <TocLink href="#sicherheit" label="Sicherheit & Datenschutz" />
      </div>

      <Category id="oeffentlich" title="Öffentliche Seite">
        <Topic title="Startseite">
          Hero-Bereich, ausgewählte Portfolio-Arbeiten, Instagram-Feed, Kurzbewertungen und Kundenstimmen (als
          Fließband/Marquee ab 5 Einträgen, sonst statisch), Philosophie-/Über-mich-Abschnitt, Ablauf-Übersicht
          ("Shooting-Info").
        </Topic>
        <Topic title="Portfolio">
          Galerie aller sichtbaren Portfolio-Einträge mit Lightbox. Filterbar nach Kategorie (z. B. Cosplay,
          Portrait) und nach Charakter/Fandom-Tags. Jeder Eintrag zeigt Event, Tags und Instagram-Credits
          (Fotograf + ggf. Model).
        </Topic>
        <Topic title="Angebote">
          Zeigt alle Leistungen mit Preisstufen und Zusatzoptionen, plus Pakete. Enthält den{" "}
          <strong>Sofort-Preisrechner</strong> (Angebot + Preisstufe + Zusatzoptionen wählen, Anfrage ist danach
          vorausgefüllt), den <strong>Verfügbarkeitskalender</strong> (belegte Tage aus Aufträgen + zusätzlichen
          Kalendern), die Anzeige des <strong>nächsten freien Termins</strong> (Richtwert ab der eingestellten
          Mindestvorlaufzeit, siehe Einstellungen) und das <strong>kombinierte Bewertungs-Widget</strong>{" "}
          (Ø-Sterne aus Kundenstimmen + Kurzbewertungen zusammengefasst). Ein Hinweisbanner erscheint automatisch,
          wenn gerade eine Abwesenheit im öffentlichen Kalender hinterlegt ist.
        </Topic>
        <Topic title="Blog">
          Kurze Beiträge (Klartext, kein Rich-Text-Editor) mit Tag-Filter und RSS-Feed. "Behind the Shoot" und
          "Cosplay-Guide" sind vorgeschlagene Tag-Kategorien (Schnellauswahl-Buttons im Admin), technisch aber
          ganz normale Tags mit der gleichen Filter-/"Ähnliche Beiträge"-Logik wie jeder andere Tag.
        </Topic>
        <Topic title="FAQ">Häufige Fragen, kategorisiert, sortierbar.</Topic>
        <Topic title="Conventions">
          Liste anstehender Conventions. Jede hat jetzt eine eigene <strong>Detailseite</strong> (teilbarer Link,
          in Suchmaschinen indexierbar) mit Datum, Ort, Infos und entweder einem "Slot anfragen"-Button oder,
          falls ausgebucht, einem Warteliste-Formular (braucht ein Kundenkonto, damit Status & Chat einsehbar
          sind).
        </Topic>
        <Topic title="Gutscheine">Geschenkgutschein kaufen (Betrag frei wählbar, Bezahlung online oder manuell).</Topic>
        <Topic title="Neuer Auftrag / Kontakt">
          Anfrageformular: Art des Shootings, Charakter/Idee, Ort, <strong>Wunschtermin</strong> (echtes
          Kalenderfeld, lässt nur Daten ab der Mindestvorlaufzeit zu — wer ausnahmsweise früher braucht, aktiviert
          die Checkbox darunter und beschreibt den Wunsch im Freitext, das Team entscheidet dann bewusst), Moodboard/
          Referenzbilder, Instagram/Discord. Vorausfüllbar über den Preisrechner oder "Nochmal buchen".
        </Topic>
      </Category>

      <Category id="konto" title="Kundenkonto">
        <Topic title="Registrierung, Login, E-Mail-Bestätigung">
          Ein Login für Kunden und Team (Rolle entscheidet, wohin es nach dem Login geht). Nach der Registrierung
          muss die E-Mail-Adresse bestätigt werden. Login ist nach 5 Fehlversuchen für 15 Minuten gesperrt (siehe{" "}
          <a href="#sicherheit" className="underline hover:text-[var(--rk-ink)]">
            Sicherheit
          </a>
          ).
        </Topic>
        <Topic title="Meine Aufträge & Auftragsdetail">
          Übersicht aller eigenen Aufträge mit Status. Im Detail: Chat mit dem Team, Vertrag (Standard oder TFP,
          digital unterschreibbar), Rechnung (PDF), Zahlungsstatus inkl. optionaler <strong>Anzahlung</strong>{" "}
          (falls vom Team verlangt, wird zuerst nur die Anzahlung, danach automatisch der Rest abgerechnet),
          Zahlungserinnerungen/Mahnungen, "Nochmal buchen".
        </Topic>
        <Topic title="Foto-Galerie">
          Freigegebene Fotos je Auftrag/Ordner. Kunden können Fotos mit Sternen bewerten, Notizen hinterlassen
          (z. B. "bitte für den Druck"), in frei benannte <strong>Alben/Kollektionen</strong> einsortieren und
          herunterladen. Rechtsklick/Kontextmenü ist auf allen Kundenfotos deaktiviert. Ein{" "}
          <strong>Teilen-Link</strong> lässt sich für Familie/Freunde ohne eigenes Konto aktivieren — zeigt nur vom
          Team freigegebene Fotos, läuft automatisch nach 30 Tagen ab (verlängerbar).
        </Topic>
        <Topic title="Meine Rechnungen">Gesammelte Übersicht aller Rechnungen über alle Aufträge hinweg, mit PDF-Download.</Topic>
        <Topic title="Meine Gutscheine">Übersicht gekaufter/erhaltener Geschenkgutscheine mit Status (offen/eingelöst/storniert).</Topic>
        <Topic title="Wunschliste">Charakter-/Motiv-Wünsche hinterlegen, die noch nicht als Auftrag gebucht sind.</Topic>
        <Topic title="Empfehlungsprogramm">
          Jeder Kunde bekommt nach dem ersten echten Auftrag einen eigenen Empfehlungscode. Wird er von einer
          neuen Person eingelöst, bekommt diese einen Rabatt und der Werber automatisch einen neuen,
          einmaligen Rabattcode als Prämie (Sätze in den Einstellungen konfigurierbar).
        </Topic>
        <Topic title="Profil">
          Persönliche Daten, Anschrift. <strong>E-Mail-Benachrichtigungen</strong> lassen sich für optionale
          Erinnerungen (Wiedervorlage, Vor-Shooting-Erinnerung, Wetter-Hinweis, Stammkunden-/Bewertungs-Prämie)
          abschalten — wichtige Mails (Bestätigung, Rechnung, Zahlungserinnerung) laufen unabhängig davon immer
          weiter. <strong>Zwei-Faktor-Login</strong> (Authenticator-App) ist für Kunden UND Team einrichtbar.
          Konto-Löschung ist selbst anstoßbar (Kunden mit Rechnungen werden aus steuerlichen Gründen
          anonymisiert statt hart gelöscht).
        </Topic>
        <Topic title="Benachrichtigungen">In-App-Glocke mit ungelesenen Hinweisen (neue Nachricht, Zahlungserinnerung, freier Waitlist-Slot, u. a.).</Topic>
        <Topic title="QM-Bereich (nur Team)">Anonym möglich meldbare Anliegen an QM/Personalabteilung, getrennt vom normalen Support-Chat.</Topic>
      </Category>

      <Category id="auftraege" title="Admin-Dashboard — Aufträge">
        <Topic title="Auftragsübersicht">Alle Aufträge mit Status-Tag (Funnel von Anfrage bis Abgeschlossen/Abgelehnt), filter- und durchsuchbar.</Topic>
        <Topic title="Auftragsdetail">
          Preisverhandlung (Vorschlag/Gegenvorschlag), Vertragserstellung, <strong>Termin setzen</strong>{" "}
          (mit Warnung + bewusster Bestätigung, falls unter der Mindestvorlaufzeit, plus Terminkonflikt-Prüfung
          gegen andere Aufträge/Kalender), Zahlung (bezahlt markieren, <strong>Anzahlung verlangen</strong>,{" "}
          <strong>Rückerstattung erfassen</strong> — reiner Buchhaltungs-Nachweis, keine automatische Stripe-
          Rückbuchung), Rechnung erstellen, Mahnstufen, Vorbereitungs-Checkliste, interne Notizen (nur Team
          sichtbar), Foto-Ordner zuweisen, Rabattcode/Kulanz-Rabatt.
        </Topic>
        <Topic title="Kalender">
          Systemkalender (aus Aufträgen) plus zusätzliche Kalender. Zwei-Wege-Sync mit Google: lokale Termine
          werden automatisch nach Google gepusht, Zeit-Änderungen aus Google automatisch zurückgeholt (alle 2 Std.).
          Löschungen aus Google werden nur übernommen, wenn das explizit in den Einstellungen aktiviert ist. ICS-
          Abo-Link pro Kalender für externe Kalender-Apps.
        </Topic>
        <Topic title="Kunden">Kundenakten mit Kontaktdaten, Tags, Auftragshistorie.</Topic>
        <Topic title="Feedback">Eingereichte Kundenbewertungen nach Auftragsabschluss.</Topic>
        <Topic title="Wunschliste">Von Kunden hinterlegte Charakter-/Motiv-Wünsche, team-weit einsehbar.</Topic>
        <Topic title="Ablehnungsgründe">Verwaltbare Liste der Gründe, die beim Ablehnen einer Anfrage zur Auswahl stehen.</Topic>
      </Category>

      <Category id="inhalte" title="Admin-Dashboard — Inhalte">
        <Topic title="Portfolio">Einträge anlegen/bearbeiten, Kategorie & Charakter/Fandom-Tags setzen, Featured auswählen, sortieren.</Topic>
        <Topic title="Angebote (Preisstufen)">Leistungen mit mehreren Preisstufen, Zusatzoptionen, Aktionspreisen mit Zeitfenster.</Topic>
        <Topic title="Pakete">Kombi-Angebote mit eigenem Paketpreis und Vergleichspreis (zeigt Ersparnis).</Topic>
        <Topic title="Conventions">Anlegen, Zeitraum/Ort, Slot-Verfügbarkeit umschalten, Warteliste benachrichtigen, Team-Selbstanmeldung.</Topic>
        <Topic title="Blog">Beiträge erstellen/veröffentlichen, Tags (inkl. "Behind the Shoot"/"Cosplay-Guide"-Schnellauswahl), Titelbild.</Topic>
        <Topic title="FAQ">Fragen/Antworten, kategorisiert, sortierbar.</Topic>
        <Topic title="Bewertungen">
          Zwei getrennte Systeme: <strong>Kundenstimmen</strong> (ausführlich, auch aus Google übernehmbar) und{" "}
          <strong>Kurzbewertungen</strong> (nur Sterne + Name, für das Startseiten-Fließband).
        </Topic>
      </Category>

      <Category id="finanzen" title="Admin-Dashboard — Finanzen">
        <Topic title="Rabattcodes">Prozent- oder Festbetrag-Codes, einschränkbar auf Neu-/Stammkunden, maximale Nutzungen.</Topic>
        <Topic title="Gutscheine">Einzeln oder als Bulk ausstellen, Zahlungseingang bestätigen, stornieren.</Topic>
        <Topic title="Preisvorschlags-Vorlagen">Wiederverwendbare Vorlagen für die Preisverhandlung eines Auftrags.</Topic>
        <Topic title="Einnahmen & Ausgaben">
          Ein gemeinsames Formular mit Typ-Auswahl (Einnahme/Ausgabe) statt zwei getrennter — eine Liste, farblich
          unterschieden. Ausgaben mit Kategorie, USt.-Betrag und Belegupload; manuelle Einnahmen schlanker (kein
          Auftragsbezug nötig, z. B. Workshops).
        </Topic>
        <Topic title="Fahrtkosten">
          Kilometerpauschale berechnen (Satz aus den Einstellungen, pro Fahrt überschreibbar), direkt als Ausgabe
          erfassbar. Zusätzlich ein persistentes <strong>Fahrtenbuch</strong> mit Historie und Jahressumme,
          unabhängig davon, ob eine Fahrt auch als Ausgabe gebucht wird.
        </Topic>
        <Topic title="Statistiken">
          In vier Tabs organisiert: <strong>Aufträge</strong> (Funnel, Details, offene Zahlungen, Auslastung,
          Ablehnungsgründe, Charaktere/Fandoms), <strong>Finanzen</strong> (Preise & Umsatz, Einnahmen & Ausgaben,
          Gutscheine), <strong>Kunden & Bewertungen</strong> (Neuregistrierungen, wiederkehrende Kunden,
          Zufriedenheit, Foto-/Kundenbewertungen), <strong>Marketing & Reichweite</strong> (anonyme
          Seitenaufrufe, Top-Seiten, SEO-Status, grobe Conversion-Näherung Angebote-Aufrufe → Anfragen,
          Conventions/Warteliste).
        </Topic>
        <Topic title="Steuer">
          Jahresübersicht Einnahmen/Ausgaben/Gewinn/Steuerrücklage (Richtwert), Netto-/USt.-Aufschlüsselung,{" "}
          <strong>Kleinunternehmer-Schwellenwert-Warnung</strong> (bei Annäherung/Überschreiten der 25.000-€-
          Grenze), EÜR-CSV-Export für Steuerberater/ELSTER (inkl. Rückerstattungen als Minus-Posten), Link zum
          Fahrtkosten-Rechner.
        </Topic>
      </Category>

      <Category id="intranet" title="Admin-Dashboard — Intranet">
        <Topic title="Abläufe">Interne SOPs/Anleitungen, für jedes Team-Mitglied ohne extra Berechtigung lesbar, optional nach Abteilung eingeschränkt.</Topic>
        <Topic title="ToDos">
          Persönliche und zugewiesene Aufgaben mit Priorität, Fälligkeitsdatum, Notizen. Können als{" "}
          <strong>wiederkehrend</strong> (täglich/wöchentlich/monatlich) markiert werden — beim Erledigen wird
          automatisch die nächste Instanz mit verschobenem Fälligkeitsdatum angelegt.
        </Topic>
        <Topic title="Abwesenheiten">
          Selbst eintragbares Log (Urlaub/Krankheit/Sonstiges) fürs ganze Team sichtbar — kein
          Genehmigungs-Workflow, kein Urlaubskonto mit Anspruch/Übertrag, nur "wer ist wann weg".
        </Topic>
      </Category>

      <Category id="verwaltung" title="Admin-Dashboard — Verwaltung">
        <Topic title="Handbuch">Diese Seite.</Topic>
        <Topic title="Dokumente & Vorlagen">Vorlagen (Verträge, Formulare, QM-Checklisten) und daraus generierte, digital unterschreibbare Dokumente pro Kunde/Mitarbeiter.</Topic>
        <Topic title="QM & Personal">
          Eingereichte QM-/HR-Vorgänge (teils anonym möglich). Personalakte je Mitarbeiter: Beschäftigungs-
          Historie, Probezeit (mit automatischer Erinnerung), <strong>Onboarding-Checkliste</strong> (wird beim
          ersten Beschäftigungs-Eintrag automatisch vorbefüllt, danach frei anpassbar).
        </Topic>
        <Topic title="SEO">Meta-Titel/-Beschreibung, Keywords, Social-Preview-Bild, Google/Bing-Verifizierung, Analytics-ID, Indexierbarkeit.</Topic>
        <Topic title="Team & Rechte">
          Abteilungen, Positionen (mit granularer Rechte-Matrix — "Vollzugriff" ist ein Sicherheitsnetz gegen
          versehentliches Aussperren), Teams, Mitarbeiterzuordnung. Unten ein <strong>Aktivitätsprotokoll</strong>{" "}
          (Audit-Log): wer hat wann sensible Änderungen vorgenommen (Rechte, Konten, Wartungsmodus, Zahlungs-
          /SEO-/Vorlaufzeit-/Google-Sync-Einstellungen u. a.).
        </Topic>
        <Topic title="Einstellungen">
          Zentrale Konfiguration: Wartungsmodus, Banner, Empfehlungsprogramm, Wiedervorlage-Mail, Vor-Shooting-
          Erinnerung, Wetter-Check, Bewertungs- & Stammkunden-Prämien, Feedback-Anfrage, Steuerrücklage-Prozent,
          Kilometerpauschale, Mahnstufen-Automatik, <strong>Mindestvorlaufzeit für Termine</strong>,{" "}
          <strong>Google-Kalender-Löschsync</strong> (opt-in), Datensicherung, Social-Links, Rechtstexte,
          Online-Zahlung, Rechnungs-/Geschäftsdaten.
        </Topic>
      </Category>

      <Category id="automatisierung" title="Automatisierungen (Cron-Jobs)">
        <Topic title="Was läuft wann automatisch">
          <ul className="list-disc pl-5 flex flex-col gap-1">
            <li>Datenbank-Sicherung — täglich</li>
            <li>Feedback-Anfrage an Kunden — täglich</li>
            <li>Google-Kalender-Sync (Push + Zeit-/Löschungs-Rückholung) — alle 2 Stunden</li>
            <li>Vor-Shooting-Erinnerung — alle 2 Stunden (Vorlauf-Fenster einstellbar)</li>
            <li>Probezeit-Erinnerung — täglich</li>
            <li>Wiedervorlage-Mail (lange nicht gebucht) — täglich</li>
            <li>Mahnstufen-Eskalation — täglich (standardmäßig deaktiviert)</li>
            <li>Gutschein-Ablauf-Prüfung — täglich</li>
            <li>Wetter-Check für Outdoor-Shootings — alle 2 Stunden</li>
            <li>Jahresrückblick-Mail — täglich geprüft, verschickt aber nur im Dezember</li>
          </ul>
        </Topic>
      </Category>

      <Category id="sicherheit" title="Sicherheit & Datenschutz">
        <Topic title="Login-Schutz">5 Fehlversuche sperren ein Konto für 15 Minuten (pro Konto, nicht pro IP).</Topic>
        <Topic title="Zwei-Faktor-Login">Für Team UND Kunden einrichtbar, per Authenticator-App, mit Recovery-Codes.</Topic>
        <Topic title="Kopierschutz">Rechtsklick/Kontextmenü, Textauswahl, Bild-Ziehen u. a. sind auf Kundenfotos und Teilen-Links deaktiviert (Abschreckung, kein echter Kopierschutz).</Topic>
        <Topic title="Seitenaufrufe-Tracking">Komplett anonym, ohne Cookies oder IP-Speicherung — nur Pfad, Sprache, Datum.</Topic>
        <Topic title="Foto-Freigabe">
          Zweistufig: Ordner-Freigabe (Ordner überhaupt sichtbar) und Foto-Freigabe (einzelnes Foto zum Download
          freigegeben) — beides serverseitig geprüft, auch bei öffentlichen Teilen-Links.
        </Topic>
        <Topic title="Aktivitätsprotokoll">Sensible Team-/Konto-/Einstellungsänderungen werden protokolliert, einsehbar unter Team & Rechte.</Topic>
      </Category>
    </main>
  );
}