'use client';

import { TaskStats } from '@/lib/types';
import { Card } from '@/components/ui/Card';

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: '📋',
      color: 'bg-blue-500',
      textColor: 'text-blue-600'
    },
    {
      title: 'À Faire',
      value: stats.todo,
      icon: '⏳',
      color: 'bg-gray-500',
      textColor: 'text-gray-600'
    },
    {
      title: 'En Cours',
      value: stats.inProgress,
      icon: '🔄',
      color: 'bg-orange-500',
      textColor: 'text-orange-600'
    },
    {
      title: 'Terminées',
      value: stats.completed,
      icon: '✅',
      color: 'bg-green-500',
      textColor: 'text-green-600'
    }
  ];

  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="text-green-600 font-bold">{completionRate}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-green-500 h-2 rounded-full transition-all duration-300"
              style={{ width: `${completionRate}%` }}
            />
          </div>
          
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">En Cours</span>
            <span className="text-orange-600 font-bold">{inProgressRate}%</span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div 
              className="bg-orange-500 h-2 rounded-full transition-all duration-300"
              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 bg-green-500 rounded-full"></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 bg-orange-500 rounded-full"></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 bg-gray-500 rounded-full"></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>
  );
}