/* ============================================================================
 * 서명전에 — TDS ListFooter 컴포넌트
 *  · 리스트 끝의 "더 보기" 액션. 텍스트만, 아이콘+텍스트, 또는 커스텀 노드.
 *  · onClick 을 주면 자동으로 <button> 태그로 렌더되고, 누를 때 그림자(shadow)
 *    효과가 페이드인. 안 주면 <div> 로 렌더 — 단순 안내 footer.
 *
 *  · 서브 컴포넌트 (모두 자유롭게 직접 사용 가능):
 *      ListFooter.Text     — 텍스트 (color, fontWeight)
 *      ListFooter.Icon     — 아이콘 (name, color, size). name 이 URL/경로면 mono
 *                            여부에 따라 mask 또는 <img>, 그 외엔 IOSIcon 위임
 *      ListFooter.Hairline — 상단 구분선. indent 로 좌측 여백 (px)
 *      ListFooter.Shadow   — 클릭 시 보이는 그림자. background 등 style 로 커스텀
 *
 *  · props (ListFooterProps):
 *      border       "full" | "indented" | "none"  (기본 "full")
 *      icon         string | ReactElement — string 이면 ListFooter.Icon 으로
 *                   감싸 렌더. ReactElement 면 그대로.
 *      hairline     ReactElement — 상단 구분선 커스텀. 주면 border 무시.
 *      shadow       ReactElement — 클릭 그림자 커스텀. 주면 기본 shadow 무시.
 *                   (onClick 없으면 무시)
 *      textColor    string — 기본 var(--tds-blue-500)
 *      iconColor    string — 기본 var(--tds-blue-500)
 *      children     string | ReactElement — string 이면 ListFooter.Text 로 감쌈
 *      onClick      (e) => void — 있으면 <button> + 그림자 효과 활성
 *      aria-label   onClick 시 권장. 누락하면 콘솔 경고
 *      className, style, ...rest  루트 노드 패스스루
 * ========================================================================== */

const __LF_FONT_WEIGHT_MAP = {
  regular:  400,
  medium:   500,
  semibold: 600,
  bold:     700,
};

function ListFooterText({
  color,
  fontWeight = "medium",
  children,
  className = "",
  style,
  ...rest
}) {
  const cls = ["tds-listfooter__text", className].filter(Boolean).join(" ");
  const fw = __LF_FONT_WEIGHT_MAP[fontWeight] || 500;
  const mergedStyle = { fontWeight: fw, ...(style || {}) };
  if (color) mergedStyle.color = color;
  return (
    <span className={cls} style={mergedStyle} {...rest}>
      {children}
    </span>
  );
}

