"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { ActionMenu } from "@/components/layout/ActionMenu";
import { Button } from "@/components/ui/Button";
import { Input, Select } from "@/components/ui/Field";
import { SearchableSelect } from "@/components/ui/SearchableSelect";
import { ApiError, apiDelete, apiGet } from "@/lib/api";
import { canManageBranchSubjects, canManageOrgSubjects } from "@/lib/permissions";

export interface CurriculumBookListItem {
  id: number;
  title: string;
  code?: string | null;
  branch_id?: number | null;
  can_edit?: boolean;
  chapters_count?: number;
  linked_subjects_count?: number;
  branch?: { id: number; name: string; code?: string } | null;
  linked_grades?: Array<{ id: number; name: string }>;
  linked_subjects?: Array<{
    id: number;
    name: string;
    code?: string | null;
    grade_level_id?: number | null;
    grade_level?: { id: number; name: string } | null;
  }>;
}

function normalize(value: string) {
  return value.trim().toLowerCase();
}

export function CurriculumBooksPanel({
  currentBookId,
  compact = false,
  branchId,
  onBooksChange,
}: {
  currentBookId?: number | "new";
  compact?: boolean;
  branchId?: number | null;
  onBooksChange?: () => void;
}) {
  const router = useRouter();
  const canCreateOrg = canManageOrgSubjects();
  const canCreateSchool = canManageBranchSubjects() && Boolean(branchId);
  const [books, setBooks] = useState<CurriculumBookListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [gradeId, setGradeId] = useState("");
  const [subjectId, setSubjectId] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const qs = new URLSearchParams({ active_only: "1" });
      if (branchId) qs.set("branch_id", String(branchId));
      const list = await apiGet<CurriculumBookListItem[]>(`/curriculum-books?${qs.toString()}`);
      setBooks(list);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [branchId]);

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

  const gradeOptions = useMemo(() => {
    const map = new Map<number, string>();
    for (const book of books) {
      for (const grade of book.linked_grades ?? []) {
        map.set(grade.id, grade.name);
      }
    }
    return [...map.entries()]
      .map(([id, name]) => ({ id, name }))
      .sort((a, b) => a.name.localeCompare(b.name, "fa"));
  }, [books]);

  const subjectOptions = useMemo(() => {
    const map = new Map<
      number,
      { id: number; name: string; code: string; gradeName: string }
    >();
    for (const book of books) {
      for (const subject of book.linked_subjects ?? []) {
        map.set(subject.id, {
          id: subject.id,
          name: subject.name,
          code: subject.code ?? "",
          gradeName: subject.grade_level?.name ?? "",
        });
      }
    }
    return [...map.values()].sort((a, b) => {
      const byName = a.name.localeCompare(b.name, "fa");
      if (byName !== 0) return byName;
      return a.gradeName.localeCompare(b.gradeName, "fa");
    });
  }, [books]);

  const filteredSubjects = useMemo(() => {
    if (!gradeId) return subjectOptions;
    const gid = Number(gradeId);
    return subjectOptions.filter((subject) => {
      const bookSubject = books
        .flatMap((book) => book.linked_subjects ?? [])
        .find((row) => row.id === subject.id);
      return bookSubject?.grade_level_id === gid || bookSubject?.grade_level?.id === gid;
    });
  }, [subjectOptions, gradeId, books]);

  const filteredBooks = useMemo(() => {
    const q = normalize(search);
    const gid = gradeId ? Number(gradeId) : null;
    const sid = subjectId ? Number(subjectId) : null;

    return books.filter((book) => {
      if (q) {
        const haystack = `${book.title} ${book.code ?? ""}`.toLowerCase();
        if (!haystack.includes(q)) return false;
      }
      if (gid && !(book.linked_grades ?? []).some((grade) => grade.id === gid)) {
        return false;
      }
      if (sid && !(book.linked_subjects ?? []).some((subject) => subject.id === sid)) {
        return false;
      }
      return true;
    });
  }, [books, search, gradeId, subjectId]);

  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();
      onBooksChange?.();
      if (currentBookId === id) {
        router.push("/academic/curriculum/books");
      }
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const clearFilters = () => {
    setSearch("");
    setGradeId("");
    setSubjectId("");
  };

  const hasFilters = Boolean(search || gradeId || subjectId);
  const requiresScope = compact && !gradeId && !subjectId;

  return (
    <div
      className={`flex flex-col rounded-2xl border border-[var(--border)] bg-white ${
        compact ? "sticky top-4 max-h-[calc(100vh-6rem)]" : ""
      }`}
    >
      <div className="shrink-0 space-y-2 border-b border-[var(--border)] p-3">
        <div className="flex items-center justify-between gap-2">
          <h2 className="text-sm font-bold text-primary">کتاب‌های درسی</h2>
          {canCreateOrg || canCreateSchool ? (
            <Link
              href={
                branchId
                  ? `/academic/curriculum/books/new?branch_id=${branchId}`
                  : "/academic/curriculum/books/new"
              }
            >
              <Button variant="secondary" className="!px-2 !py-1 text-xs">
                + جدید
              </Button>
            </Link>
          ) : null}
        </div>

        <Input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="جستجوی عنوان یا کد…"
        />

        <Select value={gradeId} onChange={(e) => setGradeId(e.target.value)}>
          <option value="">همه پایه‌ها</option>
          {gradeOptions.map((grade) => (
            <option key={grade.id} value={grade.id}>
              {grade.name}
            </option>
          ))}
        </Select>

        <SearchableSelect
          value={subjectId}
          onChange={setSubjectId}
          emptyLabel="همه دروس"
          placeholder="جستجوی نام یا کد درس…"
          options={filteredSubjects.map((subject) => ({
            value: String(subject.id),
            label: [
              subject.name,
              subject.code ? `کد ${subject.code}` : "",
              subject.gradeName,
            ]
              .filter(Boolean)
              .join(" — "),
            keywords: `${subject.name} ${subject.code} ${subject.id}`,
          }))}
        />

        {requiresScope ? (
          <p className="rounded-lg bg-amber-50 px-2 py-1.5 text-[11px] leading-5 text-amber-800">
            یکی از فیلترهای پایه یا درس را انتخاب کنید تا فهرست کتاب‌ها نمایش داده شود.
          </p>
        ) : null}

        <div className="flex items-center justify-between gap-2 text-[11px] text-[var(--muted)]">
          <span>
            {requiresScope
              ? "پایه یا درس را انتخاب کنید"
              : `${filteredBooks.length.toLocaleString("fa-IR")} از ${books.length.toLocaleString("fa-IR")} کتاب`}
          </span>
          {hasFilters ? (
            <button type="button" className="text-primary underline" onClick={clearFilters}>
              پاک کردن فیلتر
            </button>
          ) : null}
        </div>
      </div>

      {error ? <p className="shrink-0 px-3 pt-2 text-xs text-red-600">{error}</p> : null}

      <div className="min-h-0 flex-1 overflow-y-auto p-2">
        {loading ? (
          <p className="px-2 py-3 text-xs text-[var(--muted)]">در حال بارگذاری…</p>
        ) : requiresScope ? (
          <p className="px-2 py-3 text-xs leading-6 text-[var(--muted)]">
            فهرست کتاب‌ها در حالت «همه پایه‌ها» و «همه دروس» خالی است. برای دیدن کتاب‌ها حتماً پایه یا
            درس را انتخاب کنید.
          </p>
        ) : filteredBooks.length === 0 ? (
          <p className="px-2 py-3 text-xs text-[var(--muted)]">
            {books.length === 0 ? "هنوز کتابی ثبت نشده است." : "نتیجه‌ای یافت نشد."}
          </p>
        ) : (
          <ul className="space-y-1">
            {filteredBooks.map((book) => {
              const active = currentBookId === book.id;
              const grades = (book.linked_grades ?? []).map((g) => g.name).join("، ");
              return (
                <li
                  key={book.id}
                  className={`flex items-center gap-2 rounded-xl border px-2 py-2 text-sm ${
                    active
                      ? "border-primary/30 bg-primary/5"
                      : "border-[var(--border)] hover:bg-slate-50"
                  }`}
                >
                  <Link
                    href={`/academic/curriculum/books/${book.id}`}
                    className="min-w-0 flex-1"
                  >
                    <div className="truncate font-medium">{book.title}</div>
                    <div className="truncate text-[10px] text-[var(--muted)]">
                      {book.branch?.name ? `${book.branch.name} · ` : "هلدینگ · "}
                      {book.code ? `${book.code} · ` : ""}
                      {(book.chapters_count ?? 0).toLocaleString("fa-IR")} فصل
                      {(book.linked_subjects_count ?? 0) > 0
                        ? ` · ${book.linked_subjects_count} درس`
                        : ""}
                      {grades ? ` · ${grades}` : ""}
                    </div>
                  </Link>
                  {book.can_edit ? (
                    <ActionMenu
                      items={[
                        {
                          label: "ویرایش",
                          href: `/academic/curriculum/books/${book.id}`,
                        },
                        {
                          label: "حذف",
                          tone: "danger",
                          onClick: () => removeBook(book.id, book.title),
                        },
                      ]}
                    />
                  ) : null}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}