"use client";

import { useRouter } from "next/navigation";
import { useRef, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { apiFieldErrors } from "@/components/forms/FormErrorSummary";
import { primarySubmitClass } from "@/components/forms/FormActions";
import {
  StaffForm,
  emptyStaffForm,
  isPortalOnlyPerson,
  toStaffPayload,
  validateStaffForm,
  type StaffFormFieldErrors,
} from "@/components/staff/StaffForm";
import { Button } from "@/components/ui/Button";
import { apiPatch, apiPost, uploadUserAvatar } from "@/lib/api";
import { isCompletePersonIdentifier } from "@school/ui";
import type { PersonPayload } from "@/components/students/StudentGuardiansPanel";

export default function NewStaffPage() {
  const router = useRouter();
  const [form, setForm] = useState(emptyStaffForm());
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<StaffFormFieldErrors>({});
  const [loading, setLoading] = useState(false);
  const pendingAvatarRef = useRef<File | null>(null);
  const [lookupPerson, setLookupPerson] = useState<PersonPayload | null>(null);

  const submit = async () => {
    const localErrors = validateStaffForm(form, { allowExisting: true });
    if (Object.keys(localErrors).length > 0) {
      setFieldErrors(localErrors);
      setError(null);
      return;
    }
    if (form.existing_user_id && isPortalOnlyPerson(lookupPerson?.roles)) {
      setError("این کد ملی متعلق به دانش‌آموز یا ولی است و از این صفحه قابل ثبت به‌عنوان کارمند نیست.");
      return;
    }
    setError(null);
    setFieldErrors({});
    setLoading(true);
    try {
      const user = form.existing_user_id
        ? await apiPatch<{ id: number }>(`/users/${form.existing_user_id}`, toStaffPayload(form, "edit"))
        : await apiPost<{ id: number }>("/users", toStaffPayload(form, "create"));
      if (pendingAvatarRef.current) {
        await uploadUserAvatar(user.id, pendingAvatarRef.current);
      }
      router.push(`/staff/${user.id}/roles`);
    } catch (err) {
      const mapped = apiFieldErrors(err, {
        first_name: "first_name",
        last_name: "last_name",
        national_code: "national_code",
        email: "email",
        mobile: "mobile",
      });
      setFieldErrors(mapped.fields as StaffFormFieldErrors);
      setError(mapped.general);
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppShell title="ثبت کارمند جدید" subtitle="اطلاعات پرسنلی و حساب کاربری">
      <StaffForm
        value={form}
        onChange={setForm}
        onLookupPerson={setLookupPerson}
        mode="create"
        errors={fieldErrors}
        onErrorsChange={setFieldErrors}
        generalError={error}
        onPendingAvatarFile={(file) => {
          pendingAvatarRef.current = file;
        }}
        actions={
          <>
            <Button
              loading={loading}
              onClick={submit}
              disabled={
                !isCompletePersonIdentifier(form.national_code, form.is_foreign_national) ||
                isPortalOnlyPerson(lookupPerson?.roles)
              }
              className={primarySubmitClass}
            >
              {form.existing_user_id ? "به‌روزرسانی و ادامه به نقش‌ها" : "ثبت"}
            </Button>
            <Button variant="secondary" onClick={() => router.push("/staff")} className="min-w-[8rem]">
              بازگشت
            </Button>
          </>
        }
      />
    </AppShell>
  );
}