/**
 * Approver Performance Filters Component
 */

import { Search, Calendar as CalendarIcon } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Label } from '@/components/ui/label';
import { format } from 'date-fns';
import type { DateRange } from '@/services/dashboard.service';

interface ApproverPerformanceFiltersProps {
  searchTerm: string;
  statusFilter: string;
  priorityFilter: string;
  slaComplianceFilter: string;
  dateRange: DateRange;
  customStartDate?: Date;
  customEndDate?: Date;
  showCustomDatePicker: boolean;
  tempCustomStartDate?: Date;
  tempCustomEndDate?: Date;
  onSearchChange: (value: string) => void;
  onStatusChange: (value: string) => void;
  onPriorityChange: (value: string) => void;
  onSlaComplianceChange: (value: string) => void;
  onDateRangeChange: (value: string) => void;
  onShowCustomDatePickerChange: (open: boolean) => void;
  onTempStartDateChange: (date: Date | undefined) => void;
  onTempEndDateChange: (date: Date | undefined) => void;
  onApplyCustomDate: () => void;
  onClearFilters: () => void;
}

export function ApproverPerformanceFilters({
  searchTerm,
  statusFilter,
  priorityFilter,
  slaComplianceFilter,
  dateRange,
  customStartDate,
  customEndDate,
  showCustomDatePicker,
  tempCustomStartDate,
  tempCustomEndDate,
  onSearchChange,
  onStatusChange,
  onPriorityChange,
  onSlaComplianceChange,
  onDateRangeChange,
  onShowCustomDatePickerChange,
  onTempStartDateChange,
  onTempEndDateChange,
  onApplyCustomDate,
  onClearFilters
}: ApproverPerformanceFiltersProps) {
  return (
    <Card data-testid="approver-performance-filters">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>Filters</CardTitle>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClearFilters}
            className="text-xs"
            data-testid="clear-filters-button"
          >
            Clear All
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-6 gap-4">
          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search requests..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              className="pl-10"
              data-testid="search-input"
            />
          </div>
          
          {/* Status Filter */}
          <Select value={statusFilter} onValueChange={onStatusChange}>
            <SelectTrigger data-testid="status-filter">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="approved">Approved</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
              <SelectItem value="closed">Closed</SelectItem>
            </SelectContent>
          </Select>
          
          {/* Priority Filter */}
          <Select value={priorityFilter} onValueChange={onPriorityChange}>
            <SelectTrigger data-testid="priority-filter">
              <SelectValue placeholder="Priority" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Priority</SelectItem>
              <SelectItem value="express">Express</SelectItem>
              <SelectItem value="standard">Standard</SelectItem>
            </SelectContent>
          </Select>
          
          {/* SLA Compliance Filter */}
          <Select value={slaComplianceFilter} onValueChange={onSlaComplianceChange}>
            <SelectTrigger data-testid="sla-compliance-filter">
              <SelectValue placeholder="SLA Compliance" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All SLA</SelectItem>
              <SelectItem value="compliant">Compliant</SelectItem>
              <SelectItem value="on-track">On Track</SelectItem>
              <SelectItem value="approaching">Approaching</SelectItem>
              <SelectItem value="critical">Critical</SelectItem>
              <SelectItem value="breached">Breached</SelectItem>
            </SelectContent>
          </Select>
          
          {/* Date Range Filter */}
          <div className="flex items-center gap-2">
            <CalendarIcon className="w-4 h-4 text-muted-foreground" />
            <Select value={dateRange} onValueChange={onDateRangeChange}>
              <SelectTrigger className="flex-1" data-testid="date-range-filter">
                <SelectValue placeholder="Date Range" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Time</SelectItem>
                <SelectItem value="today">Today</SelectItem>
                <SelectItem value="week">This Week</SelectItem>
                <SelectItem value="month">This Month</SelectItem>
                <SelectItem value="last7days">Last 7 Days</SelectItem>
                <SelectItem value="last30days">Last 30 Days</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="custom-date-trigger">
                    <CalendarIcon className="w-4 h-4" />
                    {tempCustomStartDate && tempCustomEndDate 
                      ? `${format(tempCustomStartDate, 'MMM d')} - ${format(tempCustomEndDate, 'MMM d')}`
                      : 'Select dates'}
                  </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="start-date" className="text-sm font-medium">Start Date</Label>
                        <Input
                          id="start-date"
                          type="date"
                          value={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : ''}
                          onChange={(e) => {
                            const date = e.target.value ? new Date(e.target.value) : undefined;
                            if (date) {
                              onTempStartDateChange(date);
                              if (tempCustomEndDate && date > tempCustomEndDate) {
                                onTempEndDateChange(date);
                              }
                            } else {
                              onTempStartDateChange(undefined);
                            }
                          }}
                          max={format(new Date(), 'yyyy-MM-dd')}
                          className="w-full"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="end-date" className="text-sm font-medium">End Date</Label>
                        <Input
                          id="end-date"
                          type="date"
                          value={tempCustomEndDate ? format(tempCustomEndDate, 'yyyy-MM-dd') : ''}
                          onChange={(e) => {
                            const date = e.target.value ? new Date(e.target.value) : undefined;
                            if (date) {
                              onTempEndDateChange(date);
                              if (tempCustomStartDate && date < tempCustomStartDate) {
                                onTempStartDateChange(date);
                              }
                            } else {
                              onTempEndDateChange(undefined);
                            }
                          }}
                          min={tempCustomStartDate ? format(tempCustomStartDate, 'yyyy-MM-dd') : undefined}
                          max={format(new Date(), 'yyyy-MM-dd')}
                          className="w-full"
                        />
                      </div>
                    </div>
                    <div className="flex gap-2 pt-2 border-t">
                      <Button 
                        size="sm" 
                        onClick={onApplyCustomDate}
                        disabled={!tempCustomStartDate || !tempCustomEndDate}
                        className="flex-1 bg-re-green hover:bg-re-green/90"
                        data-testid="apply-date-button"
                      >
                        Apply
                      </Button>
                      <Button 
                        size="sm" 
                        variant="outline"
                        onClick={() => {
                          onShowCustomDatePickerChange(false);
                          onTempStartDateChange(customStartDate);
                          onTempEndDateChange(customEndDate);
                          if (!customStartDate || !customEndDate) {
                            onDateRangeChange('all');
                          }
                        }}
                        data-testid="cancel-date-button"
                      >
                        Cancel
                      </Button>
                    </div>
                  </div>
                </PopoverContent>
              </Popover>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

