import { useState } from "react";
import type { CampaignId, Npc } from "@/lib/types";
import { pb } from "@/lib/pocketbase";

/**
 * Renders a form to add a new npc. Calls onCreate with the new npc document.
 */
export const NpcForm = ({
  campaign,
  onCreate,
}: {
  campaign: CampaignId;
  onCreate: (npc: Npc) => Promise<void>;
}) => {
  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,
        data: {
          npc: {
            name,
            description,
          },
        },
      });
      setName("");
      setDescription("");
      await onCreate(npcDoc);
    } catch (e: any) {
      setError(e?.message || "Failed to add npc.");
    } finally {
      setAdding(false);
    }
  }

  return (
    <form
      className="flex items-left flex-col gap-2 mt-4"
      onSubmit={handleSubmit}
    >
      <h3>Create new npc</h3>
      <div className="flex gap-5 w-full items-center">
        <label>Name</label>
        <input
          type="text"
          className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          disabled={adding}
          aria-label="Name"
        />
      </div>
      <div className="flex gap-5 w-full items-center">
        <label>Description</label>
        <textarea
          className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
          placeholder="Description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={adding}
          aria-label="Description"
        />
      </div>
      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
      <button
        type="submit"
        className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
        disabled={adding || !name.trim()}
      >
        {adding ? "Adding..." : "Create"}
      </button>
    </form>
  );
};