/**
 * StreakCounter Component
 * Displays user's learning streak with fire animation
 */

import React from 'react';
import { Flame, Calendar, Trophy } from 'lucide-react';
import type { StreakStats } from '../../types/education.types';

interface StreakCounterProps {
  streakStats: StreakStats;
  compact?: boolean;
}

const milestoneColors: Record<number, string> = {
  7: 'from-orange-400 to-red-500',
  30: 'from-purple-400 to-pink-500',
  100: 'from-yellow-400 to-orange-500',
  365: 'from-cyan-400 to-blue-500',
};

export const StreakCounter: React.FC<StreakCounterProps> = ({
  streakStats,
  compact = false,
}) => {
  const isActive = streakStats.currentStreak > 0;
  const nextMilestoneProgress =
    streakStats.daysToMilestone > 0
      ? ((streakStats.currentStreak / streakStats.nextMilestone) * 100)
      : 100;

  if (compact) {
    return (
      <div className="flex items-center gap-2 px-3 py-2 bg-gray-800 rounded-lg border border-gray-700">
        <Flame
          className={`w-5 h-5 ${
            isActive ? 'text-orange-400 animate-pulse' : 'text-gray-500'
          }`}
        />
        <span className={`font-bold ${isActive ? 'text-orange-400' : 'text-gray-500'}`}>
          {streakStats.currentStreak}
        </span>
        <span className="text-xs text-gray-400">días</span>
      </div>
    );
  }

  return (
    <div className="bg-gray-800 rounded-xl border border-gray-700 p-4">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <h3 className="font-semibold text-white flex items-center gap-2">
          <Flame className={`w-5 h-5 ${isActive ? 'text-orange-400' : 'text-gray-500'}`} />
          Racha de Aprendizaje
        </h3>
        {streakStats.longestStreak > 0 && (
          <span className="text-xs text-gray-400 flex items-center gap-1">
            <Trophy className="w-3 h-3 text-yellow-400" />
            Mejor: {streakStats.longestStreak} días
          </span>
        )}
      </div>

      {/* Main Counter */}
      <div className="text-center mb-4">
        <div
          className={`inline-flex items-center justify-center w-24 h-24 rounded-full ${
            isActive
              ? 'bg-gradient-to-br from-orange-500/20 to-red-500/20 border-2 border-orange-500/30'
              : 'bg-gray-700/50 border-2 border-gray-600'
          }`}
        >
          <div className="text-center">
            <Flame
              className={`w-8 h-8 mx-auto mb-1 ${
                isActive ? 'text-orange-400' : 'text-gray-500'
              } ${isActive && streakStats.currentStreak >= 7 ? 'animate-bounce' : ''}`}
            />
            <span
              className={`text-2xl font-bold ${
                isActive ? 'text-orange-400' : 'text-gray-500'
              }`}
            >
              {streakStats.currentStreak}
            </span>
          </div>
        </div>
        <p className="mt-2 text-sm text-gray-400">
          {isActive ? 'días consecutivos' : 'Sin racha activa'}
        </p>
      </div>

      {/* Next Milestone */}
      {isActive && streakStats.daysToMilestone > 0 && (
        <div className="mb-4">
          <div className="flex items-center justify-between text-xs text-gray-400 mb-1">
            <span>Próximo hito: {streakStats.nextMilestone} días</span>
            <span>{streakStats.daysToMilestone} días restantes</span>
          </div>
          <div className="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
            <div
              className={`h-full bg-gradient-to-r ${
                milestoneColors[streakStats.nextMilestone] || 'from-orange-400 to-red-500'
              } rounded-full transition-all duration-500`}
              style={{ width: `${nextMilestoneProgress}%` }}
            />
          </div>
        </div>
      )}

      {/* Last Activity */}
      {streakStats.lastActivity && (
        <div className="flex items-center justify-center gap-2 text-xs text-gray-500">
          <Calendar className="w-3 h-3" />
          Última actividad: {new Date(streakStats.lastActivity).toLocaleDateString()}
        </div>
      )}

      {/* Motivational Message */}
      {!isActive && (
        <p className="text-center text-sm text-gray-400 mt-2">
          ¡Completa una lección hoy para iniciar tu racha!
        </p>
      )}
    </div>
  );
};

export default StreakCounter;
