"use client";

import { useParams } from "next/navigation";
import { useForm } from "@refinedev/antd";
import { Button, Card, Form, Spin, Typography } from "antd";
import type { CategoryRecord } from "@/types/category";

import { PageContainer } from "@/components/admin/PageContainer";
import { CategoryFormFields } from "../../category-form-fields";

const FORM_ID = "category-edit-form";

export default function EditCategoryPage() {
  const params = useParams<{ id?: string | string[] }>();
  const rawId = params?.id;
  const id = Array.isArray(rawId) ? rawId[0] : rawId;

  const { formProps, saveButtonProps, query } = useForm<CategoryRecord>({
    resource: "categories",
    action: "edit",
    id: id ?? "",
    queryOptions: {
      enabled: Boolean(id),
    },
  });

  if (!id) {
    return (
      <PageContainer>
        <div className="rounded-xl border border-[rgba(15,23,42,0.08)] bg-white px-6 py-8 shadow-sm">
          <Typography.Text type="danger">Invalid category id</Typography.Text>
        </div>
      </PageContainer>
    );
  }

  return (
    <PageContainer>
      <Card
        className="cms-crud-card overflow-hidden !border-[rgba(15,23,42,0.08)]"
        styles={{ body: { padding: 0 } }}
      >
        <div className="border-b border-[rgba(15,23,42,0.08)] px-8 pb-6 pt-8">
          <h1 className="m-0 text-2xl font-semibold tracking-tight text-[rgba(15,23,42,0.92)]">
            Edit category
          </h1>
          <p className="mb-0 mt-1 text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
            Update how this category appears in the CMS and on the site.
          </p>
        </div>

        {query?.isLoading ? (
          <div className="flex justify-center px-8 py-20">
            <Spin size="large" />
          </div>
        ) : (
          <>
            <Form
              id={FORM_ID}
              {...formProps}
              layout="vertical"
              requiredMark
              className="mx-auto w-full max-w-[560px] px-8 pb-2 pt-6"
            >
              <CategoryFormFields />
            </Form>

            <div className="flex justify-end border-t border-[rgba(15,23,42,0.08)] bg-[rgba(15,23,42,0.02)] px-8 py-4">
              <Button
                {...saveButtonProps}
                form={FORM_ID}
                type="primary"
                size="large"
                htmlType="submit"
                className="min-w-[168px]"
              >
                Save changes
              </Button>
            </div>
          </>
        )}
      </Card>
    </PageContainer>
  );
}