"use client";

import { useState, useTransition } from "react";
import { Button } from "@/components/ui";
import { inputClass } from "@/components/ui/form";
import { createEntryAction } from "@/lib/actions/content";

export function NewEntryForm({ base, siteId, typeKey, titleLabel }: { base: string; siteId: string; typeKey: string; titleLabel: string }) {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  return (
    <form
      className="flex flex-wrap items-start gap-2"
      action={(form) => {
        setError(null);
        start(async () => {
          const res = await createEntryAction(base, { siteId, typeKey, title: String(form.get("title") ?? "") });
          if (res && !res.ok) setError(res.fieldErrors?.title ?? res.error);
        });
      }}
    >
      <div>
        <label htmlFor="new-entry-title" className="sr-only">{titleLabel}</label>
        <input id="new-entry-title" name="title" required maxLength={200} placeholder={`New ${titleLabel.toLowerCase()}`} className={`${inputClass} w-64`} aria-invalid={error ? true : undefined} aria-describedby={error ? "new-entry-error" : undefined} />
        {error ? <p id="new-entry-error" role="alert" className="mt-1 text-xs text-danger">{error}</p> : null}
      </div>
      <Button type="submit" disabled={pending}>{pending ? "Creating…" : "Create draft"}</Button>
    </form>
  );
}