"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select } from "@/components/ui/Field";
import { ApiError, apiGet, getAcademicYearId } from "@/lib/api";
import { isTeacherRole } from "@/lib/permissions";
import { ReportCardItem, ReportCardPeriodRow } from "@/lib/report-cards";

interface ClassOption {
  id: number;
  name: string;
  pending_tasks?: Array<{ report_card_id: number }>;
}

interface WorkspaceStudent {
  id: number;
  first_name?: string | null;
  last_name?: string | null;
  student_code?: string | null;
  national_code?: string | null;
}

export function ReportCardViewPrintPanel({ card }: { card: ReportCardItem }) {
  const teacher = isTeacherRole();
  const [classes, setClasses] = useState<ClassOption[]>([]);
  const [classId, setClassId] = useState("");
  const [periodId, setPeriodId] = useState(String(card.periods[0]?.id ?? ""));
  const [students, setStudents] = useState<WorkspaceStudent[]>([]);
  const [error, setError] = useState<string | null>(null);

  const periods: ReportCardPeriodRow[] = card.periods ?? [];

  useEffect(() => {
    (async () => {
      try {
        const yearId = getAcademicYearId();
        if (teacher) {
          const list = await apiGet<ClassOption[]>(
            `/grade-entries/teacher-classes${yearId ? `?academic_year_id=${yearId}` : ""}`,
          );
          const mine = list.filter((row) =>
            (row.pending_tasks ?? []).some((task) => task.report_card_id === card.id),
          );
          setClasses(mine.length ? mine : list);
          if (mine[0] && !classId) setClassId(String(mine[0].id));
        } else {
          const list = await apiGet<ClassOption[]>("/class-rooms");
          setClasses(list);
          if (list[0] && !classId) setClassId(String(list[0].id));
        }
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری کلاس‌ها");
      }
    })();
  }, [card.id, teacher]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (!classId || !periodId) {
      setStudents([]);
      return;
    }
    (async () => {
      try {
        const params = new URLSearchParams({
          class_room_id: classId,
          report_card_id: String(card.id),
          report_card_period_id: periodId,
        });
        const yearId = getAcademicYearId();
        if (yearId) params.set("academic_year_id", String(yearId));
        const payload = await apiGet<{ students: WorkspaceStudent[] }>(
          `/grade-entries/teacher-workspace?${params.toString()}`,
        );
        setStudents(payload.students ?? []);
        setError(null);
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری دانش‌آموزان");
      }
    })();
  }, [classId, periodId, card.id]);

  const printHref = useMemo(() => {
    if (!classId || !periodId) return null;
    return `/academic/report-cards/${card.id}/print?class_id=${classId}&period_id=${periodId}`;
  }, [card.id, classId, periodId]);

  return (
    <div className="space-y-4">
      {error ? <Alert tone="error">{error}</Alert> : null}
      <div className="grid gap-3 md:grid-cols-2">
        <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>
        <Field label="نوبت">
          <Select value={periodId} onChange={(e) => setPeriodId(e.target.value)}>
            {periods.map((period) => (
              <option key={period.id} value={period.id}>{period.name}</option>
            ))}
          </Select>
        </Field>
      </div>

      <div className="flex flex-wrap gap-2">
        {printHref ? (
          <Link href={printHref} target="_blank">
            <Button>دانلود PDF کلاس</Button>
          </Link>
        ) : (
          <Button disabled>دانلود PDF کلاس</Button>
        )}
      </div>

      <div className="overflow-auto rounded-2xl border border-[var(--border)] bg-white">
        <table className="min-w-full text-sm">
          <thead className="bg-slate-50 text-xs">
            <tr>
              <th className="px-3 py-2 text-right">دانش‌آموز</th>
              <th className="px-3 py-2 text-right">کد</th>
              <th className="px-3 py-2 text-right">کارنامه</th>
            </tr>
          </thead>
          <tbody>
            {students.map((student) => (
              <tr key={student.id} className="border-t border-[var(--border)]">
                <td className="px-3 py-2">
                  {[student.last_name, student.first_name].filter(Boolean).join(" ") || "—"}
                </td>
                <td className="px-3 py-2">{student.student_code || student.national_code || "—"}</td>
                <td className="px-3 py-2">
                  {periodId ? (
                    <Link
                      className="text-primary underline"
                      href={`/academic/report-cards/${card.id}/print?enrollment_id=${student.id}&period_id=${periodId}`}
                      target="_blank"
                    >
                      مشاهده / چاپ
                    </Link>
                  ) : "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {!students.length ? (
          <p className="p-4 text-sm text-[var(--muted)]">کلاس و نوبت را انتخاب کنید.</p>
        ) : null}
      </div>
    </div>
  );
}