"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { createInviteEventAction, type FormState } from "./actions";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang tạo…" : "Tạo sự kiện"}
    </button>
  );
}

export function CreateInviteEventForm() {
  const [state, formAction] = useActionState<FormState, FormData>(createInviteEventAction, {});

  return (
    <form action={formAction} className="card flex flex-wrap items-end gap-3 p-4">
      <div className="flex-1" style={{ minWidth: 220 }}>
        <label className="label-caps mb-1.5 block">Tên sự kiện</label>
        <input name="name" required className="input" placeholder="Hội nghị da liễu khu vực Quý 4" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Ngày sự kiện</label>
        <input name="eventDate" type="date" required className="input" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block" title="Nhân viên ghi nhận khách mời và cộng dồn tới ngày này. Bỏ trống thì lấy ngày sự kiện.">
          Hạn chót mời khách
        </label>
        <input name="inviteDeadline" type="date" className="input" />
      </div>
      <div className="flex-1" style={{ minWidth: 200 }}>
        <label className="label-caps mb-1.5 block">Ghi chú (tuỳ chọn)</label>
        <input name="note" className="input" placeholder="Địa điểm, đơn vị phối hợp..." />
      </div>
      <Submit />
      {state.error && <p role="alert" className="w-full text-sm text-red-700">{state.error}</p>}
      {state.ok && <p className="w-full text-sm text-brand-600">{state.ok}</p>}
    </form>
  );
}