'use client';

import { TaskStats } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { getDashboardStatColors } from '@/lib/status-config';

interface DashboardStatsProps {
  stats: TaskStats;
}

export function DashboardStats({ stats }: DashboardStatsProps) {
  const totalTasks = stats.total;
  const completionRate = totalTasks > 0 ? Math.round((stats.completed / totalTasks) * 100) : 0;
  const inProgressRate = totalTasks > 0 ? Math.round((stats.inProgress / totalTasks) * 100) : 0;

  const statCards = [
    {
      title: 'Total Tâches',
      value: stats.total,
      icon: '📋',
      type: 'total' as const,
      ...getDashboardStatColors('total')
    },
    {
      title: 'À Faire',
      value: stats.todo,
      icon: '⏳',
      type: 'todo' as const,
      ...getDashboardStatColors('todo')
    },
    {
      title: 'En Cours',
      value: stats.inProgress,
      icon: '🔄',
      type: 'inProgress' as const,
      ...getDashboardStatColors('inProgress')
    },
    {
      title: 'Terminées',
      value: stats.completed,
      icon: '✅',
      type: 'completed' as const,
      ...getDashboardStatColors('completed')
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      {statCards.map((stat, index) => (
        <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
                {stat.title}
              </p>
              <p className={`text-3xl font-bold ${stat.textColor}`}>
                {stat.value}
              </p>
            </div>
            <div className="text-3xl">
              {stat.icon}
            </div>
          </div>
        </Card>
      ))}
      
      {/* Cartes de pourcentage */}
      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
        <h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Terminées</span>
            <span className={`font-bold ${getDashboardStatColors('completed').textColor}`}>{completionRate}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('completed').progressColor}`}
              style={{ width: `${completionRate}%` }}
            />
          </div>
          
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">En Cours</span>
            <span className={`font-bold ${getDashboardStatColors('inProgress').textColor}`}>{inProgressRate}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className={`h-2 rounded-full transition-all duration-300 ${getDashboardStatColors('inProgress').progressColor}`}
              style={{ width: `${inProgressRate}%` }}
            />
          </div>
        </div>
      </Card>
      
      {/* Insights rapides */}
      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
        <h3 className="text-lg font-semibold mb-4">Aperçu Rapide</h3>
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <span className={`w-2 h-2 rounded-full ${getDashboardStatColors('completed').dotColor}`}></span>
            <span className="text-sm">
              {stats.completed} tâches terminées sur {totalTasks}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <span className={`w-2 h-2 rounded-full ${getDashboardStatColors('inProgress').dotColor}`}></span>
            <span className="text-sm">
              {stats.inProgress} tâches en cours de traitement
            </span>
          </div>
          <div className="flex items-center gap-2">
            <span className={`w-2 h-2 rounded-full ${getDashboardStatColors('todo').dotColor}`}></span>
            <span className="text-sm">
              {stats.todo} tâches en attente
            </span>
          </div>
          {totalTasks > 0 && (
            <div className="pt-2 border-t border-[var(--border)]">
              <span className="text-sm font-medium text-[var(--muted-foreground)]">
                Productivité: {completionRate}% de completion
              </span>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}