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

export interface FoxListToolbarProps {
  /** 좌측 첫 자리. 보통 "총 N건"이다 — `FoxListCount`가 시안 서식을 그린다. */
  count?: ReactNode;
  /** 총 건수 옆 액션(전체 선택·선택 삭제 등). */
  leading?: ReactNode;
  /** 우측 정렬·조건 셀렉트 묶음. */
  sorts?: ReactNode;
  /** 우측 검색 상자. */
  search?: ReactNode;
  /** 우측 끝 액션(등록·엑셀 등). */
  actions?: ReactNode;
  /** 아래 줄의 필터. 주지 않으면 그 줄 자체가 렌더되지 않는다(구분선도 함께 사라진다). */
  filter?: ReactNode;
  hidden?: boolean;
  className?: string;
}

/**
 * @fox 목록 도구 줄 — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar (3002:8151)
 *
 * 마크업 계약 (React 밖 소비자용):
 *   <div class="fox-list-toolbar">
 *     <div class="fox-list-toolbar__base">
 *       <div class="fox-list-toolbar__left">…총 N건 · 액션…</div>
 *       <div class="fox-list-toolbar__right">…셀렉트 · 검색 · 액션…</div>
 *     </div>
 *     <div class="fox-list-toolbar__filter">…필터…</div>   <!-- 선택 -->
 *   </div>
 *
 * **자리만 잡는다.** 무엇이 들어갈지는 화면마다 다르므로 전부 슬롯으로 받는다 — 셀렉트가
 * 몇 개인지, 액션이 버튼인지 아이콘인지 이 컴포넌트는 알지 못한다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxListToolbar({
  count,
  leading,
  sorts,
  search,
  actions,
  filter,
  hidden = false,
  className,
}: FoxListToolbarProps) {
  if (hidden) {
    return null;
  }

  return (
    <div className={cx("fox-list-toolbar", className)}>
      <div className="fox-list-toolbar__base">
        <div className="fox-list-toolbar__left">
          {count}
          {leading}
        </div>
        <div className="fox-list-toolbar__right">
          {sorts && <div className="fox-list-toolbar__sorts">{sorts}</div>}
          {search}
          {actions}
        </div>
      </div>

      {filter && <div className="fox-list-toolbar__filter">{filter}</div>}
    </div>
  );
}

export interface FoxListCountProps {
  /** 전체 건수. */
  total: number;
  /** 숫자 앞뒤 문구. 기본은 시안의 "총 N건". */
  prefix?: ReactNode;
  suffix?: ReactNode;
  className?: string;
}

/**
 * 총 건수 표시 — 시안이 숫자만 굵고 다른 색이라 별도 조각으로 둔다. 천 단위 구분은
 * 호출부의 로케일을 타지 않도록 `toLocaleString("ko-KR")`로 고정한다.
 */
export function FoxListCount({
  total,
  prefix = "총 ",
  suffix = "건",
  className,
}: FoxListCountProps) {
  return (
    <p className={cx("fox-list-count", className)}>
      {prefix}
      <b className="fox-list-count__value">{total.toLocaleString("ko-KR")}</b>
      {suffix}
    </p>
  );
}