"use client";

import { useCallback, useEffect, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { ApiError, Paginated, apiGet, apiPost } from "@/lib/api";

interface ClassStudent {
  id: number;
  full_name: string;
  national_code: string;
  student_code?: string | null;
}

export function ClassStudentsModal({
  open,
  classId,
  className,
  onClose,
  onChanged,
}: {
  open: boolean;
  classId: number;
  className: string;
  onClose: () => void;
  onChanged?: () => void;
}) {
  const [rows, setRows] = useState<ClassStudent[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [pending, setPending] = useState<ClassStudent | null>(null);
  const [removing, setRemoving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await apiGet<Paginated<ClassStudent>>(
        `/students?class_room_id=${classId}&per_page=100`,
      );
      setRows(result.data);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری دانش‌آموزان");
    } finally {
      setLoading(false);
    }
  }, [classId]);

  useEffect(() => {
    if (!open) {
      setRows([]);
      setError(null);
      setMessage(null);
      setPending(null);
      return;
    }
    void load();
  }, [open, load]);

  const confirmRemove = async () => {
    if (!pending) return;
    setRemoving(true);
    setError(null);
    setMessage(null);
    try {
      await apiPost(`/students/${pending.id}/release-placement`, { mode: "unassign_class" });
      setMessage(`«${pending.full_name}» از کلاس خارج شد.`);
      setPending(null);
      await load();
      onChanged?.();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در حذف از کلاس");
    } finally {
      setRemoving(false);
    }
  };

  if (!open) return null;

  return (
    <>
      <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40 p-4">
        <div
          role="dialog"
          aria-modal="true"
          className="flex max-h-[85vh] w-full max-w-2xl flex-col rounded-2xl border border-[var(--border)] bg-white shadow-xl"
        >
          <div className="flex items-start justify-between gap-3 border-b border-[var(--border)] px-5 py-4">
            <div>
              <h3 className="text-base font-bold">دانش‌آموزان کلاس {className}</h3>
              <p className="mt-1 text-xs text-[var(--muted)]">
                {loading ? "در حال بارگذاری…" : `${rows.length.toLocaleString("fa-IR")} نفر`}
              </p>
            </div>
            <Button variant="secondary" onClick={onClose}>
              بستن
            </Button>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
            {error ? <div className="mb-3"><Alert tone="error">{error}</Alert></div> : null}
            {message ? <div className="mb-3"><Alert tone="success">{message}</Alert></div> : null}

            {loading ? (
              <p className="text-sm text-[var(--muted)]">در حال بارگذاری فهرست…</p>
            ) : rows.length === 0 ? (
              <p className="text-sm text-[var(--muted)]">دانش‌آموزی در این کلاس نیست.</p>
            ) : (
              <ul className="divide-y divide-[var(--border)] text-sm">
                {rows.map((student, index) => (
                  <li key={student.id} className="flex items-center justify-between gap-3 py-2.5">
                    <div className="min-w-0 truncate">
                      <span className="ml-2 text-xs text-[var(--muted)]">
                        {(index + 1).toLocaleString("fa-IR")}
                      </span>
                      <span className="font-medium">{student.full_name}</span>
                      <span className="mr-2 font-mono text-xs text-[var(--muted)]">
                        {student.national_code}
                      </span>
                    </div>
                    <button
                      type="button"
                      className="shrink-0 rounded-lg border border-[var(--border)] px-2 py-1 text-[11px] font-semibold text-[var(--muted)] hover:bg-slate-50 hover:text-foreground"
                      onClick={() => setPending(student)}
                    >
                      حذف از کلاس
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      </div>

      <ConfirmDialog
        open={pending != null}
        title="حذف از کلاس"
        message={
          pending
            ? `آیا «${pending.full_name}» از کلاس «${className}» خارج شود؟ دانش‌آموز به استخر کلاس‌بندی همان پایه برمی‌گردد.`
            : ""
        }
        confirmLabel="حذف از کلاس"
        loading={removing}
        onCancel={() => setPending(null)}
        onConfirm={confirmRemove}
      />
    </>
  );
}