"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import {
  formatCoefficientsSummary,
  SubjectFieldCoefficientFields,
} from "@/components/academic/SubjectFieldCoefficientFields";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { CardListSkeleton } from "@/components/ui/Skeleton";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import {
  ApiError,
  GradeLevel,
  StudyFieldOption,
  SubjectRow,
  apiDelete,
  apiGet,
  apiPatch,
  apiPost,
} from "@/lib/api";
import { canManageBranchSubjects } from "@/lib/permissions";

interface CurriculumBookOption {
  id: number;
  title: string;
  branch_id?: number | null;
  can_edit?: boolean;
}

interface BranchSubjectsManagerProps {
  branchId: number;
  branchName?: string;
}

const emptyForm = {
  name: "",
  code: "",
  coefficient: "1",
  curriculum_book_id: "",
  grade_level_id: "",
};

function buildCoefficientRows(
  fields: StudyFieldOption[],
  existing: SubjectRow["field_coefficients"],
) {
  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: Number(row?.coefficient) > 0 ? Number(row?.coefficient) : 0,
    };
  });
}

export function BranchSubjectsManager({ branchId, branchName }: BranchSubjectsManagerProps) {
  const canEditBranch = canManageBranchSubjects();

  const [grades, setGrades] = useState<GradeLevel[]>([]);
  const [gradeId, setGradeId] = useState("");
  const [fieldId, setFieldId] = useState("");
  const [studyFields, setStudyFields] = useState<StudyFieldOption[]>([]);
  const [subjects, setSubjects] = useState<SubjectRow[]>([]);
  const [books, setBooks] = useState<CurriculumBookOption[]>([]);
  const [form, setForm] = useState(emptyForm);
  const [fieldCoefficients, setFieldCoefficients] = useState<SubjectRow["field_coefficients"]>([]);
  const [editId, setEditId] = useState<number | null>(null);
  const [formOpen, setFormOpen] = useState(false);
  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 loadGrades = useCallback(async () => {
    const detail = await apiGet<{ grade_level_ids?: number[] }>(`/branches/${branchId}/directory`);
    const allGrades = await apiGet<GradeLevel[]>("/grade-levels");
    const allowed = new Set(detail.grade_level_ids ?? []);
    const filtered = allGrades.filter((g) => allowed.has(g.id));
    setGrades(filtered);
    setGradeId((current) => current || (filtered[0] ? String(filtered[0].id) : ""));
  }, [branchId]);

  const loadData = useCallback(async (gid: string) => {
    if (!gid) {
      setSubjects([]);
      setStudyFields([]);
      return;
    }
    setLoading(true);
    try {
      const [subjectList, bookList, fieldList] = await Promise.all([
        apiGet<SubjectRow[]>(
          `/subjects?grade_level_id=${gid}&type=official&scope=all&branch_id=${branchId}&active_only=1`,
        ),
        apiGet<CurriculumBookOption[]>(`/curriculum-books?branch_id=${branchId}&active_only=1`),
        apiGet<StudyFieldOption[]>(`/study-fields?grade_level_id=${gid}&branch_id=${branchId}`),
      ]);
      setSubjects(
        [...subjectList].sort((a, b) => a.name.localeCompare(b.name, "fa")),
      );
      setBooks(bookList);
      setStudyFields(fieldList);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [branchId]);

  useEffect(() => {
    loadGrades().catch((err) => setError(err instanceof ApiError ? err.message : "خطا"));
  }, [loadGrades]);

  useEffect(() => {
    if (gradeId) {
      setFieldId("");
      loadData(gradeId);
      setForm((prev) => ({ ...prev, grade_level_id: gradeId }));
    }
  }, [gradeId, loadData]);

  useEffect(() => {
    if (studyFields.length > 0) {
      setFieldCoefficients((prev) => buildCoefficientRows(studyFields, prev));
    } else {
      setFieldCoefficients([]);
    }
  }, [studyFields]);

  const resetForm = () => {
    setForm({ ...emptyForm, grade_level_id: gradeId });
    setFieldCoefficients(buildCoefficientRows(studyFields, []));
    setEditId(null);
    setFormOpen(false);
  };

  const openAdd = () => {
    setForm({ ...emptyForm, grade_level_id: gradeId });
    setFieldCoefficients(buildCoefficientRows(studyFields, []));
    setEditId(null);
    setFormOpen(true);
  };

  const saveBranchSubject = async () => {
    if (!gradeId || !form.name.trim() || !canEditBranch) return;
    setSaving(true);
    setSuccess(null);
    try {
      const body = {
        name: form.name.trim(),
        code: form.code || null,
        type: "official" as const,
        branch_id: branchId,
        grade_level_id: Number(gradeId),
        coefficient: Number(form.coefficient) || 1,
        curriculum_book_id: form.curriculum_book_id ? Number(form.curriculum_book_id) : null,
        coefficients: studyFields.length > 0
          ? (fieldCoefficients ?? []).filter((row) => Number(row.coefficient) > 0)
          : undefined,
      };
      if (editId) {
        await apiPatch(`/subjects/${editId}`, body);
        setSuccess("درس مدرسه به‌روزرسانی شد.");
      } else {
        await apiPost("/subjects", body);
        setSuccess("درس مدرسه اضافه شد.");
      }
      resetForm();
      await loadData(gradeId);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const startEdit = (row: SubjectRow) => {
    if (!row.can_edit || !(row.is_branch_subject || row.branch_id)) return;
    setEditId(row.id);
    setForm({
      name: row.name,
      code: row.code ?? "",
      coefficient: String(row.coefficient),
      curriculum_book_id: row.curriculum_book_id ? String(row.curriculum_book_id) : "",
      grade_level_id: gradeId,
    });
    setFieldCoefficients(
      buildCoefficientRows(studyFields, row.field_coefficients ?? []),
    );
    setFormOpen(true);
  };

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

  const selectedGrade = grades.find((g) => String(g.id) === gradeId);

  const isTaughtInField = (subject: SubjectRow, studyFieldId: number) => {
    const rows = subject.field_coefficients ?? [];
    const match = rows.find((row) => row.study_field_id === studyFieldId);
    if (match) return Number(match.coefficient) > 0;
    return (subject.assigned_study_field_ids ?? []).includes(studyFieldId);
  };

  const visibleSubjects = useMemo(() => {
    if (!fieldId) return subjects;
    const studyFieldId = Number(fieldId);
    return subjects.filter((subject) => isTaughtInField(subject, studyFieldId));
  }, [subjects, fieldId]);

  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 p-4">
        <div className="grid gap-3 md:grid-cols-2">
          <Field label="پایه تحصیلی">
            <Select value={gradeId} onChange={(e) => setGradeId(e.target.value)}>
              <option value="">انتخاب پایه</option>
              {grades.map((g) => (
                <option key={g.id} value={g.id}>{g.name}</option>
              ))}
            </Select>
          </Field>
          {gradeId && studyFields.length > 0 ? (
            <Field label="رشته">
              <Select value={fieldId} onChange={(e) => setFieldId(e.target.value)}>
                <option value="">همه رشته‌ها</option>
                {studyFields.map((field) => (
                  <option key={field.id} value={field.id}>{field.name}</option>
                ))}
              </Select>
            </Field>
          ) : null}
        </div>
      </div>

      {gradeId ? (
        <>
          <section className="space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <h2 className="font-bold text-primary">فهرست دروس</h2>
                <p className="text-xs text-[var(--muted)]">
                  {branchName ? `${branchName} — ` : ""}
                  همه دروس این پایه؛ ویرایش و حذف فقط برای دروس اختصاصی مدرسه.
                </p>
              </div>
              {canEditBranch ? (
                <Button onClick={openAdd}>افزودن درس مدرسه</Button>
              ) : null}
            </div>
            {loading ? (
              <CardListSkeleton rows={4} />
            ) : subjects.length === 0 ? (
              <Alert tone="info">برای این پایه درسی تعریف نشده است.</Alert>
            ) : visibleSubjects.length === 0 ? (
              <Alert tone="info">برای این رشته درسی تعریف نشده است.</Alert>
            ) : (
              <div className="space-y-2">
                {visibleSubjects.map((s) => {
                  const isSchool = Boolean(s.is_branch_subject || s.branch_id);
                  return (
                    <div
                      key={s.id}
                      className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-[var(--border)] p-3"
                    >
                      <div className="flex min-w-0 items-center gap-3">
                        <SubjectAvatar name={s.name} imageUrl={s.image_url} size="sm" />
                        <div>
                          <div className="flex flex-wrap items-center gap-2 font-medium">
                            <span>{s.name}</span>
                            <span
                              className={`rounded-full px-2 py-0.5 text-[10px] ${
                                isSchool
                                  ? "bg-amber-100 text-amber-800"
                                  : "bg-slate-100 text-slate-600"
                              }`}
                            >
                              {isSchool ? "مدرسه" : "هلدینگ"}
                            </span>
                          </div>
                          <div className="text-xs text-[var(--muted)]">
                            {formatCoefficientsSummary(studyFields, s.field_coefficients ?? [], s.coefficient)}
                          </div>
                        </div>
                      </div>
                      {s.curriculum_book_id || (s.can_edit && isSchool) ? (
                        <div className="flex gap-2">
                          {s.curriculum_book_id ? (
                            <Link href={`/academic/curriculum/books/${s.curriculum_book_id}`}>
                              <Button variant="secondary" className="!px-3 !py-1 text-xs">سرفصل</Button>
                            </Link>
                          ) : null}
                          {s.can_edit && isSchool ? (
                            <>
                              <Button variant="secondary" className="!px-3 !py-1 text-xs" onClick={() => startEdit(s)}>
                                ویرایش
                              </Button>
                              <Button variant="secondary" className="!px-3 !py-1 text-xs" onClick={() => removeSubject(s.id)}>
                                حذف
                              </Button>
                            </>
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            )}
          </section>

          {formOpen ? (
            <div
              className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
              onClick={resetForm}
            >
              <div
                role="dialog"
                aria-modal="true"
                aria-labelledby="branch-subject-form-title"
                className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-2xl border border-[var(--border)] bg-white p-5 shadow-xl"
                onClick={(e) => e.stopPropagation()}
              >
                <h2 id="branch-subject-form-title" className="font-bold text-primary">
                  {editId ? "ویرایش درس مدرسه" : "افزودن درس مدرسه"}
                  {selectedGrade ? ` — ${selectedGrade.name}` : ""}
                </h2>
                <p className="mt-1 text-xs text-[var(--muted)]">
                  این فرم فقط درس اختصاصی همین مدرسه را ثبت یا ویرایش می‌کند.
                </p>
                <div className="mt-4 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.curriculum_book_id}
                      onChange={(e) => setForm({ ...form, curriculum_book_id: e.target.value })}
                    >
                      <option value="">بدون کتاب</option>
                      {books.map((b) => (
                        <option key={b.id} value={b.id}>
                          {b.title}
                          {b.branch_id ? " — مدرسه" : " — هلدینگ"}
                        </option>
                      ))}
                    </Select>
                  </Field>
                </div>
                <div className="mt-3">
                  <SubjectFieldCoefficientFields
                    fields={studyFields}
                    values={fieldCoefficients ?? []}
                    onChange={setFieldCoefficients}
                    defaultCoefficient={form.coefficient}
                    onDefaultCoefficientChange={(value) => setForm({ ...form, coefficient: value })}
                  />
                </div>
                <div className="mt-5 flex flex-wrap justify-end gap-2">
                  <Link href={`/academic/curriculum/books/new?branch_id=${branchId}`}>
                    <Button variant="secondary">کتاب / سرفصل جدید</Button>
                  </Link>
                  <Button variant="secondary" onClick={resetForm}>انصراف</Button>
                  <Button onClick={saveBranchSubject} disabled={saving}>
                    {editId ? "ذخیره" : "افزودن"}
                  </Button>
                </div>
              </div>
            </div>
          ) : null}
        </>
      ) : (
        <Alert tone="info">ابتدا پایه را انتخاب کنید.</Alert>
      )}
    </div>
  );
}