"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { CurriculumBookListItem } from "@/components/academic/CurriculumBooksPanel";
import { CurriculumNav } from "@/components/academic/CurriculumNav";
import { AppShell } from "@/components/app/AppShell";
import { RequireAcademicAdmin } from "@/components/auth/RequirePermission";
import { ListExportActions } from "@/components/export/ListExportActions";
import { ActionMenu } from "@/components/layout/ActionMenu";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Pagination } from "@/components/layout/Pagination";
import { nextHeaderSort, type SortDir } from "@/components/layout/TableSort";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ApiError, GradeLevel, Paginated, SubjectRow, apiDelete, apiGet } from "@/lib/api";
import { canManageBranchSubjects } from "@/lib/permissions";
import { getActiveBranchId } from "@/lib/session-context";

export default function CurriculumBooksPage() {
  const searchParams = useSearchParams();
  const canCreateSchool = canManageBranchSubjects();
  const queryBranchId = Number(searchParams.get("branch_id") || "") || null;
  const schoolBranchId = queryBranchId || getActiveBranchId();
  const newSchoolHref = schoolBranchId
    ? `/academic/curriculum/books/new?branch_id=${schoolBranchId}`
    : null;
  const [books, setBooks] = useState<CurriculumBookListItem[]>([]);
  const [grades, setGrades] = useState<GradeLevel[]>([]);
  const [subjects, setSubjects] = useState<SubjectRow[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [gradeId, setGradeId] = useState("");
  const [subjectId, setSubjectId] = useState("");
  const [sortBy, setSortBy] = useState("grades");
  const [sortDir, setSortDir] = useState<SortDir>("asc");

  useEffect(() => {
    const timer = window.setTimeout(() => {
      setDebouncedSearch(search);
      setPage(1);
    }, 300);
    return () => window.clearTimeout(timer);
  }, [search]);

  useEffect(() => {
    setPage(1);
  }, [gradeId, subjectId, queryBranchId]);

  const loadFilters = useCallback(async () => {
    try {
      const subjectQs = new URLSearchParams({ active_only: "1" });
      if (gradeId) subjectQs.set("grade_level_id", gradeId);
      if (queryBranchId) subjectQs.set("branch_id", String(queryBranchId));
      const [gradeList, subjectList] = await Promise.all([
        apiGet<GradeLevel[]>("/grade-levels"),
        apiGet<SubjectRow[]>(`/subjects?${subjectQs.toString()}`),
      ]);
      setGrades(gradeList);
      setSubjects(subjectList);
    } catch {
      setGrades([]);
      setSubjects([]);
    }
  }, [gradeId, queryBranchId]);

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

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const qs = new URLSearchParams({
        active_only: "1",
        page: String(page),
        per_page: "20",
        sort_by: sortBy,
        sort_dir: sortDir,
      });
      if (queryBranchId) qs.set("branch_id", String(queryBranchId));
      if (debouncedSearch.trim()) qs.set("q", debouncedSearch.trim());
      if (gradeId) qs.set("used_grade_level_id", gradeId);
      if (subjectId) qs.set("subject_id", subjectId);
      const result = await apiGet<Paginated<CurriculumBookListItem>>(
        `/curriculum-books?${qs.toString()}`,
      );
      setBooks(result.data);
      setTotal(result.total);
      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);
    }
  }, [queryBranchId, page, debouncedSearch, gradeId, subjectId, sortBy, sortDir]);

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

  const filteredSubjects = useMemo(() => {
    return [...subjects].sort((a, b) => {
      const byName = a.name.localeCompare(b.name, "fa");
      if (byName !== 0) return byName;
      return (a.grade_level?.name ?? "").localeCompare(b.grade_level?.name ?? "", "fa");
    });
  }, [subjects]);

  useEffect(() => {
    if (!subjectId) return;
    if (!filteredSubjects.some((subject) => String(subject.id) === subjectId)) {
      setSubjectId("");
    }
  }, [filteredSubjects, subjectId]);

  const removeBook = async (id: number, title: string) => {
    if (!window.confirm(`کتاب «${title}» حذف شود؟`)) return;
    try {
      await apiDelete(`/curriculum-books/${id}`);
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  return (
    <RequireAcademicAdmin>
      <AppShell title="کتاب‌های درسی" subtitle="فهرست کتاب‌ها، سرفصل و محتوای مشترک">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <CurriculumNav current="books" className="" />
          <ListExportActions
            exportPath="/curriculum-books/export"
            filters={{
              active_only: 1,
              branch_id: queryBranchId,
              q: debouncedSearch.trim(),
              used_grade_level_id: gradeId,
              subject_id: subjectId,
              sort_by: sortBy,
              sort_dir: sortDir,
            }}
            contextKeys={["active_only", "branch_id", "sort_by", "sort_dir"]}
            filenameBase="curriculum-books-export"
            onError={setError}
          />
        </div>

        {error ? (
          <div className="mb-4">
            <Alert tone="error">{error}</Alert>
          </div>
        ) : null}

        <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
          <div className="grid gap-3 md:grid-cols-4">
            <Field label="جستجو">
              <Input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="عنوان یا کد کتاب…"
              />
            </Field>
            <Field label="پایه (استفاده‌شده)">
              <Select
                value={gradeId}
                onChange={(e) => {
                  setGradeId(e.target.value);
                  setPage(1);
                }}
              >
                <option value="">همه</option>
                {grades.map((grade) => (
                  <option key={grade.id} value={grade.id}>
                    {grade.name}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="درس متصل">
              <Select
                value={subjectId}
                onChange={(e) => {
                  setSubjectId(e.target.value);
                  setPage(1);
                }}
              >
                <option value="">همه</option>
                {filteredSubjects.map((subject) => (
                  <option key={subject.id} value={subject.id}>
                    {subject.name}
                    {subject.grade_level?.name ? ` — ${subject.grade_level.name}` : ""}
                  </option>
                ))}
              </Select>
            </Field>
            <div className="flex items-end justify-end gap-2">
              <Button
                variant="secondary"
                onClick={() => {
                  setSearch("");
                  setDebouncedSearch("");
                  setGradeId("");
                  setSubjectId("");
                  setPage(1);
                }}
              >
                پاک کردن
              </Button>
              {canCreateSchool && newSchoolHref ? (
                <Link href={newSchoolHref}>
                  <Button>کتاب مدرسه</Button>
                </Link>
              ) : null}
            </div>
          </div>
          <p className="text-xs text-[var(--muted)]">
            نمایش {books.length.toLocaleString("fa-IR")} از {total.toLocaleString("fa-IR")}{" "}
            کتاب
          </p>
        </div>

        <DataTable
          columns={[
            { key: "title", label: "عنوان", sortable: true },
            { key: "owner", label: "مالک", sortable: true },
            { key: "code", label: "کد", sortable: true },
            { key: "grades", label: "پایه‌ها", sortable: true },
            { key: "chapters", label: "فصول", sortable: true },
            { key: "subjects", 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 && books.length === 0 ? (
            <DataTableEmpty colSpan={7} message="کتابی یافت نشد." />
          ) : (
            books.map((book) => (
              <tr key={book.id} className="hover:bg-slate-50/80">
                <td className="px-3 py-2.5">
                  <Link
                    href={`/academic/curriculum/books/${book.id}`}
                    className="font-medium text-primary underline"
                  >
                    {book.title}
                  </Link>
                </td>
                <td className="px-3 py-2.5">{book.branch?.name ?? "هلدینگ"}</td>
                <td className="px-3 py-2.5">{book.code ?? "—"}</td>
                <td className="px-3 py-2.5 text-xs">
                  {(book.linked_grades ?? []).map((g) => g.name).join("، ") || "—"}
                </td>
                <td className="px-3 py-2.5">{(book.chapters_count ?? 0).toLocaleString("fa-IR")}</td>
                <td className="px-3 py-2.5">
                  {(book.linked_subjects_count ?? 0).toLocaleString("fa-IR")}
                </td>
                <td className="px-3 py-2.5">
                  {book.can_edit ? (
                    <ActionMenu
                      items={[
                        {
                          label: "ویرایش",
                          href: `/academic/curriculum/books/${book.id}`,
                        },
                        {
                          label: "حذف",
                          tone: "danger",
                          onClick: () => removeBook(book.id, book.title),
                        },
                      ]}
                    />
                  ) : null}
                </td>
              </tr>
            ))
          )}
        </DataTable>
        <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
      </AppShell>
    </RequireAcademicAdmin>
  );
}