Calbook/components/admin/header-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 { SETTING_KEYS } from "@/lib/constants";
import { toast } from "sonner";

const headerSchema = z.object({
  frontend_header_text: z
    .string()
    .trim()
    .min(1, "Bitte einen Header-Text eingeben")
    .max(80, "Maximal 80 Zeichen"),
  frontend_header_logo_url: z
    .string()
    .trim()
    .refine(
      (value) => value === "" || /^https?:\/\//i.test(value),
      "Bitte eine gültige URL mit http:// oder https:// eingeben"
    )
});

type HeaderFormValues = z.infer<typeof headerSchema>;

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

export function HeaderSettingsPanel() {
  const [loading, setLoading] = useState(true);

  const form = useForm<HeaderFormValues>({
    resolver: zodResolver(headerSchema),
    defaultValues: {
      frontend_header_text: "Gespräch",
      frontend_header_logo_url: ""
    }
  });

  const headerText = form.watch("frontend_header_text");
  const headerLogoUrl = form.watch("frontend_header_logo_url");

  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({
          frontend_header_text: settings[SETTING_KEYS.FRONTEND_HEADER_TEXT] ?? "Gespräch",
          frontend_header_logo_url:
            settings[SETTING_KEYS.FRONTEND_HEADER_LOGO_URL] ?? ""
        });
      } catch {
        toast.error("Header-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.FRONTEND_HEADER_TEXT]: values.frontend_header_text.trim(),
            [SETTING_KEYS.FRONTEND_HEADER_LOGO_URL]:
              values.frontend_header_logo_url.trim()
          }
        })
      });

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

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

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

  return (
    <Card>
      <CardHeader>
        <CardTitle>Frontend-Header</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <form className="grid gap-4 md:grid-cols-2" onSubmit={onSubmit}>
          <div className="space-y-2 md:col-span-2">
            <Label>Header-Text</Label>
            <Input {...form.register("frontend_header_text")} placeholder="Gespräch" />
            {form.formState.errors.frontend_header_text ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.frontend_header_text.message}
              </p>
            ) : null}
          </div>

          <div className="space-y-2 md:col-span-2">
            <Label>Logo-URL (optional)</Label>
            <Input
              {...form.register("frontend_header_logo_url")}
              placeholder="https://example.com/logo.png"
            />
            <p className="text-xs text-muted-foreground">
              Leer lassen, um das Standard-Icon zu verwenden.
            </p>
            {form.formState.errors.frontend_header_logo_url ? (
              <p className="text-xs text-red-600">
                {form.formState.errors.frontend_header_logo_url.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="flex items-center gap-3 rounded-2xl bg-white p-4">
            {headerLogoUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={headerLogoUrl}
                alt="Logo Vorschau"
                className="h-10 w-10 rounded-xl border border-slate-200 object-cover bg-white"
              />
            ) : (
              <div className="h-10 w-10 rounded-xl bg-indigo-600" />
            )}
            <p className="text-xl font-bold text-slate-900">
              {(headerText || "Gespräch").trim() || "Gespräch"}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}