"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { StudentAvatar } from "@/components/teacher/StudentAvatar";
import { StudentQuickModal } from "@/components/teacher/StudentQuickModal";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { TeacherSearchBar } from "@/components/teacher/ui/TeacherSearchBar";
import { TeacherStatGrid } from "@/components/teacher/ui/TeacherStatGrid";
import { TeacherEmptyState } from "@/components/teacher/ui/TeacherEmptyState";
import { ApiError, apiGet } from "@/lib/api";

export interface ClassStudent {
  enrollment_id: number;
  student_profile_id?: number | null;
  student_code?: string | null;
  first_name?: string | null;
  last_name?: string | null;
  father_name?: string | null;
}

interface AttendanceCounts {
  present: number;
  absent: number;
  late: number;
  unchecked: number;
}

function studentName(s: ClassStudent) {
  return [s.first_name, s.last_name].filter(Boolean).join(" ") || s.student_code || `#${s.enrollment_id}`;
}

export function ClassStudentsTab({
  students,
  classRoomId,
  subjectId,
  attendanceDate,
}: {
  students: ClassStudent[];
  classRoomId: number;
  subjectId?: number | null;
  attendanceDate?: string;
}) {
  const [q, setQ] = useState("");
  const [view, setView] = useState<"grid" | "list">("grid");
  const [counts, setCounts] = useState<AttendanceCounts>({ present: 0, absent: 0, late: 0, unchecked: 0 });
  const [quickStudentId, setQuickStudentId] = useState<number | null>(null);
  const date = attendanceDate ?? new Date().toISOString().slice(0, 10);

  const loadCounts = useCallback(async () => {
    try {
      const params = new URLSearchParams({
        class_room_id: String(classRoomId),
        attendance_date: date,
      });
      const payload = await apiGet<{ counts: AttendanceCounts }>(`/class-attendances?${params}`);
      setCounts(payload.counts);
    } catch (err) {
      if (!(err instanceof ApiError)) return;
    }
  }, [classRoomId, date]);

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

  const filtered = useMemo(() => {
    const term = q.trim().toLowerCase();
    if (!term) return students;
    return students.filter((s) => {
      const hay = `${studentName(s)} ${s.father_name ?? ""} ${s.student_code ?? ""}`.toLowerCase();
      return hay.includes(term);
    });
  }, [students, q]);

  const statItems = [
    { key: "total", label: "کل دانش‌آموزان", value: students.length, accent: "var(--primary)" },
    { key: "present", label: "حاضر", value: counts.present, className: "border-emerald-200 bg-emerald-50/70", accent: "#059669" },
    { key: "absent", label: "غایب", value: counts.absent, className: "border-orange-200 bg-orange-50/70", accent: "#ea580c" },
    { key: "late", label: "تأخیر", value: counts.late, className: "border-violet-200 bg-violet-50/70", accent: "#7c3aed" },
  ];

  const openStudent = (s: ClassStudent) => {
    if (s.student_profile_id) setQuickStudentId(s.student_profile_id);
  };

  return (
    <div className="space-y-4">
      <TeacherStatGrid items={statItems} />

      <div className="flex flex-wrap items-center gap-2">
        <div className="min-w-0 flex-1">
          <TeacherSearchBar value={q} onChange={setQ} placeholder="جستجوی دانش‌آموز…" />
        </div>
        <div className="flex rounded-2xl border border-slate-200 bg-white p-1 shadow-sm">
          <button
            type="button"
            onClick={() => setView("grid")}
            className={`rounded-xl px-3.5 py-2 text-xs font-semibold transition ${
              view === "grid" ? "bg-primary text-white shadow-sm" : "text-slate-500 hover:text-slate-800"
            }`}
          >
            کارت
          </button>
          <button
            type="button"
            onClick={() => setView("list")}
            className={`rounded-xl px-3.5 py-2 text-xs font-semibold transition ${
              view === "list" ? "bg-primary text-white shadow-sm" : "text-slate-500 hover:text-slate-800"
            }`}
          >
            لیست
          </button>
        </div>
      </div>

      {!filtered.length ? (
        <TeacherEmptyState title="دانش‌آموزی یافت نشد" description="عبارت جستجو را تغییر دهید." />
      ) : view === "grid" ? (
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
          {filtered.map((s) => (
            <button
              key={s.enrollment_id}
              type="button"
              onClick={() => openStudent(s)}
              disabled={!s.student_profile_id}
              className="group flex flex-col rounded-2xl border border-slate-200 bg-white p-4 text-right shadow-sm transition hover:border-teal-300 hover:shadow-md disabled:cursor-default disabled:opacity-70"
            >
              <div className="flex items-start gap-3">
                <StudentAvatar firstName={s.first_name} lastName={s.last_name} />
                <div className="min-w-0 flex-1">
                  <div className="truncate text-base font-bold text-slate-900 group-hover:text-primary">
                    {studentName(s)}
                  </div>
                  <div className="mt-0.5 text-xs font-medium text-slate-500">
                    {s.student_code ?? `#${s.enrollment_id}`}
                  </div>
                  <div className="mt-1 text-xs text-slate-500">
                    نام پدر: {s.father_name || "—"}
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>
      ) : (
        <TeacherPanel padded={false}>
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead className="bg-slate-50 text-slate-500">
                <tr>
                  <th className="px-4 py-3 text-right font-semibold">نام</th>
                  <th className="px-4 py-3 text-right font-semibold">نام پدر</th>
                  <th className="px-4 py-3 text-right font-semibold">کد</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((s) => (
                  <tr
                    key={s.enrollment_id}
                    className="cursor-pointer border-t border-slate-100 hover:bg-slate-50/80"
                    onClick={() => openStudent(s)}
                  >
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2.5">
                        <StudentAvatar firstName={s.first_name} lastName={s.last_name} size="sm" />
                        <span className="font-semibold text-slate-900">{studentName(s)}</span>
                      </div>
                    </td>
                    <td className="px-4 py-3 text-slate-600">{s.father_name || "—"}</td>
                    <td className="px-4 py-3 text-slate-500">{s.student_code ?? "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </TeacherPanel>
      )}

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