"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Calendar, Clock, Pencil, Plus, Search, Sparkles, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { SavedViewsBar } from "@/components/tasks/saved-views-bar";
import { TimeBlockingPanel } from "@/components/calendar/time-blocking-panel";
import {
  CalendarHeader,
  type CalendarViewMode,
} from "@/components/calendar/calendar-header";
import { MonthView } from "@/components/calendar/month-view";
import { WeekView } from "@/components/calendar/week-view";
import { DayView } from "@/components/calendar/day-view";
import { EventForm, type EventFormData } from "@/components/calendar/event-form";
import {
  MeetingTemplateForm,
  type MeetingTemplateFormData,
} from "@/components/calendar/meeting-template-form";
import { useEvents, type CalendarItem } from "@/hooks/use-events";
import { useMeetingTemplates } from "@/hooks/use-meeting-templates";
import { useSavedViews } from "@/hooks/use-saved-views";
import { useTeamPermissions } from "@/hooks/use-team-permissions";
import { useTeams } from "@/hooks/use-teams";
import {
  getMonthRange,
  getWeekRange,
} from "@/lib/calendar-utils";
import type { CalendarEvent, MeetingTemplate } from "@/types";

type CalendarItemTypeFilter = "" | "event" | "task";

type CalendarFilterValues = {
  search: string;
  itemType: CalendarItemTypeFilter;
  viewMode: CalendarViewMode;
};

const EMPTY_FILTERS: CalendarFilterValues = {
  search: "",
  itemType: "",
  viewMode: "month",
};

const BUILT_IN_VIEWS = [
  { id: "all", label: "All calendar", filters: {} },
  { id: "events", label: "Events", filters: { itemType: "event" } },
  { id: "deadlines", label: "Deadlines", filters: { itemType: "task" } },
  { id: "week", label: "Week plan", filters: { viewMode: "week" } },
] satisfies Array<{ id: string; label: string; filters: Partial<CalendarFilterValues> }>;

function normalizeCalendarFilters(value: Record<string, unknown>): CalendarFilterValues {
  return {
    search: typeof value.search === "string" ? value.search : EMPTY_FILTERS.search,
    itemType:
      value.itemType === "event" || value.itemType === "task"
        ? value.itemType
        : EMPTY_FILTERS.itemType,
    viewMode:
      value.viewMode === "week"
        ? "week"
        : value.viewMode === "day"
        ? "day"
        : EMPTY_FILTERS.viewMode,
  };
}

function getConflictingTimeBlocks(date: Date, startMinutes: number, endMinutes: number): string[] {
  try {
    const raw = localStorage.getItem("mindavio_time_blocks");
    if (!raw) return [];
    const blocks = JSON.parse(raw) as Array<{
      id: string;
      title: string;
      date: string;
      startTime: string;
      endTime: string;
    }>;
    const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
    return blocks
      .filter((b) => b.date === dateStr)
      .filter((b) => {
        const [bSH, bSM] = b.startTime.split(":").map(Number);
        const [bEH, bEM] = b.endTime.split(":").map(Number);
        const bStart = bSH * 60 + bSM;
        const bEnd = bEH * 60 + bEM;
        return startMinutes < bEnd && endMinutes > bStart;
      })
      .map((b) => b.title);
  } catch {
    return [];
  }
}

function checkEventConflicts(startIso: string, endIso: string | null): string[] {
  if (!startIso) return [];
  const start = new Date(startIso);
  const end = endIso ? new Date(endIso) : new Date(start.getTime() + 3_600_000);
  const startMin = start.getHours() * 60 + start.getMinutes();
  const endMin = end.getHours() * 60 + end.getMinutes();
  return getConflictingTimeBlocks(start, startMin, endMin);
}

