"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ActionMenu } from "@/components/layout/ActionMenu";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { ListExportActions } from "@/components/export/ListExportActions";
import { ClassStudentsModal } from "@/components/school/ClassStudentsModal";
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 {
  AcademicYear,
  ApiError,
  apiDelete,
  apiGet,
  apiPatch,
  apiPost,
  getAcademicYearId,
} from "@/lib/api";
import type { GradeLevel } from "@/lib/types";

interface ClassRow {
  id: number;
  name: string;
  code?: string | null;
  grade_level_id: number;
  study_field_id?: number | null;
  is_extraordinary: boolean;
  students_count?: number;
  grade_level?: { id: number; name: string } | null;
  study_field?: { id: number; name: string } | null;
}

interface StudyFieldRow {
  id: number;
  name: string;
}

interface SchoolDetail {
  id: number;
  name: string;
  grade_level_ids: number[];
}

export default function SchoolClassesPage() {
  const { id } = useParams<{ id: string }>();
  const branchId = Number(id);

  const [school, setSchool] = useState<SchoolDetail | null>(null);
  const [rows, setRows] = useState<ClassRow[]>([]);
  const [grades, setGrades] = useState<GradeLevel[]>([]);
  const [years, setYears] = useState<AcademicYear[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState({
    name: "",
    code: "",
    grade_level_id: "",
    study_field_id: "",
    is_extraordinary: false,
  });
  const [studyFields, setStudyFields] = useState<StudyFieldRow[]>([]);
  const [studentsClass, setStudentsClass] = useState<ClassRow | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [detail, classes, gradeList, yearList] = await Promise.all([
        apiGet<SchoolDetail>(`/branches/${branchId}/directory`),
        apiGet<ClassRow[]>(`/class-rooms?branch_id=${branchId}`),
        apiGet<GradeLevel[]>(`/grade-levels?branch_id=${branchId}`),
        apiGet<AcademicYear[]>("/academic-years?active_only=1"),
      ]);
      setSchool(detail);
      setRows(classes);
      const allowed = new Set(detail.grade_level_ids ?? []);
      setGrades(gradeList.filter((g) => allowed.has(g.id)));
      setYears(yearList);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [branchId]);

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

  useEffect(() => {
    if (!form.grade_level_id) {
      setStudyFields([]);
      return;
    }
    apiGet<StudyFieldRow[]>(
      `/study-fields?grade_level_id=${form.grade_level_id}&branch_id=${branchId}`,
    )
      .then(setStudyFields)
      .catch(() => setStudyFields([]));
  }, [form.grade_level_id, branchId]);

  const resetForm = () => {
    setEditId(null);
    setForm({ name: "", code: "", grade_level_id: "", study_field_id: "", is_extraordinary: false });
  };

  const save = async () => {
    setError(null);
    setMessage(null);
    const yearId = getAcademicYearId() ?? years.find((y) => y.is_current)?.id ?? years[0]?.id;
    if (!yearId) {
      setError("سال تحصیلی انتخاب نشده است.");
      return;
    }
    try {
      if (studyFields.length > 0 && !form.study_field_id) {
        setError("برای این پایه انتخاب رشته تحصیلی الزامی است.");
        return;
      }
      const payload = {
        name: form.name,
        code: form.code || null,
        grade_level_id: Number(form.grade_level_id),
        study_field_id: form.study_field_id ? Number(form.study_field_id) : null,
        is_extraordinary: form.is_extraordinary,
      };
      if (editId) {
        await apiPatch(`/class-rooms/${editId}`, payload);
        setMessage("کلاس به‌روزرسانی شد.");
      } else {
        await apiPost("/class-rooms", {
          ...payload,
          branch_id: branchId,
          academic_year_id: yearId,
        });
        setMessage("کلاس ثبت شد.");
      }
      resetForm();
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    }
  };

  const remove = async (classId: number) => {
    if (!confirm("آیا از حذف این کلاس مطمئن هستید؟")) return;
    await apiDelete(`/class-rooms/${classId}`);
    await load();
  };

  return (
    <AppShell
      title="فهرست کلاس‌ها"
      subtitle={school?.name ?? `مدرسه #${branchId}`}
      breadcrumbLabels={{ school: school?.name }}
    >
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      <SchoolSetupNav branchId={branchId} current="classes" />

      <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <h2 className="mb-3 text-sm font-bold">
          {editId ? "ویرایش کلاس" : `ثبت کلاس‌های مدرسه ${school?.name ?? ""}`}
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <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.grade_level_id}
              onChange={(e) =>
                setForm({ ...form, grade_level_id: e.target.value, study_field_id: "" })
              }
            >
              <option value="">لطفا انتخاب کنید</option>
              {grades.map((g) => (
                <option key={g.id} value={g.id}>{g.name}</option>
              ))}
            </Select>
          </Field>
          {studyFields.length > 0 ? (
            <Field label="رشته تحصیلی">
              <Select
                value={form.study_field_id}
                onChange={(e) => setForm({ ...form, study_field_id: e.target.value })}
              >
                <option value="">لطفا انتخاب کنید</option>
                {studyFields.map((f) => (
                  <option key={f.id} value={f.id}>{f.name}</option>
                ))}
              </Select>
            </Field>
          ) : null}
          <label className="flex items-end gap-2 pb-2 text-sm">
            <input
              type="checkbox"
              checked={form.is_extraordinary}
              onChange={(e) => setForm({ ...form, is_extraordinary: e.target.checked })}
            />
            کلاس فوق‌العاده
          </label>
        </div>
        <div className="mt-3 flex gap-2">
          <Button onClick={save}>{editId ? "ذخیره" : "افزودن کلاس"}</Button>
          {editId ? (
            <Button variant="secondary" onClick={resetForm}>انصراف</Button>
          ) : null}
        </div>
      </div>

      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-sm font-bold">فهرست کلاس‌ها</h2>
          <ListExportActions
            exportPath="/class-rooms/export"
            filters={{ branch_id: branchId }}
            contextKeys={["branch_id"]}
            filenameBase="class-rooms-export"
            onError={setError}
          />
        </div>
        <DataTable
          loading={loading}
          columns={[
            { key: "idx", label: "#" },
            { key: "name", label: "نام کلاس" },
            { key: "code", label: "کد کلاس" },
            { key: "grade", label: "پایه کلاس" },
            { key: "field", label: "رشته" },
            { key: "students", label: "تعداد دانش‌آموز" },
            { key: "ops", label: "عملیات" },
          ]}
        >
          {rows.length === 0 ? (
            <DataTableEmpty colSpan={7} />
          ) : (
            rows.map((row, i) => (
              <tr key={row.id} className="hover:bg-slate-50">
                <td className="px-3 py-3">{i + 1}</td>
                <td className="px-3 py-3 font-medium">
                  {row.name}
                  {row.is_extraordinary ? (
                    <span className="mr-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] text-amber-800">فوق‌العاده</span>
                  ) : null}
                </td>
                <td className="px-3 py-3 font-mono text-xs">{row.code ?? "—"}</td>
                <td className="px-3 py-3">{row.grade_level?.name ?? "—"}</td>
                <td className="px-3 py-3 text-xs">{row.study_field?.name ?? "—"}</td>
                <td className="px-3 py-3">{(row.students_count ?? 0).toLocaleString("fa-IR")}</td>
                <td className="px-3 py-3">
                  <div className="flex items-center gap-2">
                    <Link
                      href={`/schools/${branchId}/classes/${row.id}/schedule`}
                      className="rounded-lg border border-primary/30 px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/5"
                    >
                      برنامه هفتگی
                    </Link>
                    <Link
                      href={`/schools/${branchId}/classes/${row.id}/placement`}
                      className="rounded-lg border border-primary/30 px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/5"
                    >
                      کلاس‌بندی
                    </Link>
                    <button
                      type="button"
                      className="rounded-lg border border-primary/30 px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/5"
                      onClick={() => setStudentsClass(row)}
                    >
                      دانش‌آموزان کلاس
                    </button>
                    <Link
                      href={`/students?class_room_id=${row.id}`}
                      className="rounded-lg border px-2 py-1 text-[11px] text-primary hover:bg-slate-50"
                    >
                      چاپ رمز دانش‌آموزان
                    </Link>
                    <ActionMenu
                      widthClass="w-56"
                      items={[
                        {
                          label: "ویرایش",
                          onClick: () => {
                            setEditId(row.id);
                            setForm({
                              name: row.name,
                              code: row.code ?? "",
                              grade_level_id: String(row.grade_level_id),
                              study_field_id: row.study_field_id ? String(row.study_field_id) : "",
                              is_extraordinary: row.is_extraordinary,
                            });
                          },
                        },
                        {
                          label: "حذف",
                          tone: "danger",
                          onClick: () => remove(row.id),
                        },
                        {
                          label: "مدیریت برنامه هفتگی کلاس",
                          href: `/schools/${branchId}/classes/${row.id}/schedule`,
                          divider: true,
                        },
                        {
                          label: "دروس و معلمان کلاس",
                          href: `/schools/${branchId}/classes/${row.id}/subjects`,
                        },
                        {
                          label: "کلاس‌بندی",
                          href: `/schools/${branchId}/classes/${row.id}/placement`,
                          tone: "primary",
                        },
                        {
                          label: "مشاهده دانش‌آموزان کلاس",
                          onClick: () => setStudentsClass(row),
                        },
                      ]}
                    />
                  </div>
                </td>
              </tr>
            ))
          )}
        </DataTable>
      </div>

      <ClassStudentsModal
        open={studentsClass != null}
        classId={studentsClass?.id ?? 0}
        className={studentsClass?.name ?? ""}
        onClose={() => setStudentsClass(null)}
        onChanged={() => void load()}
      />
    </AppShell>
  );
}