"use client";

import { useRouter } from "next/navigation";
import { useRef, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { RequireStudentManage } from "@/components/auth/RequirePermission";
import { primarySubmitClass } from "@/components/forms/FormActions";
import {
  StudentForm,
  emptyStudentForm,
  studentEnrollmentLockMessage,
  toStudentPayload,
  validateStudentForm,
  type StudentFormFieldErrors,
} from "@/components/students/StudentForm";
import { apiFieldErrors } from "@/components/forms/FormErrorSummary";
import { Button } from "@/components/ui/Button";
import { apiPost, uploadUserAvatar } from "@/lib/api";

export default function NewStudentPage() {
  const router = useRouter();
  const [form, setForm] = useState(emptyStudentForm());
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<StudentFormFieldErrors>({});
  const [loading, setLoading] = useState(false);
  const pendingAvatarRef = useRef<File | null>(null);

  const [lookupPerson, setLookupPerson] = useState<import("@/components/students/StudentGuardiansPanel").PersonPayload | null>(null);

  const lockMessage = studentEnrollmentLockMessage(lookupPerson, form.branch_id);

  const submit = async () => {
    const localErrors = validateStudentForm(form, { allowExisting: true });
    if (Object.keys(localErrors).length > 0) {
      setFieldErrors(localErrors);
      setError(null);
      return;
    }
    if (lockMessage) {
      setError(lockMessage);
      return;
    }
    setError(null);
    setFieldErrors({});
    setLoading(true);
    try {
      const created = await apiPost<{ id?: number; user_id?: number }>("/students", toStudentPayload(form));
      if (pendingAvatarRef.current && created.user_id) {
        await uploadUserAvatar(created.user_id, pendingAvatarRef.current);
      }
      if (created.id) {
        router.push(`/students/${created.id}/guardians/new?enroll=1`);
      } else {
        router.push("/students");
      }
    } catch (err) {
      const mapped = apiFieldErrors(err, {
        first_name: "first_name",
        last_name: "last_name",
        national_code: "national_code",
        email: "email",
        "contact_data.guardian_mobile": "guardian_mobile",
        "contact_data.student_mobile": "student_mobile",
      });
      setFieldErrors(mapped.fields as StudentFormFieldErrors);
      setError(mapped.general);
    } finally {
      setLoading(false);
    }
  };

  return (
    <RequireStudentManage>
      <AppShell title="ثبت دانش‌آموز جدید" subtitle="سپس اطلاعات یکی از اولیا گرفته می‌شود">
        <StudentForm
          value={form}
          onChange={setForm}
          onLookupPerson={setLookupPerson}
          errors={fieldErrors}
          onErrorsChange={setFieldErrors}
          generalError={error}
          onPendingAvatarFile={(file) => {
            pendingAvatarRef.current = file;
          }}
          actions={
            <>
              <Button
                loading={loading}
                onClick={submit}
                disabled={Boolean(lockMessage)}
                className={primarySubmitClass}
              >
                ثبت و ادامه با اولیا
              </Button>
              <Button variant="secondary" onClick={() => router.push("/students")} className="min-w-[8rem]">
                بازگشت
              </Button>
            </>
          }
        />
      </AppShell>
    </RequireStudentManage>
  );
}