"use client";

import type { ReactNode, Ref } from "react";
import { cx } from "../../utils";
import { FoxTextButton } from "../fox-text-button";

export interface FoxSnackbarProps {
  /**
   * 글자 앞에 붙는 아이콘. 넘기지 않으면 자리를 만들지 않는다.
   *
   * 계열이 없는 조각이라 무엇을 그릴지는 호출부가 정한다(`FoxAlert`처럼 계열이 아이콘을
   * 고르지 않는다). `fox-ico` 클래스로 넘긴다 — 시안은 `fill` 굵기다:
   * `<i className="fox-ico fox-ico--fill fox-ico-CheckCircle" aria-hidden="true" />`.
   *
   * 색은 스타일이 정한다(`icon-theme-primary`) — 글리프가 `fill: currentColor`라 넘기는
   * 쪽에서 색을 줄 필요가 없다.
   */
  icon?: ReactNode;
  /** 굵은 첫 줄. 넘기지 않으면 영역을 렌더링하지 않는다 — 본문만 있는 스낵바가 된다. */
  title?: ReactNode;
  /** 제목 아래 본문. 넘기지 않으면 영역을 렌더링하지 않는다. */
  message?: ReactNode;
  /**
   * 오른쪽 글자 버튼의 문구. 없으면 버튼을 그리지 않는다.
   *
   * 버튼은 `FoxTextButton`의 `primary`·`md`로 고정이다(시안 지정) — 계열·크기를 열지 않는
   * 것은 스낵바마다 버튼 모양이 달라지면 같은 조각으로 읽히지 않기 때문이다.
   */
  actionLabel?: string;
  /** 글자 버튼을 눌렀을 때. `actionLabel`이 없으면 의미 없다. */
  onAction?: () => void;
  /**
   * 닫기(X)를 눌렀을 때. **필수다** — 시안이 닫기를 항상 그리므로, 눌러도 아무 일이 없는
   * 버튼이 남지 않게 호출부가 반드시 처리를 준다.
   */
  onClose: () => void;
  /** 닫기 버튼을 읽어 줄 이름. X 아이콘은 장식이라 이 글자가 유일한 이름이다. */
  closeLabel?: string;
  /**
   * 보조기술이 읽는 방식을 정한다(`FoxToast`·`FoxAlert`와 같은 규칙).
   *
   * - `false`(기본): `role="status"` — 하던 말을 끊지 않는다.
   * - `true`: `role="alert"` — 읽던 것을 끊고 바로 읽는다. 지금 손을 멈춰야 하는 알림에만.
   */
  urgent?: boolean;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  id?: string;
  /** 배치 조정용. 띄우는 자리(fixed·bottom 등)와 시안의 폭(640px)을 여기로 덮는다. */
  className?: string;
  ref?: Ref<HTMLDivElement>;
}

/**
 * @fox 스낵바. 흰 판 위에 굵은 한 줄과 글자 버튼이 서고, 오른쪽 끝에 닫기가 붙는다.
 * 크기 수식어가 없다 — 시안에 하나뿐이다.
 *
 * `FoxToast`와 형제지만 **누를 것이 있다.** 토스트는 읽고 지나가는 조각이라 스스로 사라지고,
 * 스낵바는 사용자가 되돌리거나(실행 취소) 이어서 할 일이 있어 손이 닿을 때까지 남는다.
 *
 * **상태를 갖지 않는다.** 언제 뜨고 언제 사라질지, 화면 어디에 놓일지는 전부 호출부가 정한다
 * — `onClose`는 "닫아 달라"는 알림이지 이 조각이 스스로 사라지는 것이 아니다.
 *
 * ⚠️ 보조기술은 **이미 화면에 있던 live region의 내용이 바뀔 때** 읽는다. 이 요소를 통째로
 * 새로 붙이면 조합에 따라 읽히지 않을 수 있다(`FoxToast`와 같은 사정).
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxSnackbar({
  icon,
  title,
  message,
  actionLabel,
  onAction,
  onClose,
  closeLabel = "닫기",
  urgent = false,
  hidden = false,
  id,
  className,
  ref,
}: FoxSnackbarProps) {
  if (hidden) {
    return null;
  }

  return (
    <div
      ref={ref}
      id={id}
      role={urgent ? "alert" : "status"}
      className={cx("fox-snackbar", className)}
    >
      {icon ? (
        <span className="fox-snackbar__icon" aria-hidden="true">
          {icon}
        </span>
      ) : null}

      <div className="fox-snackbar__content">
        {title === undefined ? null : (
          <strong className="fox-snackbar__title">{title}</strong>
        )}
        {message === undefined ? null : (
          <span className="fox-snackbar__message">{message}</span>
        )}
      </div>

      {actionLabel ? (
        <FoxTextButton
          type="primary"
          size="md"
          label={actionLabel}
          onAction={onAction}
          className="fox-snackbar__action"
        />
      ) : null}

      <button
        type="button"
        className="fox-snackbar__close"
        aria-label={closeLabel}
        onClick={onClose}
      >
        <i className="fox-ico fox-ico-X" aria-hidden="true" />
      </button>
    </div>
  );
}