"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { SubjectFieldCoefficientFields } from "@/components/academic/SubjectFieldCoefficientFields";
import { SubjectImageField } from "@/components/academic/SubjectImageField";
import { ActionMenu } from "@/components/layout/ActionMenu";
import { AdvancedSearchToggle } from "@/components/layout/AdvancedSearchToggle";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Pagination } from "@/components/layout/Pagination";
import { nextHeaderSort, type SortDir } from "@/components/layout/TableSort";
import { ListExportActions } from "@/components/export/ListExportActions";
import { GradeLevelTree } from "@/components/schools/GradeLevelTree";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { SearchableSelect } from "@/components/ui/SearchableSelect";
import { Field, Input, Select } from "@/components/ui/Field";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import {
  ApiError,
  StudyFieldOption,
  SubjectRow,
  Paginated,
  apiDelete,
  apiGet,
  apiPatch,
  apiPost,
  apiPostFormData,
} from "@/lib/api";
import type { StudyFieldMatrixGrade, StudyFieldMatrixStage } from "@/lib/types";

interface CurriculumBookOption {
  id: number;
  title: string;
  code?: string | null;
}

interface SearchFilters {
  name: string;
  code: string;
  coefficient: string;
  subject_scope: string;
  type: string;
  grade_level_id: string;
}

const emptyForm = {
  name: "",
  code: "",
  subject_scope: "general" as const,
  curriculum_book_id: "",
};

const DEFAULT_COEFFICIENT = 1;
const EMPTY_FIELD_IDS: number[] = [];
const PAGE_SIZE = 20;

const emptySearch: SearchFilters = {
  name: "",
  code: "",
  coefficient: "",
  subject_scope: "",
  type: "",
  grade_level_id: "",
};

function SectionHeader({
  title,
  open,
  onToggle,
}: {
  title: string;
  open: boolean;
  onToggle: () => void;
}) {
  return (
    <AdvancedSearchToggle
      open={open}
      onToggle={onToggle}
      label={title}
      className="flex w-full items-center justify-between rounded-t-2xl border-b border-[var(--border)] bg-slate-100 px-4 py-2.5 text-sm font-bold text-primary"
    />
  );
}

function subjectScopeLabel(scope?: string | null) {
  return scope === "specialized" ? "تخصصی" : "عمومی";
}

function buildCoefficientRows(
  fields: StudyFieldOption[],
  existing: SubjectRow["field_coefficients"],
  fallback: number,
) {
  return fields.map((field) => {
    const row = existing?.find((item) => item.study_field_id === field.id);
    return {
      study_field_id: field.id,
      study_field_name: field.name,
      coefficient: row?.coefficient ?? fallback,
    };
  });
}

function findGrade(stages: StudyFieldMatrixStage[], gradeId: number): StudyFieldMatrixGrade | null {
  for (const stage of stages) {
    const grade = stage.grade_levels?.find((g) => g.id === gradeId);
    if (grade) return grade;
  }
  return null;
}

function assignedFieldRows(row: SubjectRow) {
  const fromIds = new Set(row.assigned_study_field_ids ?? []);
  const coeffs = row.field_coefficients ?? [];

  if (fromIds.size > 0) {
    return coeffs.filter((f) => fromIds.has(f.study_field_id) || f.assigned === true);
  }

  return coeffs.filter((f) => f.assigned === true);
}

function formatCoefficientCell(row: SubjectRow): string {
  const assigned = assignedFieldRows(row);
  if (assigned.length === 0) {
    return Number(row.coefficient).toLocaleString("fa-IR");
  }
  return assigned
    .map(
      (f) =>
        `${f.study_field_name ?? "رشته"}: ${Number(f.coefficient).toLocaleString("fa-IR")}`,
    )
    .join(" · ");
}

function formatGradeCell(
  row: SubjectRow,
  stageName: string,
  stages: StudyFieldMatrixStage[],
): string {
  const grade = row.grade_level_id ? findGrade(stages, row.grade_level_id) : null;
  const gradeLabel = row.grade_level?.name ?? "—";
  const base =
    stageName && gradeLabel !== "—" ? `${stageName} : ${gradeLabel}` : gradeLabel;

  if (!grade || grade.study_fields.length === 0) return base;

  const fieldNames = assignedFieldRows(row)
    .map(
      (f) =>
        f.study_field_name ??
        grade.study_fields.find((item) => item.id === f.study_field_id)?.name,
    )
    .filter(Boolean);

  if (fieldNames.length === 0) {
    return `${base} (بدون رشته)`;
  }

  return `${base} (${fieldNames.join("، ")})`;
}

