"use client";

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

type UserOption = { id: string; name: string | null; email: string };

export function AdhocForm({ users, canCreateForAny }: { users: UserOption[]; canCreateForAny: boolean }) {
  const router = useRouter();
  const [status, setStatus] = useState("");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/adhoc-records", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId: form.get("userId") || undefined, date: form.get("date"), hours: form.get("hours"), reason: form.get("reason") })
    });
    if (!response.ok) {
      const payload = await response.json();
      setStatus(payload.error ?? "Could not submit record.");
      return;
    }
    event.currentTarget.reset();
    setStatus("");
    router.refresh();
  }

  return (
    <form className="grid gap-3 rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm" onSubmit={submit}>
      <h2 className="text-lg font-semibold">Submit missed clock-in</h2>
      {canCreateForAny ? (
        <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="userId">
          {users.map((user) => <option key={user.id} value={user.id}>{user.name ?? user.email}</option>)}
        </select>
      ) : null}
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="date" required type="date" />
      <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm" min="0.25" name="hours" required step="0.25" type="number" placeholder="Hours" />
      <textarea className="min-h-28 rounded-lg border border-slate-300 px-3 py-2 text-sm" name="reason" required placeholder="Reason" />
      <button className="brand-button" type="submit">Submit record</button>
      {status ? <p className="text-sm text-brand-primary">{status}</p> : null}
    </form>
  );
}