'use client';

import { useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { TaskPriority } from '@/lib/types';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { useTasksContext } from '@/contexts/TasksContext';
import { getAllPriorities, getPriorityColorHex } from '@/lib/status-config';
import { SORT_OPTIONS } from '@/lib/sort-config';

export interface KanbanFilters {
  search?: string;
  tags?: string[];
  priorities?: TaskPriority[];
  showCompleted?: boolean;
  compactView?: boolean;
  swimlanesByTags?: boolean;
  pinnedTag?: string; // Tag pour les objectifs principaux
  sortBy?: string; // Clé de l'option de tri sélectionnée
}

interface KanbanFiltersProps {
  filters: KanbanFilters;
  onFiltersChange: (filters: KanbanFilters) => void;
}

export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps) {
  const { tags: availableTags } = useTasksContext();
  const [isExpanded, setIsExpanded] = useState(false);
  const [isSortExpanded, setIsSortExpanded] = useState(false);
  const sortDropdownRef = useRef<HTMLDivElement>(null);
  const sortButtonRef = useRef<HTMLButtonElement>(null);
  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });

  // Fermer le dropdown de tri en cliquant à l'extérieur
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (sortDropdownRef.current && !sortDropdownRef.current.contains(event.target as Node)) {
        setIsSortExpanded(false);
      }
    }

    if (isSortExpanded) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [isSortExpanded]);

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

  const handleTagToggle = (tagName: string) => {
    const currentTags = filters.tags || [];
    const newTags = currentTags.includes(tagName)
      ? currentTags.filter(t => t !== tagName)
      : [...currentTags, tagName];
    
    onFiltersChange({ 
      ...filters, 
      tags: newTags.length > 0 ? newTags : undefined 
    });
  };

  const handlePriorityToggle = (priority: TaskPriority) => {
    const currentPriorities = filters.priorities || [];
    const newPriorities = currentPriorities.includes(priority)
      ? currentPriorities.filter(p => p !== priority)
      : [...currentPriorities, priority];
    
    onFiltersChange({ 
      ...filters, 
      priorities: newPriorities.length > 0 ? newPriorities : undefined 
    });
  };

  const handleCompactViewToggle = () => {
    onFiltersChange({ 
      ...filters, 
      compactView: !filters.compactView 
    });
  };

  const handleSwimlanesToggle = () => {
    onFiltersChange({ 
      ...filters, 
      swimlanesByTags: !filters.swimlanesByTags
    });
  };

  const handleSortChange = (sortKey: string) => {
    onFiltersChange({ 
      ...filters, 
      sortBy: sortKey
    });
  };

  const handleSortToggle = () => {
    if (!isSortExpanded && sortButtonRef.current) {
      const rect = sortButtonRef.current.getBoundingClientRect();
      setDropdownPosition({
        top: rect.bottom + window.scrollY + 4,
        left: rect.left + window.scrollX
      });
    }
    setIsSortExpanded(!isSortExpanded);
  };

  const handleClearFilters = () => {
    onFiltersChange({});
  };

  const activeFiltersCount = (filters.tags?.length || 0) + (filters.priorities?.length || 0) + (filters.search ? 1 : 0);

  const priorityOptions = getAllPriorities().map(priorityConfig => ({
    value: priorityConfig.key,
    label: priorityConfig.label,
    color: priorityConfig.color
  }));

  return (
    <div className="bg-slate-900/50 border-b border-slate-700/50 backdrop-blur-sm">
      <div className="container mx-auto px-6 py-4">
        {/* Header avec recherche et bouton expand */}
        <div className="flex items-center gap-4">
          <div className="flex-1 max-w-md">
            <Input
              type="text"
              value={filters.search || ''}
              onChange={(e) => handleSearchChange(e.target.value)}
              placeholder="Rechercher des tâches..."
              className="bg-slate-800/50 border-slate-600"
            />
          </div>

          {/* Bouton swimlanes par tags */}
          <Button
            variant={filters.swimlanesByTags ? "primary" : "ghost"}
            onClick={handleSwimlanesToggle}
            className="flex items-center gap-2"
            title={filters.swimlanesByTags ? "Vue normale" : "Lignes par tags"}
          >
            <svg 
              className="w-4 h-4" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              {filters.swimlanesByTags ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
              )}
            </svg>
            {filters.swimlanesByTags ? 'Normal' : 'Swimlanes'}
          </Button>

          {/* Bouton vue compacte */}
          <Button
            variant={filters.compactView ? "primary" : "ghost"}
            onClick={handleCompactViewToggle}
            className="flex items-center gap-2"
            title={filters.compactView ? "Vue détaillée" : "Vue compacte"}
          >
            <svg 
              className="w-4 h-4" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              {filters.compactView ? (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
              ) : (
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              )}
            </svg>
            {filters.compactView ? 'Détaillée' : 'Compacte'}
          </Button>

          {/* Bouton de tri */}
          <div className="relative" ref={sortDropdownRef}>
            <Button
              ref={sortButtonRef}
              variant="ghost"
              onClick={handleSortToggle}
              className="flex items-center gap-2"
            >
              <svg 
                className="w-4 h-4"
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
              </svg>
              Tris
              <svg 
                className={`w-4 h-4 transition-transform ${isSortExpanded ? 'rotate-180' : ''}`}
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </Button>
            
          </div>

          <Button
            variant="ghost"
            onClick={() => setIsExpanded(!isExpanded)}
            className="flex items-center gap-2"
          >
            <svg 
              className="w-4 h-4"
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
            </svg>
            Filtres
            {activeFiltersCount > 0 && (
              <span className="bg-cyan-500 text-slate-900 text-xs px-2 py-0.5 rounded-full font-medium">
                {activeFiltersCount}
              </span>
            )}
            <svg 
              className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </Button>

          {activeFiltersCount > 0 && (
            <Button
              variant="ghost"
              onClick={handleClearFilters}
              className="text-slate-400 hover:text-red-400"
            >
              Effacer
            </Button>
          )}
        </div>

        {/* Filtres étendus */}
        {isExpanded && (
          <div className="mt-4 space-y-4 border-t border-slate-700/50 pt-4">
            {/* Filtres par priorité */}
            <div className="space-y-2">
              <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
                Priorités
              </label>
              <div className="flex flex-wrap gap-2">
                {priorityOptions.map((priority) => (
                  <button
                    key={priority.value}
                    onClick={() => handlePriorityToggle(priority.value)}
                    className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${
                      filters.priorities?.includes(priority.value)
                        ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                        : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
                    }`}
                  >
                    <div 
                      className="w-2 h-2 rounded-full"
                      style={{ backgroundColor: getPriorityColorHex(priority.color) }}
                    />
                    {priority.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Filtres par tags */}
            {availableTags.length > 0 && (
              <div className="space-y-2">
                <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
                  Tags
                </label>
                <div className="flex flex-wrap gap-2">
                  {availableTags.map((tag) => (
                    <button
                      key={tag.id}
                      onClick={() => handleTagToggle(tag.name)}
                      className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${
                        filters.tags?.includes(tag.name)
                          ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                          : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
                      }`}
                    >
                      <div 
                        className="w-2 h-2 rounded-full" 
                        style={{ backgroundColor: tag.color }}
                      />
                      {tag.name}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* Résumé des filtres actifs */}
            {activeFiltersCount > 0 && (
              <div className="bg-slate-800/30 rounded-lg p-3 border border-slate-700/50">
                <div className="text-xs text-slate-400 font-mono uppercase tracking-wider mb-2">
                  Filtres actifs
                </div>
                <div className="space-y-1 text-xs">
                  {filters.search && (
                    <div className="text-slate-300">
                      Recherche: <span className="text-cyan-400">&ldquo;{filters.search}&rdquo;</span>
                    </div>
                  )}
                  {filters.priorities?.length && (
                    <div className="text-slate-300">
                      Priorités: <span className="text-cyan-400">{filters.priorities.join(', ')}</span>
                    </div>
                  )}
                  {filters.tags?.length && (
                    <div className="text-slate-300">
                      Tags: <span className="text-cyan-400">{filters.tags.join(', ')}</span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
      
      {/* Dropdown de tri rendu via portail pour éviter les problèmes de z-index */}
      {isSortExpanded && typeof window !== 'undefined' && createPortal(
        <div 
          ref={sortDropdownRef}
          className="fixed w-80 bg-slate-800 border border-slate-700 rounded-lg shadow-xl z-[9999] max-h-64 overflow-y-auto"
          style={{
            top: dropdownPosition.top,
            left: dropdownPosition.left
          }}
        >
          {SORT_OPTIONS.map((option) => (
            <button
              key={option.key}
              onClick={() => {
                handleSortChange(option.key);
                setIsSortExpanded(false);
              }}
              className={`w-full px-3 py-2 text-left text-xs font-mono hover:bg-slate-700 transition-colors flex items-center gap-2 ${
                (filters.sortBy || 'priority-desc') === option.key
                  ? 'bg-cyan-600/20 text-cyan-400 border-l-2 border-cyan-400'
                  : 'text-slate-300'
              }`}
            >
              <span className="text-base">{option.icon}</span>
              <span className="flex-1">{option.label}</span>
              {(filters.sortBy || 'priority-desc') === option.key && (
                <svg className="w-4 h-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                </svg>
              )}
            </button>
          ))}
        </div>,
        document.body
      )}
    </div>
  );
}