'use client';

import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
import { SKILLS_DEF } from '@/lib/game/constants';
import type { GameStore, SkillUpgradeChoice } from '@/lib/game/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Star } from 'lucide-react';

export interface UpgradeEffectsSectionProps {
  store: GameStore;
}

// Helper function to get all selected skill upgrades
function getAllSelectedUpgrades(store: GameStore) {
  const upgrades: { skillId: string; upgrade: SkillUpgradeChoice }[] = [];
  for (const [skillId, selectedIds] of Object.entries(store.skillUpgrades)) {
    const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
    const path = SKILL_EVOLUTION_PATHS[baseSkillId];
    if (!path) continue;
    for (const tier of path.tiers) {
      if (tier.skillId === skillId) {
        for (const upgradeId of selectedIds) {
          const upgrade = tier.upgrades.find(u => u.id === upgradeId);
          if (upgrade) {
            upgrades.push({ skillId, upgrade });
          }
        }
      }
    }
  }
  return upgrades;
}

export function UpgradeEffectsSection({ store }: UpgradeEffectsSectionProps) {
  const selectedUpgrades = getAllSelectedUpgrades(store);

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
          <Star className="w-4 h-4" />
          Active Skill Upgrades ({selectedUpgrades.length})
        </CardTitle>
      </CardHeader>
      <CardContent>
        {selectedUpgrades.length === 0 ? (
          <div className="text-gray-500 text-sm">No skill upgrades selected yet. Level skills to 5 or 10 to choose upgrades.</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
            {selectedUpgrades.map(({ skillId, upgrade }) => (
              <div key={upgrade.id} className="p-2 rounded border border-amber-600/30 bg-amber-900/10">
                <div className="flex items-center justify-between">
                  <span className="text-amber-300 text-sm font-semibold">{upgrade.name}</span>
                  <Badge variant="outline" className="text-xs text-gray-400">
                    {SKILLS_DEF[skillId]?.name || skillId}
                  </Badge>
                </div>
                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
                {upgrade.effect.type === 'multiplier' && (
                  <div className="text-xs text-green-400 mt-1">
                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'bonus' && (
                  <div className="text-xs text-blue-400 mt-1">
                    +{upgrade.effect.value} {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'special' && (
                  <div className="text-xs text-cyan-400 mt-1">
                    ⚡ {upgrade.effect.specialDesc || 'Special effect active'}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}