"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import {
  StaffForm,
  StaffFormValues,
  emptyStaffForm,
  staffFromApi,
  toStaffPayload,
  validateStaffForm,
  type StaffFormFieldErrors,
} from "@/components/staff/StaffForm";
import { apiFieldErrors } from "@/components/forms/FormErrorSummary";
import { primarySubmitClass } from "@/components/forms/FormActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet, apiPatch } from "@/lib/api";

export default function EditStaffPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [form, setForm] = useState<StaffFormValues>(emptyStaffForm());
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<StaffFormFieldErrors>({});
  const [success, setSuccess] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [booting, setBooting] = useState(true);

  useEffect(() => {
    (async () => {
      setBooting(true);
      setError(null);
      try {
        const user = await apiGet<Parameters<typeof staffFromApi>[0] & { id: number }>(
          `/users/${id}`,
        );
        setForm(staffFromApi(user));
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری کارمند");
      } finally {
        setBooting(false);
      }
    })();
  }, [id]);

  const submit = async () => {
    const localErrors = validateStaffForm(form, { allowExisting: true });
    if (Object.keys(localErrors).length > 0) {
      setFieldErrors(localErrors);
      setError(null);
      return;
    }
    setError(null);
    setFieldErrors({});
    setSuccess(null);
    setLoading(true);
    try {
      const user = await apiPatch<Parameters<typeof staffFromApi>[0]>(
        `/users/${id}`,
        toStaffPayload(form, "edit"),
      );
      setForm(staffFromApi(user));
      setSuccess("اطلاعات کارمند ذخیره شد.");
    } 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={`شناسه #${id}`} breadcrumbLabels={{ staff: [form.first_name, form.last_name].filter(Boolean).join(" ") || undefined }} showBack>
      {success ? <Alert tone="success">{success}</Alert> : null}

      {booting ? (
        <PageContentSkeleton rows={5} />
      ) : (
        <StaffForm
          value={form}
          onChange={setForm}
          mode="edit"
          userId={Number(id)}
          errors={fieldErrors}
          onErrorsChange={setFieldErrors}
          generalError={error}
          actions={
            <>
              <Button loading={loading} onClick={submit} className={primarySubmitClass}>
                ذخیره
              </Button>
              <Link href={`/staff/${id}/roles`}>
                <Button variant="secondary">نقش‌ها</Button>
              </Link>
              <Button variant="secondary" onClick={() => router.push("/staff")} className="min-w-[8rem]">
                بازگشت
              </Button>
            </>
          }
        />
      )}
    </AppShell>
  );
}