'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Swords } from 'lucide-react';
import { fmt, fmtDec } from '@/lib/game/stores';
import { useSkillStore } from '@/lib/game/stores';
import { getUnifiedEffects } from '@/lib/game/effects';

interface CombatStatsSectionProps {
  activeSpellDef: any;
  pactMultiplier: number;
}

export function CombatStatsSection({ activeSpellDef, pactMultiplier }: CombatStatsSectionProps) {
  const skills = useSkillStore((s) => s.skills);
  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
  const skillTiers = useSkillStore((s) => s.skillTiers);
  
  const upgradeEffects = getUnifiedEffects({
    skillUpgrades,
    skillTiers,
    equippedInstances: {},
    equipmentInstances: {},
  });
  
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-red-400 game-panel-title text-xs flex items-center gap-2">
          <Swords className="w-4 h-4" />
          Combat Stats
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Active Spell Base Damage:</span>
              <span className="text-gray-200">{activeSpellDef?.dmg || 5}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Combat Training Bonus:</span>
              <span className="text-red-300">+{(skills.combatTrain || 0) * 5}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Arcane Fury Multiplier:</span>
              <span className="text-red-300">×{fmtDec(1 + (skills.arcaneFury || 0) * 0.1, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Elemental Mastery:</span>
              <span className="text-red-300">×{fmtDec(1 + (skills.elementalMastery || 0) * 0.15, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Guardian Bane:</span>
              <span className="text-red-300">×{fmtDec(1 + (skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Critical Hit Chance:</span>
              <span className="text-amber-300">{((skills.precision || 0) * 5)}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Critical Multiplier:</span>
              <span className="text-amber-300">1.5x</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Spell Echo Chance:</span>
              <span className="text-amber-300">{((skills.spellEcho || 0) * 10)}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Pact Multiplier:</span>
              <span className="text-amber-300">×{fmtDec(pactMultiplier, 2)}</span>
            </div>
            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
              <span className="text-gray-300">Total Damage:</span>
              <span className="text-red-400">{fmt(activeSpellDef ? activeSpellDef.dmg * pactMultiplier : 0)}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}