"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { saveTargetAction, type TargetState } from "./actions";
import { formatVndShort } from "@/lib/format";

type Option = { id: string; name: string };
type Scope = "COMPANY" | "USER" | "TERRITORY" | "CUSTOMER";

function SaveButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : "Lưu chỉ tiêu"}
    </button>
  );
}

export function TargetForm({
  periodKey,
  staff,
  territories,
  dealers,
  canAssignCompany = true,
}: {
  periodKey: string;
  staff: Option[];
  territories: Option[];
  dealers: Option[];
  /** Chỉ Ban giám đốc giao được chỉ tiêu toàn công ty. */
  canAssignCompany?: boolean;
}) {
  const [state, formAction] = useActionState<TargetState, FormData>(saveTargetAction, {});
  const [scopeType, setScopeType] = useState<Scope>("USER");
  const [revenue, setRevenue] = useState<number>(0);

  const options =
    scopeType === "USER" ? staff : scopeType === "TERRITORY" ? territories : dealers;

  return (
    <form action={formAction} className="card flex flex-col gap-4 p-4">
      <input type="hidden" name="periodKey" value={periodKey} />

      <div className="grid gap-4 lg:grid-cols-4">
        <div>
          <label htmlFor="scopeType" className="label-caps mb-1.5 block">
            Giao cho
          </label>
          <select
            id="scopeType"
            name="scopeType"
            value={scopeType}
            onChange={(event) => setScopeType(event.target.value as Scope)}
            className="input"
          >
            <option value="USER">Nhân viên kinh doanh</option>
            <option value="TERRITORY">Khu vực</option>
            <option value="CUSTOMER">Đại lý</option>
            {canAssignCompany && <option value="COMPANY">Toàn công ty</option>}
          </select>
        </div>

        <div>
          <label htmlFor="scopeId" className="label-caps mb-1.5 block">
            {scopeType === "USER"
              ? "Nhân viên"
              : scopeType === "TERRITORY"
                ? "Khu vực"
                : scopeType === "CUSTOMER"
                  ? "Đại lý"
                  : "Phạm vi"}
          </label>
          <select
            id="scopeId"
            name="scopeId"
            className="input"
            disabled={scopeType === "COMPANY"}
            defaultValue=""
          >
            {scopeType === "COMPANY" ? (
              <option value="">Toàn công ty</option>
            ) : (
              <>
                <option value="" disabled>
                  — Chọn —
                </option>
                {options.map((option) => (
                  <option key={option.id} value={option.id}>
                    {option.name}
                  </option>
                ))}
              </>
            )}
          </select>
        </div>

        <div>
          <label htmlFor="revenueTarget" className="label-caps mb-1.5 block">
            Chỉ tiêu doanh thu (đ)
          </label>
          <input
            id="revenueTarget"
            name="revenueTarget"
            type="number"
            min={0}
            required
            value={revenue || ""}
            onChange={(event) => setRevenue(Number(event.target.value))}
            className="input tnum"
            placeholder="300000000"
          />
          {revenue > 0 && (
            <div className="mt-1 text-[11px] text-ink-400">{formatVndShort(revenue)}</div>
          )}
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label htmlFor="orderTarget" className="label-caps mb-1.5 block">
              Số đơn
            </label>
            <input
              id="orderTarget"
              name="orderTarget"
              type="number"
              min={0}
              defaultValue={0}
              className="input tnum"
            />
          </div>
          <div>
            <label htmlFor="newCustomerTarget" className="label-caps mb-1.5 block">
              KH mở mới
            </label>
            <input
              id="newCustomerTarget"
              name="newCustomerTarget"
              type="number"
              min={0}
              defaultValue={0}
              className="input tnum"
            />
          </div>
        </div>
      </div>

      {state.error && (
        <p role="alert" className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
          {state.error}
        </p>
      )}
      {state.ok && <p className="rounded-lg bg-ink-100 px-3 py-2 text-sm text-brand-600">{state.ok}</p>}

      <div className="flex items-center gap-3">
        <SaveButton />
        <span className="text-xs text-ink-400">
          Giao lại chỉ tiêu cho cùng một phạm vi và kỳ sẽ ghi đè giá trị cũ.
        </span>
      </div>
    </form>
  );
}