'use client';

import React from 'react';
import { Task } from '@/types/types';
import { TaskStatus } from '@/types/types';
import { getTaskStatusColor, shouldShowDeadlineWarning, getTaskAppreciation, calculateTaskDuration } from '@/utils/taskUtils';
import { differenceInDays } from 'date-fns';
import { Button } from '@/components/ui/button';
import { Pencil, Trash2, Eye } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { Badge } from '@/components/ui/badge';

interface TaskListProps {
  tasks: Task[];
  onEdit: (task: Task) => void;
  onDelete: (taskId: number) => void;
  onComplete: (taskId: number) => void;
}

export const TaskList: React.FC<TaskListProps> = ({ tasks, onEdit, onDelete, onComplete }) => {
  const router = useRouter();

  const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case 'PENDING':
        return "secondary"; // Bleu ciel (par défaut pour secondary)
      case 'IN_PROGRESS':
        return "default"; // Jaune (on peut le personnaliser avec bg-yellow-500 si besoin)
      case 'COMPLETED':
        return "default"; // Vert clair
      case 'OVERDUE':
        return "destructive"; // Rouge vif
      default:
        return "secondary";
    }
  };

  const getStatusBadgeColorClass = (status: string) => {
    switch (status) {
      case 'PENDING':
        return "bg-blue-100 text-blue-800";
      case 'IN_PROGRESS':
        return "bg-yellow-100 text-yellow-800";
      case 'COMPLETED':
        return "bg-green-100 text-green-800";
      case 'OVERDUE':
        return "bg-red-100 text-red-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  const getTaskDuration = (task: Task): string => {
    // Si la tâche est terminée, calculer la durée entre début et terminaison
    if (task.status === 'COMPLETED' && task.completedAt && task.startDate) {
      const { duration } = calculateTaskDuration(task.startDate, task.completedAt, task.dueDate);
      return duration;
    }
    
    // Si la tâche n'est pas terminée, afficher la durée depuis le début jusqu'à maintenant
    if (task.startDate) {
      const start = new Date(task.startDate);
      const end = new Date(); // Date actuelle
      const diffTime = Math.abs(end.getTime() - start.getTime());
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      return `${diffDays} jour${diffDays > 1 ? 's' : ''}`;
    }
    
    return "Indéterminée";
  };

  return (
    <div className="overflow-x-auto rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900">
      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
        <thead className="bg-gray-50/80 dark:bg-gray-800/80 backdrop-blur-sm sticky top-0 z-10">
          <tr>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Titre
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Statut
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Date de début
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Échéance
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Date de terminaison
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Durée
            </th>
            <th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Appréciation
            </th>
            <th className="px-6 py-4 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Actions
            </th>
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
          {tasks.map((task) => {
            const statusColor = getTaskStatusColor(task.status);
            const showWarning = shouldShowDeadlineWarning(task.dueDate);
            const duration = getTaskDuration(task);
            const { appreciation, appreciationColor } = getTaskAppreciation(task);

            return (
              <tr key={task.id} className={`transition-colors duration-200 ${showWarning ? 'bg-red-50/50 dark:bg-red-900/10 hover:bg-red-50 dark:hover:bg-red-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}`}>
                <td className="px-6 py-4">
                  <div className="text-sm font-semibold text-gray-900 dark:text-gray-100">{task.title}</div>
                  <div className="text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate">{task.description}</div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-3 py-1 inline-flex text-xs leading-5 font-bold rounded-full border ${statusColor} dark:opacity-90`}>
                    {task.status}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                  {task.startDate ? new Date(task.startDate).toLocaleDateString() : '-'}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="text-sm text-gray-600 dark:text-gray-300 font-medium">
                    {task.dueDate ? new Date(task.dueDate).toLocaleDateString() : '-'}
                  </div>
                  {showWarning && (
                    <div className="text-xs text-red-600 dark:text-red-400 font-bold mt-1 flex items-center">
                      <span className="mr-1">🚨</span> Plus que 1 jour !
                    </div>
                  )}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                  {task.completedAt ? new Date(task.completedAt).toLocaleDateString() : '-'}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">
                  {duration}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className={`text-sm font-medium ${appreciationColor}`}>
                    {appreciation}
                  </div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <div className="flex justify-end space-x-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400 transition-colors"
                      onClick={() => router.push(`/tasks/${task.id}`)}
                    >
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/30 dark:hover:text-blue-400 transition-colors"
                      onClick={() => onEdit(task)}
                    >
                      <Pencil className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/30 dark:hover:text-red-400 transition-colors"
                      onClick={() => onDelete(task.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                    {task.status !== 'COMPLETED' && task.status !== 'OVERDUE' && (
                      <Button
                        variant="outline"
                        size="sm"
                        className="ml-2 bg-green-50 text-green-700 border-green-200 hover:bg-green-100 hover:text-green-800 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800/50 dark:hover:bg-green-900/40"
                        onClick={() => onComplete(task.id)}
                      >
                        Terminer
                      </Button>
                    )}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};