"use client";

import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { createKpiAction, assignKpiAction, type KpiState } from "./actions";

function SubmitButton({ label, pendingLabel }: { label: string; pendingLabel: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary px-4 py-2 text-sm" disabled={pending}>
      {pending ? pendingLabel : label}
    </button>
  );
}

/** Tạo một loại KPI mới — chỉ cần tên và đơn vị tính, không cần công thức. */
export function CreateKpiForm() {
  const [state, formAction] = useActionState<KpiState, FormData>(createKpiAction, {});

  return (
    <form action={formAction} className="card flex flex-wrap items-end gap-3 p-4">
      <div className="flex-1" style={{ minWidth: 200 }}>
        <label htmlFor="name" className="label-caps mb-1.5 block">
          Tên KPI
        </label>
        <input
          id="name"
          name="name"
          required
          placeholder="Lượt chăm sóc khách VIP"
          className="input"
        />
      </div>
      <div style={{ width: 140 }}>
        <label htmlFor="unit" className="label-caps mb-1.5 block">
          Đơn vị tính
        </label>
        <input id="unit" name="unit" required placeholder="lượt / % / khách" className="input" />
      </div>
      <SubmitButton label="+ Tạo KPI" pendingLabel="Đang tạo…" />
      {state.error && <p className="w-full text-sm text-red-600">{state.error}</p>}
      {state.ok && <p className="w-full text-sm text-brand-600">{state.ok}</p>}
    </form>
  );
}

export type KpiOption = { id: string; name: string; unit: string };
export type StaffOption = { id: string; name: string };

/** Giao chỉ tiêu một KPI tự tạo cho một NVKD trong một kỳ cụ thể. */
export function AssignKpiForm({
  periodKey,
  kpis,
  staff,
}: {
  periodKey: string;
  kpis: KpiOption[];
  staff: StaffOption[];
}) {
  const [state, formAction] = useActionState<KpiState, FormData>(assignKpiAction, {});

  if (kpis.length === 0) {
    return (
      <p className="card p-4 text-sm text-ink-400">Tạo ít nhất một KPI ở trên trước khi giao chỉ tiêu.</p>
    );
  }

  return (
    <form action={formAction} className="card flex flex-wrap items-end gap-3 p-4">
      <input type="hidden" name="periodKey" value={periodKey} />
      <div style={{ minWidth: 200 }}>
        <label htmlFor="kpiId" className="label-caps mb-1.5 block">
          KPI
        </label>
        <select id="kpiId" name="kpiId" required defaultValue="" className="input">
          <option value="" disabled>
            — Chọn —
          </option>
          {kpis.map((k) => (
            <option key={k.id} value={k.id}>
              {k.name} ({k.unit})
            </option>
          ))}
        </select>
      </div>
      <div style={{ minWidth: 180 }}>
        <label htmlFor="userId" className="label-caps mb-1.5 block">
          Nhân viên
        </label>
        <select id="userId" name="userId" required defaultValue="" className="input">
          <option value="" disabled>
            — Chọn —
          </option>
          {staff.map((s) => (
            <option key={s.id} value={s.id}>
              {s.name}
            </option>
          ))}
        </select>
      </div>
      <div style={{ width: 140 }}>
        <label htmlFor="targetValue" className="label-caps mb-1.5 block">
          Chỉ tiêu
        </label>
        <input
          id="targetValue"
          name="targetValue"
          type="number"
          min={0}
          step="any"
          required
          className="input tnum"
        />
      </div>
      <SubmitButton label="Giao chỉ tiêu" pendingLabel="Đang lưu…" />
      {state.error && <p className="w-full text-sm text-red-600">{state.error}</p>}
      {state.ok && <p className="w-full text-sm text-brand-600">{state.ok}</p>}
    </form>
  );
}