"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { SchoolForm, emptySchoolForm, schoolFormErrorsFromApi, validateSchoolForm, type SchoolFormFieldErrors, type SchoolFormValues } from "@/components/schools/SchoolForm";
import { SchoolSetupNav } from "@/components/school/SchoolSetupNav";
import { Button } from "@/components/ui/Button";
import { ApiError, apiGet, apiPatch } from "@/lib/api";

interface SchoolDetail {
  id: number;
  name: string;
  code: string;
  school_type: string | null;
  phone: string | null;
  manager: { id: number; name: string } | null;
  manager_user_id: number | null;
  primary_building_id: number | null;
  primary_building: import("@/lib/buildings").BuildingSummary | null;
  grade_level_ids: number[];
  grade_study_fields?: Record<number, number[]>;
}

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

  useEffect(() => {
    apiGet<SchoolDetail>(`/branches/${id}/directory`)
      .then((s) => {
        setForm({
          name: s.name,
          code: s.code,
          school_type: s.school_type ?? "",
          manager_user_id: s.manager_user_id ?? s.manager?.id ?? null,
          manager_label: s.manager?.name ?? "",
          primary_building_id: s.primary_building_id ?? s.primary_building?.id ?? null,
          primary_building: s.primary_building ?? null,
          settings: {
            phone: s.phone ?? "",
          },
          grade_level_ids: s.grade_level_ids ?? [],
          grade_study_fields: s.grade_study_fields ?? {},
        });
      })
      .catch((err) => setError(err instanceof ApiError ? err.message : "خطا"));
  }, [id]);

  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 apiPatch(`/branches/${id}/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="به‌روزرسانی اطلاعات"
      breadcrumbLabels={{ school: form.name || undefined }}
    >
      <SchoolSetupNav branchId={Number(id)} current="school-settings" />

      <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>
  );
}