'use client';

import { useState, useEffect } from 'react';
import { JiraAnalyticsFilters, AvailableFilters, FilterOption } from '@/lib/types';
import { JiraAdvancedFiltersService } from '@/services/jira-advanced-filters';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { Modal } from '@/components/ui/Modal';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';

interface AdvancedFiltersPanelProps {
  availableFilters: AvailableFilters;
  activeFilters: Partial<JiraAnalyticsFilters>;
  onFiltersChange: (filters: Partial<JiraAnalyticsFilters>) => void;
  className?: string;
}

interface FilterSectionProps {
  title: string;
  icon: string;
  options: FilterOption[];
  selectedValues: string[];
  onSelectionChange: (values: string[]) => void;
  maxDisplay?: number;
}

function FilterSection({ title, icon, options, selectedValues, onSelectionChange, maxDisplay = 10 }: FilterSectionProps) {
  const [showAll, setShowAll] = useState(false);
  const displayOptions = showAll ? options : options.slice(0, maxDisplay);
  const hasMore = options.length > maxDisplay;

  const handleToggle = (value: string) => {
    const newValues = selectedValues.includes(value)
      ? selectedValues.filter(v => v !== value)
      : [...selectedValues, value];
    onSelectionChange(newValues);
  };

  const selectAll = () => {
    onSelectionChange(options.map(opt => opt.value));
  };

  const clearAll = () => {
    onSelectionChange([]);
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <h4 className="font-medium text-sm flex items-center gap-2">
          <span>{icon}</span>
          {title}
          {selectedValues.length > 0 && (
            <Badge className="bg-blue-100 text-blue-800 text-xs">
              {selectedValues.length}
            </Badge>
          )}
        </h4>
        
        {options.length > 0 && (
          <div className="flex gap-1">
            <button
              onClick={selectAll}
              className="text-xs text-blue-600 hover:text-blue-800"
            >
              Tout
            </button>
            <span className="text-xs text-gray-400">|</span>
            <button
              onClick={clearAll}
              className="text-xs text-gray-600 hover:text-gray-800"
            >
              Aucun
            </button>
          </div>
        )}
      </div>

      {options.length === 0 ? (
        <p className="text-sm text-gray-500 italic">Aucune option disponible</p>
      ) : (
        <>
          <div className="space-y-1 max-h-32 overflow-y-auto">
            {displayOptions.map(option => (
              <label
                key={option.value}
                className="flex items-center gap-2 text-sm cursor-pointer hover:bg-gray-50 px-2 py-1 rounded"
              >
                <input
                  type="checkbox"
                  checked={selectedValues.includes(option.value)}
                  onChange={() => handleToggle(option.value)}
                  className="rounded"
                />
                <span className="flex-1 truncate">{option.label}</span>
                <span className="text-xs text-gray-500">({option.count})</span>
              </label>
            ))}
          </div>
          
          {hasMore && (
            <button
              onClick={() => setShowAll(!showAll)}
              className="text-xs text-blue-600 hover:text-blue-800"
            >
              {showAll ? `Afficher moins` : `Afficher ${options.length - maxDisplay} de plus`}
            </button>
          )}
        </>
      )}
    </div>
  );
}

