/**
 * ProjectFilters Component
 *
 * Filter controls for the projects list including:
 * - Search input with debounce
 * - Status filter
 * - Extended filters (complexity, etc.)
 * - Sort controls
 * - View mode toggle (grid/list)
 *
 * @see Issue #54
 */

'use client';

import { useState } from 'react';
import { Search, Filter, LayoutGrid, List, ChevronDown, X } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import type { ProjectStatus } from './types';

export type ViewMode = 'grid' | 'list';
export type SortBy = 'recent' | 'name' | 'progress' | 'issues';
export type SortOrder = 'asc' | 'desc';
export type Complexity = 'low' | 'medium' | 'high' | 'all';

export interface ProjectFiltersProps {
  /** Current search query */
  searchQuery: string;
  /** Called when search changes */
  onSearchChange: (query: string) => void;
  /** Current status filter */
  statusFilter: ProjectStatus | 'all';
  /** Called when status filter changes */
  onStatusFilterChange: (status: ProjectStatus | 'all') => void;
  /** Current complexity filter */
  complexityFilter: Complexity;
  /** Called when complexity filter changes */
  onComplexityFilterChange: (complexity: Complexity) => void;
  /** Current sort field */
  sortBy: SortBy;
  /** Called when sort field changes */
  onSortByChange: (sortBy: SortBy) => void;
  /** Current sort order */
  sortOrder: SortOrder;
  /** Called when sort order changes */
  onSortOrderChange: (order: SortOrder) => void;
  /** Current view mode */
  viewMode: ViewMode;
  /** Called when view mode changes */
  onViewModeChange: (mode: ViewMode) => void;
  /** Additional CSS classes */
  className?: string;
}

const statusOptions: { value: ProjectStatus | 'all'; label: string }[] = [
  { value: 'all', label: 'All Status' },
  { value: 'active', label: 'Active' },
  { value: 'paused', label: 'Paused' },
  { value: 'completed', label: 'Completed' },
  { value: 'archived', label: 'Archived' },
];

const complexityOptions: { value: Complexity; label: string }[] = [
  { value: 'all', label: 'All Complexity' },
  { value: 'low', label: 'Low' },
  { value: 'medium', label: 'Medium' },
  { value: 'high', label: 'High' },
];

const sortOptions: { value: SortBy; label: string }[] = [
  { value: 'recent', label: 'Most Recent' },
  { value: 'name', label: 'Name' },
  { value: 'progress', label: 'Progress' },
  { value: 'issues', label: 'Issues' },
];

export function ProjectFilters({
  searchQuery,
  onSearchChange,
  statusFilter,
  onStatusFilterChange,
  complexityFilter,
  onComplexityFilterChange,
  sortBy,
  onSortByChange,
  sortOrder,
  onSortOrderChange,
  viewMode,
  onViewModeChange,
  className,
}: ProjectFiltersProps) {
  const [showExtended, setShowExtended] = useState(false);

  // Check if any filters are active
  const hasActiveFilters =
    statusFilter !== 'all' || complexityFilter !== 'all' || searchQuery !== '';

  // Count active filters for badge
  const activeFilterCount =
    (statusFilter !== 'all' ? 1 : 0) +
    (complexityFilter !== 'all' ? 1 : 0) +
    (searchQuery !== '' ? 1 : 0);

  const clearAllFilters = () => {
    onSearchChange('');
    onStatusFilterChange('all');
    onComplexityFilterChange('all');
  };

  return (
    <div className={cn('space-y-4', className)}>
      {/* Quick Filters Row */}
      <div className="flex flex-col gap-4 sm:flex-row">
        {/* Search */}
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Search projects..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-9"
            aria-label="Search projects"
          />
        </div>

        {/* Status Filter */}
        <Select
          value={statusFilter}
          onValueChange={(value) => onStatusFilterChange(value as ProjectStatus | 'all')}
        >
          <SelectTrigger className="w-full sm:w-40" aria-label="Filter by status">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            {statusOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        {/* Extended Filters Toggle */}
        <Button
          variant="outline"
          onClick={() => setShowExtended(!showExtended)}
          className={cn(hasActiveFilters && 'border-primary')}
        >
          <Filter className="mr-2 h-4 w-4" />
          Filters
          {activeFilterCount > 0 && (
            <Badge variant="secondary" className="ml-2">
              {activeFilterCount}
            </Badge>
          )}
          <ChevronDown
            className={cn('ml-2 h-4 w-4 transition-transform', showExtended && 'rotate-180')}
          />
        </Button>

        {/* View Mode Toggle */}
        <div className="flex rounded-lg border">
          <Button
            variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
            size="icon"
            onClick={() => onViewModeChange('grid')}
            aria-label="Grid view"
            className="rounded-r-none"
          >
            <LayoutGrid className="h-4 w-4" />
          </Button>
          <Button
            variant={viewMode === 'list' ? 'secondary' : 'ghost'}
            size="icon"
            onClick={() => onViewModeChange('list')}
            aria-label="List view"
            className="rounded-l-none"
          >
            <List className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Extended Filters */}
      {showExtended && (
        <Card className="p-4">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
            {/* Complexity Filter */}
            <div className="flex-1">
              <label className="mb-2 block text-sm font-medium">Complexity</label>
              <Select
                value={complexityFilter}
                onValueChange={(value) => onComplexityFilterChange(value as Complexity)}
              >
                <SelectTrigger aria-label="Filter by complexity">
                  <SelectValue placeholder="Complexity" />
                </SelectTrigger>
                <SelectContent>
                  {complexityOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Sort By */}
            <div className="flex-1">
              <label className="mb-2 block text-sm font-medium">Sort By</label>
              <Select value={sortBy} onValueChange={(value) => onSortByChange(value as SortBy)}>
                <SelectTrigger aria-label="Sort by">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  {sortOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* Sort Order */}
            <div className="flex-1">
              <label className="mb-2 block text-sm font-medium">Order</label>
              <Select
                value={sortOrder}
                onValueChange={(value) => onSortOrderChange(value as SortOrder)}
              >
                <SelectTrigger aria-label="Sort order">
                  <SelectValue placeholder="Order" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="desc">Descending</SelectItem>
                  <SelectItem value="asc">Ascending</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Clear Filters */}
            {hasActiveFilters && (
              <Button variant="ghost" onClick={clearAllFilters} className="gap-2">
                <X className="h-4 w-4" />
                Clear Filters
              </Button>
            )}
          </div>
        </Card>
      )}
    </div>
  );
}
