"use client";

import { useForm } from "@refinedev/antd";
import { Button, Card, Form } from "antd";
import { PostFormFields } from "@/components/posts/PostFormFields";
import type { PostRecord } from "@/types/post";

import { PageContainer } from "@/components/admin/PageContainer";

const FORM_ID = "post-create-form";

export default function NewPostPage() {
  const { formProps, saveButtonProps } = useForm<PostRecord>({
    resource: "posts",
    action: "create",
    redirect: "list",
  });

  return (
    <PageContainer className="pb-16 md:pb-20">
      <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-9 pt-9">
          <h1 className="m-0 text-2xl font-semibold tracking-tight text-[rgba(15,23,42,0.92)]">
            New post
          </h1>
          <p className="mb-0 mt-1 text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
            Add content for Co Thu Ky Pho. Save as draft or publish if your account allows it.
          </p>
        </div>

        <Form
          id={FORM_ID}
          {...formProps}
          layout="vertical"
          requiredMark
          className="mx-auto w-full max-w-[800px] px-8 pb-12 pt-8 [&_.ant-form-item-label>label]:!h-auto [&_.ant-form-item-label]:!pb-2"
        >
          <PostFormFields mode="create" />
        </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-7">
          <Button
            {...saveButtonProps}
            form={FORM_ID}
            type="primary"
            size="large"
            htmlType="submit"
            className="min-w-[168px]"
          >
            Create post
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
}