'use client';

import { Task } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { TaskCard } from '@/components/ui/TaskCard';
import { useTasksContext } from '@/contexts/TasksContext';
import Link from 'next/link';
import { Clipboard } from 'lucide-react';
import { Emoji } from '@/components/ui/Emoji';

interface RecentTasksProps {
  tasks: Task[];
  selectedSources?: string[];
  hiddenSources?: string[];
}

export function RecentTasks({
  tasks,
  selectedSources = [],
  hiddenSources = [],
}: RecentTasksProps) {
  const { tags: availableTags } = useTasksContext();

  // Filtrer les tâches selon les sources sélectionnées et masquées
  let filteredTasks = tasks;

  // Si on a des sources sélectionnées, ne garder que celles-ci
  if (selectedSources.length > 0) {
    filteredTasks = filteredTasks.filter((task) =>
      selectedSources.includes(task.source)
    );
  } else if (hiddenSources.length > 0) {
    // Sinon, retirer les sources masquées
    filteredTasks = filteredTasks.filter(
      (task) => !hiddenSources.includes(task.source)
    );
  }

  // Prendre les 5 tâches les plus pertinentes (créées récemment ou modifiées récemment)
  const recentTasks = filteredTasks
    .filter((task) => {
      // Ne pas afficher les tâches terminées depuis plus de 7 jours
      if (task.status === 'done' && task.completedAt) {
        const sevenDaysAgo = new Date();
        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
        return task.completedAt > sevenDaysAgo;
      }
      return task.status !== 'done';
    })
    .sort((a, b) => {
      // Prioriser les tâches non terminées et récentes
      if (a.status === 'done' && b.status !== 'done') return 1;
      if (b.status === 'done' && a.status !== 'done') return -1;

      // Sinon trier par date de modification
      return b.updatedAt.getTime() - a.updatedAt.getTime();
    })
    .slice(0, 5);

  return (
    <Card variant="glass" className="p-4 sm:p-6 mt-8">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <Emoji emoji="🕒" />
          <h3 className="text-lg font-semibold text-[var(--foreground)]">
            Tâches Récentes
          </h3>
        </div>
        <Link href="/kanban">
          <button className="text-sm text-[var(--primary)] hover:text-[var(--primary)]/80 hover:underline font-medium transition-colors">
            Voir toutes →
          </button>
        </Link>
      </div>

      {recentTasks.length === 0 ? (
        <div className="text-center py-6 sm:py-8 text-[var(--muted-foreground)]">
          <Clipboard className="w-8 h-8 sm:w-12 sm:h-12 mx-auto mb-3 opacity-50" />
          <p className="text-sm sm:text-base">Aucune tâche récente</p>
          <p className="text-xs sm:text-sm opacity-75">
            Créez une nouvelle tâche pour commencer
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
          {recentTasks.map((task) => (
            <TaskCard
              key={task.id}
              variant="detailed"
              title={task.title}
              primaryTagId={task.primaryTagId}
              availableTags={availableTags}
              description={task.description}
              status={task.status}
              priority={task.priority as 'low' | 'medium' | 'high'}
              tags={task.tags || []}
              dueDate={task.dueDate}
              completedAt={task.completedAt}
              source={task.source || 'manual'}
              jiraKey={task.jiraKey}
              tfsPullRequestId={task.tfsPullRequestId}
              onClick={() => {
                window.location.href = `/kanban?taskId=${task.id}`;
              }}
            />
          ))}
        </div>
      )}
    </Card>
  );
}
