towercontrol/src/components/deadline/CriticalDeadlinesCard.tsx

'use client';

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

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

export function CriticalDeadlinesCard({
  overdue,
  critical,
  warning,
  disableHover = false,
}: CriticalDeadlinesCardProps) {
  const { tags: availableTags } = useTasksContext();
  // 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: 'border-[var(--destructive)]/60',
      };
    } 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: 'border-[var(--accent)]/60',
      };
    } else {
      return {
        icon: '🟡',
        text: `Dans ${task.daysRemaining} jours`,
        style: 'border-[var(--yellow)]/60',
      };
    }
  };

  if (urgentTasks.length === 0) {
    return (
      <Card variant="glass" 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 mb-2"
            style={{ color: 'var(--green)' }}
          >
            Excellent !
          </h4>
          <p className="text-sm text-[var(--muted-foreground)]">
            Aucune tâche urgente ou critique
          </p>
        </div>
      </Card>
    );
  }

  return (
    <Card variant="glass" 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-track-transparent pr-2"
        style={{ scrollbarColor: 'var(--muted) transparent' }}
      >
        {urgentTasks.map((task) => {
          const urgencyStyle = getUrgencyStyle(task);

          const getCardClassName = (urgencyLevel: string) => {
            let baseClass = '';
            if (urgencyLevel === 'overdue') {
              baseClass =
                'border-[var(--destructive)]/60 shadow-[var(--destructive)]/20';
            } else if (urgencyLevel === 'critical') {
              baseClass = 'border-[var(--accent)]/60 shadow-[var(--accent)]/20';
            } else {
              baseClass = 'border-[var(--yellow)]/60 shadow-[var(--yellow)]/20';
            }

            if (disableHover) {
              baseClass +=
                ' hover:scale-100 hover:shadow-none hover:border-current hover:-translate-y-0';
            }

            return baseClass;
          };

          return (
            <TaskCard
              key={task.id}
              variant="detailed"
              source={task.source as 'manual' | 'jira' | 'tfs' | 'reminders'}
              title={`${urgencyStyle.icon} ${task.title}`}
              tags={task.tags}
              priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
              dueDate={task.dueDate}
              jiraKey={task.jiraKey}
              fontSize="small"
              availableTags={availableTags}
              className={getCardClassName(task.urgencyLevel)}
            />
          );
        })}
      </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="font-medium"
                style={{ color: 'var(--destructive)' }}
              >
                {overdue.length} en retard
              </span>
            )}
            {critical.length > 0 && (
              <span className="font-medium" style={{ color: 'var(--accent)' }}>
                {critical.length} critique{critical.length > 1 ? 's' : ''}
              </span>
            )}
            {warning.length > 0 && (
              <span className="font-medium" style={{ color: 'var(--yellow)' }}>
                {warning.length} attention
              </span>
            )}
          </div>
        </div>
      )}
    </Card>
  );
}