'use client';

import { DeadlineTask } from '@/services/analytics/deadline-analytics';
import { Card } from '@/components/ui/Card';

interface CriticalDeadlinesCardProps {
  overdue: DeadlineTask[];
  critical: DeadlineTask[];
  warning: DeadlineTask[];
}

export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDeadlinesCardProps) {
  // Combiner toutes les tâches urgentes et trier par urgence
  const urgentTasks = [...overdue, ...critical, ...warning]
    .sort((a, b) => {
      // En retard d'abord, puis critique, puis attention
      const urgencyOrder: Record<string, number> = { 'overdue': 0, 'critical': 1, 'warning': 2 };
      if (urgencyOrder[a.urgencyLevel] !== urgencyOrder[b.urgencyLevel]) {
        return urgencyOrder[a.urgencyLevel] - urgencyOrder[b.urgencyLevel];
      }
      // Si même urgence, trier par jours restants
      return a.daysRemaining - b.daysRemaining;
    });

  const getUrgencyStyle = (task: DeadlineTask) => {
    if (task.urgencyLevel === 'overdue') {
      return {
        icon: '🔴',
        text: task.daysRemaining === -1 ? 'En retard de 1 jour' : `En retard de ${Math.abs(task.daysRemaining)} jours`,
        style: 'text-red-700 bg-red-50/40 border-red-200/60 dark:bg-red-950/20 dark:border-red-800/40 dark:text-red-300'
      };
    } else if (task.urgencyLevel === 'critical') {
      return {
        icon: '🟠',
        text: task.daysRemaining === 0 ? 'Échéance aujourd\'hui' : 
              task.daysRemaining === 1 ? 'Échéance demain' :
              `Dans ${task.daysRemaining} jours`,
        style: 'text-orange-700 bg-orange-50/40 border-orange-200/60 dark:bg-orange-950/20 dark:border-orange-800/40 dark:text-orange-300'
      };
    } else {
      return {
        icon: '🟡',
        text: `Dans ${task.daysRemaining} jours`,
        style: 'text-yellow-700 bg-yellow-50/40 border-yellow-200/60 dark:bg-yellow-950/20 dark:border-yellow-800/40 dark:text-yellow-300'
      };
    }
  };

  const getPriorityIcon = (priority: string) => {
    switch (priority) {
      case 'urgent': return '🔥';
      case 'high': return '⬆️';
      case 'medium': return '➡️';
      case 'low': return '⬇️';
      default: return '❓';
    }
  };

  const getSourceIcon = (source: string) => {
    switch (source.toLowerCase()) {
      case 'jira': return '🔵';
      case 'tfs': return '🟣';
      case 'manual': return '✏️';
      default: return '📋';
    }
  };

  if (urgentTasks.length === 0) {
    return (
      <Card className="p-6 hover:shadow-lg transition-shadow">
        <h3 className="text-lg font-semibold mb-4">Tâches Urgentes</h3>
        <div className="text-center py-8">
          <div className="text-4xl mb-2">🎉</div>
          <h4 className="text-lg font-medium text-green-600 dark:text-green-400 mb-2">Excellent !</h4>
          <p className="text-sm text-[var(--muted-foreground)]">
            Aucune tâche urgente ou critique
          </p>
        </div>
      </Card>
    );
  }

  return (
    <Card className="p-6 hover:shadow-lg transition-shadow">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Tâches Urgentes</h3>
        <div className="text-sm text-[var(--muted-foreground)]">
          {urgentTasks.length} tâche{urgentTasks.length > 1 ? 's' : ''}
        </div>
      </div>

      <div className="space-y-2 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent pr-2">
        {urgentTasks.map((task) => {
          const urgencyStyle = getUrgencyStyle(task);
          
          const getStyleClass = (urgencyLevel: string) => {
            if (urgencyLevel === 'overdue') {
              return 'outline-card-red';
            } else if (urgencyLevel === 'critical') {
              return 'outline-card-orange';
            } else {
              return 'outline-card-yellow';
            }
          };

          return (
            <div 
              key={task.id} 
              className={getStyleClass(task.urgencyLevel)}
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-sm">{urgencyStyle.icon}</span>
                    <span className="text-sm">{getSourceIcon(task.source)}</span>
                    <span className="text-sm">{getPriorityIcon(task.priority)}</span>
                    {task.jiraKey && (
                      <span className="text-xs px-1.5 py-0.5 bg-[var(--border)] rounded font-mono">
                        {task.jiraKey}
                      </span>
                    )}
                  </div>
                  
                  <h4 className="font-medium text-sm leading-tight mb-0.5 truncate" title={task.title}>
                    {task.title}
                  </h4>
                  
                  <div className="text-xs opacity-75">
                    {urgencyStyle.text}
                  </div>
                  
                  {task.tags.length > 0 && (
                    <div className="flex gap-1 mt-1.5 flex-wrap">
                      {task.tags.slice(0, 2).map((tag, index) => (
                        <span 
                          key={index}
                          className="text-xs px-1.5 py-0.5 bg-[var(--accent)]/60 text-[var(--accent-foreground)] rounded"
                        >
                          {tag}
                        </span>
                      ))}
                      {task.tags.length > 2 && (
                        <span className="text-xs text-[var(--muted-foreground)] opacity-70">
                          +{task.tags.length - 2}
                        </span>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {urgentTasks.length > 0 && (
        <div className="pt-3 border-t border-[var(--border)] mt-4">
          <div className="flex flex-wrap gap-3 text-xs text-[var(--muted-foreground)] justify-center">
            {overdue.length > 0 && (
              <span className="text-red-600/80 dark:text-red-400/80 font-medium">
                {overdue.length} en retard
              </span>
            )}
            {critical.length > 0 && (
              <span className="text-orange-600/80 dark:text-orange-400/80 font-medium">
                {critical.length} critique{critical.length > 1 ? 's' : ''}
              </span>
            )}
            {warning.length > 0 && (
              <span className="text-yellow-600/80 dark:text-yellow-400/80 font-medium">
                {warning.length} attention
              </span>
            )}
          </div>
        </div>
      )}
    </Card>
  );
}