"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import {
  SchoolForm,
  emptySchoolForm,
  schoolFormErrorsFromApi,
  validateSchoolForm,
  type SchoolFormFieldErrors,
} from "@/components/schools/SchoolForm";
import { Button } from "@/components/ui/Button";
import { apiPost } from "@/lib/api";

export default function NewSchoolPage() {
  const router = useRouter();
  const [form, setForm] = useState(emptySchoolForm());
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<SchoolFormFieldErrors>({});
  const [loading, setLoading] = useState(false);

  const submit = async () => {
    const localErrors = validateSchoolForm(form);
    if (Object.keys(localErrors).length > 0) {
      setFieldErrors(localErrors);
      setError(null);
      return;
    }

    setError(null);
    setFieldErrors({});
    setLoading(true);
    try {
      await apiPost("/branches/directory", {
        name: form.name,
        code: form.code,
        school_type: form.school_type || null,
        manager_user_id: form.manager_user_id,
        primary_building_id: form.primary_building_id,
        settings: { phone: form.settings.phone },
        grade_level_ids: form.grade_level_ids,
        grade_study_fields: form.grade_study_fields,
      });
      router.push("/schools");
    } catch (err) {
      const mapped = schoolFormErrorsFromApi(err);
      setFieldErrors(mapped.fields);
      setError(mapped.general);
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppShell title="ثبت مدرسه جدید" subtitle="اطلاعات مدرسه و مقاطع تحصیلی">
      <SchoolForm
        value={form}
        onChange={setForm}
        errors={fieldErrors}
        onErrorsChange={setFieldErrors}
        generalError={error}
        actions={
          <>
            <Button loading={loading} onClick={submit} className="min-w-[8rem] bg-[#0d9488] hover:bg-[#0d9488] hover:brightness-100">
              ثبت
            </Button>
            <Button variant="secondary" onClick={() => router.push("/schools")} className="min-w-[8rem]">
              بازگشت
            </Button>
          </>
        }
      />
    </AppShell>
  );
}