'use client';

import { Task } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { TagDisplay } from '@/components/ui/TagDisplay';
import { Badge } from '@/components/ui/Badge';
import { useTasksContext } from '@/contexts/TasksContext';
import { getPriorityConfig, getPriorityColorHex, getStatusBadgeClasses, getStatusLabel } from '@/lib/status-config';
import { TaskPriority } from '@/lib/types';
import Link from 'next/link';

interface RecentTasksProps {
  tasks: Task[];
}

export function RecentTasks({ tasks }: RecentTasksProps) {
  const { tags: availableTags } = useTasksContext();
  
  // Prendre les 5 tâches les plus récentes (créées ou modifiées)
  const recentTasks = tasks
    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
    .slice(0, 5);

  // Fonctions simplifiées utilisant la configuration centralisée

  const getPriorityStyle = (priority: string) => {
    try {
      const config = getPriorityConfig(priority as TaskPriority);
      const hexColor = getPriorityColorHex(config.color);
      return { color: hexColor };
    } catch {
      return { color: '#6b7280' }; // gray-500 par défaut
    }
  };

  return (
    <Card className="p-6 mt-8">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Tâches Récentes</h3>
        <Link href="/kanban">
          <button className="text-sm text-[var(--primary)] hover:underline">
            Voir toutes
          </button>
        </Link>
      </div>
      
      {recentTasks.length === 0 ? (
        <div className="text-center py-8 text-[var(--muted-foreground)]">
          <svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          <p>Aucune tâche disponible</p>
          <p className="text-sm">Créez votre première tâche pour commencer</p>
        </div>
      ) : (
        <div className="space-y-3">
          {recentTasks.map((task) => (
            <div
              key={task.id}
              className="p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <h4 className="font-medium text-sm truncate">{task.title}</h4>
                    {task.source === 'jira' && (
                      <Badge variant="outline" className="text-xs">
                        Jira
                      </Badge>
                    )}
                  </div>
                  
                  {task.description && (
                    <p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-1">
                      {task.description}
                    </p>
                  )}
                  
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge className={`text-xs ${getStatusBadgeClasses(task.status)}`}>
                      {getStatusLabel(task.status)}
                    </Badge>
                    
                    {task.priority && (
                      <span 
                        className="text-xs font-medium"
                        style={getPriorityStyle(task.priority)}
                      >
                        {(() => {
                          try {
                            return getPriorityConfig(task.priority as TaskPriority).label;
                          } catch {
                            return task.priority;
                          }
                        })()}
                      </span>
                    )}
                    
                    {task.tags && task.tags.length > 0 && (
                      <div className="flex gap-1">
                        <TagDisplay 
                          tags={task.tags.slice(0, 2)} 
                          availableTags={availableTags}
                          size="sm" 
                          maxTags={2}
                          showColors={true}
                        />
                        {task.tags.length > 2 && (
                          <span className="text-xs text-[var(--muted-foreground)]">
                            +{task.tags.length - 2}
                          </span>
                        )}
                      </div>
                    )}
                  </div>
                </div>
                
                <div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
                  {new Date(task.updatedAt).toLocaleDateString('fr-FR', {
                    day: 'numeric',
                    month: 'short'
                  })}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}