"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import {
  BuildingForm,
  emptyBuildingForm,
  validateBuildingForm,
  type BuildingFormFieldErrors,
} from "@/components/buildings/BuildingForm";
import { Button } from "@/components/ui/Button";
import { ApiError, apiPost } from "@/lib/api";

export default function NewBuildingPage() {
  const router = useRouter();
  const [form, setForm] = useState(emptyBuildingForm());
  const [errors, setErrors] = useState<BuildingFormFieldErrors>({});
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const submit = async () => {
    const local = validateBuildingForm(form);
    if (Object.keys(local).length > 0) {
      setErrors(local);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const created = await apiPost<{ id: number }>("/buildings", form);
      router.push(`/buildings/${created.id}`);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ثبت ساختمان");
    } finally {
      setLoading(false);
    }
  };

  return (
    <AppShell title="ساختمان جدید" subtitle="ثبت ساختمان هلدینگ">
      <BuildingForm
        value={form}
        onChange={setForm}
        errors={errors}
        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("/buildings")} className="min-w-[8rem]">
              بازگشت
            </Button>
          </>
        }
      />
    </AppShell>
  );
}