import { useState } from "react";
import type { CampaignId, Npc } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
import { BaseForm } from "@/components/form/BaseForm";
import { SingleLineInput } from "@/components/form/SingleLineInput";
import { MultiLineInput } from "@/components/form/MultiLineInput";
import { useDocumentCache } from "@/context/document/hooks";

/**
 * Renders a form to add a new npc. Calls onCreate with the new npc document.
 */
export const NewNpcForm = ({
  campaign,
  onCreate,
}: {
  campaign: CampaignId;
  onCreate: (npc: Npc) => Promise<void>;
}) => {
  const { dispatch } = useDocumentCache();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [adding, setAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    setAdding(true);
    setError(null);
    try {
      const npcDoc: Npc = await pb.collection("documents").create({
        campaign,
        type: "npc",
        data: {
          name,
          description,
        },
      });
      setName("");
      setDescription("");
      dispatch({ type: "setDocument", doc: npcDoc });
      await onCreate(npcDoc);
    } catch (e: any) {
      setError(e?.message || "Failed to add npc.");
    } finally {
      setAdding(false);
    }
  }

  return (
    <BaseForm
      title="Create new NPC"
      onSubmit={handleSubmit}
      isLoading={adding}
      error={error}
      content={
        <>
          <SingleLineInput
            label="Name"
            value={name}
            onChange={setName}
            disabled={adding}
            placeholder="Enter NPC name"
          />
          <MultiLineInput
            label="Description"
            value={description}
            placeholder="Enter NPC description"
            onChange={setDescription}
            disabled={adding}
          />
        </>
      }
    />
  );
};