"use client";

import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";
import { apiFetch, errorMessage } from "@/lib/client-api";

export function AddHolidayForm() {
  const router = useRouter();
  const [day, setDay] = useState("");
  const [name, setName] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  async function submit(e: FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      await apiFetch("/holidays", { method: "POST", body: { day, name, source: "manual" } });
      setDay("");
      setName("");
      router.refresh();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <form className="inline-form" onSubmit={submit}>
      <label className="field">
        <span>Data</span>
        <input type="date" value={day} onChange={(e) => setDay(e.target.value)} required />
      </label>
      <label className="field">
        <span>Nome</span>
        <input value={name} onChange={(e) => setName(e.target.value)} maxLength={120} required />
      </label>
      <button className="btn primary" type="submit" disabled={busy}>
        Cadastrar
      </button>
      {error && <p className="error-text">{error}</p>}
    </form>
  );
}