'use client';

import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { WeeklyMetrics } from '@/hooks/use-metrics';
import { Emoji } from '@/components/ui/Emoji';

interface MetricsOverviewProps {
  metrics: WeeklyMetrics;
}

export function MetricsOverview({ metrics }: MetricsOverviewProps) {
  const getTrendIcon = (trend: string) => {
    switch (trend) {
      case 'improving':
        return <Emoji emoji="📈" />;
      case 'declining':
        return <Emoji emoji="📉" />;
      case 'stable':
        return <Emoji emoji="➡️" />;
      default:
        return <Emoji emoji="📊" />;
    }
  };

  const getPatternIcon = (pattern: string) => {
    switch (pattern) {
      case 'consistent':
        return <Emoji emoji="🎯" />;
      case 'variable':
        return <Emoji emoji="📊" />;
      case 'weekend-heavy':
        return <Emoji emoji="📅" />;
      default:
        return <Emoji emoji="📋" />;
    }
  };

  return (
    <Card>
      <CardHeader>
        <h3 className="text-lg font-semibold">
          <Emoji emoji="🎯" /> Vue d&apos;ensemble
        </h3>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
          <div className="outline-metric-green">
            <div className="text-2xl font-bold">
              {metrics.summary.totalTasksCompleted}
            </div>
            <div className="text-sm">Terminées</div>
          </div>

          <div className="outline-metric-blue">
            <div className="text-2xl font-bold">
              {metrics.summary.totalTasksCreated}
            </div>
            <div className="text-sm">Créées</div>
          </div>

          <div className="outline-metric-purple">
            <div className="text-2xl font-bold">
              {metrics.summary.averageCompletionRate.toFixed(1)}%
            </div>
            <div className="text-sm">Taux moyen</div>
          </div>

          <div className="outline-metric-orange">
            <div className="text-2xl font-bold">
              {getTrendIcon(metrics.summary.trendsAnalysis.completionTrend)}
            </div>
            <div className="text-sm capitalize">
              {metrics.summary.trendsAnalysis.completionTrend}
            </div>
          </div>

          <div className="outline-metric-gray">
            <div className="text-2xl font-bold">
              {getPatternIcon(
                metrics.summary.trendsAnalysis.productivityPattern
              )}
            </div>
            <div className="text-sm">
              {metrics.summary.trendsAnalysis.productivityPattern ===
              'consistent'
                ? 'Régulier'
                : metrics.summary.trendsAnalysis.productivityPattern ===
                    'variable'
                  ? 'Variable'
                  : 'Weekend+'}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
