'use client';

/**
 * DateRangeFilter — Date range filter with preset buttons and custom date picker.
 *
 * Features:
 * - Preset buttons: Last 7 Days, Last 30 Days, Last 90 Days, Last 12 Months, Year to Date
 * - Custom date range picker with start/end date inputs
 * - Displays currently selected range as text (e.g., "Jan 1, 2025 – Jun 30, 2025")
 * - Defaults to "Last 12 Months"
 * - Validation: start date must be before end date
 * - Uses the filter store to manage state
 * - Uses date utilities for preset calculations
 *
 * Requirements: 15.1, 15.2, 15.3, 15.4, 15.5, 15.6
 */

import { useState } from 'react';
import { useFilterStore } from '@/lib/stores/filter-store';
import {
  datePresets,
  buildCustomDateRange,
  formatDateRange,
  type DateRange,
} from '@/lib/utils/date';

interface DateRangeFilterProps {
  onRangeChange?: (range: DateRange) => void;
}

export default function DateRangeFilter({ onRangeChange }: DateRangeFilterProps) {
  const { dateRange, setDateRange } = useFilterStore();
  const [showCustom, setShowCustom] = useState(false);
  const [customStart, setCustomStart] = useState('');
  const [customEnd, setCustomEnd] = useState('');
  const [validationError, setValidationError] = useState<string | null>(null);

  const handlePresetClick = (preset: (typeof datePresets)[number]) => {
    const range = preset.buildRange();
    setDateRange(range);
    onRangeChange?.(range);
    setShowCustom(false);
    setValidationError(null);
  };

  const handleCustomApply = () => {
    setValidationError(null);

    if (!customStart || !customEnd) {
      setValidationError('Please select both start and end dates.');
      return;
    }

    const start = new Date(customStart + 'T00:00:00');
    const end = new Date(customEnd + 'T00:00:00');

    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
      setValidationError('Invalid date format.');
      return;
    }

    if (start >= end) {
      setValidationError('Start date must be before end date.');
      return;
    }

    try {
      const range = buildCustomDateRange(start, end);
      setDateRange(range);
      onRangeChange?.(range);
      setShowCustom(false);
    } catch {
      setValidationError('Start date must be before end date.');
    }
  };

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-4">
      {/* Current range display */}
      <p className="text-sm text-divisi-text-secondary mb-3">
        <span className="font-medium text-divisi-text-primary">
          {dateRange.label || formatDateRange(dateRange)}
        </span>
      </p>

      {/* Preset buttons */}
      <div className="flex flex-wrap gap-2 mb-3">
        {datePresets.map((preset) => (
          <button
            key={preset.key}
            onClick={() => handlePresetClick(preset)}
            className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
              dateRange.label === preset.label
                ? 'bg-divisi-accent text-divisi-bg'
                : 'bg-divisi-bg border border-divisi-border text-divisi-text-secondary hover:text-divisi-text-primary hover:border-divisi-accent'
            }`}
          >
            {preset.label}
          </button>
        ))}
        <button
          onClick={() => setShowCustom(!showCustom)}
          className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
            showCustom
              ? 'bg-divisi-accent text-divisi-bg'
              : 'bg-divisi-bg border border-divisi-border text-divisi-text-secondary hover:text-divisi-text-primary hover:border-divisi-accent'
          }`}
        >
          Custom
        </button>
      </div>

      {/* Custom date picker */}
      {showCustom && (
        <div className="flex flex-wrap items-end gap-3">
          <div>
            <label className="block text-xs text-divisi-text-secondary mb-1">
              Start Date
            </label>
            <input
              type="date"
              value={customStart}
              onChange={(e) => {
                setCustomStart(e.target.value);
                setValidationError(null);
              }}
              className="px-3 py-1.5 text-xs rounded-lg bg-divisi-bg border border-divisi-border text-divisi-text-primary focus:outline-none focus:border-divisi-accent"
            />
          </div>
          <div>
            <label className="block text-xs text-divisi-text-secondary mb-1">
              End Date
            </label>
            <input
              type="date"
              value={customEnd}
              onChange={(e) => {
                setCustomEnd(e.target.value);
                setValidationError(null);
              }}
              className="px-3 py-1.5 text-xs rounded-lg bg-divisi-bg border border-divisi-border text-divisi-text-primary focus:outline-none focus:border-divisi-accent"
            />
          </div>
          <button
            onClick={handleCustomApply}
            className="px-4 py-1.5 text-xs font-medium rounded-lg bg-divisi-accent text-divisi-bg hover:bg-divisi-accent-hover transition-colors"
          >
            Apply
          </button>
        </div>
      )}

      {/* Validation error */}
      {validationError && (
        <p className="mt-2 text-xs text-red-500">{validationError}</p>
      )}
    </div>
  );
}