"use client";

import { POST_DELETE_TYPES } from "@/lib/api";

/** 管理软删共用：类型单选 + 仅「其他」时的补充理由 */
export default function StaffDeleteFields({
  deleteType,
  onTypeChange,
  reason,
  onReasonChange,
  reasonId,
  reasonPlaceholder,
  typeHint,
  reasonHint,
}: {
  deleteType: string;
  onTypeChange: (value: string) => void;
  reason: string;
  onReasonChange: (value: string) => void;
  reasonId: string;
  reasonPlaceholder: string;
  typeHint: string;
  reasonHint: string;
}) {
  const reasonRequired = deleteType === "other";

  return (
    <>
      <p className="mb-2 text-[12.5px] font-medium" style={{ color: "var(--ink)" }}>
        删除类型
      </p>
      <div
        className="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mb-1"
        role="radiogroup"
        aria-label="删除类型"
      >
        {POST_DELETE_TYPES.map((t) => {
          const active = deleteType === t.value;
          return (
            <button
              key={t.value}
              type="button"
              role="radio"
              aria-checked={active}
              onClick={() => onTypeChange(t.value)}
              className="text-left rounded-lg px-3 py-2.5 text-[13px] transition-colors"
              style={{
                border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
                background: active ? "var(--accent-soft)" : "var(--panel-2)",
                color: active ? "var(--accent)" : "var(--ink)",
              }}
            >
              {t.label}
            </button>
          );
        })}
      </div>
      <p className="meta text-[11.5px] mb-4 leading-relaxed">{typeHint}</p>
      {reasonRequired ? (
        <>
          <label
            className="block mb-1.5 text-[12.5px] font-medium"
            style={{ color: "var(--ink)" }}
            htmlFor={reasonId}
          >
            补充理由 <span style={{ color: "var(--danger)" }}>*</span>
          </label>
          <textarea
            id={reasonId}
            className="field"
            rows={3}
            value={reason}
            onChange={(e) => onReasonChange(e.target.value)}
            placeholder={reasonPlaceholder}
            maxLength={200}
          />
          <p className="meta text-[11.5px] mt-1.5">{reasonHint}</p>
        </>
      ) : null}
    </>
  );
}