"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";

export default function PersonCreateForm({ trahId }: { trahId: string }) {
  const router = useRouter();
  const [displayName, setDisplayName] = useState("");
  const [gender, setGender] = useState("UNKNOWN");
  const [lifeStatus, setLifeStatus] = useState("UNKNOWN");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setBusy(true);
    try {
      const res = await fetch(`/api/trahs/${trahId}/persons`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ displayName, gender, lifeStatus }),
      });

      const data = (await res.json().catch(() => null)) as
        | { personId?: string; error?: string }
        | null;

      if (res.ok && data?.personId) {
        router.push(`/trahs/${trahId}/persons/${data.personId}/edit`);
        return;
      }

      if (data?.error === "INVALID_INPUT") {
        setError("Please enter a name.");
      } else if (data?.error === "FORBIDDEN") {
        setError("You don't have permission to add a person to this Trah.");
      } else {
        setError("Something went wrong. Please try again.");
      }
    } catch {
      setError("Something went wrong. Please try again.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && (
        <p role="alert" style={{ color: "crimson" }}>
          {error}
        </p>
      )}

      <div>
        <label htmlFor="displayName">Name</label>
        <br />
        <input
          id="displayName"
          type="text"
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          required
        />
      </div>

      <div>
        <label htmlFor="gender">Gender</label>
        <br />
        <select id="gender" value={gender} onChange={(e) => setGender(e.target.value)}>
          <option value="UNKNOWN">Unknown</option>
          <option value="MALE">Male</option>
          <option value="FEMALE">Female</option>
        </select>
      </div>

      <div>
        <label htmlFor="lifeStatus">Life status</label>
        <br />
        <select
          id="lifeStatus"
          value={lifeStatus}
          onChange={(e) => setLifeStatus(e.target.value)}
        >
          <option value="UNKNOWN">Unknown</option>
          <option value="ALIVE">Alive</option>
          <option value="DECEASED">Deceased</option>
        </select>
      </div>

      <button type="submit" disabled={busy}>
        {busy ? "Saving…" : "Add person"}
      </button>
    </form>
  );
}