'use client';

/**
 * Modal zum Bearbeiten eines Kalenders (PATCH /api/calendars/[id])
 * inkl. Mitgliederverwaltung (DB-Suche) und Reservierungsregeln.
 *
 * Einstellungen:
 *  - Titel, Beschreibung, Zeitzone, Aktiv-Status
 *  - Maximale Reservierungsdauer (15-Minuten-Schritte, 0 = unbegrenzt)
 *  - Sichtbarkeit von Titel/Notizen fremder Reservierungen fuer Member
 *  - Mitglieder per E-Mail-Suche hinzufuegen/entfernen
 *
 * Selbststaendig: fuehrt den PATCH selbst aus und aktualisiert die
 * Seite per router.refresh(). Wird von der Kalenderverwaltung und vom
 * Dashboard verwendet (DRY). Schliessen via X-Icon, ESC oder
 * Hintergrund-Klick; waehrend des Speicherns ist Schliessen blockiert.
 */
import { appFetch } from '@/lib/client-fetch';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button, ErrorMessage, Input, Label } from '@/components/ui/ui';
import { ModalShell } from '@/components/ui/ModalShell';
import { MemberSection } from '@/components/admin/MemberSection';
import type { ManagedCalendar } from '@/components/admin/CalendarManager';

/** Auswahl der maximalen Reservierungsdauer in Minuten. */
const MAX_DURATION_OPTIONS = [
  { value: 30, label: '30 Minuten' },
  { value: 45, label: '45 Minuten' },
  { value: 60, label: '1 Stunde' },
  { value: 90, label: '1,5 Stunden' },
  { value: 120, label: '2 Stunden' },
  { value: 180, label: '3 Stunden' },
  { value: 240, label: '4 Stunden' },
  { value: 480, label: '8 Stunden' },
  { value: 720, label: '12 Stunden' },
  { value: 1440, label: '24 Stunden' },
  { value: 2880, label: '48 Stunden' },
  { value: 4320, label: '72 Stunden' },
  { value: 0, label: 'Unbegrenzt' },
] as const;

export function EditCalendarModal({
  calendar,
  isAdmin = true,
  onClose,
}: {
  calendar: ManagedCalendar;
  /** Nur Admins sehen Einstellungen und Mitgliederverwaltung. */
  isAdmin?: boolean;
  onClose: () => void;
}) {
  const router = useRouter();
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  /** Sendet die Formularwerte an PATCH /api/calendars/[id]. */
  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsPending(true);
    setError(null);

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

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

  return (
    <ModalShell
      title="Kalender verwalten"
      ariaLabel={`Kalender ${calendar.title} verwalten`}
      isPending={isPending}
      size="lg"
      onClose={onClose}
    >
      <form id="edit-calendar-form" onSubmit={handleSubmit} className="space-y-4">
        <ErrorMessage message={error} />
        <div>
          <Label htmlFor="edit-calendar-title">Titel</Label>
          <Input
            id="edit-calendar-title"
            name="title"
            type="text"
            required
            maxLength={120}
            defaultValue={calendar.title}
          />
        </div>
        <div>
          <Label htmlFor="edit-calendar-description">Beschreibung</Label>
          <Input
            id="edit-calendar-description"
            name="description"
            type="text"
            maxLength={2000}
            defaultValue={calendar.description ?? ''}
          />
        </div>
        <div>
          <Label htmlFor="edit-calendar-timezone">Zeitzone</Label>
          <Input
            id="edit-calendar-timezone"
            name="timezone"
            type="text"
            required
            maxLength={64}
            defaultValue={calendar.timezone}
          />
        </div>
        <div className="flex items-center gap-2">
          <input
            id="edit-calendar-is-active"
            name="isActive"
            type="checkbox"
            defaultChecked={calendar.isActive}
            className="h-4 w-4"
          />
          <Label htmlFor="edit-calendar-is-active">Kalender aktiv</Label>
        </div>

        {/* Reservierungsregeln. */}
        <fieldset className="rounded-md border border-slate-200 p-4 dark:border-slate-700">
          <legend className="px-1 text-sm font-semibold">Reservierungsregeln</legend>
          <div className="mb-3">
            <Label htmlFor="edit-calendar-max-duration">
              Maximale Reservierungsdauer
            </Label>
            <select
              id="edit-calendar-max-duration"
              name="maxReservationMinutes"
              defaultValue={calendar.maxReservationMinutes}
              className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
            >
              {MAX_DURATION_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>
          <div className="flex items-center gap-2">
            <input
              id="edit-calendar-show-title"
              name="showTitleToMembers"
              type="checkbox"
              defaultChecked={calendar.showTitleToMembers}
              className="h-4 w-4"
            />
            <Label htmlFor="edit-calendar-show-title">
              Member sehen Titel aller Reservierungen
            </Label>
          </div>
          <div className="mt-2 flex items-center gap-2">
            <input
              id="edit-calendar-show-notes"
              name="showNotesToMembers"
              type="checkbox"
              defaultChecked={calendar.showNotesToMembers}
              className="h-4 w-4"
            />
            <Label htmlFor="edit-calendar-show-notes">
              Member sehen Notizen aller Reservierungen
            </Label>
          </div>
          <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
            Ohne Haken sehen Member nur ihre eigenen Titel/Notizen; fremde
            Reservierungen erscheinen als &quot;Gebucht&quot;.
          </p>
        </fieldset>

        <p className="text-xs text-slate-500 dark:text-slate-400">
          {calendar.memberCount} Mitglieder · {calendar.reservationCount} Reservierungen
        </p>
      </form>

      {isAdmin && (
        <div className="mt-6 border-t border-slate-200 pt-4 dark:border-slate-700">
          <MemberSection calendarId={calendar.id} />
        </div>
      )}

      {/* Aktionsleiste unten im Modal (ausserhalb des Formulars; der
          Speichern-Button ist via form-Attribut mit dem Formular
          verbunden und loest dessen Submit aus). */}
      <div className="mt-6 flex justify-end gap-2 border-t border-slate-200 pt-4 dark:border-slate-700">
        <Button type="button" variant="secondary" disabled={isPending} onClick={onClose}>
          Abbrechen
        </Button>
        <Button type="submit" form="edit-calendar-form" disabled={isPending}>
          {isPending ? 'Speichern …' : 'Speichern'}
        </Button>
      </div>
    </ModalShell>
  );
}