import React, { useMemo } from 'react';
import { Medal, CheckCircle2, History } from 'lucide-react';
import { useCTF } from './CTFContext';
import { calculateChallengeValue, getFirstBloodBonusFactor } from './services/scoring';

export const Log: React.FC = () => {
  const { state } = useCTF();

  const sortedSolves = useMemo(() => {
    return [...state.solves].sort((a, b) => b.timestamp - a.timestamp);
  }, [state.solves]);

  return (
    <div className="w-full px-6 py-12 max-w-5xl mx-auto">
      <div className="flex items-center gap-4 mb-8">
        <History size={32} className="text-[#bf00ff]" />
        <h2 className="text-4xl font-black italic text-white uppercase tracking-tighter">Event Log</h2>
      </div>
      <div className="flex flex-col gap-2">
        {sortedSolves.length === 0 ? (
          <div className="p-8 hxp-border border-[#333] text-center text-slate-500 font-bold uppercase tracking-widest bg-white/5">
            No activities recorded yet.
          </div>
        ) : (
          sortedSolves.map((solve, idx) => {
            const team = state.teams.find(t => t.id === solve.teamId);
            const challenge = state.challenges.find(c => c.id === solve.challengeId);
            
            if (!team || !challenge) return null;

            const challengeSolves = state.solves
              .filter(s => s.challengeId === solve.challengeId)
              .sort((a, b) => a.timestamp - b.timestamp);
            
            const rank = challengeSolves.findIndex(s => s.teamId === solve.teamId);
            const bonusFactor = getFirstBloodBonusFactor(rank);
            const basePoints = calculateChallengeValue(
              challenge.initialPoints,
              challenge.minimumPoints || 0,
              challenge.decaySolves || 1,
              challengeSolves.length
            );
            const bonus = Math.floor(challenge.initialPoints * bonusFactor);
            const pointsGained = basePoints + bonus;

            const getRankIcon = (rank: number) => {
              if (rank === 0) return <Medal size={18} className="text-[#ffaa00]" />; // Gold
              if (rank === 1) return <Medal size={18} className="text-[#c0c0c0]" />; // Silver
              if (rank === 2) return <Medal size={18} className="text-[#cd7f32]" />; // Bronze
              return <CheckCircle2 size={18} className="text-[#00ff00]" />; // Checkmark
            };

            const difficultyColor = 
              challenge.difficulty === 'Low' ? 'text-[#00ff00]' : 
              challenge.difficulty === 'Medium' ? 'text-[#ffaa00]' : 
              'text-[#ff0000]';

            const dateStr = new Date(solve.timestamp).toLocaleString();

            return (
              <div key={`${solve.teamId}-${solve.challengeId}-${idx}`} className="p-4 hxp-border border-[#333] bg-white/5 flex items-center gap-4 hover:border-[#bf00ff] transition-colors">
                <div className="flex-shrink-0">
                  {getRankIcon(rank)}
                </div>
                <div className="text-sm font-mono text-slate-300">
                  <span className="text-slate-500 mr-2">[{dateStr}]</span>
                  <span className="font-bold text-white uppercase italic">{team.name}</span> solved <span className="text-[#bf00ff] uppercase">{challenge.category}</span> - <span className={`font-bold ${difficultyColor}`}>{challenge.title}</span> and gained <span className="text-white font-bold hxp-border-purple px-1 py-0.5 bg-[#bf00ff]/10">{pointsGained} points</span>.
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};