'use client';

import { usePrestigeStore, fmt, fmtDec } from '@/lib/game/stores';
import { ELEMENTS } from '@/lib/game/constants';
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 { LoopStatsSection } from './StatsTab/LoopStatsSection';

export function StatsTab() {
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);

  const manaStats = useManaStats();
  const combatStats = useCombatStats();
  const studyStats = useStudyStats();

  // Compute element max (base + prestige only)
  const elemMax = 10 + (prestigeUpgrades.elementalAttune || 0) * 25;

  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}
        elemMax={elemMax}
      />
      <CombatStatsSection
        activeSpellDef={combatStats.activeSpellDef}
        pactMultiplier={combatStats.pactMultiplier}
      />
      <PactStatusSection
        pactMultiplier={combatStats.pactMultiplier}
        pactInsightMultiplier={combatStats.pactInsightMultiplier}
      />
      <StudyStatsSection
        studySpeedMult={studyStats.studySpeedMult}
        studyCostMult={studyStats.studyCostMult}
      />
      <ElementStatsSection
        elemMax={elemMax}
      />
      <LoopStatsSection />
    </div>
  );
}

StatsTab.displayName = "StatsTab";
