"use client";

import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import {
  BuildingForm,
  emptyBuildingForm,
  validateBuildingForm,
  type BuildingFormFieldErrors,
  type BuildingFormValues,
} from "@/components/buildings/BuildingForm";
import { Button } from "@/components/ui/Button";
import { ApiError, apiGet, apiPatch } from "@/lib/api";
import type { BuildingDetail, BuildingSpaceRow } from "@/lib/buildings";

export default function EditBuildingPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [form, setForm] = useState<BuildingFormValues>(emptyBuildingForm());
  const [spaces, setSpaces] = useState<BuildingSpaceRow[]>([]);
  const [errors, setErrors] = useState<BuildingFormFieldErrors>({});
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    apiGet<BuildingDetail>(`/buildings/${id}`)
      .then((row) => {
        setForm({
          code: row.code,
          name: row.name,
          province: row.province ?? "",
          city: row.city ?? "",
          address: row.address ?? "",
          postal_code: row.postal_code ?? "",
          latitude: row.latitude ?? row.map?.lat ?? null,
          longitude: row.longitude ?? row.map?.lng ?? null,
          description: row.description ?? "",
          is_active: row.is_active,
          cost_center_code: row.cost_center_code ?? "",
        });
        setSpaces(row.spaces ?? []);
      })
      .catch((err) => setError(err instanceof ApiError ? err.message : "خطا"));
  }, [id]);

  const submit = async () => {
    const local = validateBuildingForm(form);
    if (Object.keys(local).length > 0) {
      setErrors(local);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      await apiPatch(`/buildings/${id}`, form);
      router.push("/buildings");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppShell title="ویرایش ساختمان" subtitle={form.name || "به‌روزرسانی اطلاعات و فضاها"}>
      <BuildingForm
        value={form}
        onChange={setForm}
        errors={errors}
        generalError={error}
        buildingId={Number(id)}
        initialSpaces={spaces}
        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("/buildings")} className="min-w-[8rem]">
              بازگشت
            </Button>
          </>
        }
      />
    </AppShell>
  );
}