"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { AvatarPicker } from "@/components/avatar";
import { updateStaffInfoAction, type UserFormState } from "../actions";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : "Lưu thông tin"}
    </button>
  );
}

/** Form Hành chính nhân sự / Ban giám đốc sửa thông tin cá nhân của nhân viên. */
export function StaffInfoForm({
  initial,
}: {
  initial: { id: string; fullName: string; phone: string; jobTitle: string; birthDate: string; gender: string; avatar: string | null };
}) {
  const [state, formAction] = useActionState<UserFormState, FormData>(updateStaffInfoAction, {});
  return (
    <form action={formAction} className="card mb-5 grid gap-3 p-4 sm:grid-cols-2 lg:grid-cols-5">
      <input type="hidden" name="id" value={initial.id} />
      <div className="sm:col-span-2 lg:col-span-5">
        <AvatarPicker name={initial.fullName} current={initial.avatar} />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Họ tên</label>
        <input name="fullName" required defaultValue={initial.fullName} className="input" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Điện thoại</label>
        <input name="phone" type="tel" defaultValue={initial.phone} className="input" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Chức vụ</label>
        <input name="jobTitle" defaultValue={initial.jobTitle} className="input" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Ngày sinh</label>
        <input name="birthDate" type="date" defaultValue={initial.birthDate} className="input" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Giới tính</label>
        <select name="gender" defaultValue={initial.gender} className="input">
          <option value="">— Không nêu —</option>
          <option value="M">Nam</option>
          <option value="F">Nữ</option>
          <option value="O">Khác</option>
        </select>
      </div>
      <div className="flex flex-wrap items-center gap-3 sm:col-span-2 lg:col-span-5">
        <Submit />
        {state.error && <span role="alert" className="text-sm text-red-700">{state.error}</span>}
        {state.ok && <span className="text-sm text-brand-600">{state.ok}</span>}
      </div>
    </form>
  );
}