/**
 * Reusable Date Range Filter Component
 */

import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Calendar as CalendarIcon } from 'lucide-react';
import { format } from 'date-fns';
import { DateRange } from '@/services/dashboard.service';
import { CustomDatePicker } from '@/components/ui/date-picker';

interface DateRangeFilterProps {
  dateRange: DateRange;
  customStartDate?: Date;
  customEndDate?: Date;
  showCustomDatePicker: boolean;
  tempCustomStartDate?: Date;
  tempCustomEndDate?: Date;
  onDateRangeChange: (value: string) => void;
  onShowCustomDatePickerChange: (open: boolean) => void;
  onStartDateChange: (date: Date | undefined) => void;
  onEndDateChange: (date: Date | undefined) => void;
  onApply: () => void;
  onCancel: () => void;
  testIdPrefix?: string;
}

export function DateRangeFilter({
  dateRange,
  customStartDate,
  customEndDate,
  showCustomDatePicker,
  tempCustomStartDate,
  tempCustomEndDate,
  onDateRangeChange,
  onShowCustomDatePickerChange,
  onStartDateChange,
  onEndDateChange,
  onApply,
  onCancel,
  testIdPrefix = 'date-filter',
}: DateRangeFilterProps) {
  const displayDateRange =
    customStartDate && customEndDate
      ? `${format(customStartDate, 'd MMM yyyy')} - ${format(customEndDate, 'd MMM yyyy')}`
      : 'Select dates';

  return (
    <div className="flex items-center gap-2" data-testid={`${testIdPrefix}-container`}>
      <CalendarIcon className="w-4 h-4 text-muted-foreground" />
      <Select value={dateRange} onValueChange={onDateRangeChange} data-testid={`${testIdPrefix}-select`}>
        <SelectTrigger className="w-[160px]">
          <SelectValue placeholder="Date Range" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="today">Today</SelectItem>
          <SelectItem value="week">This Week</SelectItem>
          <SelectItem value="month">This Month</SelectItem>
          <SelectItem value="custom">Custom Range</SelectItem>
        </SelectContent>
      </Select>

      {/* Custom Date Range Picker */}
      {dateRange === 'custom' && (
        <Popover open={showCustomDatePicker} onOpenChange={onShowCustomDatePickerChange}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm" className="gap-2" data-testid={`${testIdPrefix}-custom-trigger`}>
              <CalendarIcon className="w-4 h-4" />
              {displayDateRange}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-4" align="start" sideOffset={8}>
            <div className="space-y-4">
              <div className="space-y-3">
                <div className="space-y-2">
                  <Label htmlFor={`${testIdPrefix}-start-date`} className="text-sm font-medium">
                    Start Date
                  </Label>
                  <CustomDatePicker
                    value={tempCustomStartDate || null}
                    onChange={(dateStr: string | null) => {
                      const date = dateStr ? new Date(dateStr) : undefined;
                      onStartDateChange(date);
                    }}
                    maxDate={new Date()}
                    placeholderText="dd/mm/yyyy"
                    className="w-full"
                    id={`${testIdPrefix}-start-date`}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor={`${testIdPrefix}-end-date`} className="text-sm font-medium">
                    End Date
                  </Label>
                  <CustomDatePicker
                    value={tempCustomEndDate || null}
                    onChange={(dateStr: string | null) => {
                      const date = dateStr ? new Date(dateStr) : undefined;
                      onEndDateChange(date);
                    }}
                    minDate={tempCustomStartDate || undefined}
                    maxDate={new Date()}
                    placeholderText="dd/mm/yyyy"
                    className="w-full"
                    id={`${testIdPrefix}-end-date`}
                  />
                </div>
              </div>
              <div className="flex gap-2 pt-2 border-t">
                <Button
                  size="sm"
                  onClick={onApply}
                  disabled={!tempCustomStartDate || !tempCustomEndDate}
                  className="flex-1 bg-re-green hover:bg-re-green/90"
                  data-testid={`${testIdPrefix}-apply-button`}
                >
                  Apply
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={onCancel}
                  data-testid={`${testIdPrefix}-cancel-button`}
                >
                  Cancel
                </Button>
              </div>
            </div>
          </PopoverContent>
        </Popover>
      )}
    </div>
  );
}

