import { HTMLAttributes, forwardRef, useState, useEffect, useRef } from 'react';
import { cn } from '@/lib/utils';
import { Card } from './Card';
import { Badge } from './Badge';
import { formatDateForDisplay } from '@/lib/date-utils';

interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
  // Variants
  variant?: 'compact' | 'detailed';
  source?: 'manual' | 'jira' | 'tfs' | 'reminders';
  
  // Content
  title: string;
  description?: string;
  tags?: string[];
  priority?: 'low' | 'medium' | 'high' | 'urgent';
  
  // Status & metadata
  status?: 'todo' | 'in_progress' | 'review' | 'done' | 'archived' | 'freeze' | 'backlog' | 'cancelled';
  dueDate?: Date;
  completedAt?: Date;
  
  // Source-specific data
  jiraKey?: string;
  jiraProject?: string;
  jiraType?: string;
  tfsPullRequestId?: number;
  tfsProject?: string;
  tfsRepository?: string;
  
  // Task ID for todos count
  todosCount?: number;
  
  // Interactive
  isDragging?: boolean;
  isPending?: boolean;
  isEditing?: boolean;
  onEdit?: (e?: React.MouseEvent) => void;
  onDelete?: (e?: React.MouseEvent) => void;
  onTitleClick?: (e?: React.MouseEvent) => void;
  onTitleSave?: (title: string) => void;
  
  // Styling & behavior
  className?: string;
  fontSize?: 'small' | 'medium' | 'large';
  availableTags?: Array<{ id: string; name: string; color: string }>;
  jiraConfig?: { baseUrl?: string };
  tfsConfig?: { organizationUrl?: string };
}

