'use client';

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

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 variant="glass" 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">
            <Emoji emoji={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 ? (
            <>
              <Emoji emoji="🚀" /> Excellente progression !
            </>
          ) : stats.changePercent > 0 ? (
            <>
              <Emoji emoji="👍" /> Bonne progression
            </>
          ) : stats.changePercent === 0 ? (
            <>
              <Emoji emoji="📊" /> Performance stable
            </>
          ) : stats.changePercent > -20 ? (
            <>
              <Emoji emoji="💪" /> Légère baisse, restez motivé
            </>
          ) : (
            <>
              <Emoji emoji="🎯" /> Focus sur la productivité cette semaine
            </>
          )}
        </p>
      </div>
    </Card>
  );
}
