sam-react-prod/src/components/molecules/DateRangeSelector.tsx

'use client';

import { ReactNode, useCallback } from 'react';
import { format, startOfYear, endOfYear, subMonths, startOfMonth, endOfMonth, subDays } from 'date-fns';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

/**
 * 날짜 범위 프리셋 타입
 */
export type DatePreset = 'thisYear' | 'twoMonthsAgo' | 'lastMonth' | 'thisMonth' | 'yesterday' | 'today';

/**
 * 프리셋 레이블 (한국어)
 */
const PRESET_LABELS: Record<DatePreset, string> = {
  thisYear: '당해년도',
  twoMonthsAgo: '전전월',
  lastMonth: '전월',
  thisMonth: '당월',
  yesterday: '어제',
  today: '오늘',
};

/**
 * 기본 프리셋 순서
 */
const DEFAULT_PRESETS: DatePreset[] = ['thisYear', 'twoMonthsAgo', 'lastMonth', 'thisMonth', 'yesterday', 'today'];

interface DateRangeSelectorProps {
  /** 시작 날짜 (yyyy-MM-dd 형식) */
  startDate: string;
  /** 종료 날짜 (yyyy-MM-dd 형식) */
  endDate: string;
  /** 시작 날짜 변경 핸들러 */
  onStartDateChange: (date: string) => void;
  /** 종료 날짜 변경 핸들러 */
  onEndDateChange: (date: string) => void;
  /** 표시할 프리셋 목록 (기본: 전체) */
  presets?: DatePreset[];
  /** 추가 액션 (엑셀 다운로드, 등록 버튼 등) */
  extraActions?: ReactNode;
  /** 프리셋 버튼 숨김 */
  hidePresets?: boolean;
  /** 날짜 입력 숨김 */
  hideDateInputs?: boolean;
  /** 날짜 입력 너비 */
  dateInputWidth?: string;
}

/**
 * 날짜 범위 선택 컴포넌트
 *
 * 달력(날짜 입력) + 기간 프리셋 버튼 (당해년도, 전전월, 전월, 당월, 어제, 오늘)
 *
 * @example
 * ```tsx
 * <DateRangeSelector
 *   startDate={startDate}
 *   endDate={endDate}
 *   onStartDateChange={setStartDate}
 *   onEndDateChange={setEndDate}
 *   extraActions={
 *     <>
 *       <Button variant="outline">엑셀 다운로드</Button>
 *       <Button>등록</Button>
 *     </>
 *   }
 * />
 * ```
 */
export function DateRangeSelector({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  presets = DEFAULT_PRESETS,
  extraActions,
  hidePresets = false,
  hideDateInputs = false,
  dateInputWidth = 'w-[140px]',
}: DateRangeSelectorProps) {

  // 프리셋 클릭 핸들러
  const handlePresetClick = useCallback((preset: DatePreset) => {
    const today = new Date();

    switch (preset) {
      case 'thisYear':
        onStartDateChange(format(startOfYear(today), 'yyyy-MM-dd'));
        onEndDateChange(format(endOfYear(today), 'yyyy-MM-dd'));
        break;
      case 'twoMonthsAgo': {
        const twoMonthsAgo = subMonths(today, 2);
        onStartDateChange(format(startOfMonth(twoMonthsAgo), 'yyyy-MM-dd'));
        onEndDateChange(format(endOfMonth(twoMonthsAgo), 'yyyy-MM-dd'));
        break;
      }
      case 'lastMonth': {
        const lastMonth = subMonths(today, 1);
        onStartDateChange(format(startOfMonth(lastMonth), 'yyyy-MM-dd'));
        onEndDateChange(format(endOfMonth(lastMonth), 'yyyy-MM-dd'));
        break;
      }
      case 'thisMonth':
        onStartDateChange(format(startOfMonth(today), 'yyyy-MM-dd'));
        onEndDateChange(format(endOfMonth(today), 'yyyy-MM-dd'));
        break;
      case 'yesterday': {
        const yesterday = subDays(today, 1);
        onStartDateChange(format(yesterday, 'yyyy-MM-dd'));
        onEndDateChange(format(yesterday, 'yyyy-MM-dd'));
        break;
      }
      case 'today':
        onStartDateChange(format(today, 'yyyy-MM-dd'));
        onEndDateChange(format(today, 'yyyy-MM-dd'));
        break;
    }
  }, [onStartDateChange, onEndDateChange]);

  return (
    <div className="flex flex-col gap-2 w-full">
      {/* 1줄: 날짜 + 프리셋 */}
      {/* 태블릿/모바일(~1279px): 세로 배치 / PC(1280px+): 가로 한 줄 */}
      <div className="flex flex-col xl:flex-row xl:items-center gap-2">
        {/* 날짜 범위 선택 (Input type="date") */}
        {!hideDateInputs && (
          <div className="flex items-center gap-1 shrink-0">
            <Input
              type="date"
              value={startDate}
              onChange={(e) => onStartDateChange(e.target.value)}
              className="w-[165px]"
            />
            <span className="text-muted-foreground shrink-0">~</span>
            <Input
              type="date"
              value={endDate}
              onChange={(e) => onEndDateChange(e.target.value)}
              className="w-[165px]"
            />
          </div>
        )}

        {/* 기간 버튼들 - 모바일에서 가로 스크롤 */}
        {!hidePresets && presets.length > 0 && (
          <div
            className="overflow-x-auto -mx-1 px-1 xl:overflow-visible xl:mx-0 xl:px-0"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            <div className="flex items-center gap-1 min-w-max [&::-webkit-scrollbar]:hidden">
              {presets.map((preset) => (
                <Button
                  key={preset}
                  variant="outline"
                  size="sm"
                  onClick={() => handlePresetClick(preset)}
                  className="shrink-0 text-xs sm:text-sm px-2 sm:px-3"
                >
                  {PRESET_LABELS[preset]}
                </Button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* 2줄: 추가 액션 버튼들 - 항상 별도 줄, 오른쪽 정렬 */}
      {extraActions && (
        <div className="flex items-center gap-2 justify-end">
          {extraActions}
        </div>
      )}
    </div>
  );
}