const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
  ({
    variant = 'detailed',
    source = 'manual',
    title,
    description,
    tags = [],
    priority = 'medium',
    status,
    dueDate,
    completedAt,
    jiraKey,
    jiraProject,
    jiraType,
    tfsPullRequestId,
    tfsProject,
    tfsRepository,
    todosCount,
    isDragging = false,
    isPending = false,
    onEdit,
    onDelete,
    onTitleClick,
    onTitleSave,
    className,
    fontSize = 'medium',
    availableTags = [],
    jiraConfig,
    tfsConfig,
    children,
    ...props
  }, ref) => {
    
    // État local pour l'édition du titre
    const [isEditingTitle, setIsEditingTitle] = useState(false);
    const [editTitle, setEditTitle] = useState(title);
    const timeoutRef = useRef<NodeJS.Timeout | null>(null);

    // Mettre à jour le titre local quand la prop change
    useEffect(() => {
      setEditTitle(title);
    }, [title]);

    // Nettoyer le timeout au démontage
    useEffect(() => {
      const currentTimeout = timeoutRef.current;
      return () => {
        if (currentTimeout) {
          clearTimeout(currentTimeout);
        }
      };
    }, []);

    // Gestionnaires d'événements avec preventDefault/stopPropagation
    const handleEdit = (e?: React.MouseEvent) => {
      e?.preventDefault();
      e?.stopPropagation();
      onEdit?.(e);
    };

    const handleDelete = (e?: React.MouseEvent) => {
      e?.preventDefault();
      e?.stopPropagation();
      onDelete?.(e);
    };

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

    const handleTitleSave = async () => {
      const trimmedTitle = editTitle.trim();
      if (trimmedTitle && trimmedTitle !== title) {
        onTitleSave?.(trimmedTitle);
      }
      setIsEditingTitle(false);
    };

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

    const handleTitleKeyPress = (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        handleTitleSave();
      } else if (e.key === 'Escape') {
        e.preventDefault();
        handleTitleCancel();
      }
    };
    
    // Classes CSS pour les différentes tailles de police
    const getFontSizeClasses = () => {
      switch (fontSize) {
        case 'small':
          return {
            title: 'text-xs',
            description: 'text-xs',
            meta: 'text-xs',
          };
        case 'large':
          return {
            title: 'text-base',
            description: 'text-sm',
            meta: 'text-sm',
          };
        default: // medium
          return {
            title: 'text-sm',
            description: 'text-xs',
            meta: 'text-xs',
          };
      }
    };

    const fontClasses = getFontSizeClasses();

    // Styles spéciaux pour les sources
    const getSourceStyles = () => {
      if (source === 'jira') {
        return {
          backgroundColor: 'var(--jira-card, #dbeafe)',
          borderLeft: '3px solid var(--jira-border, #3b82f6)',
          color: 'var(--jira-text, #1e40af)',
        };
      }
      if (source === 'tfs') {
        return {
          backgroundColor: 'var(--tfs-card, #fed7aa)',
          borderLeft: '3px solid var(--tfs-border, #f59e0b)',
          color: 'var(--tfs-text, #92400e)',
        };
      }
      return {};
    };

    // Couleurs de priorité
    const getPriorityColor = (priority: string) => {
      const colors = {
        low: '#10b981', // green
        medium: '#f59e0b', // amber
        high: '#ef4444', // red
        urgent: '#dc2626', // red-600
      };
      return colors[priority as keyof typeof colors] || colors.medium;
    };

    // Extraire les emojis du titre
    const emojiRegex = /(?:[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}])(?:[\u{200D}][\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F900}-\u{1F9FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{FE0F}])*/gu;
    const titleEmojis = title.match(emojiRegex) || [];
    const titleWithoutEmojis = title.replace(emojiRegex, '').trim();

    // Si pas d'emoji dans le titre, utiliser l'emoji du premier tag
    let displayEmojis: string[] = titleEmojis;
    if (displayEmojis.length === 0 && tags && tags.length > 0) {
      const firstTag = availableTags.find((tag) => tag.name === tags[0]);
      if (firstTag) {
        const tagEmojis = firstTag.name.match(emojiRegex);
        if (tagEmojis && tagEmojis.length > 0) {
          displayEmojis = [tagEmojis[0]]; // Prendre seulement le premier emoji du tag
        }
      }
    }

    const sourceStyles = getSourceStyles();
    const priorityColor = getPriorityColor(priority);

    // Vue compacte
    if (variant === 'compact') {
      return (
        <Card
          ref={ref}
          className={cn(
            'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
            isDragging && 'opacity-50 rotate-3 scale-105',
            (status === 'done' || status === 'archived') && 'opacity-60',
            status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
            isPending && 'opacity-70 pointer-events-none',
            className
          )}
          {...props}
        >
          <div className="p-2" style={sourceStyles}>
            <div className="flex items-center gap-2">
              {/* Emojis */}
              {displayEmojis.length > 0 && (
                <div className="flex gap-1 flex-shrink-0">
                  {displayEmojis.slice(0, 1).map((emoji, index) => (
                    <span
                      key={index}
                      className="text-base opacity-90 font-emoji"
                      style={{
                        fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
                        fontVariantEmoji: 'normal',
                      }}
                    >
                      {emoji}
                    </span>
                  ))}
                </div>
              )}

              {/* Titre ou input d'édition */}
              {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-[var(--foreground)] font-mono ${fontClasses.title} font-medium leading-tight`}
                />
              ) : (
                <h4
                  className={`flex-1 font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
                  onClick={handleTitleClick}
                  title="Cliquer pour éditer"
                >
                  {titleWithoutEmojis}
                </h4>
              )}

              {/* Actions */}
              <div className="flex items-center gap-1 flex-shrink-0">
                {!isEditingTitle && onEdit && (
                  <button
                    onClick={handleEdit}
                    disabled={isPending}
                    className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
                    title="Modifier la tâche"
                  >
                    ✎
                  </button>
                )}

                {!isEditingTitle && onDelete && (
                  <button
                    onClick={handleDelete}
                    disabled={isPending}
                    className="opacity-0 group-hover:opacity-100 w-5 h-5 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
                    title="Supprimer la tâche"
                  >
                    ×
                  </button>
                )}

                {/* Indicateur de priorité */}
                <div
                  className="w-1.5 h-1.5 rounded-full"
                  style={{ backgroundColor: priorityColor }}
                />
              </div>
            </div>
          </div>
        </Card>
      );
    }

    // Vue détaillée
    return (
      <Card
        ref={ref}
        className={cn(
          'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
          isDragging && 'opacity-50 rotate-3 scale-105',
          (status === 'done' || status === 'archived') && 'opacity-60',
          status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
          isPending && 'opacity-70 pointer-events-none',
          className
        )}
        {...props}
      >
        <div className={`px-3 pt-3 ${(dueDate || (source && source !== 'manual') || completedAt || (todosCount !== undefined && todosCount > 0)) ? 'pb-2' : 'pb-0'}`} style={sourceStyles}>
          {/* Header */}
          <div className="flex items-start gap-2 mb-2">
            {/* Emojis */}
            {displayEmojis.length > 0 && (
              <div className="flex gap-1 flex-shrink-0">
                {displayEmojis.slice(0, 2).map((emoji, index) => (
                  <span
                    key={index}
                    className="text-sm opacity-80 font-emoji"
                    style={{
                      fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
                      fontVariantEmoji: 'normal',
                    }}
                  >
                    {emoji}
                  </span>
                ))}
              </div>
            )}

            {/* Titre ou input d'édition */}
            {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-[var(--foreground)] font-mono text-sm font-medium leading-tight"
              />
            ) : (
              <h4
                className={`flex-1 font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
                onClick={handleTitleClick}
                title="Cliquer pour éditer"
              >
                {titleWithoutEmojis}
              </h4>
            )}

            {/* Actions */}
            <div className="flex items-center gap-1 flex-shrink-0">
              {!isEditingTitle && onEdit && (
                <button
                  onClick={handleEdit}
                  disabled={isPending}
                  className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--primary)]/20 hover:bg-[var(--primary)]/30 border border-[var(--primary)]/30 hover:border-[var(--primary)]/50 flex items-center justify-center transition-all duration-200 text-[var(--primary)] hover:text-[var(--primary)] text-xs disabled:opacity-50"
                  title="Modifier la tâche"
                >
                  ✎
                </button>
              )}

              {!isEditingTitle && onDelete && (
                <button
                  onClick={handleDelete}
                  disabled={isPending}
                  className="opacity-0 group-hover:opacity-100 w-4 h-4 rounded-full bg-[var(--destructive)]/20 hover:bg-[var(--destructive)]/30 border border-[var(--destructive)]/30 hover:border-[var(--destructive)]/50 flex items-center justify-center transition-all duration-200 text-[var(--destructive)] hover:text-[var(--destructive)] text-xs disabled:opacity-50"
                  title="Supprimer la tâche"
                >
                  ×
                </button>
              )}

              {/* Indicateur de priorité */}
              <div
                className="w-2 h-2 rounded-full animate-pulse shadow-sm"
                style={{
                  backgroundColor: priorityColor,
                  boxShadow: `0 0 4px ${priorityColor}50`,
                }}
              />
            </div>
          </div>

          {/* Description */}
          {description && (
            <p className={`${fontClasses.description} text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono`}>
              {description}
            </p>
          )}

          {/* Tags avec couleurs personnalisées */}
          {tags.length > 0 && (
            <div className="mb-3">
              <div className="flex flex-wrap gap-1">
                {tags.slice(0, 3).map((tag, index) => {
                  const tagConfig = availableTags.find(t => t.name === tag);
                  return (
                    <Badge 
                      key={index} 
                      variant="outline" 
                      size="sm"
                      style={tagConfig?.color ? { 
                        borderColor: `${tagConfig.color}40`,
                        color: tagConfig.color 
                      } : undefined}
                    >
                      {tag}
                    </Badge>
                  );
                })}
                {tags.length > 3 && (
                  <Badge variant="outline" size="sm">
                    +{tags.length - 3}
                  </Badge>
                )}
              </div>
            </div>
          )}

          {/* Footer avec métadonnées */}
          {(dueDate || (source && source !== 'manual') || completedAt || (todosCount !== undefined && todosCount > 0)) && (
            <div className="pt-2 border-t border-[var(--border)]/50">
              <div className={`flex items-center justify-between ${fontClasses.meta}`}>
                {/* Date d'échéance */}
                {dueDate ? (
                  <span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
                    <span className="text-[var(--primary)]">⏰</span>
                    {formatDateForDisplay(dueDate, 'DISPLAY_MEDIUM')}
                  </span>
                ) : (
                  <div></div>
                )}

                {/* Badges source */}
                <div className="flex items-center gap-2">
                  {/* Jira */}
                  {source === 'jira' && jiraKey && (
                    jiraConfig?.baseUrl ? (
                      <a
                        href={`${jiraConfig.baseUrl}/browse/${jiraKey}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="hover:scale-105 transition-transform"
                      >
                        <Badge variant="outline" size="sm" className="hover:bg-blue-500/10 hover:border-blue-400/50 cursor-pointer">
                          {jiraKey}
                        </Badge>
                      </a>
                    ) : (
                      <Badge variant="outline" size="sm">
                        {jiraKey}
                      </Badge>
                    )
                  )}

                  {/* TFS */}
                  {source === 'tfs' && tfsPullRequestId && tfsProject && tfsRepository && (
                    tfsConfig?.organizationUrl ? (
                      <a
                        href={`${tfsConfig.organizationUrl}/${encodeURIComponent(tfsProject)}/_git/${tfsRepository}/pullrequest/${tfsPullRequestId}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="hover:scale-105 transition-transform"
                      >
                        <Badge variant="outline" size="sm" className="hover:bg-orange-500/10 hover:border-orange-400/50 cursor-pointer">
                          PR-{tfsPullRequestId}
                        </Badge>
                      </a>
                    ) : (
                      <Badge variant="outline" size="sm">
                        PR-{tfsPullRequestId}
                      </Badge>
                    )
                  )}

                  {/* Projets */}
                  {jiraProject && (
                    <Badge variant="outline" size="sm" className="text-blue-400 border-blue-400/30">
                      {jiraProject}
                    </Badge>
                  )}

                  {tfsRepository && (
                    <Badge variant="outline" size="sm" className="text-orange-400 border-orange-400/30">
                      {tfsRepository}
                    </Badge>
                  )}

                  {/* Type Jira */}
                  {jiraType && (
                    <Badge variant="outline" size="sm" className="text-purple-400 border-purple-400/30">
                      {jiraType}
                    </Badge>
                  )}

                  {/* Statut terminé avec date de résolution */}
                  {completedAt && (
                    <span className="text-emerald-400 font-mono font-bold flex items-center gap-1">
                      <span>✓</span>
                      <span>{formatDateForDisplay(completedAt, 'DISPLAY_SHORT')}</span>
                    </span>
                  )}

                  {/* Nombre de todos reliés */}
                  {todosCount !== undefined && todosCount > 0 && (
                    <Badge variant="outline" size="sm" className="text-cyan-400 border-cyan-400/30">
                      📝 {todosCount}
                    </Badge>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Contenu personnalisé */}
          {children}
        </div>
      </Card>
    );
  }
);

TaskCard.displayName = 'TaskCard';

export { TaskCard };