"use client"

import { useEffect, useState } from "react"
import { AlertCircle, ExternalLink } from "lucide-react"
import Link from "next/link"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MarkdownInput } from "@/components/markdown-input"
import { updateSitePages, useSitePages } from "@/hooks/use-site-pages"
import { ApiError } from "@/lib/api"
import {
  EMPTY_SITE_PAGES,
  SITE_PAGES,
  SITE_PAGE_META,
  SitePageKey,
  SitePagesContent,
} from "@/lib/site-pages"

/**
 * Vorlagen als Platzhalter. Sie werden nicht gespeichert, sondern zeigen nur,
 * welche Angaben die jeweilige Seite enthalten muss.
 */
const placeholders: Record<SitePageKey, string> = {
  imprint: `## Angaben gemäß § 5 DDG

**Amt Musterstadt**
Musterstraße 1
12345 Musterstadt

**Vertreten durch:** Amtsvorsteher/in Vorname Nachname

**Kontakt**
Telefon: 01234 5678-0
E-Mail: info@amt-musterstadt.de

**Zuständige Aufsichtsbehörde**
Name und Anschrift der Rechtsaufsicht

**Verantwortlich für den Inhalt:** Vorname Nachname, Anschrift`,

  privacy: `## Datenschutzerklärung für dieses Portal

Diese Erklärung betrifft die Verarbeitung Ihrer Daten beim **Besuch dieses
Portals**. Die Merkblätter zu den einzelnen Verwaltungsverfahren finden Sie in
der Übersicht.

### Verantwortlicher
Name, Anschrift, Kontakt

### Datenschutzbeauftragte/r
Name, Anschrift, E-Mail

### Server-Protokolldaten
Beim Aufruf werden IP-Adresse, Zeitpunkt, aufgerufene Seite, übertragene
Datenmenge und Browserkennung protokolliert.
*Zweck:* technischer Betrieb und Abwehr von Angriffen
*Rechtsgrundlage:* Art. 6 Abs. 1 lit. e DSGVO i. V. m. Landesrecht
*Speicherdauer:* z. B. 7 Tage

### Cookies
Ohne Anmeldung setzt das Portal keine Cookies. Im Admin-Bereich wird ein
technisch notwendiges Sitzungs-Cookie verwendet.

### Ihre Rechte
Auskunft (Art. 15), Berichtigung (Art. 16), Löschung (Art. 17), Einschränkung
(Art. 18), Widerspruch (Art. 21) sowie Beschwerde bei der Aufsichtsbehörde
(Art. 77 DSGVO).`,

  accessibility: `## Erklärung zur Barrierefreiheit

Diese Erklärung gilt für die Website **datenschutz.beispiel.de**.

### Stand der Vereinbarkeit mit den Anforderungen
Diese Website ist mit der BITV 2.0 *[vollständig / teilweise / nicht]*
vereinbar.

### Nicht barrierefreie Inhalte
Hier die bekannten Einschränkungen und deren Begründung auflisten.

### Erstellung dieser Erklärung
Diese Erklärung wurde am TT.MM.JJJJ erstellt.
Grundlage war eine *[Selbstbewertung / Prüfung durch Dritte]*.
Letzte Überprüfung: TT.MM.JJJJ

### Barrieren melden – Kontakt
Sie können uns Mängel bei der Barrierefreiheit mitteilen und Informationen in
barrierefreier Form anfordern:
Name, E-Mail, Telefon

### Schlichtungsverfahren
Wenn wir auf Ihre Meldung nicht zufriedenstellend reagieren, können Sie die
Schlichtungsstelle nach § 16 BGG anrufen:
Anschrift und Kontakt der zuständigen Schlichtungsstelle`,

  easyLanguage: `## Willkommen

Das hier ist die Internet-Seite vom Amt Musterstadt.
Hier steht: Was macht das Amt mit Ihren Daten?

## Was finden Sie auf dieser Seite?

Sie finden hier eine Liste.
In der Liste stehen viele Themen.
Zum Beispiel: Bau-Antrag. Oder: Wohn-Geld.
Zu jedem Thema gibt es einen Text.
In dem Text steht: Welche Daten braucht das Amt?
Und: Wie lange speichert das Amt die Daten?

## Wie finden Sie ein Thema?

Oben auf der Seite ist ein Such-Feld.
Dort können Sie ein Wort eintippen.
Dann zeigt die Seite nur noch passende Themen.
Sie können auch auf ein Thema in der Liste klicken.

## Barriere-Freiheit

Barriere-frei heißt: Alle Menschen können die Seite benutzen.
Wir arbeiten daran, dass die Seite barriere-frei wird.
Manche Sachen sind noch nicht barriere-frei.
Sie können uns das melden.
Schreiben Sie an: *[E-Mail-Adresse eintragen]*

*Dieser Text muss vor der Veröffentlichung von einer Prüf-Gruppe
gegengelesen werden. Das ist bei Leichter Sprache üblich.*`,

  signLanguage: `## Informationen in Deutscher Gebärdensprache

Das Video oben erklärt:
- die wesentlichen Inhalte dieses Portals
- wie die Navigation funktioniert
- die wesentlichen Inhalte der Erklärung zur Barrierefreiheit

Die Adresse des Videos tragen Sie oben in das Feld ein; es erscheint dann
über diesem Text.

### Kontakt

Fragen zur Barrierefreiheit richten Sie bitte an:
*[Kontaktdaten eintragen]*`,
}

