"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { ClassGradesMatrix } from "@/components/teacher/ClassGradesMatrix";
import { ClassGradesHistory } from "@/components/teacher/ClassGradesHistory";
import { TeacherStatGrid } from "@/components/teacher/ui/TeacherStatGrid";
import { SessionDateField } from "@/components/teacher/ui/SessionDateField";
import { StudentQuickModal } from "@/components/teacher/StudentQuickModal";
import { TeacherModal } from "@/components/teacher/ui/TeacherModal";
import { ApiError, apiGet, apiPost } from "@/lib/api";

interface AssessmentItem {
  id: number;
  title: string;
  scope: string;
  max_score: number | string;
  visible_to_student?: boolean;
  stats: {
    average: number;
    highest: number;
    lowest: number;
    pass_rate: number;
    total_students: number;
    entered_count: number;
  };
  scores?: Array<{ enrollment_id: number; score?: number | string | null }>;
}

interface StudentOption {
  enrollment_id: number;
  student_profile_id?: number | null;
  first_name?: string | null;
  last_name?: string | null;
}

function todayIso() {
  return new Date().toISOString().slice(0, 10);
}

function NewAssessmentModal({
  open,
  onClose,
  classRoomId,
  subjectId,
  onCreated,
}: {
  open: boolean;
  onClose: () => void;
  classRoomId: number;
  subjectId?: number | null;
  onCreated: (id: number) => void;
}) {
  const [title, setTitle] = useState("");
  const [scope, setScope] = useState("class");
  const [maxScore, setMaxScore] = useState("20");
  const [hideFromStudent, setHideFromStudent] = useState(false);
  const [assessmentDate, setAssessmentDate] = useState(todayIso);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (open) {
      setTitle("");
      setScope("class");
      setMaxScore("20");
      setHideFromStudent(false);
      setAssessmentDate(todayIso());
      setError(null);
    }
  }, [open]);

  const save = async () => {
    if (!title.trim() || !subjectId) return;
    setSaving(true);
    setError(null);
    try {
      const created = await apiPost<AssessmentItem>(`/teacher/classes/${classRoomId}/assessments`, {
        subject_id: subjectId,
        title: title.trim(),
        scope,
        max_score: Number(maxScore) || 20,
        assessment_date: assessmentDate,
        visible_to_student: !hideFromStudent,
      });
      onCreated(created.id);
      onClose();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  return (
    <TeacherModal
      open={open}
      onClose={onClose}
      title="ارزیابی جدید"
      footer={
        <div className="flex gap-2">
          <Button block onClick={() => void save()} loading={saving}>
            ایجاد
          </Button>
          <Button variant="secondary" block onClick={onClose}>
            انصراف
          </Button>
        </div>
      }
    >
      {error ? <Alert tone="error">{error}</Alert> : null}
      <div className="space-y-3">
        <SessionDateField
          value={assessmentDate}
          onChange={setAssessmentDate}
          classRoomId={classRoomId}
          subjectId={subjectId}
        />
        <Field label="عنوان">
          <Input value={title} onChange={(e) => setTitle(e.target.value)} />
        </Field>
        <Field label="نوع">
          <Select value={scope} onChange={(e) => setScope(e.target.value)}>
            <option value="class">نمره کلاسی (همه)</option>
            <option value="individual">پرسش فردی</option>
          </Select>
        </Field>
        <Field label="از چند نمره؟">
          <Input
            type="number"
            min={1}
            placeholder="۲۰"
            className="no-spinner"
            value={maxScore}
            onChange={(e) => setMaxScore(e.target.value)}
          />
        </Field>
        <label className="flex cursor-pointer items-start gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5">
          <input
            type="checkbox"
            className="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary"
            checked={hideFromStudent}
            onChange={(e) => setHideFromStudent(e.target.checked)}
          />
          <span className="text-xs leading-relaxed text-slate-600">
            این نمره به دانش‌آموز نمایش داده نشود (در پورتال و داشبورد دیده نمی‌شود)
          </span>
        </label>
        <p className="text-xs text-slate-500">
          بعد از ایجاد، گرید نمره باز می‌شود. فقط برای دانش‌آموزانی که باید نمره بگیرند، سلول را پر کنید.
        </p>
      </div>
    </TeacherModal>
  );
}

export function ClassGradesTab({
  classRoomId,
  subjectId,
  students,
}: {
  classRoomId: number;
  subjectId?: number | null;
  students: StudentOption[];
}) {
  const gridRef = useRef<HTMLDivElement>(null);
  const [assessments, setAssessments] = useState<AssessmentItem[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [detail, setDetail] = useState<AssessmentItem | null>(null);
  const [scores, setScores] = useState<Record<number, string>>({});
  const [applyAll, setApplyAll] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [viewMode, setViewMode] = useState<"matrix" | "single">("single");
  const [matrixRefreshKey, setMatrixRefreshKey] = useState(0);
  const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
  const [quickStudentId, setQuickStudentId] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);

  const loadList = useCallback(async () => {
    if (!subjectId) return;
    setLoading(true);
    try {
      const list = await apiGet<AssessmentItem[]>(
        `/teacher/classes/${classRoomId}/assessments?subject_id=${subjectId}`,
      );
      setAssessments(list);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [classRoomId, subjectId]);

  const loadDetail = useCallback(async (id: number) => {
    try {
      const d = await apiGet<AssessmentItem>(`/teacher/assessments/${id}`);
      setDetail(d);
      const init: Record<number, string> = {};
      (d.scores ?? []).forEach((s: { enrollment_id: number; score?: number | string | null }) => {
        if (s.score != null) init[s.enrollment_id] = String(s.score);
      });
      setScores(init);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  }, []);

  useEffect(() => {
    void loadList();
  }, [loadList]);

  useEffect(() => {
    if (selectedId) void loadDetail(selectedId);
  }, [selectedId, loadDetail]);

  useEffect(() => {
    if (!selectedId && assessments[0]) setSelectedId(assessments[0].id);
  }, [assessments, selectedId]);

  const handleCreated = async (id: number) => {
    await loadList();
    setSelectedId(id);
    setMatrixRefreshKey((k) => k + 1);
    setHistoryRefreshKey((k) => k + 1);
    setViewMode("single");
    await loadDetail(id);
    window.setTimeout(() => gridRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }), 200);
  };

  const stats = detail?.stats;
  const maxScore = Number(detail?.max_score ?? 20);

  const saveScores = async () => {
    if (!selectedId || !detail) return;
    setSaving(true);
    try {
      const targetStudents =
        detail.scope === "individual"
          ? students.filter((s) => scores[s.enrollment_id] !== undefined && scores[s.enrollment_id] !== "")
          : students;
      const entries = targetStudents.map((s) => ({
        enrollment_id: s.enrollment_id,
        score:
          scores[s.enrollment_id] === "" || scores[s.enrollment_id] == null
            ? null
            : Number(scores[s.enrollment_id]),
      }));
      if (entries.length === 0) {
        setError("حداقل یک نمره وارد کنید.");
        return;
      }
      await apiPost(`/teacher/assessments/${selectedId}/scores/bulk`, { entries });
      await loadDetail(selectedId);
      await loadList();
      setHistoryRefreshKey((k) => k + 1);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const applyToAll = () => {
    if (!applyAll) return;
    setScores((prev) => {
      const next = { ...prev };
      students.forEach((s) => {
        next[s.enrollment_id] = applyAll;
      });
      return next;
    });
  };

  const statCards = useMemo(
    () => [
      { label: "میانگین", value: stats?.average ?? 0 },
      { label: "بالاترین", value: stats?.highest ?? 0 },
      { label: "نرخ قبولی", value: `${stats?.pass_rate ?? 0}%` },
      { label: "کمترین", value: stats?.lowest ?? 0 },
    ],
    [stats],
  );

  if (!subjectId) {
    return <Alert tone="error">شناسه درس مشخص نیست.</Alert>;
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div>
          <h2 className="text-lg font-bold">مدیریت امتیاز</h2>
          <p className="text-sm text-[var(--muted)]">ارزیابی‌های مستقل از کارنامه</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Link
            href={`/academic/report-cards`}
            className="inline-flex h-10 items-center rounded-xl px-3 text-sm font-semibold text-primary hover:bg-primary/5"
          >
            نمره کارنامه
          </Link>
          <Button className="h-10 rounded-xl px-4" onClick={() => setCreateOpen(true)}>
            + ارزیابی جدید
          </Button>
        </div>
      </div>

      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="flex flex-wrap gap-2 rounded-2xl border border-slate-200 bg-white p-1.5 shadow-sm">
        <button
          type="button"
          onClick={() => setViewMode("single")}
          className={`rounded-xl px-3.5 py-2 text-sm font-semibold transition ${
            viewMode === "single"
              ? "bg-primary text-white shadow-sm"
              : "text-slate-600 hover:bg-slate-50"
          }`}
        >
          ارزیابی جاری
        </button>
        <button
          type="button"
          onClick={() => setViewMode("matrix")}
          className={`rounded-xl px-3.5 py-2 text-sm font-semibold transition ${
            viewMode === "matrix"
              ? "bg-primary text-white shadow-sm"
              : "text-slate-600 hover:bg-slate-50"
          }`}
        >
          ماتریس نمرات
        </button>
      </div>

      {viewMode === "matrix" ? (
        <ClassGradesMatrix
          classRoomId={classRoomId}
          subjectId={subjectId}
          refreshKey={matrixRefreshKey}
          onStudentClick={(id) => setQuickStudentId(id)}
        />
      ) : null}

      {viewMode === "single" ? (
        <div className="grid gap-4 lg:grid-cols-[1fr_260px]">
          <div className="space-y-4">
            <TeacherStatGrid
              items={statCards.map((c) => ({
                key: c.label,
                label: c.label,
                value: c.value,
              }))}
            />

            {loading ? (
              <PageContentSkeleton rows={4} />
            ) : (
              <>
                <Field label="ارزیابی">
                  <Select value={selectedId ?? ""} onChange={(e) => setSelectedId(Number(e.target.value))}>
                    {assessments.map((a) => (
                      <option key={a.id} value={a.id}>
                        {a.title} ({a.max_score} نمره)
                        {a.visible_to_student === false ? " · مخفی از دانش‌آموز" : ""}
                      </option>
                    ))}
                  </Select>
                </Field>

                {detail ? (
                  <p className="text-sm text-slate-500">
                    بارم: {maxScore} ·{" "}
                    {detail.scope === "individual" ? "پرسش فردی" : "نمره کلاسی"}
                    {detail.visible_to_student === false ? (
                      <span className="mr-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800">
                        مخفی از دانش‌آموز
                      </span>
                    ) : null}
                  </p>
                ) : null}

                <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                  <Input
                    placeholder="نمره برای همه"
                    className="no-spinner h-10 w-full sm:max-w-[140px]"
                    inputMode="decimal"
                    value={applyAll}
                    onChange={(e) => setApplyAll(e.target.value)}
                  />
                  <Button variant="secondary" className="h-10 rounded-xl px-4" onClick={applyToAll}>
                    اعمال برای همه
                  </Button>
                  <Button
                    className="h-10 rounded-xl px-4"
                    onClick={async () => {
                      await saveScores();
                      setMatrixRefreshKey((k) => k + 1);
                      setHistoryRefreshKey((k) => k + 1);
                    }}
                    loading={saving}
                  >
                    ذخیره امتیازات
                  </Button>
                </div>

                <div ref={gridRef}>
                  <TeacherPanel padded={false}>
                    <div className="overflow-x-auto">
                      <table className="min-w-full text-sm">
                        <thead className="bg-slate-50">
                          <tr>
                            <th className="px-4 py-2 text-right">دانش‌آموز</th>
                            <th className="px-4 py-2 text-right">نمره</th>
                          </tr>
                        </thead>
                        <tbody>
                          {students.map((s) => (
                            <tr key={s.enrollment_id} className="border-t border-[var(--border)]">
                              <td className="px-4 py-2">
                                <button
                                  type="button"
                                  disabled={!s.student_profile_id}
                                  onClick={() => {
                                    if (s.student_profile_id) setQuickStudentId(s.student_profile_id);
                                  }}
                                  className="font-medium text-slate-800 hover:text-primary disabled:cursor-default disabled:hover:text-slate-800"
                                >
                                  {[s.first_name, s.last_name].filter(Boolean).join(" ")}
                                </button>
                              </td>
                              <td className="px-4 py-2">
                                <Input
                                  type="number"
                                  min={0}
                                  max={maxScore}
                                  placeholder={`۰–${maxScore}`}
                                  className="no-spinner max-w-[88px]"
                                  inputMode="decimal"
                                  value={scores[s.enrollment_id] ?? ""}
                                  onChange={(e) =>
                                    setScores((p) => ({ ...p, [s.enrollment_id]: e.target.value }))
                                  }
                                />
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </TeacherPanel>
                </div>
              </>
            )}
          </div>

          <ClassGradesHistory
            classRoomId={classRoomId}
            subjectId={subjectId}
            selectedAssessmentId={selectedId}
            onSelectAssessment={setSelectedId}
            refreshKey={historyRefreshKey}
          />
        </div>
      ) : null}

      <NewAssessmentModal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        classRoomId={classRoomId}
        subjectId={subjectId}
        onCreated={(id) => void handleCreated(id)}
      />

      <StudentQuickModal
        studentProfileId={quickStudentId}
        classRoomId={classRoomId}
        subjectId={subjectId}
        onClose={() => setQuickStudentId(null)}
      />
    </div>
  );
}