'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { FlaskConical } from 'lucide-react';
import { ELEMENTS } from '@/lib/game/constants';
import { fmt, fmtDec } from '@/lib/game/stores';
import { usePrestigeStore, useManaStore } from '@/lib/game/stores';

interface ElementStatsSectionProps {
  elemMax: number;
}

export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
  const elements = useManaStore((s) => s.elements);

  return (
    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
      <CardHeader className="pb-2">
        <CardTitle className="text-[var(--color-success)] game-panel-title text-xs flex items-center gap-2">
          <FlaskConical className="w-4 h-4" />
          Element 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 style={{ color: 'var(--text-muted)' }}>Element Capacity:</span>
              <span style={{ color: 'var(--color-success)' }}>{elemMax}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Prestige Attunement:</span>
              <span style={{ color: 'var(--color-success)' }}>+{(prestigeUpgrades.elementalAttune || 0) * 25}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span style={{ color: 'var(--text-muted)' }}>Unlocked Elements:</span>
              <span style={{ color: 'var(--color-success)' }}>{Object.values(elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
            </div>
          </div>
        </div>
        <Separator className="bg-[var(--border-subtle)] my-3" />
        <div className="text-xs" style={{ color: 'var(--text-muted)' }}>Elemental Mana Pools:</div>
        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
          {Object.entries(elements)
            .filter(([, state]: [string, any]) => state.unlocked)
            .map(([id, state]: [string, any]) => {
              const def = ELEMENTS[id];
              return (
                <div key={id} className="p-2 rounded transition-colors" style={{ border: `1px solid ${def?.color}30`, background: 'var(--bg-sunken)/50', textAlign: 'center' }}>
                  <div className="text-lg" style={{ color: def?.color }}>{def?.sym}</div>
                  <div className="text-xs" style={{ color: 'var(--text-muted)' }}>{state.current}/{state.max}</div>
                </div>
              );
            })}
        </div>
      </CardContent>
    </Card>
  );
}