export default function CalendarPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [viewMode, setViewMode] = useState<CalendarViewMode>("month");
  const [filters, setFilters] = useState<CalendarFilterValues>(EMPTY_FILTERS);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [formOpen, setFormOpen] = useState(false);
  const [formDefaultDate, setFormDefaultDate] = useState<Date | undefined>();
  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
  const [templateFormOpen, setTemplateFormOpen] = useState(false);
  const [editingTemplate, setEditingTemplate] = useState<MeetingTemplate | null>(null);
  const [initialTemplateId, setInitialTemplateId] = useState<string | null>(null);
  const [timeBlockConflicts, setTimeBlockConflicts] = useState<string[]>([]);
  const [pendingEventData, setPendingEventData] = useState<{ data: EventFormData; isUpdate: boolean } | null>(null);

  // Compute date range based on view
  const range = useMemo(() => {
    if (viewMode === "month") {
      return getMonthRange(currentDate.getFullYear(), currentDate.getMonth());
    }
    if (viewMode === "week") {
      return getWeekRange(currentDate);
    }
    // day view: just this day
    const start = new Date(currentDate);
    start.setHours(0, 0, 0, 0);
    const end = new Date(currentDate);
    end.setHours(23, 59, 59, 999);
    return { start, end };
  }, [viewMode, currentDate]);

  const {
    events,
    items,
    currentUserId,
    createEvent,
    updateEvent,
    deleteEvent,
    respondToEvent,
    checkAvailability,
    findBestSlots,
  } = useEvents(range.start, range.end);
  const { activeMembers } = useTeams();
  const {
    templates,
    createTemplate,
    updateTemplate,
    deleteTemplate,
  } = useMeetingTemplates();
  const { views, createView, updateView, deleteView } = useSavedViews("calendar");
  const { can } = useTeamPermissions();
  const canEditCalendar = can("calendar", "edit");
  const [formReadOnly, setFormReadOnly] = useState(false);

  const applyFilters = useCallback((nextFilters: CalendarFilterValues) => {
    setFilters(nextFilters);
    setViewMode(nextFilters.viewMode);
  }, []);

  // Navigation
  function goToday() {
    setCurrentDate(new Date());
  }

  function goPrev() {
    const d = new Date(currentDate);
    if (viewMode === "month") d.setMonth(d.getMonth() - 1);
    else if (viewMode === "week") d.setDate(d.getDate() - 7);
    else d.setDate(d.getDate() - 1);
    setCurrentDate(d);
  }

  function goNext() {
    const d = new Date(currentDate);
    if (viewMode === "month") d.setMonth(d.getMonth() + 1);
    else if (viewMode === "week") d.setDate(d.getDate() + 7);
    else d.setDate(d.getDate() + 1);
    setCurrentDate(d);
  }

  // Click handlers
  function handleDayClick(date: Date) {
    if (!canEditCalendar) return;
    setFormDefaultDate(date);
    setEditingEvent(null);
    setInitialTemplateId(null);
    setFormReadOnly(false);
    setTimeBlockConflicts([]);
    setFormOpen(true);
  }

  function handleEventClick(item: CalendarItem) {
    // Only open edit for events, not tasks
    if (item.type === "task") return;
    const event = events.find((e) => e.id === item.id);
    if (event) {
      setEditingEvent(event);
      setFormReadOnly(!canEditCalendar);
      setFormOpen(true);
    }
  }

  // CRUD
  async function handleCreate(data: EventFormData) {
    if (!data.all_day) {
      const conflicts = checkEventConflicts(data.start_time, data.end_time);
      if (conflicts.length > 0) {
        setTimeBlockConflicts(conflicts);
        setPendingEventData({ data, isUpdate: false });
        throw new Error("TIME_BLOCK_CONFLICT"); // keeps form open
      }
    }
    await createEvent(data);
  }

  async function handleUpdate(data: EventFormData) {
    if (!editingEvent) return;
    if (!data.all_day) {
      const conflicts = checkEventConflicts(data.start_time, data.end_time);
      if (conflicts.length > 0) {
        setTimeBlockConflicts(conflicts);
        setPendingEventData({ data, isUpdate: true });
        throw new Error("TIME_BLOCK_CONFLICT"); // keeps form open
      }
    }
    await updateEvent(editingEvent.id, data);
    setEditingEvent(null);
  }

  async function confirmSaveAnyway() {
    if (!pendingEventData) return;
    setTimeBlockConflicts([]);
    if (pendingEventData.isUpdate && editingEvent) {
      await updateEvent(editingEvent.id, pendingEventData.data);
      setEditingEvent(null);
    } else {
      await createEvent(pendingEventData.data);
    }
    setPendingEventData(null);
    setFormOpen(false);
  }

  function dismissConflict() {
    setTimeBlockConflicts([]);
    setPendingEventData(null);
  }

  async function handleDelete() {
    if (!editingEvent) return;
    await deleteEvent(editingEvent.id);
    setEditingEvent(null);
  }

  async function handleTemplateSubmit(data: MeetingTemplateFormData) {
    if (editingTemplate) {
      await updateTemplate(editingTemplate.id, data);
      setEditingTemplate(null);
      return;
    }

    await createTemplate(data);
  }

  const deepLinkedEvent = useMemo(() => {
    const eventId = searchParams.get("event");
    if (!eventId) return null;
    return events.find((item) => item.id === eventId) || null;
  }, [events, searchParams]);

  useEffect(() => {
    const savedViewId = searchParams.get("savedView");
    if (!savedViewId || views.length === 0) return;

    const matchedView = views.find((view) => view.id === savedViewId);
    if (!matchedView) return;

    const timer = window.setTimeout(() => {
      applyFilters(normalizeCalendarFilters(matchedView.filters));
    }, 0);

    return () => window.clearTimeout(timer);
  }, [applyFilters, searchParams, views]);

  useEffect(() => {
    const shouldCreate = searchParams.get("create");
    if (shouldCreate !== "1") return;

    const nextParams = new URLSearchParams(searchParams.toString());
    nextParams.delete("create");
    const nextQuery = nextParams.toString();
    router.replace(nextQuery ? `/calendar?${nextQuery}` : "/calendar", {
      scroll: false,
    });

    if (canEditCalendar) {
      const timer = window.setTimeout(() => {
        setEditingEvent(null);
        setInitialTemplateId(null);
        setFormDefaultDate(new Date());
        setFormReadOnly(false);
        setFormOpen(true);
      }, 0);

      return () => window.clearTimeout(timer);
    }
  }, [canEditCalendar, router, searchParams]);

  const activeEvent = editingEvent || deepLinkedEvent;
  const activeFormReadOnly = editingEvent
    ? formReadOnly
    : deepLinkedEvent
    ? !canEditCalendar
    : false;

  const filteredItems = useMemo(() => {
    const normalized = filters.search.trim().toLowerCase();

    return items.filter((item) => {
      if (filters.itemType && item.type !== filters.itemType) return false;
      if (!normalized) return true;

      return item.title.toLowerCase().includes(normalized);
    });
  }, [filters, items]);

  return (
    <div className="space-y-5">
      {/* ── Hero header ──────────────────────────────────────────────────────── */}
      <div
        className="relative overflow-hidden rounded-[28px] border border-white/[0.07] bg-[#0e0c15] p-8"
        style={{
          backgroundImage:
            "radial-gradient(ellipse at 15% -25%, rgba(59,130,246,0.16) 0%, transparent 55%), radial-gradient(ellipse at 85% 110%, rgba(139,92,246,0.08) 0%, transparent 50%)",
        }}
      >
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/[0.08] px-3 py-1">
              <Calendar className="h-3.5 w-3.5 text-blue-400" />
              <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-blue-300">Calendar</span>
            </div>
            <h1 className="text-[28px] font-bold tracking-tight text-white">
              {currentDate.toLocaleString("default", { month: "long", year: "numeric" })}
            </h1>
            <p className="mt-1 text-[14px] text-white/40">
              Events, deadlines, and meetings — all in one view.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <button
              onClick={() => { setEditingTemplate(null); setTemplateFormOpen(true); }}
              disabled={!canEditCalendar}
              className="inline-flex items-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-[13px] font-semibold text-white/70 transition-all hover:border-white/[0.14] hover:bg-white/[0.07] hover:text-white disabled:opacity-40"
            >
              <Sparkles className="h-3.5 w-3.5" />
              New template
            </button>
            <button
              onClick={() => {
                if (!canEditCalendar) return;
                setEditingEvent(null);
                setInitialTemplateId(null);
                setFormDefaultDate(new Date());
                setFormReadOnly(false);
                setFormOpen(true);
              }}
              disabled={!canEditCalendar}
              className="inline-flex items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/[0.15] px-4 py-2 text-[13px] font-bold text-blue-200 transition-all hover:border-blue-500/50 hover:bg-blue-500/[0.22] disabled:opacity-40"
            >
              <Plus className="h-3.5 w-3.5" />
              New event
            </button>
          </div>
        </div>
      </div>

      {/* ── Meeting templates ────────────────────────────────────────────────── */}
      <div className="rounded-[24px] border border-white/[0.07] bg-[#0e0c15] p-6">
        <div className="mb-4 flex items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-xl border border-blue-500/20 bg-blue-500/[0.08]">
              <Sparkles className="h-3.5 w-3.5 text-blue-400" />
            </div>
            <div>
              <h2 className="text-[15px] font-bold text-white">Meeting templates</h2>
              <p className="text-[11px] text-white/30">
                Recurring setups with default participants, duration, and structure.
              </p>
            </div>
          </div>
        </div>

        {templates.length === 0 ? (
          <div className="rounded-[18px] border border-dashed border-white/[0.06] bg-white/[0.01] px-5 py-4 text-center">
            <p className="text-[13px] text-white/25">
              No templates yet — create one for standups, syncs, or client check-ins.
            </p>
          </div>
        ) : (
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
            {templates.map((template) => (
              <div
                key={template.id}
                className="group rounded-[18px] border border-white/[0.06] bg-white/[0.025] p-4 transition-all hover:border-white/[0.10] hover:bg-white/[0.04]"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="truncate text-[14px] font-bold text-white/85">{template.name}</p>
                    <p className="mt-0.5 line-clamp-2 text-[12px] text-white/35">
                      {template.description || "No description yet."}
                    </p>
                  </div>
                  <span className="shrink-0 rounded-full border border-white/[0.07] bg-white/[0.04] px-2 py-0.5 text-[10px] font-semibold text-white/35">
                    {template.all_day ? "All day" : `${template.duration_minutes} min`}
                  </span>
                </div>
                <p className="mt-2 text-[11px] text-white/25">
                  {template.participants?.length || 0} participants
                  {template.color ? ` · ${template.color}` : ""}
                </p>
                <div className="mt-3 flex flex-wrap gap-2">
                  <button
                    onClick={() => {
                      setEditingEvent(null);
                      setInitialTemplateId(template.id);
                      setFormDefaultDate(new Date());
                      setFormReadOnly(false);
                      setFormOpen(true);
                    }}
                    disabled={!canEditCalendar}
                    className="inline-flex items-center gap-1.5 rounded-xl border border-blue-500/25 bg-blue-500/[0.10] px-3 py-1.5 text-[12px] font-semibold text-blue-300 transition-all hover:border-blue-500/40 hover:bg-blue-500/[0.18] disabled:opacity-40"
                  >
                    <Plus className="h-3 w-3" />
                    Use
                  </button>
                  <button
                    onClick={() => { setEditingTemplate(template); setTemplateFormOpen(true); }}
                    disabled={!canEditCalendar}
                    className="inline-flex items-center gap-1.5 rounded-xl border border-white/[0.07] bg-transparent px-3 py-1.5 text-[12px] font-semibold text-white/40 transition-all hover:border-white/[0.12] hover:text-white/65 disabled:opacity-40"
                  >
                    <Pencil className="h-3 w-3" />
                    Edit
                  </button>
                  <button
                    onClick={() => void deleteTemplate(template.id)}
                    disabled={!canEditCalendar}
                    className="inline-flex items-center gap-1 rounded-xl border border-transparent px-2 py-1.5 text-[12px] text-white/20 transition-all hover:border-red-500/20 hover:bg-red-500/[0.06] hover:text-red-400 disabled:opacity-40"
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <SavedViewsBar
        filters={{ ...filters, viewMode }}
        emptyFilters={EMPTY_FILTERS}
        views={views}
        builtInViews={BUILT_IN_VIEWS}
        title="Saved calendar views"
        description="Switch quickly between full calendar, events, deadlines, and week planning."
        onApply={applyFilters}
        onCreate={async (name, nextFilters) => {
          await createView({ name, filters: { ...nextFilters } });
        }}
        onDelete={async (id) => {
          await deleteView(id);
        }}
        onToggleFavorite={async (id, isFavorite) => {
          await updateView(id, { is_favorite: isFavorite });
        }}
      />

      {/* ── Search + filter bar ──────────────────────────────────────────────── */}
      <div className="rounded-[22px] border border-white/[0.06] bg-white/[0.025] p-4">
        <div className="flex flex-wrap gap-3">
          <div className="relative flex-1 min-w-[160px]">
            <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-white/25" />
            <input
              value={filters.search}
              onChange={(event) => setFilters((current) => ({ ...current, search: event.target.value }))}
              placeholder="Search events and deadlines…"
              className="h-9 w-full rounded-xl border border-white/[0.07] bg-white/[0.04] pl-9 pr-3 text-[13px] text-white/80 placeholder:text-white/25 outline-none focus:border-white/[0.14] transition-colors"
            />
          </div>
          <div className="flex items-center gap-1.5">
            {(["", "event", "task"] as const).map((val) => {
              const label = val === "" ? "All" : val === "event" ? "Events" : "Deadlines";
              return (
                <button
                  key={val}
                  onClick={() => setFilters((c) => ({ ...c, itemType: val as CalendarItemTypeFilter }))}
                  className={cn(
                    "rounded-xl border px-3 py-1.5 text-[12px] font-semibold transition-all",
                    filters.itemType === val
                      ? "border-blue-500/30 bg-blue-500/[0.12] text-blue-300"
                      : "border-white/[0.06] text-white/35 hover:border-white/[0.10] hover:text-white/55",
                  )}
                >
                  {label}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* Calendar header (nav + view toggle) */}
      <div>
        <CalendarHeader
          currentDate={currentDate}
          viewMode={viewMode}
          onViewModeChange={(nextMode) => {
            setViewMode(nextMode);
            setFilters((current) => ({ ...current, viewMode: nextMode }));
          }}
          onPrev={goPrev}
          onNext={goNext}
          onToday={goToday}
        />
      </div>

      {/* Calendar view */}
      <div className="rounded-[22px] border border-white/[0.07] bg-[#0e0c15] overflow-hidden">
        {viewMode === "month" && (
          <MonthView
            year={currentDate.getFullYear()}
            month={currentDate.getMonth()}
            items={filteredItems}
            onDayClick={handleDayClick}
            onEventClick={handleEventClick}
          />
        )}
        {viewMode === "week" && (
          <WeekView
            currentDate={currentDate}
            items={filteredItems}
            onTimeClick={handleDayClick}
            onEventClick={handleEventClick}
          />
        )}
        {viewMode === "day" && (
          <DayView
            currentDate={currentDate}
            items={filteredItems}
            onTimeClick={handleDayClick}
            onEventClick={handleEventClick}
          />
        )}
      </div>

      {/* ── Time Blocking ───────────────────────────────────────────────────── */}
      <div className="rounded-[28px] border border-white/[0.07] bg-[#0e0c15] p-6">
        <div className="mb-5 flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/[0.08]">
            <Clock className="h-3.5 w-3.5 text-violet-400" />
          </div>
          <div>
            <h2 className="text-[15px] font-bold text-white">Time Blocking</h2>
            <p className="text-[11px] text-white/30">Blockiere Zeiten für Deep Work, Projekte und Fokus-Sessions.</p>
          </div>
        </div>
        <TimeBlockingPanel />
      </div>

      {/* Time Block Conflict Warning */}
      {timeBlockConflicts.length > 0 && (
        <div className="fixed top-4 right-4 z-[200] flex flex-col gap-3 rounded-2xl border border-amber-500/40 bg-[#1a1208] px-4 py-4 backdrop-blur-sm w-[320px] shadow-2xl shadow-amber-500/10">
          <div className="flex items-start gap-3">
            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-amber-500/25 mt-0.5">
              <span className="text-amber-400 text-xs font-bold">!</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-[13px] font-semibold text-amber-300">Time Block Konflikt</p>
              <p className="text-[12px] text-amber-400/80 mt-0.5">
                Überschneidung mit: <strong className="text-amber-300">{timeBlockConflicts.join(", ")}</strong>
              </p>
            </div>
            <button onClick={dismissConflict} className="shrink-0 text-amber-400/40 hover:text-amber-400 transition-colors text-lg leading-none">×</button>
          </div>
          <div className="flex gap-2 pl-9">
            <button
              onClick={() => void confirmSaveAnyway()}
              className="flex-1 rounded-xl border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-[12px] font-semibold text-amber-300 transition-all hover:bg-amber-500/20"
            >
              Trotzdem speichern
            </button>
            <button
              onClick={dismissConflict}
              className="flex-1 rounded-xl border border-white/[0.06] px-3 py-1.5 text-[12px] font-semibold text-white/40 transition-all hover:text-white/70"
            >
              Abbrechen
            </button>
          </div>
        </div>
      )}

      {/* Event form modal */}
      {formOpen && (
        <EventForm
          open={formOpen}
          onClose={() => {
            setFormOpen(false);
            setEditingEvent(null);
            setFormReadOnly(false);
            setPendingEventData(null);
            setTimeBlockConflicts([]);
          }}
          onSubmit={editingEvent ? handleUpdate : handleCreate}
          onDelete={editingEvent ? handleDelete : undefined}
          event={editingEvent}
          defaultDate={formDefaultDate}
          members={activeMembers}
          readOnly={formReadOnly}
          templates={templates}
          initialTemplateId={initialTemplateId}
          currentUserId={currentUserId}
          onRespond={editingEvent ? async (status) => {
            await respondToEvent(editingEvent.id, status);
            setEditingEvent((current) =>
              current
                ? {
                    ...current,
                    participants:
                      current.participants?.map((participant) =>
                        participant.user_id === currentUserId
                          ? { ...participant, response_status: status }
                          : participant
                      ) || [],
                  }
                : current
            );
          } : undefined}
          onCheckAvailability={checkAvailability}
          onFindBestSlots={findBestSlots}
        />
      )}

      {!formOpen && deepLinkedEvent && (
        <EventForm
          open
          onClose={() => {
            router.replace("/calendar", { scroll: false });
          }}
          onSubmit={async (data) => {
            await updateEvent(deepLinkedEvent.id, data);
          }}
          onDelete={async () => {
            await deleteEvent(deepLinkedEvent.id);
            router.replace("/calendar", { scroll: false });
          }}
          event={activeEvent}
          defaultDate={formDefaultDate}
          members={activeMembers}
          readOnly={activeFormReadOnly}
          templates={templates}
          currentUserId={currentUserId}
          onRespond={async (status) => {
            await respondToEvent(deepLinkedEvent.id, status);
          }}
          onCheckAvailability={checkAvailability}
          onFindBestSlots={findBestSlots}
        />
      )}

      {templateFormOpen && (
        <MeetingTemplateForm
          open={templateFormOpen}
          onClose={() => {
            setTemplateFormOpen(false);
            setEditingTemplate(null);
          }}
          onSubmit={handleTemplateSubmit}
          template={editingTemplate}
          members={activeMembers}
        />
      )}
    </div>
  );
}