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-[var(--color-text-primary)]">기간:</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-[var(--color-primary)] text-white dark:bg-[var(--color-primary-600)]'
              : 'bg-[var(--color-bg-base)] text-[var(--color-text-primary)] hover:bg-[var(--color-border)]'
          }`}
        >
          {preset.label}
        </button>
      ))}
      <input
        type="date"
        value={startDate}
        onChange={(e) => onStartDateChange(e.target.value)}
        className="px-3 py-1.5 rounded border border-[var(--color-border-strong)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-sm"
      />
      <span className="text-[var(--color-text-secondary)]">~</span>
      <input
        type="date"
        value={endDate}
        onChange={(e) => onEndDateChange(e.target.value)}
        className="px-3 py-1.5 rounded border border-[var(--color-border-strong)] bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] text-sm"
      />
    </div>
  );
};

export default DateRangeFilter;
