Calbook/components/admin/footer-settings-panel.tsx

"use client";

import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { PublicFooter } from "@/components/layout/public-footer";
import { SETTING_KEYS } from "@/lib/constants";
import { toast } from "sonner";

function isValidFooterUrl(value: string) {
  if (!value) return true;
  if (value.startsWith("/")) return true;
  return /^https?:\/\//i.test(value);
}

const footerSchema = z.object({
  footer_privacy_label: z.string().trim().max(60, "Maximal 60 Zeichen"),
  footer_privacy_url: z
    .string()
    .trim()
    .refine(
      isValidFooterUrl,
      "URL muss mit /, http:// oder https:// beginnen"
    ),
  footer_imprint_label: z.string().trim().max(60, "Maximal 60 Zeichen"),
  footer_imprint_url: z
    .string()
    .trim()
    .refine(
      isValidFooterUrl,
      "URL muss mit /, http:// oder https:// beginnen"
    ),
  footer_copyright_text: z
    .string()
    .trim()
    .min(1, "Bitte Copyright-Text eingeben")
    .max(180, "Maximal 180 Zeichen")
});

type FooterFormValues = z.infer<typeof footerSchema>;

type SettingsResponse = {
  settings?: Record<string, string>;
};

export function FooterSettingsPanel() {
  const [loading, setLoading] = useState(true);
  const [companyName, setCompanyName] = useState("CalBook");

  const form = useForm<FooterFormValues>({
    resolver: zodResolver(footerSchema),
    defaultValues: {
      footer_privacy_label: "Datenschutz",
      footer_privacy_url: "/datenschutz",
      footer_imprint_label: "Impressum",
      footer_imprint_url: "/impressum",
      footer_copyright_text: "© {{year}} {{companyName}}"
    }
  });

  const privacyLabel = form.watch("footer_privacy_label");
  const privacyUrl = form.watch("footer_privacy_url");
  const imprintLabel = form.watch("footer_imprint_label");
  const imprintUrl = form.watch("footer_imprint_url");
  const copyrightText = form.watch("footer_copyright_text");

  useEffect(() => {
    async function loadSettings() {
      setLoading(true);
      try {
        const response = await fetch("/api/admin/einstellungen", {
          cache: "no-store"
        });
        const data = (await response.json()) as SettingsResponse;
        const settings = data.settings ?? {};
        form.reset({
          footer_privacy_label:
            settings[SETTING_KEYS.FOOTER_PRIVACY_LABEL] ?? "Datenschutz",
          footer_privacy_url:
            settings[SETTING_KEYS.FOOTER_PRIVACY_URL] ?? "/datenschutz",
          footer_imprint_label:
            settings[SETTING_KEYS.FOOTER_IMPRINT_LABEL] ?? "Impressum",
          footer_imprint_url:
            settings[SETTING_KEYS.FOOTER_IMPRINT_URL] ?? "/impressum",
          footer_copyright_text:
            settings[SETTING_KEYS.FOOTER_COPYRIGHT_TEXT] ??
            "© {{year}} {{companyName}}"
        });
        setCompanyName(settings[SETTING_KEYS.COMPANY_NAME] ?? "CalBook");
      } catch {
        toast.error("Footer-Einstellungen konnten nicht geladen werden.");
      } finally {
        setLoading(false);
      }
    }

    void loadSettings();
  }, [form]);

  const onSubmit = form.handleSubmit(
    async (values) => {
      const res = await fetch("/api/admin/einstellungen", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          values: {
            [SETTING_KEYS.FOOTER_PRIVACY_LABEL]: values.footer_privacy_label.trim(),
            [SETTING_KEYS.FOOTER_PRIVACY_URL]: values.footer_privacy_url.trim(),
            [SETTING_KEYS.FOOTER_IMPRINT_LABEL]: values.footer_imprint_label.trim(),
            [SETTING_KEYS.FOOTER_IMPRINT_URL]: values.footer_imprint_url.trim(),
            [SETTING_KEYS.FOOTER_COPYRIGHT_TEXT]:
              values.footer_copyright_text.trim()
          }
        })
      });

      if (!res.ok) {
        toast.error("Footer-Einstellungen konnten nicht gespeichert werden.");
        return;
      }

      toast.success("Footer-Einstellungen gespeichert.");
    },
    () => {
      toast.error("Bitte prüfe die Eingaben.");
    }
  );

  if (loading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-64" />
        <Skeleton className="h-40" />
      </div>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Frontend-Footer</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <form className="grid gap-4 md:grid-cols-2" onSubmit={onSubmit}>
          <div className="space-y-2">
            <Label>Link-Text Datenschutz</Label>
            <Input {...form.register("footer_privacy_label")} placeholder="Datenschutz" />
            {form.formState.errors.footer_privacy_label ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.footer_privacy_label.message}
              </p>
            ) : null}
          </div>
          <div className="space-y-2">
            <Label>Link-Ziel Datenschutz</Label>
            <Input {...form.register("footer_privacy_url")} placeholder="/datenschutz" />
            {form.formState.errors.footer_privacy_url ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.footer_privacy_url.message}
              </p>
            ) : null}
          </div>
          <div className="space-y-2">
            <Label>Link-Text Impressum</Label>
            <Input {...form.register("footer_imprint_label")} placeholder="Impressum" />
            {form.formState.errors.footer_imprint_label ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.footer_imprint_label.message}
              </p>
            ) : null}
          </div>
          <div className="space-y-2">
            <Label>Link-Ziel Impressum</Label>
            <Input {...form.register("footer_imprint_url")} placeholder="/impressum" />
            {form.formState.errors.footer_imprint_url ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.footer_imprint_url.message}
              </p>
            ) : null}
          </div>
          <div className="space-y-2 md:col-span-2">
            <Label>Copyright-Text</Label>
            <Input
              {...form.register("footer_copyright_text")}
              placeholder="© {{year}} {{companyName}}"
            />
            <p className="text-xs text-muted-foreground">
              Platzhalter: <code>{"{{year}}"}</code>, <code>{"{{companyName}}"}</code>
            </p>
            {form.formState.errors.footer_copyright_text ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.footer_copyright_text.message}
              </p>
            ) : null}
          </div>
          <div className="md:col-span-2">
            <Button type="submit" className="tap-target" disabled={form.formState.isSubmitting}>
              Speichern
            </Button>
          </div>
        </form>

        <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
          <p className="mb-3 text-sm font-medium text-slate-600">Live-Vorschau</p>
          <div className="rounded-2xl border border-slate-200 bg-white px-4">
            <PublicFooter
              companyName={companyName}
              privacyLabel={privacyLabel}
              privacyHref={privacyUrl}
              imprintLabel={imprintLabel}
              imprintHref={imprintUrl}
              copyrightTemplate={copyrightText}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}