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

/** 꼬리가 판의 위에 붙는지 아래에 붙는지. 판이 트리거의 아래/위 어느 쪽에 뜨는지가 따라온다. */
export type FoxTooltipRichDirection = "top" | "bottom";

/** 꼬리가 판의 가로 어디에 붙는지. */
export type FoxTooltipRichArrow = "left" | "center" | "right";

export interface FoxTooltipRichProps {
  /**
   * `top`이면 꼬리가 판 위에 붙는다 — 트리거 아래에 뜨는 말풍선이다.
   * `bottom`이면 꼬리가 판 아래에 붙는다 — 트리거 위에 뜨는 말풍선이다.
   */
  direction?: FoxTooltipRichDirection;
  /** 꼬리의 가로 위치. 판 가장자리에서 24px 안쪽에 선다(가운데는 예외). */
  arrow?: FoxTooltipRichArrow;
  /** 굵은 제목 줄. 넘기지 않으면 렌더링하지 않는다. */
  title?: ReactNode;
  /**
   * 본문. **150자 내외의 글자만 담는다**(시안 주석) — 버튼·링크 같은 누를 것을 넣지 않는다.
   * 누를 것이 필요하면 툴팁이 아니라 `FoxPopover`다.
   */
  message?: ReactNode;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  id?: string;
  /** 배치 조정용. 트리거 옆에 놓는 위치와 시안의 폭(360px)을 여기로 덮는다. */
  className?: string;
  ref?: Ref<HTMLDivElement>;
}

const DIRECTION_CLASS: Record<FoxTooltipRichDirection, string> = {
  top: "fox-tooltip-rich--top",
  bottom: "fox-tooltip-rich--bottom",
};

const ARROW_CLASS: Record<FoxTooltipRichArrow, string> = {
  left: "fox-tooltip-rich--arrow-left",
  center: "fox-tooltip-rich--arrow-center",
  right: "fox-tooltip-rich--arrow-right",
};

/**
 * @fox 리치 툴팁. 제목과 본문을 담은 말풍선이다.
 *
 * `FoxPopover`와 판·꼬리의 구조가 같지만 **누를 것이 하나도 없다** — 닫기도 액션 버튼도
 * 없고, 시안 주석대로 150자 내외의 글자만 담는다. 그래서 여닫는 것은 전적으로 트리거의
 * 몫이다(가리키거나 포커스가 닿는 동안 보이는 식). 사용자가 눌러야 할 것이 생기면 그때는
 * 툴팁이 아니라 팝오버다 — 잠깐 떴다 사라지는 판 안의 버튼은 누를 수 없다.
 *
 * 테두리도 그 차이를 따른다: 팝오버는 진한 선(`border-neutral-strong`)이고 이쪽은 한 단계
 * 옅은 선(`border-neutral-default`)이다.
 *
 * **상태를 갖지 않고 스스로 자리를 잡지도 않는다.** 트리거 옆 어디에 놓을지는 `className`으로
 * 주고, `direction`·`arrow`는 꼬리가 어디에 붙는지만 정한다.
 *
 * ⚠️ 이 조각은 보조기술에 아무 역할도 주지 않는다. 툴팁으로 읽히려면 트리거가
 * `aria-describedby`로 이 요소의 `id`를 가리켜야 한다 — 그 배선은 트리거 쪽이 맡는다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxTooltipRich({
  direction = "top",
  arrow = "left",
  title,
  message,
  hidden = false,
  id,
  className,
  ref,
}: FoxTooltipRichProps) {
  if (hidden) {
    return null;
  }

  // 꼬리는 CSS가 그린다 — 이 요소는 자리만 잡는다(스타일 파일 참고).
  const arrowSlot = (
    <div className="fox-tooltip-rich__arrow-area" aria-hidden="true">
      <span className="fox-tooltip-rich__arrow" />
    </div>
  );

  return (
    <div
      ref={ref}
      id={id}
      className={cx(
        "fox-tooltip-rich",
        DIRECTION_CLASS[direction],
        ARROW_CLASS[arrow],
        className
      )}
    >
      {direction === "top" ? arrowSlot : null}

      <div className="fox-tooltip-rich__content">
        {title === undefined && message === undefined ? null : (
          <div className="fox-tooltip-rich__body">
            {title === undefined ? null : (
              <div className="fox-tooltip-rich__title-row">
                <strong className="fox-tooltip-rich__title">{title}</strong>
              </div>
            )}
            {message === undefined ? null : (
              <div className="fox-tooltip-rich__message-row">
                <span className="fox-tooltip-rich__message">{message}</span>
              </div>
            )}
          </div>
        )}
      </div>

      {direction === "bottom" ? arrowSlot : null}
    </div>
  );
}