"use client";

interface DateRangePresetsProps {
  onSelect: (start: string, end: string) => void;
  className?: string;
}

function toIso(d: Date): string {
  return d.toISOString().slice(0, 10);
}

function getPresets(): { label: string; start: string; end: string }[] {
  const now = new Date();
  const y = now.getFullYear();
  const m = now.getMonth(); // 0-based

  // This month
  const monthStart = new Date(y, m, 1);
  const monthEnd = new Date(y, m + 1, 0);

  // This quarter
  const q = Math.floor(m / 3);
  const quarterStart = new Date(y, q * 3, 1);
  const quarterEnd = new Date(y, q * 3 + 3, 0);

  // Next 3 months
  const next3Start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const next3End = new Date(now.getFullYear(), now.getMonth() + 3, now.getDate() - 1);

  // This year
  const yearStart = new Date(y, 0, 1);
  const yearEnd = new Date(y, 11, 31);

  return [
    { label: "This month", start: toIso(monthStart), end: toIso(monthEnd) },
    { label: "This quarter", start: toIso(quarterStart), end: toIso(quarterEnd) },
    { label: "Next 3 months", start: toIso(next3Start), end: toIso(next3End) },
    { label: "This year", start: toIso(yearStart), end: toIso(yearEnd) },
  ];
}

export function DateRangePresets({ onSelect, className }: DateRangePresetsProps) {
  const presets = getPresets();

  return (
    <div className={`flex flex-wrap gap-1.5 ${className ?? ""}`}>
      {presets.map((p) => (
        <button
          key={p.label}
          type="button"
          onClick={() => onSelect(p.start, p.end)}
          className="rounded-full border border-gray-200 bg-white px-2.5 py-0.5 text-xs font-medium text-gray-600 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 dark:hover:bg-gray-700"
        >
          {p.label}
        </button>
      ))}
    </div>
  );
}
