"use client";

import Link from "next/link";
import { useParams } from "@/lib/route-params";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ListExportActions } from "@/components/export/ListExportActions";
import { SchoolSetupNav } from "@/components/school/SchoolSetupNav";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { ApiError, SubjectRow, apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api";
import { apiFieldErrors } from "@/components/forms/FormErrorSummary";
import { classBreadcrumbLabels } from "@/lib/breadcrumbs";
import { canChangeClassDelivery, canManageOrgSubjects } from "@/lib/permissions";
import {
  AwaitingPlatformButton,
  DeliveryTypeButton,
  ScheduleOccurrence,
  VirtualOccurrenceDialog,
  WeekPager,
  addDays,
  deliveryChipLabel,
  effectiveVirtual,
  formatIsoDate,
  formatPersianDay,
  isInPersonHold,
  needsPlatformAssignment,
  occurrenceDate,
  startOfIranWeek,
  type OccurrenceSlot,
} from "@/components/school/VirtualOccurrenceDialog";

const DAYS = ["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"];

interface PeriodRow {
  id: number;
  title: string;
  starts_at: string;
  ends_at: string;
}

interface ScheduleSubject {
  id: number;
  name: string;
  code?: string | null;
  branch_id?: number | null;
  image_url?: string | null;
  coefficient?: number;
  effective_coefficient?: number;
  field_coefficients?: SubjectRow["field_coefficients"];
}

interface ScheduleItem {
  id: number;
  day_of_week: number;
  class_period_id?: number | null;
  subject_id?: number | null;
  teacher_user_id?: number | null;
  starts_at: string;
  ends_at: string;
  week_type: string;
  week_type_label: string;
  delivery_mode?: string | null;
  delivery_mode_label?: string | null;
  is_virtual?: boolean;
  subject?: ScheduleSubject | null;
  teacher?: { id: number; name: string } | null;
  grade_label?: string | null;
}

const emptyForm = {
  class_period_id: "",
  day_of_week: "0",
  subject_id: "",
  teacher_user_id: "",
  teacher_label: "",
  week_type: "fixed",
  delivery_mode: "in_person",
};

/** برچسب‌ها با `AttendanceDelivery` سمت API یکی است. */
const DELIVERY_MODES: Array<[string, string]> = [
  ["in_person", "حضوری"],
  ["online", "مجازی"],
  ["offline", "مجازی · آفلاین"],
  ["hybrid", "ترکیبی"],
];

type FormKey = keyof typeof emptyForm;
type FormErrors = Partial<Record<FormKey, string>>;

interface ClassDetail {
  id: number;
  name: string;
  code?: string | null;
  field?: string | null;
  branch_id: number;
  grade_level_id?: number;
  grade_level?: { id: number; name: string } | null;
  education_stage?: { name: string } | null;
  study_field?: { name: string } | null;
  academic_year?: { title: string } | null;
  branch?: { name: string } | null;
}

interface TeacherOption {
  id: number;
  name: string;
  national_code?: string | null;
}

function formatCoeff(subject: ScheduleSubject | null | undefined): string {
  if (!subject) return "";
  const coeff = subject.effective_coefficient ?? subject.coefficient;
  if (coeff == null) return "";
  return `ضریب ${Number(coeff).toLocaleString("fa-IR")}`;
}

export default function ClassSchedulePage() {
  const { id, classId } = useParams<{ id: string; classId: string }>();
  const branchId = Number(id);
  const classRoomId = Number(classId);
  const canEditCatalog = canManageOrgSubjects();
  const canEditDelivery = canChangeClassDelivery();
  const [weekStart, setWeekStart] = useState(() => startOfIranWeek());
  const [occurrences, setOccurrences] = useState<ScheduleOccurrence[]>([]);
  const [virtualSlot, setVirtualSlot] = useState<OccurrenceSlot | null>(null);

  const [classRoom, setClassRoom] = useState<ClassDetail | null>(null);
  const [periods, setPeriods] = useState<PeriodRow[]>([]);
  const [subjects, setSubjects] = useState<ScheduleSubject[]>([]);
  const [items, setItems] = useState<ScheduleItem[]>([]);
  const [teacherQuery, setTeacherQuery] = useState("");
  const [teacherOptions, setTeacherOptions] = useState<TeacherOption[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [openMenu, setOpenMenu] = useState<number | null>(null);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [fieldErrors, setFieldErrors] = useState<FormErrors>({});

  const gradeLevelId = classRoom?.grade_level_id ?? classRoom?.grade_level?.id;

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [cls, periodList, scheduleList] = await Promise.all([
        apiGet<ClassDetail>(`/class-rooms/${classRoomId}`),
        apiGet<PeriodRow[]>(`/class-periods?branch_id=${branchId}`),
        apiGet<ScheduleItem[]>(`/schedules?class_room_id=${classRoomId}&branch_id=${branchId}`),
      ]);
      const gid = cls.grade_level_id ?? cls.grade_level?.id;
      const subjectList = gid
        ? await apiGet<ScheduleSubject[]>(
            `/subjects?grade_level_id=${gid}&type=official&scope=all&branch_id=${branchId}&active_only=1`,
          )
        : [];
      setClassRoom(cls);
      setPeriods(periodList);
      setSubjects(subjectList);
      setItems(scheduleList);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [branchId, classRoomId]);

  useEffect(() => {
    load();
  }, [load]);

  const loadOccurrences = useCallback(async () => {
    try {
      const from = formatIsoDate(weekStart);
      const to = formatIsoDate(addDays(weekStart, 6));
      setOccurrences(
        await apiGet<ScheduleOccurrence[]>(
          `/online-class/schedule-occurrences?branch_id=${branchId}&class_room_id=${classRoomId}&from=${from}&to=${to}`,
        ),
      );
    } catch {
      setOccurrences([]);
    }
  }, [branchId, classRoomId, weekStart]);

  useEffect(() => {
    void loadOccurrences();
  }, [loadOccurrences]);

  const selectedSubject = useMemo(
    () => subjects.find((s) => String(s.id) === form.subject_id) ?? null,
    [subjects, form.subject_id],
  );

  const searchTeachers = async (q: string) => {
    setTeacherQuery(q);
    setForm((f) => ({ ...f, teacher_label: q, teacher_user_id: "" }));
    if (q.length < 2) {
      setTeacherOptions([]);
      return;
    }
    try {
      setTeacherOptions(
        await apiGet<TeacherOption[]>(
          `/users/search?q=${encodeURIComponent(q)}&branch_id=${branchId}`,
        ),
      );
    } catch {
      setTeacherOptions([]);
    }
  };

  const clearFieldError = (key: FormKey) => {
    setFieldErrors((current) => {
      if (!current[key]) return current;
      const next = { ...current };
      delete next[key];
      return next;
    });
  };

  const setFormField = (key: FormKey, value: string) => {
    setForm((current) => ({ ...current, [key]: value }));
    clearFieldError(key);
  };

  const resetForm = () => {
    setEditingId(null);
    setForm(emptyForm);
    setTeacherQuery("");
    setTeacherOptions([]);
    setFieldErrors({});
  };

  const payload = () => ({
    branch_id: branchId,
    class_room_id: classRoomId,
    class_period_id: Number(form.class_period_id),
    day_of_week: Number(form.day_of_week),
    subject_id: Number(form.subject_id),
    teacher_user_id: Number(form.teacher_user_id),
    week_type: form.week_type,
    delivery_mode: form.delivery_mode,
  });

  const validateForm = (): FormErrors => {
    const next: FormErrors = {};
    if (!form.class_period_id) next.class_period_id = "زنگ کلاسی را انتخاب کنید.";
    if (!form.subject_id) next.subject_id = "نام درس را انتخاب کنید.";
    if (!form.teacher_user_id) next.teacher_user_id = "نام معلم را از فهرست انتخاب کنید.";
    return next;
  };

  const save = async () => {
    setError(null);
    setMessage(null);
    const invalid = validateForm();
    if (Object.keys(invalid).length > 0) {
      setFieldErrors(invalid);
      return;
    }
    setFieldErrors({});
    try {
      if (editingId) {
        await apiPatch(`/schedules/${editingId}`, payload());
        setMessage("برنامه به‌روزرسانی شد.");
      } else {
        await apiPost("/schedules", payload());
        setMessage("برنامه ثبت شد.");
      }
      resetForm();
      await load();
    } catch (err) {
      const mapped = apiFieldErrors(err, {
        class_period_id: "class_period_id",
        starts_at: "class_period_id",
        ends_at: "class_period_id",
        class_room_id: "class_period_id",
        day_of_week: "day_of_week",
        subject_id: "subject_id",
        teacher_user_id: "teacher_user_id",
        week_type: "week_type",
        delivery_mode: "delivery_mode",
      });
      setFieldErrors(mapped.fields as FormErrors);
      setError(mapped.general);
    }
  };

  const startEdit = (item: ScheduleItem) => {
    const periodId =
      item.class_period_id ??
      periods.find((p) => p.starts_at === item.starts_at && p.ends_at === item.ends_at)?.id;
    setEditingId(item.id);
    setOpenMenu(null);
    setForm({
      class_period_id: periodId ? String(periodId) : "",
      day_of_week: String(item.day_of_week),
      subject_id: String(item.subject?.id ?? item.subject_id ?? ""),
      teacher_user_id: item.teacher?.id
        ? String(item.teacher.id)
        : item.teacher_user_id
          ? String(item.teacher_user_id)
          : "",
      teacher_label: item.teacher?.name ?? "",
      week_type: item.week_type || "fixed",
      delivery_mode: item.delivery_mode || "in_person",
    });
    setTeacherQuery(item.teacher?.name ?? "");
    setTeacherOptions([]);
    setFieldErrors({});
    setError(null);
    setMessage(null);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const remove = async (scheduleId: number) => {
    if (!confirm("این برنامه حذف شود؟")) return;
    await apiDelete(`/schedules/${scheduleId}`);
    if (editingId === scheduleId) resetForm();
    await load();
  };

  const grid = useMemo(() => {
    return periods.map((period) => ({
      period,
      cells: DAYS.map((_, day) =>
        items.filter(
          (item) =>
            item.day_of_week === day &&
            (item.class_period_id === period.id ||
              (item.starts_at === period.starts_at && item.ends_at === period.ends_at)),
        ),
      ),
    }));
  }, [periods, items]);

  const occurrenceFor = (scheduleId: number, day: number) =>
    occurrences.find(
      (row) => row.schedule_id === scheduleId && row.occurrence_on === occurrenceDate(weekStart, day),
    );

  if (loading && !classRoom) {
    return (
      <AppShell title="برنامه هفتگی کلاس" breadcrumbLabels={classBreadcrumbLabels(classRoom)}>
        <PageContentSkeleton rows={6} />
      </AppShell>
    );
  }

  return (
    <AppShell
      title="برنامه هفتگی کلاس"
      breadcrumbLabels={classBreadcrumbLabels(classRoom)}
    >
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      <div className="mb-4">
        <Alert tone="info">
          درس از <strong>فهرست دروس</strong> انتخاب می‌شود — لوگو، ضریب و سرفصل در{" "}
          {canEditCatalog && gradeLevelId ? (
            <Link href="/academic/curriculum" className="text-primary underline">
              برنامه درسی پایه
            </Link>
          ) : (
            "برنامه درسی پایه (هلدینگ)"
          )}{" "}
          تعریف می‌شود. اینجا فقط <strong>زمان‌بندی</strong> (روز + زنگ) ثبت می‌شود.
        </Alert>
      </div>

      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <SchoolSetupNav branchId={branchId} classId={classRoomId} current="schedule" />
        <ListExportActions
          exportPath="/schedules/export"
          filters={{ class_room_id: classRoomId, branch_id: branchId }}
          contextKeys={["branch_id"]}
          filenameBase="schedules-export"
          onError={setError}
        />
      </div>

      <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <h2 className="mb-3 text-sm font-bold">
          {editingId ? "ویرایش برنامه هفتگی" : "افزودن برنامه هفتگی"}
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
          <Field label="زنگ کلاسی" error={fieldErrors.class_period_id}>
            <Select
              value={form.class_period_id}
              invalid={Boolean(fieldErrors.class_period_id)}
              onChange={(e) => setFormField("class_period_id", e.target.value)}
            >
              <option value="">انتخاب…</option>
              {periods.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.title} ({p.starts_at} تا {p.ends_at})
                </option>
              ))}
            </Select>
          </Field>
          <Field label="روز هفته" error={fieldErrors.day_of_week}>
            <Select
              value={form.day_of_week}
              invalid={Boolean(fieldErrors.day_of_week)}
              onChange={(e) => setFormField("day_of_week", e.target.value)}
            >
              {DAYS.map((d, i) => (
                <option key={d} value={i}>{d}</option>
              ))}
            </Select>
          </Field>
          <div>
            <Field label="نام درس" error={fieldErrors.subject_id}>
              <Select
                value={form.subject_id}
                invalid={Boolean(fieldErrors.subject_id)}
                onChange={(e) => setFormField("subject_id", e.target.value)}
              >
                <option value="">انتخاب…</option>
                {subjects.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.name}
                    {s.branch_id ? " (مدرسه)" : ""}
                    {formatCoeff(s) ? ` · ${formatCoeff(s)}` : ""}
                  </option>
                ))}
              </Select>
            </Field>
            {selectedSubject ? (
              <div className="mt-2 flex items-center gap-2 rounded-xl border border-[var(--border)] bg-slate-50 p-2">
                <SubjectAvatar
                  name={selectedSubject.name}
                  imageUrl={selectedSubject.image_url}
                  size="sm"
                />
                <div className="min-w-0 text-xs">
                  <div className="font-medium">{selectedSubject.name}</div>
                  <div className="text-[var(--muted)]">
                    {selectedSubject.code ?? "—"} · {formatCoeff(selectedSubject) || "—"}
                  </div>
                </div>
              </div>
            ) : null}
          </div>
          <div>
            <Field label="نام معلم *" error={fieldErrors.teacher_user_id}>
              <Input
                value={teacherQuery || form.teacher_label}
                placeholder="قسمتی از نام خانوادگی را وارد کنید"
                invalid={Boolean(fieldErrors.teacher_user_id)}
                onChange={(e) => searchTeachers(e.target.value)}
              />
            </Field>
            {teacherOptions.length > 0 ? (
              <ul className="mt-1 max-h-28 overflow-y-auto rounded-xl border bg-white text-sm">
                {teacherOptions.map((t) => (
                  <li key={t.id}>
                    <button
                      type="button"
                      className="block w-full px-3 py-2 text-right hover:bg-slate-50"
                      onClick={() => {
                        setForm((f) => ({
                          ...f,
                          teacher_user_id: String(t.id),
                          teacher_label: t.name,
                        }));
                        setTeacherQuery(t.name);
                        setTeacherOptions([]);
                        clearFieldError("teacher_user_id");
                      }}
                    >
                      {t.name}
                      {t.national_code ? (
                        <span className="mr-2 font-mono text-xs text-[var(--muted)]">{t.national_code}</span>
                      ) : null}
                    </button>
                  </li>
                ))}
              </ul>
            ) : null}
          </div>
          <Field label="هفته" error={fieldErrors.week_type}>
            <Select
              value={form.week_type}
              invalid={Boolean(fieldErrors.week_type)}
              onChange={(e) => setFormField("week_type", e.target.value)}
            >
              <option value="fixed">ثابت</option>
              <option value="odd">فرد</option>
              <option value="even">زوج</option>
            </Select>
          </Field>
          <Field
            label="نوع کلاس"
            error={fieldErrors.delivery_mode}
            hint="این فهرست نوع ثابت برنامه است. برای عوض کردن فقط یک زنگ در یک هفته، روی برچسب حضوری یا مجازی داخل جدول بزنید."
          >
            <Select
              value={form.delivery_mode}
              invalid={Boolean(fieldErrors.delivery_mode)}
              onChange={(e) => setFormField("delivery_mode", e.target.value)}
            >
              {DELIVERY_MODES.map(([value, label]) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </Select>
          </Field>
        </div>
        <div className="mt-4 flex flex-wrap gap-2">
          <Button onClick={save}>{editingId ? "ذخیره تغییرات" : "افزودن"}</Button>
          {editingId ? (
            <Button variant="secondary" onClick={resetForm}>انصراف</Button>
          ) : null}
        </div>
        {periods.length === 0 ? (
          <p className="mt-3 text-xs text-red-600">
            ابتدا از صفحه{" "}
            <Link href={`/schools/${branchId}/periods`} className="font-semibold underline">
              زنگ‌ها
            </Link>{" "}
            زنگ‌های این مدرسه را تعریف کنید.
          </p>
        ) : null}
        {subjects.length === 0 && gradeLevelId ? (
          <p className="mt-3 text-xs text-amber-700">
            برای این پایه درسی در فهرست دروس تعریف نشده.
            {canEditCatalog ? (
              <>
                {" "}
                <Link href="/academic/curriculum" className="underline">
                  افزودن درس در برنامه درسی پایه
                </Link>
              </>
            ) : null}
            {" · "}
            <Link href={`/schools/${branchId}/subjects`} className="underline">
              فهرست دروس
            </Link>
          </p>
        ) : null}
      </div>

      <div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-card">
        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-3">
          <div className="text-sm font-bold">فهرست برنامه اجرایی {classRoom?.name ?? ""}</div>
          <WeekPager weekStart={weekStart} onChange={setWeekStart} />
        </div>
        <div className="overflow-x-auto">
          <table className="min-w-full text-xs">
            <thead className="bg-slate-50 text-[var(--muted)]">
              <tr>
                <th className="whitespace-nowrap px-2 py-3 text-right">#</th>
                {DAYS.map((d, i) => (
                  <th
                    key={d}
                    className={`whitespace-nowrap px-2 py-3 text-center ${i === 6 ? "text-red-600" : ""}`}
                  >
                    {d}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-[var(--border)]">
              {grid.length === 0 ? (
                <tr>
                  <td colSpan={8} className="px-4 py-8 text-center text-[var(--muted)]">
                    زنگ یا برنامه‌ای ثبت نشده است.
                  </td>
                </tr>
              ) : (
                grid.map(({ period, cells }) => (
                  <tr key={period.id}>
                    <td className="whitespace-nowrap px-2 py-3 font-medium">
                      <div>{period.title}</div>
                      <div className="text-[10px] text-[var(--muted)]">
                        {period.starts_at} تا {period.ends_at}
                      </div>
                    </td>
                    {cells.map((cellItems, day) => (
                      <td key={day} className="align-top px-1 py-2">
                        <div className="space-y-1">
                          {cellItems.map((item) => (
                            <div
                              key={item.id}
                              className={`relative rounded-lg border p-1.5 text-[10px] ${
                                editingId === item.id
                                  ? "border-primary bg-primary/10 ring-1 ring-primary/40"
                                  : "border-primary/20 bg-primary/5"
                              }`}
                            >
                              <div className="mb-1 flex items-center justify-between gap-1">
                                <span className="flex items-center gap-1">
                                  <span className="rounded bg-white px-1 font-semibold text-primary">
                                    {item.week_type_label}
                                  </span>
                                  <DeliveryTypeButton
                                    label={deliveryChipLabel(item.delivery_mode_label, Boolean(item.is_virtual), occurrenceFor(item.id, day))}
                                    virtual={effectiveVirtual(Boolean(item.is_virtual), occurrenceFor(item.id, day))}
                                    canEdit={canEditDelivery}
                                    onClick={() =>
                                      setVirtualSlot({
                                        scheduleId: item.id,
                                        occurrenceOn: occurrenceDate(weekStart, day),
                                        startsAt: item.starts_at,
                                        endsAt: item.ends_at,
                                        subjectName: item.subject?.name,
                                        className: classRoom?.name,
                                        toInPerson: effectiveVirtual(Boolean(item.is_virtual), occurrenceFor(item.id, day)),
                                      })
                                    }
                                  />
                                </span>
                                <button
                                  type="button"
                                  className="rounded border bg-white px-1"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    setOpenMenu(openMenu === item.id ? null : item.id);
                                  }}
                                >
                                  ⚙
                                </button>
                              </div>
                              {occurrenceFor(item.id, day) && !isInPersonHold(occurrenceFor(item.id, day)) ? (
                                <div className="mb-1 text-[9px] font-medium text-indigo-800">
                                  برگزاری {occurrenceFor(item.id, day)?.meeting_start} تا {occurrenceFor(item.id, day)?.meeting_end}
                                  {occurrenceFor(item.id, day)?.provider?.title
                                    ? ` · ${occurrenceFor(item.id, day)?.provider?.title}`
                                    : ""}
                                  {occurrenceFor(item.id, day)?.meeting_date !== occurrenceDate(weekStart, day)
                                    ? ` · ${formatPersianDay(occurrenceFor(item.id, day)?.meeting_date ?? "")}`
                                    : ""}
                                </div>
                              ) : null}
                              {needsPlatformAssignment(Boolean(item.is_virtual), occurrenceFor(item.id, day)) ? (
                                <AwaitingPlatformButton
                                  onClick={
                                    canEditDelivery
                                      ? () =>
                                          setVirtualSlot({
                                            scheduleId: item.id,
                                            occurrenceOn: occurrenceDate(weekStart, day),
                                            startsAt: item.starts_at,
                                            endsAt: item.ends_at,
                                            subjectName: item.subject?.name,
                                            className: classRoom?.name,
                                            assignPlatform: true,
                                          })
                                      : undefined
                                  }
                                />
                              ) : null}
                              <div className="flex items-center gap-1.5 rounded bg-sky-100 px-1 py-1 text-sky-900">
                                <SubjectAvatar
                                  name={item.subject?.name ?? "درس"}
                                  imageUrl={item.subject?.image_url}
                                  size="sm"
                                />
                                <div className="min-w-0 flex-1">
                                  <div className="truncate font-semibold">
                                    {item.subject?.name ?? "—"}
                                  </div>
                                  <div className="truncate text-[9px] opacity-80">
                                    {formatCoeff(item.subject) || "—"}
                                  </div>
                                </div>
                              </div>
                              <div className="mt-0.5 rounded bg-sky-100 px-1 py-0.5 text-sky-900">
                                {item.teacher?.name ?? "—"}
                              </div>
                              {openMenu === item.id ? (
                                <div className="absolute left-0 top-6 z-20 w-28 rounded-lg border bg-white py-1 shadow-lg">
                                  <button
                                    type="button"
                                    className="block w-full px-2 py-1.5 text-right hover:bg-slate-50"
                                    onClick={() => startEdit(item)}
                                  >
                                    ویرایش
                                  </button>
                                  <button
                                    type="button"
                                    className="block w-full px-2 py-1.5 text-right text-red-600 hover:bg-red-50"
                                    onClick={() => { setOpenMenu(null); remove(item.id); }}
                                  >
                                    حذف
                                  </button>
                                </div>
                              ) : null}
                            </div>
                          ))}
                        </div>
                      </td>
                    ))}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      <VirtualOccurrenceDialog
        open={virtualSlot != null}
        slot={virtualSlot}
        occurrence={
          virtualSlot
            ? occurrences.find(
                (row) => row.schedule_id === virtualSlot.scheduleId && row.occurrence_on === virtualSlot.occurrenceOn,
              ) ?? null
            : null
        }
        branchId={branchId}
        onClose={() => setVirtualSlot(null)}
        onSaved={(text) => {
          setMessage(text);
          void loadOccurrences();
        }}
      />
    </AppShell>
  );
}