/* ============================================================================
 * 서명전에 — TDS TextButton 컴포넌트
 *  · 한 줄 텍스트로 액션을 트리거하는 가장 가벼운 형태의 버튼이에요.
 *    "더보기 →", "전체 보기", "이용약관" 같은 줄 안 액션에 써요. 색은 기본
 *    blue-500, 비활성 grey-400, hover blue-600.
 *
 *  · 시각:
 *      기본 inline-flex / 패딩 0 / 배경 transparent / 테두리 없음.
 *      한 줄짜리 button 이라서 컨테이너 안에 그대로 끼워 넣어도 줄 높이를
 *      해치지 않게 line-height 가 size 별로 맞춰져 있어요.
 *
 *  · size (필수):
 *      xsmall=12 / small=13 / medium=15 / large=17 / xlarge=20 / xxlarge=24 (px).
 *      line-height 는 16/18/22/26/28/32 로 함께 잡혀요.
 *      기본 font-weight 는 medium — fontWeight prop 으로 덮어쓰기 가능.
 *
 *  · variant ("clear" 기본):
 *      "clear"     — 텍스트만.
 *      "arrow"     — 우측에 chev-right SVG (사이즈는 텍스트 크기와 동일,
 *                    색은 currentColor → 텍스트 색을 그대로 따라감).
 *                    gap 4px 로 살짝 간격.
 *      "underline" — text-decoration: underline, 1px, 오프셋 3px.
 *
 *  · disabled:
 *      color → grey-400 / cursor: not-allowed / pointer-events: none / 클릭 무시.
 *      <button> 일 땐 native disabled 도 함께, <a> 일 땐 href 제거 + aria-disabled.
 *
 *  · ParagraphText 확장 (스펙 명시):
 *      typography / fontWeight / color 를 전달하면 size 매핑을 덮어써요.
 *      typography 키는 t1~t7 / st1~st13 (Paragraph 와 동일 매핑).
 *      대부분의 경우 size 만 정해도 충분 — typography 는 정말 다른 위계가
 *      필요할 때만.
 *
 *  · 렌더링 태그:
 *      href 가 있으면 <a>, as="div" 처럼 명시하면 그 태그, 그 외 기본 <button>.
 *      <button> 일 때 type 기본 "button" (form 안에서 의도치 않은 submit 방지).
 *
 *  · 접근성:
 *      텍스트가 곧 라벨. 스크린 리더가 children 을 읽어요. 더 자세한
 *      라벨이 필요하면 aria-label 로 보강. variant=arrow 의 chev SVG 는
 *      aria-hidden="true" 로 숨김(중복 발화 방지).
 *      focus-visible 시 2px blue-400 outline + offset 2px + radius 4px.
 *
 *  · 모션:
 *      opacity / color 120ms ease-out. prefers-reduced-motion 시 OFF.
 * ========================================================================== */

const __TEXT_BUTTON_SIZES = ["xsmall", "small", "medium", "large", "xlarge", "xxlarge"];
const __TEXT_BUTTON_VARIANTS = ["arrow", "underline", "clear"];

// arrow 아이콘 px 사이즈 — 텍스트 크기와 1:1
const __TEXT_BUTTON_ARROW_PX = {
  xsmall: 12,
  small: 14,
  medium: 16,
  large: 18,
  xlarge: 20,
  xxlarge: 24,
};

// ParagraphText 확장: typography / fontWeight 인라인 변환
function __tbTyVars(typography) {
  if (!typography) return null;
  const key = typography.startsWith("st")
    ? `--sub-ty-${typography.slice(2)}`
    : typography.startsWith("t")
      ? `--ty-${typography.slice(1)}`
      : null;
  if (!key) return null;
  return {
    fontSize: `var(${key}-fs)`,
    lineHeight: `var(${key}-lh)`,
  };
}
function __tbWVar(weight) {
  if (!weight) return null;
  return { fontWeight: `var(--w-${weight})` };
}

function TextButton({
  size,
  variant = "clear",
  disabled = false,
  // ParagraphText 확장 — 기본 size 매핑을 덮어쓸 때
  typography,
  fontWeight,
  color,
  // 콘텐츠 + 동작
  children,
  onClick,
  type,
  href,
  as,
  // 외부 스타일
  className = "",
  style,
  id,
  // a11y
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  ...rest
}) {
  // ----- props 검증 -----
  if (!__TEXT_BUTTON_SIZES.includes(size)) {
    if (window.console && console.warn) {
      console.warn(
        `[TextButton] size 는 필수 — ${__TEXT_BUTTON_SIZES.join(" | ")}. 받은 값: ${size}. "medium" 폴백.`
      );
    }
    size = "medium";
  }
  if (!__TEXT_BUTTON_VARIANTS.includes(variant)) {
    if (window.console && console.warn) {
      console.warn(
        `[TextButton] variant 는 ${__TEXT_BUTTON_VARIANTS.join(" | ")} 만 가능. 받은 값: ${variant}. "clear" 폴백.`
      );
    }
    variant = "clear";
  }

  // ----- 인라인 오버라이드 -----
  const overrideStyle = {
    ...(__tbTyVars(typography) || {}),
    ...(__tbWVar(fontWeight) || {}),
    ...(color ? { color } : {}),
    ...(style || {}),
  };

  // ----- 클래스 -----
  const cls = [
    "tds-text-button",
    `tds-text-button--${size}`,
    `tds-text-button--${variant}`,
    disabled ? "is-disabled" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  // ----- 렌더링 태그 결정 -----
  const isAnchor = typeof href === "string" && href.length > 0;
  const Tag = isAnchor ? "a" : (as || "button");

  // ----- 클릭 -----
  const handleClick = function (e) {
    if (disabled) {
      if (e && typeof e.preventDefault === "function") e.preventDefault();
      return;
    }
    if (typeof onClick === "function") onClick(e);
  };

  // ----- 태그별 보조 props -----
  const tagSpecific = {};
  if (isAnchor) {
    // 비활성 링크는 href 제거(키보드/스크린 리더에서도 비활성처럼 동작) + aria-disabled
    if (!disabled) tagSpecific.href = href;
    if (disabled) tagSpecific["aria-disabled"] = true;
  } else if (Tag === "button") {
    tagSpecific.type = type || "button";
    tagSpecific.disabled = !!disabled;
  } else if (disabled) {
    // 임의 태그도 보조적으로 aria-disabled
    tagSpecific["aria-disabled"] = true;
  }

  // ----- arrow SVG -----
  const arrowSize = __TEXT_BUTTON_ARROW_PX[size] || 16;
  const arrow = variant === "arrow" ? (
    <span className="tds-text-button__arrow" aria-hidden="true">
      <svg
        width={arrowSize}
        height={arrowSize}
        viewBox="0 0 24 24"
        fill="none"
        focusable="false"
        aria-hidden="true"
      >
        <polyline
          points="9 6 15 12 9 18"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  ) : null;

  return (
    <Tag
      id={id}
      className={cls}
      style={overrideStyle}
      onClick={handleClick}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledBy}
      {...tagSpecific}
      {...rest}
    >
      <span className="tds-text-button__label">{children}</span>
      {arrow}
    </Tag>
  );
}

window.TextButton = TextButton;
Object.assign(window, { TextButton });