'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import type { ActivityLogEntry } from '@/lib/game/types';

interface ActivityLogProps {
  activityLog?: ActivityLogEntry[];
}

export function ActivityLog({ activityLog }: ActivityLogProps) {
  const entries = activityLog || [];

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-48">
          <div className="space-y-1">
            {entries.slice(0, 50).map((entry, i) => {
              const isLatest = i === 0;
              const color = getEventStyle(entry.eventType);
              return (
                <div
                  key={entry.id}
                  className={`text-xs ${isLatest ? 'text-gray-200 font-semibold' : color}`}
                >
                  {entry.message}
                </div>
              );
            })}
            {entries.length === 0 && (
              <div className="text-xs text-gray-500 italic">No activity yet...</div>
            )}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

function getEventStyle(eventType: string): string {
  switch (eventType) {
    case 'enemy_defeated':
    case 'floor_cleared':
      return 'text-green-400';
    case 'damage_dealt':
      return 'text-red-400';
    case 'dodge':
      return 'text-yellow-400';
    case 'armor_proc':
      return 'text-blue-400';
    case 'special_effect':
      return 'text-purple-400';
    case 'floor_transition':
      return 'text-cyan-400';
    case 'spell_cast':
      return 'text-amber-400';
    case 'golem_attack':
      return 'text-orange-400';
    case 'puzzle_solved':
      return 'text-pink-400';
    default:
      return 'text-gray-300';
  }
}