"use client";

import type { ComponentPropsWithRef, ReactNode } from "react";
import { cx } from "../../utils";

/** 무엇을 여는 단추인지. 아이콘과 기본 이름이 여기서 갈린다. */
export type FoxContextualTriggerType = "help" | "information";

/**
 * 네이티브 `<button>`이 받는 것을 그대로 넘겨받는다 — onFocus·onBlur·onKeyDown·form 등.
 * 툴팁을 띄우는 자리에서 `onFocus`·`onBlur`가 실제로 필요하다(마우스만 보면 키보드
 * 사용자가 툴팁을 볼 수 없다). 의미가 겹치는 것만 걷어내고 아래에서 다시 정의한다.
 */
type NativeButtonProps = Omit<
  ComponentPropsWithRef<"button">,
  "type" | "className" | "children" | "hidden" | "onClick"
>;

export interface FoxContextualTriggerProps extends NativeButtonProps {
  /** 무엇을 여는 단추인지. 네이티브 `type`은 언제나 `"button"`으로 고정된다. */
  type?: FoxContextualTriggerType;
  /**
   * 읽어 줄 이름. 넘기지 않으면 계열이 정한 기본값을 쓴다(`help`는 "도움말",
   * `information`은 "설명").
   *
   * 아이콘만 있는 단추라 이 글자가 **유일한 이름이다.** 한 화면에 여러 개가 있으면
   * "배송비 도움말"처럼 무엇에 대한 것인지 적어 준다 — 같은 이름이 여럿이면 소리로는
   * 구분되지 않는다.
   */
  ariaLabel?: string;
  /**
   * 이 단추가 설명하는 내용의 id. **툴팁을 여는 자리에 쓴다** — 트리거가
   * `aria-describedby`로 툴팁을 가리켜야 보조기술이 그 글을 읽어 준다(`FoxTooltip`·
   * `FoxTooltipRich`는 스스로 아무 역할도 갖지 않는다).
   */
  describedBy?: string;
  /**
   * 눌러서 여는 판이 있을 때 그 판의 id. **팝오버를 여는 자리에 쓴다.**
   * `expanded`와 함께 넘긴다.
   */
  controls?: string;
  /** 눌러서 여는 판이 지금 열려 있는지(`aria-expanded`). 팝오버를 여는 자리에서만 쓴다. */
  expanded?: boolean;
  disabled?: boolean;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 눌렀을 때. 팝오버처럼 눌러서 여는 판에 쓴다. */
  onAction?: () => void;
  /**
   * 마우스가 올라오고 벗어날 때. **툴팁을 띄우고 지우는 자리에 쓴다** — 이 단추는 상태를
   * 갖지 않으므로 무엇을 보일지는 호출부가 정한다.
   *
   * ⚠️ 마우스만 보면 키보드 사용자가 툴팁을 볼 수 없다. 호출부가 `onFocus`·`onBlur`도 함께
   * 다뤄야 한다 — 네이티브 속성이라 그대로 넘기면 된다.
   */
  onHoverChange?: (hovered: boolean) => void;
  /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 쓴다. */
  className?: string;
}

/** `Record`로 고정해 계열을 추가하면 항목 누락이 타입 에러가 되게 한다. */
const TYPE_CLASS: Record<FoxContextualTriggerType, string> = {
  help: "fox-contextual-trigger--help",
  information: "fox-contextual-trigger--information",
};

/** 계열이 정하는 아이콘. 시안 `ico/Question`·`ico/Info`이고 굵기는 둘 다 regular다. */
const TYPE_ICON: Record<FoxContextualTriggerType, ReactNode> = {
  help: <i className="fox-ico fox-ico-Question" aria-hidden="true" />,
  information: <i className="fox-ico fox-ico-Info" aria-hidden="true" />,
};

/** 이름을 안 주면 쓰는 기본값. 무엇을 여는 단추인지까지만 말한다. */
const TYPE_LABEL: Record<FoxContextualTriggerType, string> = {
  help: "도움말",
  information: "설명",
};

/**
 * @fox 도움말·설명 단추. 툴팁이나 팝오버를 여는 24px짜리 아이콘 단추다.
 *
 * 상태를 갖지 않는다 — 무엇을 언제 보여 줄지는 호출부가 정하고, 이 단추는 그 배선을 걸 자리
 * (`describedBy`·`controls`·`expanded`)와 손이 닿는 자리를 준다.
 *
 * `FoxIconButton`과 다른 조각이다. 저쪽은 폼 컨트롤과 높이를 맞추는 단추라 크기가
 * `form(height-*)`을 따르는데(가장 작은 xsm도 32px), 이쪽은 글줄 옆에 붙는 24px 고정이고
 * 모서리도 `radius-2`(4px)다.
 *
 * 배경은 세 상태 모두 `action-secondary` 계열이다 — 기본이 투명이라 아래 배경이 그대로
 * 비치고, hover·pressed에서만 연한 판이 깔린다(`FoxTag`와 같은 규칙).
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxContextualTrigger({
  type = "help",
  ariaLabel,
  describedBy,
  controls,
  expanded,
  disabled = false,
  hidden = false,
  onAction,
  onHoverChange,
  className,
  ...rest
}: FoxContextualTriggerProps) {
  if (hidden) {
    return null;
  }

  return (
    <button
      {...rest}
      type="button"
      disabled={disabled}
      aria-label={ariaLabel ?? TYPE_LABEL[type]}
      aria-describedby={describedBy}
      aria-controls={controls}
      aria-expanded={expanded}
      className={cx("fox-contextual-trigger", TYPE_CLASS[type], className)}
      onClick={onAction}
      onMouseEnter={onHoverChange ? () => onHoverChange(true) : undefined}
      onMouseLeave={onHoverChange ? () => onHoverChange(false) : undefined}
    >
      <span className="fox-contextual-trigger__icon" aria-hidden="true">
        {TYPE_ICON[type]}
      </span>
    </button>
  );
}