syncova-policies/components/site-pages-form.tsx

"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 { 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`,
}

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>
            Impressum, Datenschutzerklärung und Erklärung zur Barrierefreiheit
            des Portals selbst. Sie erscheinen in der Fußzeile der öffentlichen
            Seiten – ein leer gelassener Text nimmt die 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>
              {SITE_PAGES.map((key) => (
                <TabsTrigger key={key} value={key}>
                  {key === "accessibility"
                    ? "Barrierefreiheit"
                    : SITE_PAGE_META[key].title}
                </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>

                  <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>
  )
}