interface DateRangeFilterProps {
  startDate: string;
  endDate: string;
  onStartDateChange: (date: string) => void;
  onEndDateChange: (date: string) => void;
  onPreset: (days: number) => void;
}

const getToday = () => {
  const d = new Date();
  return d.toISOString().slice(0, 10);
};

const getDaysAgo = (days: number) => {
  const d = new Date();
  d.setDate(d.getDate() - days);
  return d.toISOString().slice(0, 10);
};

const isPresetActive = (startDate: string, endDate: string, days: number): boolean => {
  const today = getToday();
  if (endDate !== today) return false;
  if (days === 0) return startDate === today;
  return startDate === getDaysAgo(days);
};

const DateRangeFilter = ({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
  onPreset,
}: DateRangeFilterProps) => {
  const presets = [
    { label: '오늘', days: 0 },
    { label: '7일', days: 7 },
    { label: '30일', days: 30 },
  ];

  return (
    <div className="flex items-center gap-3 mb-6">
      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">기간:</span>
      {presets.map((preset) => (
        <button
          key={preset.days}
          onClick={() => onPreset(preset.days)}
          className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
            isPresetActive(startDate, endDate, preset.days)
              ? 'bg-blue-600 text-white'
              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
          }`}
        >
          {preset.label}
        </button>
      ))}
      <input
        type="date"
        value={startDate}
        onChange={(e) => onStartDateChange(e.target.value)}
        className="px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
      />
      <span className="text-gray-500 dark:text-gray-400">~</span>
      <input
        type="date"
        value={endDate}
        onChange={(e) => onEndDateChange(e.target.value)}
        className="px-3 py-1.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm"
      />
    </div>
  );
};

export default DateRangeFilter;
