import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './Card';
import { Badge } from './Badge';
import { Button } from './Button';

interface FilterSummaryProps {
  filters: {
    search?: string;
    priorities?: string[];
    tags?: string[];
    showWithDueDate?: boolean;
    showCompletedLast7Days?: boolean;
    showJiraOnly?: boolean;
    hideJiraTasks?: boolean;
    jiraProjects?: string[];
    jiraTypes?: string[];
    showTfsOnly?: boolean;
    hideTfsTasks?: boolean;
    tfsProjects?: string[];
  };
  activeFiltersCount: number;
  onClearFilters?: () => void;
  className?: string;
}

export function FilterSummary({
  filters,
  activeFiltersCount,
  onClearFilters,
  className,
}: FilterSummaryProps) {
  if (activeFiltersCount === 0) return null;

  const filterItems: Array<{
    label: string;
    value: string;
    variant:
      | 'default'
      | 'primary'
      | 'success'
      | 'destructive'
      | 'accent'
      | 'purple'
      | 'yellow'
      | 'green'
      | 'blue'
      | 'gray'
      | 'outline'
      | 'danger'
      | 'warning';
  }> = [];

  // Recherche
  if (filters.search) {
    filterItems.push({
      label: 'Recherche',
      value: `"${filters.search}"`,
      variant: 'primary',
    });
  }

  // Priorités
  if (filters.priorities?.filter(Boolean).length) {
    filterItems.push({
      label: 'Priorités',
      value: filters.priorities.filter(Boolean).join(', '),
      variant: 'accent',
    });
  }

  // Tags
  if (filters.tags?.filter(Boolean).length) {
    filterItems.push({
      label: 'Tags',
      value: filters.tags.filter(Boolean).join(', '),
      variant: 'purple',
    });
  }

  // Affichage avec date de fin
  if (filters.showWithDueDate) {
    filterItems.push({
      label: 'Affichage',
      value: 'Avec date de fin',
      variant: 'success',
    });
  }

  // Affichage complété les 7 derniers jours
  if (filters.showCompletedLast7Days) {
    filterItems.push({
      label: 'Affichage',
      value: 'Complété les 7 derniers jours',
      variant: 'success',
    });
  }

  // Jira
  if (filters.showJiraOnly) {
    filterItems.push({
      label: 'Affichage',
      value: 'Jira seulement',
      variant: 'blue',
    });
  }

  if (filters.hideJiraTasks) {
    filterItems.push({
      label: 'Affichage',
      value: 'Masquer Jira',
      variant: 'destructive',
    });
  }

  if (filters.jiraProjects?.filter(Boolean).length) {
    filterItems.push({
      label: 'Projets Jira',
      value: filters.jiraProjects.filter(Boolean).join(', '),
      variant: 'blue',
    });
  }

  if (filters.jiraTypes?.filter(Boolean).length) {
    filterItems.push({
      label: 'Types Jira',
      value: filters.jiraTypes.filter(Boolean).join(', '),
      variant: 'purple',
    });
  }

  // TFS
  if (filters.showTfsOnly) {
    filterItems.push({
      label: 'Affichage',
      value: 'TFS seulement',
      variant: 'yellow',
    });
  }

  if (filters.hideTfsTasks) {
    filterItems.push({
      label: 'Affichage',
      value: 'Masquer TFS',
      variant: 'destructive',
    });
  }

  if (filters.tfsProjects?.filter(Boolean).length) {
    filterItems.push({
      label: 'Projets TFS',
      value: filters.tfsProjects.filter(Boolean).join(', '),
      variant: 'yellow',
    });
  }

  return (
    <Card className={className}>
      <CardHeader className="py-2 pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xs font-mono uppercase tracking-wider text-[var(--muted-foreground)]">
            Filtres actifs ({activeFiltersCount})
          </CardTitle>
          {onClearFilters && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onClearFilters}
              className="text-[var(--muted-foreground)] hover:text-[var(--destructive)] text-xs"
            >
              Effacer
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="pt-3">
        <div className="space-y-2">
          {filterItems.map((item, index) => (
            <div key={index} className="flex items-center gap-2 text-xs">
              <span className="text-[var(--muted-foreground)] font-medium">
                {item.label}:
              </span>
              <Badge variant={item.variant} size="sm">
                {item.value}
              </Badge>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
