'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DebugName } from '@/components/game/debug/debug-context';
import { Separator } from '@/components/ui/separator';
import { RotateCcw } from 'lucide-react';
import { fmt } from '@/lib/game/stores';
import { useCombatStore, usePrestigeStore, useManaStore } from '@/lib/game/stores';
import type { SpellState } from '@/lib/game/types';

export function LoopStatsSection() {
  const spells = useCombatStore((s) => s.spells);
  const insight = usePrestigeStore((s) => s.insight);
  const totalInsight = usePrestigeStore((s) => s.totalInsight);
  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
  const totalManaGathered = useManaStore((s) => s.totalManaGathered);
  const loopCount = usePrestigeStore((s) => s.loopCount);

  const spellsLearned = Object.values(spells || {}).filter((s: SpellState) => s.learned).length;

  return (
    <DebugName name="LoopStatsSection">
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--mana-light)] game-panel-title text-xs flex items-center gap-2">
          <RotateCcw className="w-4 h-4" />
          Loop Stats
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-2xl font-bold text-[var(--mana-light)] game-mono">{loopCount}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Loops Completed</div>
          </div>
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-2xl font-bold text-[var(--mana-crystal)] game-mono">{fmt(insight)}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Current Insight</div>
          </div>
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-2xl font-bold text-[var(--mana-death)] game-mono">{fmt(totalInsight)}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Total Insight</div>
          </div>
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-2xl font-bold text-[var(--color-success)] game-mono">{maxFloorReached}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Max Floor</div>
          </div>
        </div>
        <Separator className="bg-[var(--border-subtle)] my-3" />
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-xl font-bold text-[var(--text-secondary)] game-mono">{spellsLearned}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Spells Learned</div>
          </div>
          <div className="p-3 bg-[var(--bg-sunken)]/50 rounded text-center">
            <div className="text-xl font-bold text-[var(--text-secondary)] game-mono">{fmt(totalManaGathered)}</div>
            <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Total Mana Gathered</div>
          </div>
        </div>
      </CardContent>
    </Card>
    </DebugName>
  );
}
