'use client';

import { DailyMetrics } from '@/services/analytics/metrics';
import { Emoji } from '@/components/ui/Emoji';

interface ProductivityInsightsProps {
  data: DailyMetrics[];
  className?: string;
}

export function ProductivityInsights({
  data,
  className,
}: ProductivityInsightsProps) {
  // Calculer les insights
  const totalCompleted = data.reduce((sum, day) => sum + day.completed, 0);
  const totalCreated = data.reduce((sum, day) => sum + day.newTasks, 0);
  // const averageCompletion = data.reduce((sum, day) => sum + day.completionRate, 0) / data.length;

  // Trouver le jour le plus productif
  const mostProductiveDay = data.reduce((best, day) =>
    day.completed > best.completed ? day : best
  );

  // Trouver le jour avec le plus de nouvelles tâches
  const mostCreativeDay = data.reduce((best, day) =>
    day.newTasks > best.newTasks ? day : best
  );

  // Analyser la tendance
  const firstHalf = data.slice(0, Math.ceil(data.length / 2));
  const secondHalf = data.slice(Math.ceil(data.length / 2));

  const firstHalfAvg =
    firstHalf.reduce((sum, day) => sum + day.completed, 0) / firstHalf.length;
  const secondHalfAvg =
    secondHalf.reduce((sum, day) => sum + day.completed, 0) / secondHalf.length;

  const trend =
    secondHalfAvg > firstHalfAvg
      ? 'up'
      : secondHalfAvg < firstHalfAvg
        ? 'down'
        : 'stable';

  // Calculer la consistance (écart-type faible = plus consistant)
  const avgCompleted = totalCompleted / data.length;
  const variance =
    data.reduce((sum, day) => {
      const diff = day.completed - avgCompleted;
      return sum + diff * diff;
    }, 0) / data.length;
  const standardDeviation = Math.sqrt(variance);
  const consistencyScore = Math.max(0, 100 - standardDeviation * 10); // Score sur 100

  // Ratio création/completion
  const creationRatio =
    totalCreated > 0 ? (totalCompleted / totalCreated) * 100 : 0;

  const getTrendIcon = () => {
    switch (trend) {
      case 'up':
        return {
          icon: <Emoji emoji="📈" />,
          color: 'text-green-600',
          label: 'En amélioration',
        };
      case 'down':
        return {
          icon: <Emoji emoji="📉" />,
          color: 'text-red-600',
          label: 'En baisse',
        };
      default:
        return {
          icon: <Emoji emoji="➡️" />,
          color: 'text-blue-600',
          label: 'Stable',
        };
    }
  };

  const getConsistencyLevel = () => {
    if (consistencyScore >= 80)
      return {
        label: 'Très régulier',
        color: 'text-green-600',
        icon: <Emoji emoji="🎯" />,
      };
    if (consistencyScore >= 60)
      return {
        label: 'Assez régulier',
        color: 'text-blue-600',
        icon: <Emoji emoji="📊" />,
      };
    if (consistencyScore >= 40)
      return {
        label: 'Variable',
        color: 'text-yellow-600',
        icon: <Emoji emoji="📊" />,
      };
    return {
      label: 'Très variable',
      color: 'text-red-600',
      icon: <Emoji emoji="📊" />,
    };
  };

  const getRatioStatus = () => {
    if (creationRatio >= 100)
      return {
        label: 'Équilibré+',
        color: 'text-green-600',
        icon: <Emoji emoji="⚖️" />,
      };
    if (creationRatio >= 80)
      return {
        label: 'Bien équilibré',
        color: 'text-blue-600',
        icon: <Emoji emoji="⚖️" />,
      };
    if (creationRatio >= 60)
      return {
        label: 'Légèrement en retard',
        color: 'text-yellow-600',
        icon: <Emoji emoji="⚖️" />,
      };
    return {
      label: 'Accumulation',
      color: 'text-red-600',
      icon: <Emoji emoji="⚖️" />,
    };
  };

  const trendInfo = getTrendIcon();
  const consistencyInfo = getConsistencyLevel();
  const ratioInfo = getRatioStatus();

  return (
    <div className={className}>
      <div className="space-y-4">
        {/* Insights principaux */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Jour le plus productif */}
          <div className="outline-card-green p-4">
            <div className="flex items-center justify-between mb-2">
              <h4 className="font-medium">
                <Emoji emoji="🏆" /> Jour champion
              </h4>
              <span className="text-2xl font-bold">
                {mostProductiveDay.completed}
              </span>
            </div>
            <p className="text-sm">
              {mostProductiveDay.dayName} - {mostProductiveDay.completed} tâches
              terminées
            </p>
            <p className="text-xs opacity-75 mt-1">
              Taux: {mostProductiveDay.completionRate.toFixed(1)}%
            </p>
          </div>

          {/* Jour le plus créatif */}
          <div className="outline-card-blue p-4">
            <div className="flex items-center justify-between mb-2">
              <h4 className="font-medium">
                <Emoji emoji="💡" /> Jour créatif
              </h4>
              <span className="text-2xl font-bold">
                {mostCreativeDay.newTasks}
              </span>
            </div>
            <p className="text-sm">
              {mostCreativeDay.dayName} - {mostCreativeDay.newTasks} nouvelles
              tâches
            </p>
            <p className="text-xs opacity-75 mt-1">
              {mostCreativeDay.dayName === mostProductiveDay.dayName
                ? 'Également jour le plus productif!'
                : 'Journée de planification'}
            </p>
          </div>
        </div>

        {/* Analyses comportementales */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* Tendance */}
          <div className="p-4 bg-[var(--card)] border border-[var(--border)] rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-2xl">{trendInfo.icon}</span>
              <h4 className="font-medium text-[var(--foreground)]">Tendance</h4>
            </div>
            <p className={`text-sm font-medium ${trendInfo.color}`}>
              {trendInfo.label}
            </p>
            <p className="text-xs text-[var(--muted-foreground)] mt-1">
              {secondHalfAvg > firstHalfAvg
                ? `+${(((secondHalfAvg - firstHalfAvg) / firstHalfAvg) * 100).toFixed(1)}%`
                : `${(((secondHalfAvg - firstHalfAvg) / firstHalfAvg) * 100).toFixed(1)}%`}
            </p>
          </div>

          {/* Consistance */}
          <div className="p-4 bg-[var(--card)] border border-[var(--border)] rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-2xl">{consistencyInfo.icon}</span>
              <h4 className="font-medium text-[var(--foreground)]">
                Régularité
              </h4>
            </div>
            <p className={`text-sm font-medium ${consistencyInfo.color}`}>
              {consistencyInfo.label}
            </p>
            <p className="text-xs text-[var(--muted-foreground)] mt-1">
              Score: {consistencyScore.toFixed(0)}/100
            </p>
          </div>

          {/* Ratio Création/Completion */}
          <div className="p-4 bg-[var(--card)] border border-[var(--border)] rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-2xl">{ratioInfo.icon}</span>
              <h4 className="font-medium text-[var(--foreground)]">
                Équilibre
              </h4>
            </div>
            <p className={`text-sm font-medium ${ratioInfo.color}`}>
              {ratioInfo.label}
            </p>
            <p className="text-xs text-[var(--muted-foreground)] mt-1">
              {creationRatio.toFixed(0)}% de completion
            </p>
          </div>
        </div>

        {/* Recommandations */}
        <div className="outline-card-yellow p-4">
          <h4 className="font-medium mb-2 flex items-center gap-2">
            <Emoji emoji="💡" /> Recommandations
          </h4>
          <div className="space-y-1 text-sm">
            {trend === 'down' && (
              <p>• Essayez de retrouver votre rythme du début de semaine</p>
            )}
            {consistencyScore < 60 && (
              <p>• Essayez de maintenir un rythme plus régulier</p>
            )}
            {creationRatio < 80 && (
              <p>• Concentrez-vous plus sur terminer les tâches existantes</p>
            )}
            {creationRatio > 120 && (
              <p>
                • Excellent rythme! Peut-être ralentir la création de nouvelles
                tâches
              </p>
            )}
            {mostProductiveDay.dayName === mostCreativeDay.dayName && (
              <p>
                • Excellente synergie création/exécution le{' '}
                {mostProductiveDay.dayName}
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
