'use client';

/**
 * Dashboard-Kalenderraster (Client): Karten mit Kalender-Modal und
 * Bearbeiten-Modal.
 *
 *  - Klick auf die Karte oeffnet das Kalender-Modal (Uebersicht mit
 *    Tag/Woche/Monat und Reservierungen).
 *  - Stift-Icon oeffnet das Bearbeiten-Modal (Einstellungen) - nur
 *    fuer berechtigte Benutzer (Admins, siehe canManageCalendar).
 *  - Beide Modals sind per X-Icon, ESC und Hintergrund-Klick schliessbar.
 */
import { useState } from 'react';
import { CalendarCard, getCardGradient } from '@/components/calendar/CalendarCard';
import { CalendarModal } from '@/components/calendar/CalendarModal';
import { EditCalendarModal } from '@/components/admin/EditCalendarModal';
import type { ManagedCalendar } from '@/components/admin/CalendarManager';

export function DashboardCalendarGrid({
  calendars,
  currentUserId,
  isAdmin,
}: {
  calendars: ManagedCalendar[];
  currentUserId: string;
  isAdmin: boolean;
}) {
  /** Kalender, dessen Uebersicht gerade offen ist (null = geschlossen). */
  const [openCalendar, setOpenCalendar] = useState<ManagedCalendar | null>(null);
  /** Kalender, dessen Einstellungen gerade bearbeitet werden. */
  const [editingCalendar, setEditingCalendar] = useState<ManagedCalendar | null>(null);

  return (
    <>
      <ul className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {calendars.map((calendar, index) => (
          <li key={calendar.id}>
            <CalendarCard
              title={calendar.title}
              subtitle={calendar.isOwn ? 'Mein Kalender' : calendar.ownerEmail}
              isActive={calendar.isActive}
              memberCount={calendar.memberCount}
              href={`/calendar/${calendar.id}`}
              linkLabel={`Kalender ${calendar.title} oeffnen`}
              gradient={getCardGradient(index)}
              editLabel={
                isAdmin ? `Kalender ${calendar.title} bearbeiten` : undefined
              }
              onEdit={
                isAdmin
                  ? () => {
                      setOpenCalendar(null);
                      setEditingCalendar(calendar);
                    }
                  : undefined
              }
              onOpen={() => {
                setEditingCalendar(null);
                setOpenCalendar(calendar);
              }}
            />
          </li>
        ))}
      </ul>

      {openCalendar && (
        <CalendarModal
          key={openCalendar.id}
          calendarId={openCalendar.id}
          calendarTitle={openCalendar.title}
          currentUserId={currentUserId}
          isAdmin={isAdmin}
          maxReservationMinutes={openCalendar.maxReservationMinutes}
          onClose={() => setOpenCalendar(null)}
        />
      )}

      {editingCalendar && (
        <EditCalendarModal
          key={editingCalendar.id}
          calendar={editingCalendar}
          onClose={() => setEditingCalendar(null)}
        />
      )}
    </>
  );
}