"use client";

import { useParams } from "@/lib/route-params";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ListExportActions } from "@/components/export/ListExportActions";
import { SchoolSetupNav } from "@/components/school/SchoolSetupNav";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { ApiError, apiGet, apiPatch } from "@/lib/api";
import { classBreadcrumbLabels } from "@/lib/breadcrumbs";

interface ClassSubjectRow {
  id: number;
  class_room_id: number;
  subject_id: number;
  teacher_user_id?: number | null;
  subject?: {
    id: number;
    name: string;
    code?: string | null;
    image_url?: string | null;
    effective_coefficient?: number | null;
  } | null;
  teacher?: { id: number; name: string; national_code?: string | null } | null;
}

interface ClassDetail {
  id: number;
  name: string;
  code?: string | null;
  field?: string | null;
  grade_level?: { name: string } | null;
  education_stage?: { name: string } | null;
  study_field?: { name: string } | null;
  academic_year?: { title: string } | null;
  branch?: { name: string } | null;
}

interface TeacherOption {
  id: number;
  name: string;
  national_code?: string | null;
}

export default function ClassSubjectsPage() {
  const { id, classId } = useParams<{ id: string; classId: string }>();
  const branchId = Number(id);
  const classRoomId = Number(classId);

  const [classRoom, setClassRoom] = useState<ClassDetail | null>(null);
  const [rows, setRows] = useState<ClassSubjectRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [editing, setEditing] = useState<ClassSubjectRow | null>(null);
  const [query, setQuery] = useState("");
  const [options, setOptions] = useState<TeacherOption[]>([]);
  const [selected, setSelected] = useState<TeacherOption | null>(null);
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [cls, list] = await Promise.all([
        apiGet<ClassDetail>(`/class-rooms/${classRoomId}`),
        apiGet<ClassSubjectRow[]>(`/class-subjects?class_room_id=${classRoomId}`),
      ]);
      setClassRoom(cls);
      setRows(list);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [classRoomId]);

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

  const openAssign = (row: ClassSubjectRow) => {
    setEditing(row);
    setQuery(row.teacher?.name ?? "");
    setSelected(row.teacher ? { id: row.teacher.id, name: row.teacher.name, national_code: row.teacher.national_code } : null);
    setOptions([]);
    setError(null);
    setSuccess(null);
  };

  const closeModal = () => {
    setEditing(null);
    setQuery("");
    setOptions([]);
    setSelected(null);
  };

  const searchTeachers = async (q: string) => {
    setQuery(q);
    if (q.length < 2) {
      setOptions([]);
      return;
    }
    try {
      const list = await apiGet<TeacherOption[]>(
        `/users/search?q=${encodeURIComponent(q)}&branch_id=${branchId}`,
      );
      setOptions(list);
    } catch {
      setOptions([]);
    }
  };

  const saveTeacher = async (teacherUserId: number | null) => {
    if (!editing) return;
    setSaving(true);
    setSuccess(null);
    try {
      await apiPatch(`/class-subjects/${editing.id}`, { teacher_user_id: teacherUserId });
      setSuccess(
        teacherUserId
          ? `معلم درس «${editing.subject?.name ?? ""}» ذخیره شد.`
          : `معلم درس «${editing.subject?.name ?? ""}» حذف شد.`,
      );
      closeModal();
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const assignedCount = rows.filter((row) => row.teacher).length;

  return (
    <AppShell
      title="دروس و معلمان کلاس"
      breadcrumbLabels={classBreadcrumbLabels(classRoom)}
    >
      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <SchoolSetupNav branchId={branchId} classId={classRoomId} current="class-subjects" />
        <ListExportActions
          exportPath="/class-subjects/export"
          filters={{ class_room_id: classRoomId }}
          filenameBase="class-subjects-export"
          onError={setError}
        />
      </div>

      <div className="mb-4">
        <Alert tone="info">
          این صفحه درس جدید تعریف نمی‌کند. دروس همین کلاس از برنامه درسی پایه / کارنامه می‌آیند.
          اینجا فقط مشخص می‌کنید هر درس را کدام معلم تدریس و نمره می‌دهد.
          {rows.length > 0 ? ` ${assignedCount.toLocaleString("fa-IR")} از ${rows.length.toLocaleString("fa-IR")} درس معلم دارد.` : ""}
        </Alert>
      </div>

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

      {loading ? (
        <PageContentSkeleton />
      ) : rows.length === 0 ? (
        <Alert tone="warning">
          هنوز درسی برای این کلاس ثبت نشده. ابتدا در کارنامه، دروس پایه را انتخاب و ذخیره کنید.
        </Alert>
      ) : (
        <div className="space-y-3">
          {rows.map((row) => (
            <div
              key={row.id}
              className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-[var(--border)] bg-white p-4"
            >
              <div className="flex min-w-0 items-center gap-3">
                <SubjectAvatar
                  name={row.subject?.name ?? "درس"}
                  imageUrl={row.subject?.image_url}
                  size="md"
                />
                <div>
                  <div className="font-semibold">{row.subject?.name ?? `درس #${row.subject_id}`}</div>
                  <div className="text-xs text-[var(--muted)]">
                    {row.subject?.effective_coefficient != null
                      ? `ضریب ${row.subject.effective_coefficient.toLocaleString("fa-IR")}`
                      : null}
                    {row.subject?.code ? ` · ${row.subject.code}` : ""}
                  </div>
                  {row.teacher ? (
                    <div className="mt-1 text-sm">
                      معلم: {row.teacher.name}
                      {row.teacher.national_code ? (
                        <span className="mr-1 font-mono text-xs text-[var(--muted)]">
                          {row.teacher.national_code}
                        </span>
                      ) : null}
                    </div>
                  ) : (
                    <p className="mt-1 text-xs text-amber-700">معلمی اختصاص داده نشده</p>
                  )}
                </div>
              </div>
              <Button variant="secondary" onClick={() => openAssign(row)}>
                {row.teacher ? "تغییر معلم" : "تخصیص معلم"}
              </Button>
            </div>
          ))}
        </div>
      )}

      {editing ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
          onClick={closeModal}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="assign-teacher-title"
            className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-2xl border border-[var(--border)] bg-white p-5 shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <h2 id="assign-teacher-title" className="font-bold text-primary">
              {editing.teacher ? "تغییر معلم" : "تخصیص معلم"}
            </h2>
            <p className="mt-1 text-sm text-[var(--muted)]">
              درس «{editing.subject?.name ?? "—"}» در کلاس {classRoom?.name ?? ""}
              {classRoom?.grade_level?.name ? ` · پایه ${classRoom.grade_level.name}` : ""}
            </p>
            {editing.teacher ? (
              <p className="mt-3 rounded-xl bg-slate-50 px-3 py-2 text-sm">
                معلم فعلی: {editing.teacher.name}
                {editing.teacher.national_code ? ` · ${editing.teacher.national_code}` : ""}
              </p>
            ) : null}
            <div className="mt-4">
              <Field label="جستجوی معلم">
                <Input
                  value={query}
                  onChange={(e) => searchTeachers(e.target.value)}
                  placeholder="حداقل دو حرف از نام معلم…"
                />
              </Field>
            </div>
            {options.length > 0 ? (
              <ul className="mt-2 max-h-48 space-y-1 overflow-y-auto rounded-xl border border-[var(--border)] bg-slate-50 p-2 text-sm">
                {options.map((t) => {
                  const active = selected?.id === t.id;
                  return (
                    <li key={t.id}>
                      <button
                        type="button"
                        className={`w-full rounded-lg px-2 py-1.5 text-right ${
                          active ? "bg-primary/10 font-semibold text-primary" : "hover:bg-white"
                        }`}
                        onClick={() => setSelected(t)}
                      >
                        {t.name}
                        {t.national_code ? (
                          <span className="mr-2 font-mono text-xs text-[var(--muted)]">{t.national_code}</span>
                        ) : null}
                      </button>
                    </li>
                  );
                })}
              </ul>
            ) : query.length >= 2 ? (
              <p className="mt-2 text-xs text-[var(--muted)]">معلمی یافت نشد.</p>
            ) : null}
            {selected ? (
              <p className="mt-3 text-sm">
                انتخاب‌شده: <strong>{selected.name}</strong>
              </p>
            ) : null}
            <div className="mt-5 flex flex-wrap justify-end gap-2">
              {editing.teacher ? (
                <Button
                  variant="danger"
                  disabled={saving}
                  onClick={() => saveTeacher(null)}
                >
                  حذف معلم
                </Button>
              ) : null}
              <Button variant="secondary" onClick={closeModal} disabled={saving}>
                انصراف
              </Button>
              <Button
                disabled={saving || !selected}
                onClick={() => selected && saveTeacher(selected.id)}
              >
                ذخیره
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </AppShell>
  );
}