"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useState } from "react";
import { CountdownTimer } from "@/components/academic/CountdownTimer";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet } from "@/lib/api";
import { KIND_LABELS, ReportCardItem, reportCardWorkspaceHref } from "@/lib/report-cards";

interface PendingPeriod {
  period_id: number;
  period_name: string;
  report_card_id: number;
  kind: string;
  grade_entry_ends_at?: string | null;
  teacher_count: number;
  class_count: number;
  assignment_count: number;
}

interface PendingRow {
  period_id: number;
  teacher_id: number;
  teacher_name: string;
  class_id: number;
  class_name: string;
  subject_id: number;
  subject_name?: string | null;
  total: number;
}

interface CompletionStudent {
  enrollment_id: number;
  student?: { first_name?: string; last_name?: string } | null;
  expected: number;
  entered: number;
  complete: boolean;
  missing_subjects?: Array<{ subject_name?: string; teacher_name?: string | null }>;
}

export function ReportCardOversightPanel({ card }: { card: ReportCardItem }) {
  const [periods, setPeriods] = useState<PendingPeriod[]>([]);
  const [rows, setRows] = useState<PendingRow[]>([]);
  const [periodId, setPeriodId] = useState(String(card.periods[0]?.id ?? ""));
  const [classId, setClassId] = useState("");
  const [students, setStudents] = useState<CompletionStudent[]>([]);
  const [summary, setSummary] = useState<{ total: number; complete: number } | null>(null);
  const [classes, setClasses] = useState<Array<{ id: number; name: string }>>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const summaryPayload = await apiGet<{ periods: PendingPeriod[] }>("/grade-entries/pending-teachers");
      setPeriods((summaryPayload.periods ?? []).filter((row) => row.report_card_id === card.id));
      setClasses(await apiGet<Array<{ id: number; name: string }>>("/class-rooms"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "بارگذاری نظارت ناموفق بود.");
    } finally {
      setLoading(false);
    }
  }, [card.id]);

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

  useEffect(() => {
    if (!periodId) {
      setRows([]);
      return;
    }
    apiGet<{ rows: PendingRow[] }>(`/grade-entries/pending-teachers/${periodId}`)
      .then((payload) => setRows(payload.rows ?? []))
      .catch((err) => setError(err instanceof ApiError ? err.message : "خطا"));
  }, [periodId]);

  useEffect(() => {
    if (!periodId || !classId) {
      setStudents([]);
      setSummary(null);
      return;
    }
    apiGet<{ students: CompletionStudent[]; summary: { total: number; complete: number } }>(
      `/grade-entries/completion-report?report_card_period_id=${periodId}&class_room_id=${classId}`,
    )
      .then((payload) => {
        setStudents(payload.students ?? []);
        setSummary(payload.summary);
      })
      .catch((err) => setError(err instanceof ApiError ? err.message : "خطا در تکمیل نمره"));
  }, [periodId, classId]);

  const periodMeta = useMemo(
    () => periods.find((row) => String(row.period_id) === periodId) ?? card.periods.find((p) => String(p.id) === periodId),
    [periods, card.periods, periodId],
  );

  if (loading) return <PageContentSkeleton rows={5} />;

  return (
    <div className="space-y-4">
      {error ? <Alert tone="error">{error}</Alert> : null}
      <div className="flex justify-end">
        <Button variant="secondary" onClick={() => void load()}>به‌روزرسانی</Button>
      </div>

      <section className="rounded-2xl border border-[var(--border)] bg-white p-4">
        <h3 className="mb-3 font-bold">معلم بدون نمره</h3>
        {periods.length === 0 ? (
          <p className="text-sm text-[var(--muted)]">در بازه‌های باز این کارنامه، معلمی بدون نمره نیست.</p>
        ) : (
          <ul className="space-y-2 text-sm">
            {periods.map((period) => (
              <li key={period.period_id} className="rounded-xl border border-[var(--border)] p-3">
                <div className="flex flex-wrap justify-between gap-2">
                  <span className="font-medium">{period.period_name}</span>
                  <span className="text-xs text-[var(--muted)]">
                    {KIND_LABELS[period.kind as keyof typeof KIND_LABELS] ?? period.kind}
                  </span>
                </div>
                <p className="mt-1 text-amber-950">
                  مهلت: <CountdownTimer endsAt={period.grade_entry_ends_at} />
                </p>
                <p className="mt-1 text-xs text-[var(--muted)]">
                  {period.teacher_count.toLocaleString("fa-IR")} معلم · {period.class_count.toLocaleString("fa-IR")} کلاس
                </p>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="rounded-2xl border border-[var(--border)] bg-white p-4 space-y-3">
        <h3 className="font-bold">جزئیات نوبت و تکمیل نمره</h3>
        <div className="grid gap-3 md:grid-cols-2">
          <Field label="نوبت">
            <Select value={periodId} onChange={(e) => setPeriodId(e.target.value)}>
              {(card.periods ?? []).map((period) => (
                <option key={period.id} value={period.id}>{period.name}</option>
              ))}
            </Select>
          </Field>
          <Field label="کلاس">
            <Select value={classId} onChange={(e) => setClassId(e.target.value)}>
              <option value="">انتخاب کلاس</option>
              {classes.map((item) => (
                <option key={item.id} value={item.id}>{item.name}</option>
              ))}
            </Select>
          </Field>
        </div>
        {periodMeta && "grade_entry_ends_at" in periodMeta ? (
          <p className="text-sm text-amber-950">
            مهلت باقی‌مانده: <CountdownTimer endsAt={periodMeta.grade_entry_ends_at} />
          </p>
        ) : null}

        {rows.length ? (
          <table className="min-w-full text-sm">
            <thead className="text-xs text-[var(--muted)]">
              <tr>
                <th className="py-1 text-right">معلم</th>
                <th className="py-1 text-right">کلاس</th>
                <th className="py-1 text-right">درس</th>
                <th className="py-1 text-right"> </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={`${row.teacher_id}-${row.class_id}-${row.subject_id}`} className="border-t">
                  <td className="py-1">{row.teacher_name}</td>
                  <td className="py-1">{row.class_name}</td>
                  <td className="py-1">{row.subject_name}</td>
                  <td className="py-1">
                    <Link
                      className="text-primary underline"
                      href={reportCardWorkspaceHref(card.id, "grades", {
                        class_id: row.class_id,
                        subject_id: row.subject_id,
                        period_id: row.period_id,
                      })}
                    >
                      مشاهده
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p className="text-sm text-[var(--muted)]">معلم معوقی برای این نوبت نیست.</p>
        )}

        {summary ? (
          <p className="text-sm">
            تکمیل نمره کلاس: {summary.complete.toLocaleString("fa-IR")} از {summary.total.toLocaleString("fa-IR")}
          </p>
        ) : null}
        {students.length ? (
          <ul className="space-y-1 text-sm">
            {students.filter((s) => !s.complete).map((student) => (
              <li key={student.enrollment_id}>
                {[student.student?.last_name, student.student?.first_name].filter(Boolean).join(" ")}
                {" — ناقص "}
                {(student.missing_subjects ?? []).map((m) => m.subject_name).filter(Boolean).join("، ")}
              </li>
            ))}
          </ul>
        ) : null}
      </section>
    </div>
  );
}