/* ============================================================================
 * 서명전에 — TDS AlphabetKeypad 컴포넌트
 *  · 알파벳을 입력하는 커스텀 키패드. 인증번호·코드 입력 화면에서 가상
 *    키보드를 쓰지 않고 알파벳만 제한적으로 입력받을 때 사용해요.
 *  · 키 배치는 `alphabets` prop 으로 자유 구성 가능 — 기본은 A~Z(26자).
 *    배열 길이가 3의 배수가 아니면 빈 셀로 패딩해서 격자를 유지해요.
 *  · 마지막 열 가장 아래는 항상 지우기(Backspace) 아이콘 키 — `onBackspaceClick`.
 *
 *  · 시각 스펙 (TDS AlphabetKeypad 2026-03):
 *      - 3열 × (ceil(N/3) + Backspace) 행 격자
 *      - 각 셀 높이 56px, 셀 간 hairline 구분선 `--tds-grey-opacity-200`
 *      - 배경 `var(--bg-default)` = 흰색 (기본), 키 누름 시 `--tds-grey-100`
 *      - 글자 `var(--label)` (grey-900), 타이포 `--ty-5` + bold
 *      - Backspace 아이콘은 검정(`--label`) mono, 24px
 *
 *  · props (AlphabetKeypadProps):
 *      alphabets?           string[]  — 표시할 알파벳. 기본 ['A'..'Z']
 *      onKeyClick*          (value: string) => void   — 알파벳 키 눌림
 *      onBackspaceClick*    () => void                — 지우기 눌림
 *      disabled?            boolean — 전체 비활성 (기본 false)
 *      backspaceAriaLabel?  string  — 기본 "한 글자 지우기"
 *      className, style     — 컨테이너 속성 패스스루
 *
 *  · 접근성: 각 키는 role="button" + aria-label=알파벳. Backspace 는
 *    `aria-label="한 글자 지우기"` 기본. 빈 패딩 셀은 aria-hidden="true".
 *  · 키보드: 각 키는 native `<button>` — Tab 순회, Enter/Space 로 활성.
 *
 *  · window.AlphabetKeypad 로 글로벌 등록.
 * ========================================================================== */

const _DEFAULT_ALPHABETS = (function () {
  const arr = [];
  for (let i = 0; i < 26; i += 1) arr.push(String.fromCharCode(65 + i));
  return arr;
})();

/* Backspace SVG — 24×24, currentColor 기반 (TDS mono 규격) */
function _AlphabetKeypadBackspaceIcon() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M8.4 5.5h10.85c.97 0 1.75.78 1.75 1.75v9.5c0 .97-.78 1.75-1.75 1.75H8.4a1.75 1.75 0 0 1-1.39-.68L3 12l4.01-5.82A1.75 1.75 0 0 1 8.4 5.5Z"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
      <path
        d="m11.3 9.6 4.9 4.9m0-4.9-4.9 4.9"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}

function AlphabetKeypad({
  alphabets,
  onKeyClick,
  onBackspaceClick,
  disabled = false,
  backspaceAriaLabel = "한 글자 지우기",
  className = "",
  style,
  ...rest
}) {
  // 콜백 누락 경고
  if (typeof onKeyClick !== "function") {
    if (window.console && console.warn) {
      console.warn(
        "[AlphabetKeypad] `onKeyClick` 은 필수예요. 알파벳 키를 눌렀을 때 받을 핸들러를 넘겨주세요."
      );
    }
  }
  if (typeof onBackspaceClick !== "function") {
    if (window.console && console.warn) {
      console.warn(
        "[AlphabetKeypad] `onBackspaceClick` 은 필수예요. 지우기 핸들러를 넘겨주세요."
      );
    }
  }

  const letters = Array.isArray(alphabets) && alphabets.length > 0
    ? alphabets
    : _DEFAULT_ALPHABETS;

  // 3열 그리드 — 마지막 행의 마지막 칸이 Backspace.
  // 알파벳 개수가 3의 배수가 아니면 뒤쪽 빈 셀로 채운 다음 마지막 칸을 Backspace 로 덮어써요.
  const filled = letters.slice();
  // 마지막 행에 Backspace 자리를 남겨야 하므로 (len + 1) 이 3의 배수가 되도록 패딩
  const totalCellsNeeded = Math.ceil((filled.length + 1) / 3) * 3;
  const padCount = totalCellsNeeded - filled.length - 1;
  for (let i = 0; i < padCount; i += 1) filled.push(null);
  // 마지막 셀은 Backspace 전용 마커
  filled.push({ __backspace: true });

  const rootCls =
    "tds-alphakeypad" +
    (disabled ? " tds-alphakeypad--disabled" : "") +
    (className ? " " + className : "");

  return (
    <div
      className={rootCls}
      style={style}
      role="group"
      aria-label="알파벳 키패드"
      {...rest}
    >
      {filled.map((cell, idx) => {
        // 빈 패딩 셀 — 보이지 않는 placeholder
        if (cell === null) {
          return (
            <div
              key={"pad-" + idx}
              className="tds-alphakeypad__cell tds-alphakeypad__cell--empty"
              aria-hidden="true"
            />
          );
        }

        // Backspace 셀
        if (typeof cell === "object" && cell.__backspace) {
          return (
            <button
              key="bksp"
              type="button"
              className="tds-alphakeypad__cell tds-alphakeypad__cell--backspace"
              aria-label={backspaceAriaLabel}
              disabled={disabled}
              onClick={() => {
                if (disabled) return;
                if (typeof onBackspaceClick === "function") onBackspaceClick();
              }}
            >
              <span className="tds-alphakeypad__icon">
                <_AlphabetKeypadBackspaceIcon />
              </span>
            </button>
          );
        }

        // 알파벳 키
        const value = String(cell);
        return (
          <button
            key={"k-" + idx + "-" + value}
            type="button"
            className="tds-alphakeypad__cell tds-alphakeypad__cell--letter"
            aria-label={value}
            disabled={disabled}
            onClick={() => {
              if (disabled) return;
              if (typeof onKeyClick === "function") onKeyClick(value);
            }}
          >
            <span className="tds-alphakeypad__label">{value}</span>
          </button>
        );
      })}
    </div>
  );
}

// 글로벌 등록
window.AlphabetKeypad = AlphabetKeypad;