"use client";

/**
 * CompactFilterBar — 컴팩트 검색 필터바 공용 컴포넌트.
 *
 * customer-cs/cs 페이지 패턴 1:1 추출:
 *   - 외곽 `rounded-md border bg-muted/20 p-2` + flex-wrap (좁아도 자동 줄바꿈)
 *   - 컨트롤 높이 h-7, 폰트 text-xs (기존 h-9 보다 컴팩트)
 *   - 우측에 검색/초기화 버튼 + 합계 텍스트
 *
 * 사용 예:
 *   <CompactFilterBar
 *     onSearch={() => fetchList()}
 *     onReset={() => handleReset()}
 *     totalText={`총 ${total}건`}
 *   >
 *     <CompactFilterField label="고객사" width={140}>
 *       <CustomerSelect ... />
 *     </CompactFilterField>
 *     <CompactFilterField label="품번" width={120}>
 *       <Input ... className="h-7 text-xs" />
 *     </CompactFilterField>
 *   </CompactFilterBar>
 *
 * 원칙:
 *   - 모든 RPS 메뉴의 검색 폼은 이 컴포넌트를 사용. 자체 검색 폼 구성 금지.
 *   - SmartSelect / CustomerSelect / CommCodeSelect / Input 모두 h-7 + text-xs 자동 적용.
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { DateInput } from "@/components/common/DateInput";

interface CompactFilterBarProps {
  children: React.ReactNode;
  /** 우측에 표시할 합계/통계 텍스트 (예: "총 12,345건 · 합계 12,000,000원") */
  totalText?: React.ReactNode;
  className?: string;
}

export function CompactFilterBar({ children, totalText, className }: CompactFilterBarProps) {
  // 검색/초기화 버튼은 PageHeader 의 우측 액션 영역으로 통합.
  // CompactFilterBar 는 필드 컨테이너 + 합계 텍스트만 담당.
  return (
    <div
      className={cn(
        "flex flex-shrink-0 flex-wrap items-end gap-2 rounded-md border bg-muted/20 p-2",
        className,
      )}
    >
      {children}
      {totalText != null && (
        <span className="ml-auto text-[11px] text-muted-foreground">{totalText}</span>
      )}
    </div>
  );
}

interface CompactFilterFieldProps {
  label: string;
  /** 컨트롤 박스 폭(px). 기본 120. */
  width?: number;
  /** 폭 자동 (자식이 100% 폭을 차지하지 않게 할 때 유용) */
  flex?: boolean;
  children: React.ReactNode;
  className?: string;
}

export function CompactFilterField({
  label, width = 120, flex, children, className,
}: CompactFilterFieldProps) {
  return (
    <div className={cn("space-y-1", className)} style={flex ? undefined : { width }}>
      <Label className="text-[11px] text-muted-foreground">{label}</Label>
      <div className="[&_input]:h-7 [&_input]:text-xs [&_button[role=combobox]]:h-7 [&_button[role=combobox]]:text-xs [&_[data-slot=select-trigger]]:h-7 [&_[data-slot=select-trigger]]:text-xs">
        {children}
      </div>
    </div>
  );
}

/**
 * 날짜 범위 입력 (CompactFilterField 자식으로 사용).
 *
 * <CompactFilterField label="접수일" width={280}>
 *   <CompactDateRange
 *     from={fromDate} setFrom={setFromDate}
 *     to={toDate}     setTo={setToDate}
 *   />
 * </CompactFilterField>
 */
export function CompactDateRange({
  from, setFrom, to, setTo, disabled,
}: {
  from: string;
  setFrom: (v: string) => void;
  to: string;
  setTo: (v: string) => void;
  disabled?: boolean;
}) {
  return (
    <div className="flex items-center gap-1">
      <DateInput size="sm" value={from} onChange={setFrom} disabled={disabled} className="w-[140px]" />
      <span className="text-xs text-muted-foreground">~</span>
      <DateInput size="sm" value={to}   onChange={setTo}   disabled={disabled} className="w-[140px]" />
    </div>
  );
}
