import { useState, useEffect } from 'react';
import { Task } from '@/lib/types';
import { formatDistanceToNow } from 'date-fns';
import { fr } from 'date-fns/locale';
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { TagDisplay } from '@/components/ui/TagDisplay';
import { useTasksContext } from '@/contexts/TasksContext';
import { useDraggable } from '@dnd-kit/core';
import { getPriorityConfig } from '@/lib/status-config';

interface TaskCardProps {
  task: Task;
  onDelete?: (taskId: string) => Promise<void>;
  onEdit?: (task: Task) => void;
  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
  compactView?: boolean;
}

export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView = false }: TaskCardProps) {
  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [editTitle, setEditTitle] = useState(task.title);
  const { tags: availableTags } = useTasksContext();

  // Configuration du draggable
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    isDragging,
  } = useDraggable({
    id: task.id,
  });

  // Mettre à jour le titre local quand la tâche change
  useEffect(() => {
    setEditTitle(task.title);
  }, [task.title]);
  const handleDelete = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (onDelete) {
      await onDelete(task.id);
    }
  };

  const handleEdit = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (onEdit) {
      onEdit(task);
    }
  };

  const handleTitleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (onUpdateTitle && !isDragging) {
      setIsEditingTitle(true);
    }
  };

  const handleTitleSave = async () => {
    const trimmedTitle = editTitle.trim();
    if (trimmedTitle && trimmedTitle !== task.title && onUpdateTitle) {
      await onUpdateTitle(task.id, trimmedTitle);
    }
    setIsEditingTitle(false);
  };

  const handleTitleCancel = () => {
    setEditTitle(task.title);
    setIsEditingTitle(false);
  };

  const handleTitleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleTitleSave();
    } else if (e.key === 'Escape') {
      e.preventDefault();
      handleTitleCancel();
    }
  };
  // Style de transformation pour le drag
  const style = transform ? {
    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
  } : undefined;

  // Extraire les emojis du titre pour les afficher comme tags visuels
  const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
  const emojis = task.title.match(emojiRegex) || [];
  const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();


  // Vue compacte : seulement le titre
  if (compactView) {
    return (
      <Card 
        ref={setNodeRef}
        style={style}
        className={`p-2 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
          isDragging ? 'opacity-50 rotate-3 scale-105' : ''
        }`}
        {...attributes}
        {...(isEditingTitle ? {} : listeners)}
      >
        <div className="flex items-center gap-2">
          {emojis.length > 0 && (
            <div className="flex gap-1 flex-shrink-0">
              {emojis.slice(0, 1).map((emoji, index) => (
                <span key={index} className="text-sm opacity-80">
                  {emoji}
                </span>
              ))}
            </div>
          )}
          
          {isEditingTitle ? (
            <input
              type="text"
              value={editTitle}
              onChange={(e) => setEditTitle(e.target.value)}
              onKeyDown={handleTitleKeyPress}
              onBlur={handleTitleSave}
              autoFocus
              className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium leading-tight"
            />
          ) : (
            <h4 
              className="font-mono text-xs font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
              onClick={handleTitleClick}
              title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
            >
              {titleWithoutEmojis}
            </h4>
          )}
          
          <div className="flex items-center gap-1 flex-shrink-0">
            {/* Boutons d'action compacts */}
            {onEdit && (
              <button
                onClick={handleEdit}
                className="opacity-0 group-hover:opacity-100 w-3 h-3 rounded-full bg-blue-900/50 hover:bg-blue-800/80 border border-blue-500/30 hover:border-blue-400/50 flex items-center justify-center transition-all duration-200 text-blue-400 hover:text-blue-300 text-xs"
                title="Modifier la tâche"
              >
                ✎
              </button>
            )}
            
            {onDelete && (
              <button
                onClick={handleDelete}
                className="opacity-0 group-hover:opacity-100 w-3 h-3 rounded-full bg-red-900/50 hover:bg-red-800/80 border border-red-500/30 hover:border-red-400/50 flex items-center justify-center transition-all duration-200 text-red-400 hover:text-red-300 text-xs"
                title="Supprimer la tâche"
              >
                ×
              </button>
            )}
            
            {/* Indicateur de priorité compact */}
            <div className={`w-1.5 h-1.5 rounded-full bg-${getPriorityConfig(task.priority).color}-400`} />
          </div>
        </div>
      </Card>
    );
  }

  // Vue détaillée : version complète
  return (
    <Card 
      ref={setNodeRef}
      style={style}
      className={`p-3 hover:border-cyan-500/30 hover:shadow-lg hover:shadow-cyan-500/10 transition-all duration-300 cursor-pointer group ${
        isDragging ? 'opacity-50 rotate-3 scale-105' : ''
      }`}
      {...attributes}
      {...(isEditingTitle ? {} : listeners)}
    >
      {/* Header tech avec titre et status */}
      <div className="flex items-start gap-2 mb-2">
        {emojis.length > 0 && (
          <div className="flex gap-1 flex-shrink-0">
            {emojis.slice(0, 2).map((emoji, index) => (
              <span key={index} className="text-sm opacity-80">
                {emoji}
              </span>
            ))}
          </div>
        )}
        
        {isEditingTitle ? (
          <input
            type="text"
            value={editTitle}
            onChange={(e) => setEditTitle(e.target.value)}
            onKeyDown={handleTitleKeyPress}
            onBlur={handleTitleSave}
            autoFocus
            className="flex-1 bg-transparent border-none outline-none text-slate-100 font-mono text-sm font-medium leading-tight"
          />
        ) : (
          <h4 
            className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
            onClick={handleTitleClick}
            title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
          >
            {titleWithoutEmojis}
          </h4>
        )}
        
        <div className="flex items-center gap-1 flex-shrink-0">
          {/* Bouton d'édition discret */}
          {onEdit && (
            <button
              onClick={handleEdit}
              className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-blue-900/50 hover:bg-blue-800/80 border border-blue-500/30 hover:border-blue-400/50 flex items-center justify-center transition-all duration-200 text-blue-400 hover:text-blue-300 text-xs"
              title="Modifier la tâche"
            >
              ✎
            </button>
          )}
          
          {/* Bouton de suppression discret */}
          {onDelete && (
            <button
              onClick={handleDelete}
              className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-red-900/50 hover:bg-red-800/80 border border-red-500/30 hover:border-red-400/50 flex items-center justify-center transition-all duration-200 text-red-400 hover:text-red-300 text-xs"
              title="Supprimer la tâche"
            >
              ×
            </button>
          )}
          
          {/* Indicateur de priorité tech */}
          <div className={`w-2 h-2 rounded-full animate-pulse bg-${getPriorityConfig(task.priority).color}-400 shadow-${getPriorityConfig(task.priority).color}-400/50 shadow-sm`} />
        </div>
      </div>

      {/* Description tech */}
      {task.description && (
        <p className="text-xs text-slate-400 mb-3 line-clamp-1 font-mono">
          {task.description}
        </p>
      )}

      {/* Tags avec couleurs */}
      {task.tags && task.tags.length > 0 && (
        <div className={
          (task.dueDate || (task.source && task.source !== 'manual') || task.completedAt) 
            ? "mb-3" 
            : "mb-0"
        }>
          <TagDisplay
            tags={task.tags}
            availableTags={availableTags}
            size="sm"
            maxTags={3}
            showColors={true}
          />
        </div>
      )}

      {/* Footer tech avec séparateur néon - seulement si des données à afficher */}
      {(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt) && (
        <div className="pt-2 border-t border-slate-700/50">
          <div className="flex items-center justify-between text-xs">
            {task.dueDate ? (
              <span className="flex items-center gap-1 text-slate-400 font-mono">
                <span className="text-cyan-400">⏰</span>
                {formatDistanceToNow(new Date(task.dueDate), { 
                  addSuffix: true, 
                  locale: fr 
                })}
              </span>
            ) : (
              <div></div>
            )}
            
            <div className="flex items-center gap-2">
              {task.source !== 'manual' && task.source && (
                <Badge variant="outline" size="sm">
                  {task.source}
                </Badge>
              )}
              
              {task.completedAt && (
                <span className="text-emerald-400 font-mono font-bold">✓ DONE</span>
              )}
            </div>
          </div>
        </div>
      )}
    </Card>
  );
}