'use client';

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

// Modular stores
import { useSkillStore, usePrestigeStore } from '@/lib/game/stores';

export function CombatStatsSection() {
  // Get state from modular stores
  const skills = useSkillStore((s) => s.skills);
  const signedPacts = usePrestigeStore((s) => s.signedPacts);

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
        <CardTitle className="text-red-400 text-sm 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">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-amber-300">×{fmtDec(signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

CombatStatsSection.displayName = "CombatStatsSection";