interface SitePagesFormProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

/**
 * Pflegt Impressum, Datenschutzerklärung und Erklärung zur Barrierefreiheit.
 * Ein leer gelassener Text nimmt die betreffende Seite vom Netz.
 */
export function SitePagesForm({ open, onOpenChange }: SitePagesFormProps) {
  const { pages, isLoading } = useSitePages()

  const [formData, setFormData] = useState<SitePagesContent>(EMPTY_SITE_PAGES)
  const [errors, setErrors] = useState<string[]>([])
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [tab, setTab] = useState<SitePageKey>("imprint")

  // Beim Öffnen den gespeicherten Stand laden
  useEffect(() => {
    if (!open || isLoading) return

    setErrors([])
    setTab("imprint")
    setFormData({ ...pages })
    // `pages` bewusst nicht als Abhängigkeit: sonst würden Eingaben beim
    // Hintergrund-Refresh von SWR überschrieben.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, isLoading])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    setErrors([])
    setIsSubmitting(true)

    try {
      await updateSitePages(formData)
      toast.success("Seiteninhalte gespeichert")
      onOpenChange(false)
    } catch (error) {
      const details =
        error instanceof ApiError && error.details.length > 0
          ? error.details
          : [error instanceof Error ? error.message : "Fehler beim Speichern"]
      setErrors(details)
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[88vh] sm:max-w-4xl">
        <DialogHeader>
          <DialogTitle>Rechtliche Seiten</DialogTitle>
          <DialogDescription>
            Die eigenständigen Seiten des Portals: drei rechtliche Pflichtseiten
            sowie Leichte Sprache und Gebärdensprache nach § 4 BITV 2.0. Sie
            erscheinen in der Fußzeile der öffentlichen Seiten – ein leer
            gelassener Text nimmt die betreffende Seite vom Netz.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col gap-4">
          <Tabs
            value={tab}
            onValueChange={(value) => setTab(value as SitePageKey)}
            className="min-h-0 flex-1 gap-3"
          >
            <TabsList className="h-auto flex-wrap">
              {SITE_PAGES.map((key) => (
                <TabsTrigger key={key} value={key}>
                  {SITE_PAGE_META[key].short}
                </TabsTrigger>
              ))}
            </TabsList>

            {errors.length > 0 && (
              <div className="flex gap-2.5 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
                <AlertCircle className="mt-0.5 size-4 shrink-0" />
                <ul className="space-y-1">
                  {errors.map((error, index) => (
                    <li key={index}>{error}</li>
                  ))}
                </ul>
              </div>
            )}

            <DialogBody className="pt-1">
              {SITE_PAGES.map((key) => (
                <TabsContent key={key} value={key} className="space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
                    <span>{SITE_PAGE_META[key].hint}</span>
                    {formData[key].trim() && (
                      <Button variant="ghost" size="sm" asChild>
                        <Link href={SITE_PAGE_META[key].path} target="_blank">
                          <ExternalLink />
                          {SITE_PAGE_META[key].path}
                        </Link>
                      </Button>
                    )}
                  </div>

                  {/* Das Video steht in eigenen Feldern, nicht im Markdown:
                      Der Markdown-Prozessor filtert HTML weg. */}
                  {key === "signLanguage" && (
                    <div className="grid gap-3 rounded-lg border bg-muted/30 p-3 sm:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="signLanguageVideo" className="gap-1">
                          Adresse des Videos
                        </Label>
                        <Input
                          id="signLanguageVideo"
                          value={formData.signLanguageVideo}
                          onChange={(e) =>
                            setFormData((prev) => ({
                              ...prev,
                              signLanguageVideo: e.target.value,
                            }))
                          }
                          placeholder="/videos/gebaerdensprache.mp4"
                        />
                        <p className="text-xs text-muted-foreground">
                          Videodatei auf dem eigenen Server (beginnt mit /) oder
                          Player-Adresse eines freigegebenen Anbieters. Derzeit
                          freigegeben: alangu.de. Andere Videoportale sind
                          bewusst gesperrt – sie übertragen Besucherdaten an
                          Dritte.
                        </p>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="signLanguageCaptions" className="gap-1">
                          Untertiteldatei (optional)
                        </Label>
                        <Input
                          id="signLanguageCaptions"
                          value={formData.signLanguageCaptions}
                          onChange={(e) =>
                            setFormData((prev) => ({
                              ...prev,
                              signLanguageCaptions: e.target.value,
                            }))
                          }
                          placeholder="/videos/gebaerdensprache.vtt"
                        />
                        <p className="text-xs text-muted-foreground">
                          WebVTT-Datei, nur bei einer eigenen Videodatei nötig
                          (WCAG 1.2.2). Ein Player-Anbieter bringt seine
                          Untertitel selbst mit.
                        </p>
                      </div>
                    </div>
                  )}

                  <MarkdownInput
                    id={`site-page-${key}`}
                    label={SITE_PAGE_META[key].title}
                    value={formData[key]}
                    onChange={(value) =>
                      setFormData((prev) => ({ ...prev, [key]: value }))
                    }
                    placeholder={placeholders[key]}
                    rows={20}
                  />
                </TabsContent>
              ))}
            </DialogBody>
          </Tabs>

          <DialogFooter className="border-t pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isSubmitting}
            >
              Abbrechen
            </Button>
            <Button type="submit" disabled={isSubmitting || isLoading}>
              {isSubmitting ? "Speichern…" : "Seiteninhalte speichern"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}