/* ============================================================================
 * 서명전에 — TDS IconButton 컴포넌트
 *  · 아이콘만으로 동작하는 버튼. variant: clear / fill / border.
 *      - clear  : 평소 배경 없음, 누를 때 bgColor 표시
 *      - fill   : 평소 bgColor 표시, 누를 때 배경 사라짐 (반전 — TDS 계약)
 *      - border : 평소 테두리 + 배경 없음, 누를 때 bgColor 표시
 *
 *  · 아이콘 소스는 두 가지 — `src` (URL) 또는 `name` (IOSIcon 위임).
 *    둘 중 하나만 쓰며, 동시에 주면 src 가 우선되고 콘솔 경고.
 *  · `-mono` 로 끝나는 URL (예: `icon-search-bold-mono.svg`) 은 CSS
 *    mask-image + background-color 트릭으로 색을 입혀요. `color` prop 이
 *    이때 비로소 효과를 가져요. 일반(컬러) URL 은 `<img>` 로 그대로 표시.
 *  · `name` 은 우리 IOSIcon 라이브러리에 위임 — 우리 라이브러리 자체가
 *    모두 currentColor 기반 mono 아이콘이라 `color` 가 그대로 적용돼요.
 *
 *  · 접근성: `aria-label` 은 사실상 필수. 누락 시 콘솔 경고.
 *
 *  · props (IconButtonProps):
 *      variant     "clear" | "fill" | "border"  (기본 "clear")
 *      src         string — 아이콘 URL
 *      name        string — IOSIcon 이름
 *      color       string — 아이콘 색 (mono 일 때만 효과)
 *      bgColor     string — 배경색. 기본 var(--tds-grey-opacity-100).
 *                          fill = 기본 배경 / clear, border = pressed 배경.
 *      iconSize    number — px. 기본 24.
 *      disabled    boolean
 *      type        "button" | "submit" | "reset" — 기본 "button"
 *      onClick     (e) => void
 *      className, style, aria-label, aria-* ... <button> 속성 패스스루
 * ========================================================================== */

function IconButton({
  variant = "clear",
  src,
  name,
  color,
  bgColor,
  iconSize = 24,
  disabled = false,
  type = "button",
  className = "",
  style,
  onClick,
  ...rest
}) {
  // 접근성 / API 사용 검증
  if (!rest["aria-label"]) {
    if (window.console && console.warn) {
      console.warn(
        "[IconButton] `aria-label` 은 필수예요. 아이콘만으로는 스크린 리더가 버튼의 용도를 알 수 없어요."
      );
    }
  }
  if (src && name) {
    if (window.console && console.warn) {
      console.warn(
        "[IconButton] `src` 와 `name` 은 함께 쓸 수 없어요. `src` 를 우선합니다."
      );
    }
  }
  if (!src && !name) {
    if (window.console && console.warn) {
      console.warn(
        "[IconButton] `src` 또는 `name` 중 하나는 반드시 지정해야 해요."
      );
    }
  }

  const cls = [
    "tds-iconbutton",
    `tds-iconbutton--${variant}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  // CSS 변수 주입 — color / bgColor / iconSize
  const cssVars = {
    "--tds-iconbutton-icon-size": `${iconSize}px`,
  };
  if (bgColor) cssVars["--tds-iconbutton-bg"] = bgColor;
  if (color)   cssVars["--tds-iconbutton-icon-color"] = color;
  const mergedStyle = { ...(style || {}), ...cssVars };

  // -mono 아이콘 판별 — URL 끝이 `-mono.svg` 또는 `-mono.svg?…` 로 끝나는지
  const isMonoSrc = src ? /-mono(?:\.[^/?#]+)?(?:\?[^#]*)?(?:#.*)?$/i.test(src) : false;

  // 아이콘 노드
  let iconNode = null;
  if (src) {
    if (isMonoSrc) {
      iconNode = (
        <span
          className="tds-iconbutton__icon tds-iconbutton__icon--mask"
          style={{
            width: `${iconSize}px`,
            height: `${iconSize}px`,
            WebkitMaskImage: `url("${src}")`,
            maskImage: `url("${src}")`,
            backgroundColor: color || "currentColor",
          }}
          aria-hidden="true"
        />
      );
    } else {
      iconNode = (
        <img
          src={src}
          width={iconSize}
          height={iconSize}
          alt=""
          aria-hidden="true"
          className="tds-iconbutton__icon"
        />
      );
    }
  } else if (name) {
    if (typeof window !== "undefined" && typeof window.IOSIcon === "function") {
      const _IOSIcon = window.IOSIcon;
      iconNode = (
        <_IOSIcon name={name} size={iconSize} color={color} />
      );
    } else {
      // IOSIcon 라이브러리가 아직 로드되지 않은 경우의 폴백
      iconNode = (
        <span
          className="tds-iconbutton__icon"
          style={{
            width: `${iconSize}px`,
            height: `${iconSize}px`,
            backgroundColor: color || "currentColor",
            borderRadius: "2px",
            opacity: 0.2,
          }}
          aria-hidden="true"
        />
      );
    }
  }

  const handleClick = (e) => {
    if (disabled) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    onClick?.(e);
  };

  return (
    <button
      type={type}
      className={cls}
      style={mergedStyle}
      onClick={handleClick}
      disabled={disabled}
      {...rest}
    >
      {iconNode}
    </button>
  );
}

window.IconButton = IconButton;

Object.assign(window, { IconButton });