Mana-Loop/src/components/game/StatsTab.tsx

'use client';

import { useGameStore, fmt, fmtDec } from '@/lib/game/store';
import { ELEMENTS } from '@/lib/game/constants';
import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
import { useManaStats, useCombatStats, useStudyStats } from '@/lib/game/hooks/useGameDerived';
import { ManaStatsSection } from './StatsTab/ManaStatsSection';
import { CombatStatsSection } from './StatsTab/CombatStatsSection';
import { PactStatusSection } from './StatsTab/PactStatusSection';
import { StudyStatsSection } from './StatsTab/StudyStatsSection';
import { ElementStatsSection } from './StatsTab/ElementStatsSection';
import { ActiveUpgradesSection } from './StatsTab/ActiveUpgradesSection';
import { LoopStatsSection } from './StatsTab/LoopStatsSection';
import type { SkillUpgradeChoice } from '@/lib/game/types';

export function StatsTab() {
  const store = useGameStore();
  const manaStats = useManaStats();
  const combatStats = useCombatStats();
  const studyStats = useStudyStats();

  // Compute element max
  const elemMax = (() => {
    const ea = store.skillTiers?.elemAttune || 1;
    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
    const tierMult = getTierMultiplier(tieredSkillId);
    return 10 + level * 50 * tierMult + (store.prestigeUpgrades.elementalAttune || 0) * 25;
  })();

  // Get all selected skill upgrades
  const getAllSelectedUpgrades = (): { skillId: string; upgrade: SkillUpgradeChoice }[] => {
    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 as any).upgrades?.find(u => u.id === upgradeId);
            if (upgrade) {
              upgrades.push({ skillId, upgrade });
            }
          }
        }
      }
    }
    return upgrades;
  };

  const selectedUpgrades = getAllSelectedUpgrades();

  return (
    <div className="space-y-4">
      <ManaStatsSection
        maxMana={manaStats.maxMana}
        baseRegen={manaStats.baseRegen}
        effectiveRegen={manaStats.effectiveRegen}
        clickMana={manaStats.clickMana}
        meditationMultiplier={manaStats.meditationMultiplier}
        upgradeEffects={manaStats.upgradeEffects}
        store={store}
        elemMax={elemMax}
        selectedUpgrades={selectedUpgrades}
      />
      <CombatStatsSection
        store={store}
        activeSpellDef={combatStats.activeSpellDef}
        pactMultiplier={combatStats.pactMultiplier}
      />
      <PactStatusSection
        store={store}
        pactMultiplier={combatStats.pactMultiplier}
        pactInsightMultiplier={combatStats.pactInsightMultiplier}
      />
      <StudyStatsSection
        studySpeedMult={studyStats.studySpeedMult}
        studyCostMult={studyStats.studyCostMult}
        store={store}
      />
      <ElementStatsSection
        store={store}
        elemMax={elemMax}
      />
      <ActiveUpgradesSection selectedUpgrades={selectedUpgrades} />
      <LoopStatsSection store={store} />
    </div>
  );
}

StatsTab.displayName = "StatsTab";