import { serializePageBlocks } from "@cms/content"
import { Button } from "@cms/ui/button"

import { PageBlockEditor } from "./page-block-editor"

type CreatePageFormProps = {
  action: (formData: FormData) => void | Promise<void>
}

export function CreatePageForm({ action }: CreatePageFormProps) {
  return (
    <form action={action} className="mt-4 space-y-3">
      <div className="grid gap-3 md:grid-cols-3">
        <label className="space-y-1 md:col-span-2">
          <span className="text-xs text-neutral-600">Title</span>
          <input
            name="title"
            required
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">Status</span>
          <select
            name="status"
            defaultValue="draft"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          >
            <option value="draft">draft</option>
            <option value="published">published</option>
          </select>
        </label>
      </div>

      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Slug</span>
        <input
          name="slug"
          required
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>

      <label className="space-y-1">
        <span className="text-xs text-neutral-600">Summary</span>
        <input
          name="summary"
          className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
        />
      </label>

      <PageBlockEditor
        name="content"
        initialContent={serializePageBlocks([
          {
            id: "initial-rich-text",
            type: "rich_text",
            body: "",
          },
        ])}
      />

      <div className="grid gap-3 md:grid-cols-2">
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">SEO title</span>
          <input
            name="seoTitle"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
        <label className="space-y-1">
          <span className="text-xs text-neutral-600">SEO description</span>
          <input
            name="seoDescription"
            className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
          />
        </label>
      </div>

      <Button type="submit">Create page</Button>
    </form>
  )
}