'use client';

/** Formular zum Bearbeiten/Deaktivieren eines Kalenders (Admin). */
import { appFetch } from '@/lib/client-fetch';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button, Card, ErrorMessage, Input, Label } from '@/components/ui/ui';

export function EditCalendarForm({
  calendarId,
  initialTitle,
  initialDescription,
  initialTimezone,
  initialIsActive,
}: {
  calendarId: string;
  initialTitle: string;
  initialDescription: string;
  initialTimezone: string;
  initialIsActive: boolean;
}) {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(true);
    setError(null);

    const formData = new FormData(event.currentTarget);
    try {
      const response = await appFetch(`/api/calendars/${calendarId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          title: formData.get('title'),
          description: formData.get('description') || null,
          timezone: formData.get('timezone'),
          isActive: formData.get('isActive') === 'on',
        }),
      });

      if (!response.ok) {
        const data = (await response.json()) as { error?: string };
        setError(data.error ?? 'Speichern fehlgeschlagen.');
        return;
      }
      router.refresh();
    } catch {
      setError('Netzwerkfehler. Bitte erneut versuchen.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <Card>
      <h2 className="mb-4 text-lg font-semibold">Kalender bearbeiten</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <ErrorMessage message={error} />
        <div>
          <Label htmlFor="title">Titel</Label>
          <Input
            id="title"
            name="title"
            type="text"
            required
            maxLength={120}
            defaultValue={initialTitle}
          />
        </div>
        <div>
          <Label htmlFor="description">Beschreibung</Label>
          <Input
            id="description"
            name="description"
            type="text"
            maxLength={2000}
            defaultValue={initialDescription}
          />
        </div>
        <div>
          <Label htmlFor="timezone">Zeitzone</Label>
          <Input
            id="timezone"
            name="timezone"
            type="text"
            required
            maxLength={64}
            defaultValue={initialTimezone}
          />
        </div>
        <div className="flex items-center gap-2">
          <input
            id="isActive"
            name="isActive"
            type="checkbox"
            defaultChecked={initialIsActive}
            className="h-4 w-4"
          />
          <Label htmlFor="isActive">Kalender aktiv</Label>
        </div>
        <Button disabled={busy}>{busy ? 'Speichern …' : 'Speichern'}</Button>
      </form>
    </Card>
  );
}