'use client';

/**
 * IssueFilters Component
 *
 * Filter controls for the issue list.
 *
 * @module features/issues/components/IssueFilters
 */

import { useState } from 'react';
import { Search, Filter } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Card } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import type { IssueFilters as IssueFiltersType, IssueStatus, IssuePriority } from '../types';
import { STATUS_ORDER, PRIORITY_ORDER, STATUS_CONFIG, PRIORITY_CONFIG } from '../constants';
import { mockSprints, mockAssignees } from '../mocks';

interface IssueFiltersProps {
  filters: IssueFiltersType;
  onFiltersChange: (filters: IssueFiltersType) => void;
  className?: string;
}

export function IssueFilters({ filters, onFiltersChange, className }: IssueFiltersProps) {
  const [showExtended, setShowExtended] = useState(false);

  const handleSearchChange = (value: string) => {
    onFiltersChange({ ...filters, search: value || undefined });
  };

  /* istanbul ignore next -- Radix Select onValueChange handlers */
  const handleStatusChange = (value: string) => {
    onFiltersChange({
      ...filters,
      status: value as IssueStatus | 'all',
    });
  };

  /* istanbul ignore next -- Radix Select onValueChange handlers */
  const handlePriorityChange = (value: string) => {
    onFiltersChange({
      ...filters,
      priority: value as IssuePriority | 'all',
    });
  };

  /* istanbul ignore next -- Radix Select onValueChange handlers */
  const handleSprintChange = (value: string) => {
    onFiltersChange({
      ...filters,
      sprint: value as string | 'all' | 'backlog',
    });
  };

  /* istanbul ignore next -- Radix Select onValueChange handlers */
  const handleAssigneeChange = (value: string) => {
    onFiltersChange({
      ...filters,
      assignee: value as string | 'all' | 'unassigned',
    });
  };

  const handleClearFilters = () => {
    onFiltersChange({
      search: undefined,
      status: 'all',
      priority: 'all',
      sprint: 'all',
      assignee: 'all',
      labels: undefined,
    });
  };

  const hasActiveFilters =
    filters.search ||
    (filters.status && filters.status !== 'all') ||
    (filters.priority && filters.priority !== 'all') ||
    (filters.sprint && filters.sprint !== 'all') ||
    (filters.assignee && filters.assignee !== 'all');

  return (
    <div className={cn('space-y-4', className)}>
      {/* Search and Quick Filters */}
      <div className="flex flex-col gap-4 sm:flex-row">
        <div className="relative flex-1">
          <Search
            className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
            aria-hidden="true"
          />
          <Input
            id="issue-search"
            placeholder="Search issues..."
            value={filters.search || ''}
            onChange={(e) => handleSearchChange(e.target.value)}
            className="pl-9"
            aria-label="Search issues"
          />
        </div>
        <div className="flex gap-2">
          <Select value={filters.status || 'all'} onValueChange={handleStatusChange}>
            <SelectTrigger className="w-32" aria-label="Filter by status">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              {STATUS_ORDER.map((status) => (
                <SelectItem key={status} value={status}>
                  {STATUS_CONFIG[status].label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            size="icon"
            onClick={() => setShowExtended(!showExtended)}
            className={cn(showExtended && 'bg-muted')}
            aria-expanded={showExtended}
            aria-label="Toggle extended filters"
          >
            <Filter className="h-4 w-4" aria-hidden="true" />
          </Button>
        </div>
      </div>

      {/* Extended Filters */}
      {showExtended && (
        <Card className="p-4">
          <div className="grid gap-4 sm:grid-cols-4">
            <div className="space-y-2">
              <Label htmlFor="priority-filter">Priority</Label>
              <Select value={filters.priority || 'all'} onValueChange={handlePriorityChange}>
                <SelectTrigger id="priority-filter">
                  <SelectValue placeholder="All" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  {PRIORITY_ORDER.map((priority) => (
                    <SelectItem key={priority} value={priority}>
                      {PRIORITY_CONFIG[priority].label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="sprint-filter">Sprint</Label>
              <Select value={filters.sprint || 'all'} onValueChange={handleSprintChange}>
                <SelectTrigger id="sprint-filter">
                  <SelectValue placeholder="All" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Sprints</SelectItem>
                  {mockSprints.map((sprint) => (
                    <SelectItem key={sprint} value={sprint}>
                      {sprint}
                    </SelectItem>
                  ))}
                  <SelectItem value="backlog">Backlog</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="assignee-filter">Assignee</Label>
              <Select value={filters.assignee || 'all'} onValueChange={handleAssigneeChange}>
                <SelectTrigger id="assignee-filter">
                  <SelectValue placeholder="All" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="unassigned">Unassigned</SelectItem>
                  {mockAssignees.map((assignee) => (
                    <SelectItem key={assignee.id} value={assignee.id}>
                      {assignee.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-end">
              {hasActiveFilters && (
                <Button variant="ghost" size="sm" onClick={handleClearFilters}>
                  Clear Filters
                </Button>
              )}
            </div>
          </div>
        </Card>
      )}
    </div>
  );
}
