import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Filter, Search, SortAsc, SortDesc, X, Flame, Target } from 'lucide-react';

const FORM16_QUARTERS = [
  { value: 'Q1', label: 'Q1 (April - June)' },
  { value: 'Q2', label: 'Q2 (July - September)' },
  { value: 'Q3', label: 'Q3 (October - December)' },
  { value: 'Q4', label: 'Q4 (January - March)' },
] as const;

function getFinancialYears(): string[] {
  const currentYear = new Date().getFullYear();
  const years: string[] = [];
  for (let i = 0; i < 4; i++) {
    const startYear = currentYear - i;
    const endYear = (startYear + 1).toString().slice(-2);
    years.push(`${startYear}-${endYear}`);
  }
  return years;
}

interface RequestsFiltersProps {
  searchTerm: string;
  statusFilter: string;
  priorityFilter: string;
  templateTypeFilter: string;
  form16FinancialYear?: string;
  form16Quarter?: string;
  sortBy: 'created' | 'due' | 'priority' | 'sla';
  sortOrder: 'asc' | 'desc';
  onSearchChange: (value: string) => void;
  onStatusFilterChange: (value: string) => void;
  onPriorityFilterChange: (value: string) => void;
  onTemplateTypeFilterChange: (value: string) => void;
  onForm16FinancialYearChange?: (value: string) => void;
  onForm16QuarterChange?: (value: string) => void;
  onSortByChange: (value: 'created' | 'due' | 'priority' | 'sla') => void;
  onSortOrderChange: (value: 'asc' | 'desc') => void;
  onClearFilters: () => void;
  activeFiltersCount: number;
}

/**
 * Standard Requests Filters Component
 * 
 * Used for regular users (non-dealers).
 * Includes: Search, Status, Priority, Template Type, and Sort filters.
 */
export function StandardRequestsFilters({
  searchTerm,
  statusFilter,
  priorityFilter,
  templateTypeFilter,
  form16FinancialYear = '',
  form16Quarter = '',
  sortBy,
  sortOrder,
  onSearchChange,
  onStatusFilterChange,
  onPriorityFilterChange,
  onTemplateTypeFilterChange,
  onForm16FinancialYearChange,
  onForm16QuarterChange,
  onSortByChange,
  onSortOrderChange,
  onClearFilters,
  activeFiltersCount,
}: RequestsFiltersProps) {
  const financialYears = getFinancialYears();
  const showForm16Filters = templateTypeFilter === 'FORM_16';
  return (
    <Card className="shadow-lg border-0">
      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 sm:gap-3">
            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
            </div>
            <div>
              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
              <CardDescription className="text-xs sm:text-sm">
                {activeFiltersCount > 0 && (
                  <span className="text-blue-600 font-medium">
                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
                  </span>
                )}
              </CardDescription>
            </div>
          </div>
          {activeFiltersCount > 0 && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onClearFilters}
              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
            >
              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
              <span className="text-xs sm:text-sm">Clear</span>
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
        {/* Standard filters - Search, Status, Priority, Template Type, and Sort */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
            <Input
              placeholder="Search requests, IDs..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
            />
          </div>

          <Select value={priorityFilter} onValueChange={onPriorityFilterChange}>
            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
              <SelectValue placeholder="All Priorities" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Priorities</SelectItem>
              <SelectItem value="express">
                <div className="flex items-center gap-2">
                  <Flame className="w-4 h-4 text-orange-600" />
                  <span>Express</span>
                </div>
              </SelectItem>
              <SelectItem value="standard">
                <div className="flex items-center gap-2">
                  <Target className="w-4 h-4 text-blue-600" />
                  <span>Standard</span>
                </div>
              </SelectItem>
            </SelectContent>
          </Select>

          <Select value={statusFilter} onValueChange={onStatusFilterChange}>
            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
              <SelectValue placeholder="All Statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="pending">Pending (In Approval)</SelectItem>
              <SelectItem value="approved">Approved (Needs Closure)</SelectItem>
            </SelectContent>
          </Select>

          <Select value={templateTypeFilter} onValueChange={onTemplateTypeFilterChange}>
            <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
              <SelectValue placeholder="Request type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Templates</SelectItem>
              <SelectItem value="CUSTOM">Non-Templatized</SelectItem>
              <SelectItem value="DEALER CLAIM">Dealer Claim</SelectItem>
              <SelectItem value="FORM_16">Form 16</SelectItem>
            </SelectContent>
          </Select>

          {showForm16Filters && onForm16FinancialYearChange && (
            <Select value={form16FinancialYear || undefined} onValueChange={onForm16FinancialYearChange}>
              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
                <SelectValue placeholder="Financial Year" />
              </SelectTrigger>
              <SelectContent>
                {financialYears.map((y) => (
                  <SelectItem key={y} value={y}>{y}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          {showForm16Filters && onForm16QuarterChange && (
            <Select value={form16Quarter || undefined} onValueChange={onForm16QuarterChange}>
              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
                <SelectValue placeholder="Quarter" />
              </SelectTrigger>
              <SelectContent>
                {FORM16_QUARTERS.map((q) => (
                  <SelectItem key={q.value} value={q.value}>{q.label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          <div className="flex gap-2">
            <Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
                <SelectValue placeholder="Sort by" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="due">Due Date</SelectItem>
                <SelectItem value="created">Date Created</SelectItem>
                <SelectItem value="priority">Priority</SelectItem>
                <SelectItem value="sla">SLA Progress</SelectItem>
              </SelectContent>
            </Select>

            <Button
              variant="outline"
              size="sm"
              onClick={() => onSortOrderChange(sortOrder === 'asc' ? 'desc' : 'asc')}
              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
            >
              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

