'use client';

import { usePrestigeStore } from '@/lib/game/stores';
import { useManaStats, useCombatStats, useStudyStats } from '@/lib/game/hooks/useGameDerived';
import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
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';
import { DisciplineStatsSection } from './StatsTab/DisciplineStatsSection';
import { DebugName } from '@/components/game/debug/debug-context';

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

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

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

  return (
    <DebugName name="StatsTab">
      <div className="space-y-4">
      <ManaStatsSection
        stats={{
          ...manaStats,
          rawMana: manaStats.maxMana,
          meditationCap: manaStats.meditationCap,
        }}
        elemMax={elemMax}
      />
      <CombatStatsSection
        activeSpellDef={combatStats.activeSpellDef}
        pactMultiplier={combatStats.pactMultiplier}
      />
      <PactStatusSection
        pactMultiplier={combatStats.pactMultiplier}
        pactInsightMultiplier={combatStats.pactInsightMultiplier}
      />
      <StudyStatsSection
        studySpeedMult={studyStats.studySpeedMult}
        studyCostMult={studyStats.studyCostMult}
      />
      <DisciplineStatsSection
        disciplineEffects={disciplineEffects}
      />
      <ElementStatsSection
        elemMax={elemMax}
      />
      <LoopStatsSection />
      </div>
    </DebugName>
  );
}

StatsTab.displayName = "StatsTab";