/* ============================================================================
 * 서명전에 — TDS Result 컴포넌트
 *  · 특정 작업의 결과(성공/에러/빈 상태)를 전면 또는 섹션 단위로
 *    보여주는 "페이지 템플릿" 컴포넌트.
 *  · 구조: figure (옵션) → title (h5) → description (옵션) → button (옵션)
 *
 *  · 주의 — 네이밍 충돌:
 *      화면(screen) 레이어의 `ResultScreen` (= 분석 리포트) 과는 완전히
 *      다른 컴포넌트입니다. 이쪽은 범용 상태 안내용 템플릿이에요.
 *      글로벌은 `window.Result` / `window.ResultScreen` 로 분리.
 *
 *  · 두 서브:
 *      Result         — 컨테이너
 *      Result.Button  — description 아래에 쌓이는 액션 버튼
 *                       (기본 fill primary full-width, TDS Button 위임)
 *
 *  · ResultProps:
 *      figure       ReactNode (옵션)  — title 위 시각 요소 (Asset/IOSIcon/<img> 등)
 *      title *      ReactNode         — <h5> 로 자동 변환 (필수)
 *      description  ReactNode (옵션)  — 보조 설명. 문자열이면 \n 줄바꿈 인정
 *      button       ReactNode (옵션)  — Result.Button 또는 TDS Button
 *      align        "center" | "start" (기본 "center")
 *      size         "default" | "compact" (기본 "default") — 여백 조절
 *      className, style, id 패스스루
 *
 *  · 접근성 (스펙 준수):
 *      · title 은 <h5> 로 렌더
 *      · Result.Button 은 <button type="button">
 *      · figure 안의 <img> 는 alt 이 비어 있으면(기본 "") 장식용으로 인식
 * ========================================================================== */

const __RESULT_ALIGNS = { center: 1, start: 1 };
const __RESULT_SIZES  = { default: 1, compact: 1 };

function Result({
  figure,
  title,
  description,
  button,
  align = "center",
  size = "default",
  className = "",
  style,
  id,
  ...rest
}) {
  // align / size 검증
  if (!__RESULT_ALIGNS[align]) {
    if (window.console && console.warn) {
      console.warn(
        `[Result] \`align\` 은 "center" | "start" 만 가능해요. 받은 값: ${align}`
      );
    }
  }
  const safeAlign = __RESULT_ALIGNS[align] ? align : "center";

  if (!__RESULT_SIZES[size]) {
    if (window.console && console.warn) {
      console.warn(
        `[Result] \`size\` 는 "default" | "compact" 만 가능해요. 받은 값: ${size}`
      );
    }
  }
  const safeSize = __RESULT_SIZES[size] ? size : "default";

  // title 필수
  if (title == null || title === false || title === "") {
    if (window.console && console.warn) {
      console.warn("[Result] `title` 은 필수예요.");
    }
  }

  // figure 안 <img> 에 alt 이 없으면 장식용으로 자동 처리
  // (ReactNode 면 그대로 두고, top-level <img> 에만 적용)
  let safeFigure = figure;
  if (React.isValidElement(figure) && figure.type === "img") {
    if (figure.props.alt == null) {
      safeFigure = React.cloneElement(figure, { alt: "" });
    }
  }

  const cls = [
    "tds-result",
    `tds-result--align-${safeAlign}`,
    `tds-result--size-${safeSize}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div id={id} className={cls} style={style} {...rest}>
      {safeFigure != null && safeFigure !== false ? (
        <div className="tds-result__figure" aria-hidden="true">
          {safeFigure}
        </div>
      ) : null}
      {title != null && title !== false ? (
        <h5 className="tds-result__title">{title}</h5>
      ) : null}
      {description != null && description !== false ? (
        <p className="tds-result__description">{description}</p>
      ) : null}
      {button != null && button !== false ? (
        <div className="tds-result__button">{button}</div>
      ) : null}
    </div>
  );
}

// =============================================================================
// Result.Button — description 아래에 놓는 액션 버튼
//   · TDS Button 이 로드돼 있으면 위임해서 일관된 스타일 사용
//   · 없으면 기본 <button> 폴백
// =============================================================================
function ResultButton({
  children,
  onClick,
  disabled = false,
  type = "button",
  className = "",
  style,
  id,
  ...rest
}) {
  // TDS Button 사용 가능하면 위임
  if (typeof window !== "undefined" && typeof window.Button === "function") {
    return (
      <window.Button
        size="large"
        variant="fill"
        color="primary"
        display="block"
        onClick={onClick}
        disabled={disabled}
        type={type}
        className={["tds-result-button", className].filter(Boolean).join(" ")}
        style={style}
        id={id}
        {...rest}
      >
        {children}
      </window.Button>
    );
  }

  // 폴백 — 로드 순서 문제로 window.Button 이 없을 때
  const cls = ["tds-result-button", "tds-result-button--fallback", className]
    .filter(Boolean)
    .join(" ");
  return (
    <button
      id={id}
      type={type}
      className={cls}
      style={style}
      onClick={onClick}
      disabled={disabled}
      {...rest}
    >
      {children}
    </button>
  );
}

Result.Button = ResultButton;

window.Result = Result;
window.ResultButton = ResultButton;
Object.assign(window, { Result, ResultButton });