export function CurriculumSubjectManager({ canEdit }: { canEdit: boolean }) {
  const [stages, setStages] = useState<StudyFieldMatrixStage[]>([]);
  const [subjects, setSubjects] = useState<SubjectRow[]>([]);
  const [studyFields, setStudyFields] = useState<StudyFieldOption[]>([]);
  const [books, setBooks] = useState<CurriculumBookOption[]>([]);
  const [form, setForm] = useState(emptyForm);
  const [fieldCoefficients, setFieldCoefficients] = useState<SubjectRow["field_coefficients"]>([]);
  const [selectedGrades, setSelectedGrades] = useState<number[]>([]);
  const [gradeStudyFields, setGradeStudyFields] = useState<Record<number, number[]>>({});
  const [editId, setEditId] = useState<number | null>(null);
  const [editImageUrl, setEditImageUrl] = useState<string | null>(null);
  const [pendingImage, setPendingImage] = useState<File | null>(null);
  const [searchOpen, setSearchOpen] = useState(false);
  const [formOpen, setFormOpen] = useState(false);
  const [searchDraft, setSearchDraft] = useState<SearchFilters>(emptySearch);
  const [searchApplied, setSearchApplied] = useState<SearchFilters>(emptySearch);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [sortBy, setSortBy] = useState("grade");
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const allGrades = useMemo(
    () => stages.flatMap((stage) => stage.grade_levels ?? []),
    [stages],
  );

  const gradeStageMap = useMemo(() => {
    const map = new Map<number, string>();
    for (const stage of stages) {
      for (const grade of stage.grade_levels ?? []) {
        map.set(grade.id, stage.name);
      }
    }
    return map;
  }, [stages]);

  const activeGradeId = editId
    ? subjects.find((s) => s.id === editId)?.grade_level_id ?? null
    : selectedGrades.length === 1
      ? selectedGrades[0]
      : null;

  const activeFieldIds = useMemo(() => {
    if (!activeGradeId) return EMPTY_FIELD_IDS;
    return gradeStudyFields[activeGradeId] ?? EMPTY_FIELD_IDS;
  }, [activeGradeId, gradeStudyFields]);

  const activeStudyFields = useMemo(
    () => studyFields.filter((f) => activeFieldIds.includes(f.id)),
    [studyFields, activeFieldIds],
  );

  const loadCatalog = useCallback(async () => {
    try {
      const [matrix, bookList] = await Promise.all([
        apiGet<StudyFieldMatrixStage[]>("/study-fields/matrix"),
        apiGet<CurriculumBookOption[]>("/curriculum-books?scope=org&active_only=1"),
      ]);
      setStages(matrix);
      setBooks(bookList);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  }, []);

  const loadSubjects = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        scope: "org",
        active_only: "1",
        page: String(page),
        per_page: String(PAGE_SIZE),
        type: searchApplied.type || "official",
        sort_by: sortBy,
        sort_dir: sortDir,
      });
      if (searchApplied.name.trim()) params.set("name", searchApplied.name.trim());
      if (searchApplied.code.trim()) params.set("code", searchApplied.code.trim());
      if (searchApplied.coefficient.trim()) params.set("coefficient", searchApplied.coefficient.trim());
      if (searchApplied.subject_scope) params.set("subject_scope", searchApplied.subject_scope);
      if (searchApplied.grade_level_id) params.set("grade_level_id", searchApplied.grade_level_id);

      const result = await apiGet<Paginated<SubjectRow>>(`/subjects?${params.toString()}`);
      setSubjects(result.data);
      setLastPage(result.last_page);
      if (result.data.length === 0 && page > 1 && result.last_page > 0) {
        setPage(result.last_page);
      }
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [page, searchApplied, sortBy, sortDir]);

  const loadGradeFields = useCallback(async (gradeId: number) => {
    try {
      const fieldList = await apiGet<StudyFieldOption[]>(`/study-fields?grade_level_id=${gradeId}`);
      setStudyFields(fieldList);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  }, []);

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

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

  useEffect(() => {
    if (activeGradeId) {
      void loadGradeFields(activeGradeId);
    } else {
      setStudyFields([]);
    }
  }, [activeGradeId, loadGradeFields]);

  useEffect(() => {
    if (activeStudyFields.length === 0) {
      setFieldCoefficients((prev) => (prev.length === 0 ? prev : []));
      return;
    }
    setFieldCoefficients((prev) => {
      const next = buildCoefficientRows(activeStudyFields, prev, DEFAULT_COEFFICIENT);
      if (
        prev.length === next.length &&
        next.every(
          (row, i) =>
            row.study_field_id === prev[i]?.study_field_id &&
            row.coefficient === prev[i]?.coefficient,
        )
      ) {
        return prev;
      }
      return next;
    });
  }, [activeStudyFields]);

  const resetForm = () => {
    setForm(emptyForm);
    setFieldCoefficients([]);
    setEditId(null);
    setEditImageUrl(null);
    setPendingImage(null);
    setSelectedGrades([]);
    setGradeStudyFields({});
  };

  const validateSelection = (targetGrades: number[]): string | null => {
    if (targetGrades.length === 0) {
      return "حداقل یک پایه تحصیلی انتخاب کنید.";
    }
    for (const gradeId of targetGrades) {
      const grade = findGrade(stages, gradeId);
      if (grade && grade.study_fields.length > 0) {
        const fieldIds = gradeStudyFields[gradeId] ?? [];
        if (fieldIds.length === 0) {
          return `برای «${grade.name}» حداقل یک رشته انتخاب کنید.`;
        }
      }
    }
    return null;
  };

  const coefficientsForGrade = (gradeId: number, defaultCoef: number) => {
    const grade = findGrade(stages, gradeId);
    if (!grade || grade.study_fields.length === 0) return undefined;

    const fieldIds = gradeStudyFields[gradeId] ?? [];
    if (fieldIds.length === 0) return undefined;

    if (activeGradeId === gradeId && fieldCoefficients && fieldCoefficients.length > 0) {
      return fieldCoefficients
        .filter((row) => fieldIds.includes(row.study_field_id))
        .map((row) => ({
          study_field_id: row.study_field_id,
          coefficient: row.coefficient,
        }));
    }

    return fieldIds.map((fieldId) => ({
      study_field_id: fieldId,
      coefficient: defaultCoef,
    }));
  };

  const saveSubject = async () => {
    if (!canEdit || !form.name.trim()) return;

    const targetGrades = editId
      ? subjects.find((s) => s.id === editId)?.grade_level_id
        ? [subjects.find((s) => s.id === editId)!.grade_level_id!]
        : []
      : selectedGrades;

    const selectionError = validateSelection(targetGrades);
    if (selectionError) {
      setError(selectionError);
      return;
    }

    setSaving(true);
    setSuccess(null);
    setError(null);
    try {
      const baseCoefficient =
        fieldCoefficients && fieldCoefficients.length > 0
          ? fieldCoefficients[0].coefficient
          : DEFAULT_COEFFICIENT;
      const payload = {
        name: form.name.trim(),
        code: form.code || null,
        type: "official" as const,
        subject_scope: form.subject_scope,
        coefficient: baseCoefficient,
        curriculum_book_id: form.curriculum_book_id ? Number(form.curriculum_book_id) : null,
      };

      if (editId) {
        const gradeId = targetGrades[0];
        await apiPatch(`/subjects/${editId}`, {
          ...payload,
          grade_level_id: gradeId,
          coefficients: coefficientsForGrade(gradeId, DEFAULT_COEFFICIENT),
        });
        setSuccess("درس به‌روزرسانی شد.");
      } else {
        const created = await Promise.all(
          targetGrades.map((gradeId) =>
            apiPost<SubjectRow>("/subjects", {
              ...payload,
              grade_level_id: gradeId,
              coefficients: coefficientsForGrade(gradeId, DEFAULT_COEFFICIENT),
            }),
          ),
        );

        if (pendingImage) {
          await Promise.all(
            created.map((subject) => {
              const formData = new FormData();
              formData.append("image", pendingImage);
              return apiPostFormData(`/subjects/${subject.id}/image`, formData);
            }),
          );
        }

        setSuccess(
          targetGrades.length > 1
            ? `درس برای ${targetGrades.length} پایه ثبت شد.`
            : "درس ثبت شد.",
        );
      }

      resetForm();
      await Promise.all([loadCatalog(), loadSubjects()]);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const startEdit = async (row: SubjectRow) => {
    if (!canEdit || !row.grade_level_id) return;
    const fieldIds = assignedFieldRows(row).map((f) => f.study_field_id);

    setEditId(row.id);
    setEditImageUrl(row.image_url ?? null);
    setPendingImage(null);
    setSelectedGrades([row.grade_level_id]);
    setGradeStudyFields({ [row.grade_level_id]: fieldIds });
    setForm({
      name: row.name,
      code: row.code ?? "",
      subject_scope: (row.subject_scope ?? "general") as "general" | "specialized",
      curriculum_book_id: row.curriculum_book_id ? String(row.curriculum_book_id) : "",
    });

    try {
      const fieldList = await apiGet<StudyFieldOption[]>(
        `/study-fields?grade_level_id=${row.grade_level_id}`,
      );
      setStudyFields(fieldList);
      const selectedFields = fieldList.filter((f) => fieldIds.includes(f.id));
      setFieldCoefficients(
        buildCoefficientRows(selectedFields, row.field_coefficients ?? [], row.coefficient),
      );
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }

    setFormOpen(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const removeSubject = async (id: number) => {
    if (!canEdit || !window.confirm("این درس حذف شود؟")) return;
    try {
      await apiDelete(`/subjects/${id}`);
      setSuccess("درس حذف شد.");
      if (editId === id) resetForm();
      await loadSubjects();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const singleGradeMode = Boolean(activeGradeId);

  return (
    <div className="space-y-4">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {success ? <Alert tone="success">{success}</Alert> : null}

      <div className="rounded-2xl border border-[var(--border)] bg-white">
        <SectionHeader
          title="جستجوی پیشرفته"
          open={searchOpen}
          onToggle={() => setSearchOpen((v) => !v)}
        />
        {searchOpen ? (
          <div className="space-y-3 p-4">
            <div className="grid gap-3 md:grid-cols-3">
              <Field label="نام درس">
                <Input
                  value={searchDraft.name}
                  onChange={(e) => setSearchDraft({ ...searchDraft, name: e.target.value })}
                />
              </Field>
              <Field label="کد درس">
                <Input
                  value={searchDraft.code}
                  onChange={(e) => setSearchDraft({ ...searchDraft, code: e.target.value })}
                />
              </Field>
              <Field label="ضریب درس">
                <Input
                  value={searchDraft.coefficient}
                  onChange={(e) => setSearchDraft({ ...searchDraft, coefficient: e.target.value })}
                />
              </Field>
              <Field label="وضعیت درس">
                <Select
                  value={searchDraft.subject_scope}
                  onChange={(e) => setSearchDraft({ ...searchDraft, subject_scope: e.target.value })}
                >
                  <option value="">همه</option>
                  <option value="general">عمومی</option>
                  <option value="specialized">تخصصی</option>
                </Select>
              </Field>
              <Field label="نوع درس">
                <Select
                  value={searchDraft.type}
                  onChange={(e) => setSearchDraft({ ...searchDraft, type: e.target.value })}
                >
                  <option value="">همه</option>
                  <option value="official">واحدهای درسی</option>
                  <option value="extra">فوق‌العاده</option>
                </Select>
              </Field>
              <Field label="پایه تحصیلی">
                <Select
                  value={searchDraft.grade_level_id}
                  onChange={(e) =>
                    setSearchDraft({ ...searchDraft, grade_level_id: e.target.value })
                  }
                >
                  <option value="">همه</option>
                  {allGrades.map((g) => (
                    <option key={g.id} value={g.id}>
                      {g.name}
                    </option>
                  ))}
                </Select>
              </Field>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                onClick={() => {
                  setPage(1);
                  setSearchApplied({ ...searchDraft });
                }}
              >
                جستجو
              </Button>
              <Button
                variant="secondary"
                onClick={() => {
                  setSearchDraft(emptySearch);
                  setSearchApplied(emptySearch);
                  setPage(1);
                }}
              >
                پاک کردن فیلترها
              </Button>
            </div>
          </div>
        ) : null}
      </div>

      {canEdit ? (
        <div className="rounded-2xl border border-[var(--border)] bg-white">
          <SectionHeader
            title={editId ? "ویرایش درس" : "ثبت دروس"}
            open={formOpen}
            onToggle={() => setFormOpen((v) => !v)}
          />
          {formOpen ? (
            <div className="grid gap-4 p-4 lg:grid-cols-2">
              <GradeLevelTree
                stages={stages}
                selected={selectedGrades}
                onChange={setSelectedGrades}
                gradeStudyFields={gradeStudyFields}
                onGradeStudyFieldsChange={setGradeStudyFields}
                readOnlyGrades={Boolean(editId)}
                description="روی نام پایه کلیک کنید تا رشته‌ها باز شوند و فقط همان‌هایی که می‌خواهید را تیک بزنید. تیک خود پایه یا مقطع، همهٔ زیرمجموعه‌ها را یکجا انتخاب می‌کند."
              />
              <div className="space-y-3">
                <div className="grid gap-3 md:grid-cols-2">
                  <Field label="نام درس">
                    <Input
                      value={form.name}
                      onChange={(e) => setForm({ ...form, name: e.target.value })}
                    />
                  </Field>
                  <Field label="کد درس">
                    <Input
                      value={form.code}
                      onChange={(e) => setForm({ ...form, code: e.target.value })}
                    />
                  </Field>
                  <Field label="وضعیت درس">
                    <Select
                      value={form.subject_scope}
                      onChange={(e) =>
                        setForm({
                          ...form,
                          subject_scope: e.target.value as "general" | "specialized",
                        })
                      }
                    >
                      <option value="general">عمومی</option>
                      <option value="specialized">تخصصی</option>
                    </Select>
                  </Field>
                  {selectedGrades.length > 0 ? (
                    <div className="block space-y-1.5">
                      <span className="text-sm font-medium text-foreground/85">
                        کتاب درسی (مشترک — اختیاری)
                      </span>
                      <SearchableSelect
                        value={form.curriculum_book_id}
                        onChange={(curriculum_book_id) =>
                          setForm({ ...form, curriculum_book_id })
                        }
                        emptyLabel="بدون کتاب"
                        placeholder="جستجوی نام یا کد کتاب…"
                        options={books.map((b) => ({
                          value: String(b.id),
                          label: b.code ? `${b.title} — ${b.code}` : b.title,
                          keywords: `${b.title} ${b.code ?? ""} ${b.id}`,
                        }))}
                      />
                      <p className="text-[11px] text-[var(--muted)]">
                        یک کتاب می‌تواند به چند درس در پایه‌ها و رشته‌های مختلف وصل شود؛ سرفصل و
                        محتوا یک‌بار تعریف می‌شود.
                      </p>
                    </div>
                  ) : null}
                </div>

                {singleGradeMode && activeStudyFields.length > 0 ? (
                  <SubjectFieldCoefficientFields
                    fields={activeStudyFields}
                    values={fieldCoefficients ?? []}
                    onChange={setFieldCoefficients}
                  />
                ) : selectedGrades.length > 1 ? (
                  <p className="text-xs text-[var(--muted)]">
                    برای ثبت هم‌زمان در چند پایه، ضریب ۱ برای هر رشته انتخاب‌شده در نظر گرفته
                    می‌شود. تنظیم دقیق ضریب هر رشته پس از ثبت از منوی ویرایش امکان‌پذیر است.
                  </p>
                ) : null}

                <SubjectImageField
                  subjectId={editId}
                  subjectName={form.name || "درس"}
                  imageUrl={editImageUrl}
                  pendingFile={editId ? null : pendingImage}
                  onPendingFileChange={setPendingImage}
                  onUpdated={(url) => {
                    setEditImageUrl(url);
                    void loadSubjects();
                  }}
                />

                <div className="flex flex-wrap gap-2">
                  <Button className="min-w-[8rem]" onClick={saveSubject} disabled={saving}>
                    {editId ? "ذخیره" : "ثبت"}
                  </Button>
                  {editId ? (
                    <Button variant="secondary" onClick={resetForm}>
                      انصراف
                    </Button>
                  ) : null}
                </div>
              </div>
            </div>
          ) : null}
        </div>
      ) : null}

      <div className="rounded-2xl border border-[var(--border)] bg-white">
        <div className="flex flex-wrap items-center justify-between gap-2 rounded-t-2xl border-b border-[var(--border)] bg-slate-100 px-4 py-2.5">
          <h2 className="text-sm font-bold text-primary">فهرست درس‌ها</h2>
          <ListExportActions
            exportPath="/subjects/export"
            filters={{ type: "official", scope: "org", sort_by: sortBy, sort_dir: sortDir }}
            contextKeys={["type", "scope", "sort_by", "sort_dir"]}
            filenameBase="subjects-official-export"
            onError={setError}
          />
        </div>
        <div className="p-4 pt-2">
          <DataTable
            columns={[
              { key: "idx", label: "#", className: "w-12" },
              { key: "name", label: "نام درس", sortable: true },
              { key: "code", label: "کد درس", sortable: true },
              { key: "coefficient", label: "ضریب (per رشته)", sortable: true },
              { key: "subject_scope", label: "وضعیت", sortable: true },
              { key: "book", label: "کتاب", sortable: true },
              { key: "grade", label: "پایه / رشته", sortable: true },
              { key: "ops", label: "عملیات", className: "w-16" },
            ]}
            loading={loading}
            sortBy={sortBy}
            sortDir={sortDir}
            onSort={(key) => {
              const next = nextHeaderSort(sortBy, sortDir, key);
              setSortBy(next.sortBy);
              setSortDir(next.sortDir);
              setPage(1);
            }}
          >
            {!loading && subjects.length === 0 ? (
              <DataTableEmpty colSpan={8} message="درسی یافت نشد." />
            ) : (
              subjects.map((row, index) => (
                <tr key={row.id} className="hover:bg-slate-50/80">
                  <td className="px-3 py-2.5 text-[var(--muted)]">
                    {((page - 1) * PAGE_SIZE + index + 1).toLocaleString("fa-IR")}
                  </td>
                  <td className="px-3 py-2.5">
                    <div className="flex items-center gap-2">
                      <SubjectAvatar name={row.name} imageUrl={row.image_url} size="sm" />
                      <span className="font-medium">{row.name}</span>
                    </div>
                  </td>
                  <td className="px-3 py-2.5">{row.code ?? "—"}</td>
                  <td className="px-3 py-2.5 text-xs">{formatCoefficientCell(row)}</td>
                  <td className="px-3 py-2.5">{subjectScopeLabel(row.subject_scope)}</td>
                  <td className="px-3 py-2.5 text-xs">
                    {row.curriculum_book ? (
                      <Link
                        href={`/academic/curriculum/books/${row.curriculum_book.id}`}
                        className="text-primary underline"
                      >
                        {row.curriculum_book.title}
                      </Link>
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="px-3 py-2.5 text-xs">
                    {formatGradeCell(row, gradeStageMap.get(row.grade_level_id ?? 0) ?? "", stages)}
                  </td>
                  <td className="px-3 py-2.5">
                    {(() => {
                      const items = [
                        ...(canEdit
                          ? [{ label: "ویرایش", onClick: () => void startEdit(row) }]
                          : []),
                        ...(row.curriculum_book_id
                          ? [
                              {
                                label: "سرفصل‌ها",
                                href: `/academic/curriculum/books/${row.curriculum_book_id}`,
                              },
                            ]
                          : []),
                        ...(canEdit
                          ? [
                              {
                                label: "حذف",
                                tone: "danger" as const,
                                onClick: () => removeSubject(row.id),
                              },
                            ]
                          : []),
                      ];
                      return items.length > 0 ? <ActionMenu items={items} /> : null;
                    })()}
                  </td>
                </tr>
              ))
            )}
          </DataTable>
          <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
        </div>
      </div>
    </div>
  );
}