export default function AdvancedFiltersPanel({ 
  availableFilters, 
  activeFilters, 
  onFiltersChange, 
  className = '' 
}: AdvancedFiltersPanelProps) {
  const [showModal, setShowModal] = useState(false);
  const [tempFilters, setTempFilters] = useState<Partial<JiraAnalyticsFilters>>(activeFilters);

  useEffect(() => {
    setTempFilters(activeFilters);
  }, [activeFilters]);

  const hasActiveFilters = JiraAdvancedFiltersService.hasActiveFilters(activeFilters);
  const activeFiltersCount = JiraAdvancedFiltersService.countActiveFilters(activeFilters);
  const filtersSummary = JiraAdvancedFiltersService.getFiltersSummary(activeFilters);

  const applyFilters = () => {
    onFiltersChange(tempFilters);
    setShowModal(false);
  };

  const clearAllFilters = () => {
    const emptyFilters = JiraAdvancedFiltersService.createEmptyFilters();
    setTempFilters(emptyFilters);
    onFiltersChange(emptyFilters);
    setShowModal(false);
  };

  const updateTempFilter = <K extends keyof JiraAnalyticsFilters>(
    key: K,
    value: JiraAnalyticsFilters[K]
  ) => {
    setTempFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold">🔍 Filtres avancés</h3>
            {hasActiveFilters && (
              <Badge className="bg-blue-100 text-blue-800 text-xs">
                {activeFiltersCount} actif{activeFiltersCount > 1 ? 's' : ''}
              </Badge>
            )}
          </div>
          
          <div className="flex gap-2">
            {hasActiveFilters && (
              <Button
                onClick={clearAllFilters}
                variant="secondary"
                size="sm"
                className="text-xs"
              >
                🗑️ Effacer
              </Button>
            )}
            <Button
              onClick={() => setShowModal(true)}
              size="sm"
              className="text-xs"
            >
              ⚙️ Configurer
            </Button>
          </div>
        </div>
        
        <p className="text-sm text-[var(--muted-foreground)] mt-1">
          {filtersSummary}
        </p>
      </CardHeader>

      {/* Aperçu rapide des filtres actifs */}
      {hasActiveFilters && (
        <CardContent className="pt-0">
          <div className="p-3 bg-blue-50 rounded-lg">
          <div className="flex flex-wrap gap-1">
            {activeFilters.components?.map(comp => (
              <Badge key={comp} className="bg-purple-100 text-purple-800 text-xs">
                📦 {comp}
              </Badge>
            ))}
            {activeFilters.fixVersions?.map(version => (
              <Badge key={version} className="bg-green-100 text-green-800 text-xs">
                🏷️ {version}
              </Badge>
            ))}
            {activeFilters.issueTypes?.map(type => (
              <Badge key={type} className="bg-orange-100 text-orange-800 text-xs">
                📋 {type}
              </Badge>
            ))}
            {activeFilters.statuses?.map(status => (
              <Badge key={status} className="bg-blue-100 text-blue-800 text-xs">
                🔄 {status}
              </Badge>
            ))}
            {activeFilters.assignees?.map(assignee => (
              <Badge key={assignee} className="bg-yellow-100 text-yellow-800 text-xs">
                👤 {assignee}
              </Badge>
            ))}
            {activeFilters.labels?.map(label => (
              <Badge key={label} className="bg-gray-100 text-gray-800 text-xs">
                🏷️ {label}
              </Badge>
            ))}
            {activeFilters.priorities?.map(priority => (
              <Badge key={priority} className="bg-red-100 text-red-800 text-xs">
                ⚡ {priority}
              </Badge>
            ))}
          </div>
          </div>
        </CardContent>
      )}

      {/* Modal de configuration des filtres */}
      <Modal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        title="Configuration des filtres avancés"
        size="lg"
      >
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-h-96 overflow-y-auto">
          <FilterSection
            title="Composants"
            icon="📦"
            options={availableFilters.components}
            selectedValues={tempFilters.components || []}
            onSelectionChange={(values) => updateTempFilter('components', values)}
          />
          
          <FilterSection
            title="Versions"
            icon="🏷️"
            options={availableFilters.fixVersions}
            selectedValues={tempFilters.fixVersions || []}
            onSelectionChange={(values) => updateTempFilter('fixVersions', values)}
          />
          
          <FilterSection
            title="Types de tickets"
            icon="📋"
            options={availableFilters.issueTypes}
            selectedValues={tempFilters.issueTypes || []}
            onSelectionChange={(values) => updateTempFilter('issueTypes', values)}
          />
          
          <FilterSection
            title="Statuts"
            icon="🔄"
            options={availableFilters.statuses}
            selectedValues={tempFilters.statuses || []}
            onSelectionChange={(values) => updateTempFilter('statuses', values)}
          />
          
          <FilterSection
            title="Assignés"
            icon="👤"
            options={availableFilters.assignees}
            selectedValues={tempFilters.assignees || []}
            onSelectionChange={(values) => updateTempFilter('assignees', values)}
          />
          
          <FilterSection
            title="Labels"
            icon="🏷️"
            options={availableFilters.labels}
            selectedValues={tempFilters.labels || []}
            onSelectionChange={(values) => updateTempFilter('labels', values)}
          />
          
          <FilterSection
            title="Priorités"
            icon="⚡"
            options={availableFilters.priorities}
            selectedValues={tempFilters.priorities || []}
            onSelectionChange={(values) => updateTempFilter('priorities', values)}
          />
        </div>

        <div className="flex gap-2 pt-6 border-t">
          <Button
            onClick={applyFilters}
            className="flex-1"
          >
            ✅ Appliquer les filtres
          </Button>
          <Button
            onClick={clearAllFilters}
            variant="secondary"
            className="flex-1"
          >
            🗑️ Effacer tout
          </Button>
          <Button
            onClick={() => setShowModal(false)}
            variant="secondary"
          >
            Annuler
          </Button>
        </div>
      </Modal>
    </Card>
  );
}