'use client';

import { Task } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { TaskCard } from '@/components/ui';
import { useTasksContext } from '@/contexts/TasksContext';
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) => b.updatedAt.getTime() - a.updatedAt.getTime())
    .slice(0, 5);


  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="relative group">
              <TaskCard
                variant="detailed"
                source={task.source || 'manual'}
                title={task.title}
                description={task.description}
                status={task.status}
                priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
                tags={task.tags || []}
                dueDate={task.dueDate}
                completedAt={task.completedAt}
                jiraKey={task.jiraKey}
                jiraProject={task.jiraProject}
                jiraType={task.jiraType}
                tfsPullRequestId={task.tfsPullRequestId}
                tfsProject={task.tfsProject}
                tfsRepository={task.tfsRepository}
                availableTags={availableTags}
                fontSize="small"
                onTitleClick={() => {
                  // Navigation vers le kanban avec la tâche sélectionnée
                  window.location.href = `/kanban?taskId=${task.id}`;
                }}
              />
              
              {/* Overlay avec lien vers le kanban */}
              <Link 
                href={`/kanban?taskId=${task.id}`}
                className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-[var(--primary)]/5 rounded-lg flex items-center justify-center"
                title="Ouvrir dans le Kanban"
              >
                <div className="bg-[var(--primary)]/20 backdrop-blur-sm rounded-full p-2 border border-[var(--primary)]/30">
                  <svg className="w-4 h-4 text-[var(--primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                </div>
              </Link>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}