"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Alert, Button, Card, Form, Input, Space } from "antd";

import { BlockEditor, type SiteContentBlock } from "@/components/site/BlockEditor";
import { cmsSiteFetch } from "@/lib/site-cms-api";

export default function SitePageNewPage() {
  const router = useRouter();
  const [form] = Form.useForm();
  const [blocks, setBlocks] = useState<SiteContentBlock[]>([]);
  const [err, setErr] = useState<string | null>(null);

  const save = async () => {
    const values = await form.validateFields();
    const res = await cmsSiteFetch<{ id: string }>("/cms/site/pages", {
      method: "POST",
      body: JSON.stringify({
        ...values,
        contentJson: { blocks },
      }),
    });
    if (!res.ok) {
      setErr(res.message);
      return;
    }
    router.push(`/dashboard/site/pages/${res.data.id}/edit`);
  };

  return (
    <Card className="cms-surface-card" styles={{ body: { padding: "24px 28px" } }}>
      <h1 className="mb-4 text-lg font-semibold text-white/90">Tạo trang mới</h1>
      {err ? <Alert type="error" message={err} showIcon className="mb-4" /> : null}
      <Form form={form} layout="vertical" className="max-w-2xl">
        <Form.Item name="title" label="Tiêu đề" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item name="slug" label="Slug (tùy chọn)">
          <Input placeholder="lien-he" />
        </Form.Item>
        <Form.Item name="seoTitle" label="SEO title">
          <Input />
        </Form.Item>
        <Form.Item name="seoDescription" label="SEO description">
          <Input.TextArea rows={2} />
        </Form.Item>
      </Form>
      <div className="mt-6 max-w-3xl">
        <h2 className="mb-3 text-sm font-medium text-white/80">Khối nội dung</h2>
        <BlockEditor blocks={blocks} onChange={setBlocks} />
      </div>
      <Space className="mt-6">
        <Button type="primary" onClick={() => void save()}>
          Lưu nháp
        </Button>
      </Space>
    </Card>
  );
}