'use client';

import { Card } from '@/components/ui/Card';

interface WeeklyStats {
  thisWeek: number;
  lastWeek: number;
  change: number;
  changePercent: number;
}

interface WeeklyStatsCardProps {
  stats: WeeklyStats;
  title?: string;
}

export function WeeklyStatsCard({ stats, title = "Performance Hebdomadaire" }: WeeklyStatsCardProps) {
  const isPositive = stats.change >= 0;
  const changeColor = isPositive ? 'text-[var(--success)]' : 'text-[var(--destructive)]';
  const changeIcon = isPositive ? '↗️' : '↘️';
  const changeBg = isPositive 
    ? 'bg-[var(--success)]/10 border border-[var(--success)]/20' 
    : 'bg-[var(--destructive)]/10 border border-[var(--destructive)]/20';

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold mb-6">{title}</h3>
      
      <div className="grid grid-cols-2 gap-6">
        {/* Cette semaine */}
        <div className="text-center">
          <div className="text-3xl font-bold text-[var(--primary)] mb-2">
            {stats.thisWeek}
          </div>
          <div className="text-sm text-[var(--muted-foreground)]">
            Cette semaine
          </div>
        </div>
        
        {/* Semaine dernière */}
        <div className="text-center">
          <div className="text-3xl font-bold text-[var(--muted-foreground)] mb-2">
            {stats.lastWeek}
          </div>
          <div className="text-sm text-[var(--muted-foreground)]">
            Semaine dernière
          </div>
        </div>
      </div>
      
      {/* Changement */}
      <div className="mt-6 pt-4 border-t border-[var(--border)]">
        <div className={`flex items-center justify-center gap-2 p-3 rounded-lg ${changeBg}`}>
          <span className="text-lg">{changeIcon}</span>
          <div className="text-center">
            <div className={`font-bold ${changeColor}`}>
              {isPositive ? '+' : ''}{stats.change} tâches
            </div>
            <div className={`text-sm ${changeColor}`}>
              {isPositive ? '+' : ''}{stats.changePercent}% vs semaine dernière
            </div>
          </div>
        </div>
      </div>
      
      {/* Insight */}
      <div className="mt-4 text-center">
        <p className="text-xs text-[var(--muted-foreground)]">
          {stats.changePercent > 20 ? 'Excellente progression ! 🚀' :
           stats.changePercent > 0 ? 'Bonne progression 👍' :
           stats.changePercent === 0 ? 'Performance stable 📊' :
           stats.changePercent > -20 ? 'Légère baisse, restez motivé 💪' :
           'Focus sur la productivité cette semaine 🎯'}
        </p>
      </div>
    </Card>
  );
}