function ListFooterIcon({
  name,
  color,
  size = 16,
  className = "",
  style,
  ...rest
}) {
  if (!name) {
    if (window.console && console.warn) {
      console.warn("[ListFooter.Icon] `name` 은 필수예요.");
    }
    return null;
  }

  // URL/경로 형태인지 — slash 포함 또는 .svg/.png 확장자 포함
  const looksLikeUrl =
    /^(https?:|\/|\.{1,2}\/)/i.test(name) || /\.(svg|png|jpe?g|gif|webp)/i.test(name);

  if (looksLikeUrl) {
    const isMono = /-mono(?:\.[^/?#]+)?(?:\?[^#]*)?(?:#.*)?$/i.test(name);
    if (isMono) {
      return (
        <span
          className={["tds-listfooter__icon", "tds-listfooter__icon--mask", className]
            .filter(Boolean)
            .join(" ")}
          style={{
            width: `${size}px`,
            height: `${size}px`,
            WebkitMaskImage: `url("${name}")`,
            maskImage: `url("${name}")`,
            backgroundColor: color || "currentColor",
            ...(style || {}),
          }}
          aria-hidden="true"
          {...rest}
        />
      );
    }
    // 컬러 SVG / PNG — <img> 그대로
    return (
      <img
        src={name}
        width={size}
        height={size}
        alt=""
        aria-hidden="true"
        className={["tds-listfooter__icon", className].filter(Boolean).join(" ")}
        style={style}
        {...rest}
      />
    );
  }

  // IOSIcon 위임 — 우리 라이브러리는 currentColor 기반.
  // color prop 이 들어오면 wrap 의 color 로 흐르게 해서 currentColor 가 적용되도록.
  const wrapStyle = {
    width: `${size}px`,
    height: `${size}px`,
    color: color || undefined,
    ...(style || {}),
  };
  if (typeof window !== "undefined" && typeof window.IOSIcon === "function") {
    const _IOSIcon = window.IOSIcon;
    return (
      <span
        className={["tds-listfooter__icon", className].filter(Boolean).join(" ")}
        style={wrapStyle}
        aria-hidden="true"
        {...rest}
      >
        <_IOSIcon name={name} size={size} />
      </span>
    );
  }
  // 폴백: 라이브러리가 아직 안 떴을 때
  return (
    <span
      className={["tds-listfooter__icon", className].filter(Boolean).join(" ")}
      style={{ ...wrapStyle, opacity: 0.2 }}
      aria-hidden="true"
      {...rest}
    />
  );
}

function ListFooterHairline({
  indent = 0,
  className = "",
  style,
  ...rest
}) {
  const cls = ["tds-listfooter__hairline-custom", className].filter(Boolean).join(" ");
  const mergedStyle = { left: `${indent}px`, ...(style || {}) };
  return <div className={cls} style={mergedStyle} aria-hidden="true" {...rest} />;
}

function ListFooterShadow({
  className = "",
  style,
  ...rest
}) {
  const cls = ["tds-listfooter__shadow-custom", className].filter(Boolean).join(" ");
  // 기본 background 는 CSS 가 잡지 않음 — 사용자가 style 로 명시하는 패턴.
  // 미지정 시 기본 그라데이션을 fallback 으로 깔아둠.
  const mergedStyle = {
    background:
      "radial-gradient(closest-side, var(--tds-blue-100, #c9e2ff) 0%, transparent 100%)",
    ...(style || {}),
  };
  return <div className={cls} style={mergedStyle} aria-hidden="true" {...rest} />;
}

function ListFooter({
  border = "full",
  icon,
  hairline,
  shadow,
  textColor,
  iconColor,
  onClick,
  className = "",
  style,
  children,
  ...rest
}) {
  const allowedBorders = { full: true, indented: true, none: true };
  if (!allowedBorders[border]) {
    if (window.console && console.warn) {
      console.warn(
        `[ListFooter] \`border\` 는 "full" | "indented" | "none" 중 하나여야 해요. 받은 값: ${border}`
      );
    }
  }
  const safeBorder = allowedBorders[border] ? border : "full";

  const clickable = typeof onClick === "function";

  // onClick 있는데 aria-label 누락 — 스크린 리더 안내 부족
  if (clickable && !rest["aria-label"]) {
    if (window.console && console.warn) {
      console.warn(
        "[ListFooter] `onClick` 을 줄 때는 `aria-label` 도 함께 주는 게 좋아요. 화면을 못 보는 사용자에게 어떤 액션인지 알려줘야 해요."
      );
    }
  }

  // CSS 변수 주입
  const cssVars = {};
  if (textColor) cssVars["--tds-listfooter-text-color"] = textColor;
  if (iconColor) cssVars["--tds-listfooter-icon-color"] = iconColor;
  const mergedStyle = { ...(style || {}), ...cssVars };

  const cls = [
    "tds-listfooter",
    clickable ? "is-clickable" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  // 자식 텍스트 — string 이면 Text 로, 아니면 그대로
  let textNode = null;
  if (typeof children === "string" || typeof children === "number") {
    textNode = <ListFooterText>{children}</ListFooterText>;
  } else if (children !== undefined && children !== null && children !== false) {
    textNode = children;
  }

  // 아이콘 노드
  let iconNode = null;
  if (typeof icon === "string") {
    iconNode = <ListFooterIcon name={icon} color={iconColor} />;
  } else if (icon != null && icon !== false) {
    iconNode = icon;
  }

  // 상단 hairline 노드 — 커스텀이 우선, 없으면 border prop 으로 결정
  let hairlineNode = null;
  if (hairline != null && hairline !== false) {
    hairlineNode = (
      <div className="tds-listfooter__hairline-slot">{hairline}</div>
    );
  } else if (safeBorder !== "none") {
    hairlineNode = (
      <div
        className={`tds-listfooter__hairline tds-listfooter__hairline--${safeBorder}`}
        aria-hidden="true"
      />
    );
  }

  // 클릭 효과 노드 — onClick 있을 때만
  let shadowNode = null;
  if (clickable) {
    if (shadow != null && shadow !== false) {
      shadowNode = (
        <div className="tds-listfooter__shadow-slot">{shadow}</div>
      );
    } else {
      shadowNode = (
        <div className="tds-listfooter__shadow" aria-hidden="true" />
      );
    }
  }

  if (clickable) {
    return (
      <button
        type="button"
        className={cls}
        style={mergedStyle}
        onClick={onClick}
        {...rest}
      >
        {hairlineNode}
        {shadowNode}
        {iconNode}
        {textNode}
      </button>
    );
  }
  return (
    <div className={cls} style={mergedStyle} {...rest}>
      {hairlineNode}
      {iconNode}
      {textNode}
    </div>
  );
}

ListFooter.Text = ListFooterText;
ListFooter.Icon = ListFooterIcon;
ListFooter.Hairline = ListFooterHairline;
ListFooter.Shadow = ListFooterShadow;

window.ListFooter = ListFooter;

Object.assign(window, { ListFooter });