'use client';

import { useManaStore, fmt, fmtDec } from '@/lib/game/stores';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { ELEMENTS } from '@/lib/game/constants';
import { DebugName } from '@/components/game/debug/debug-context';

interface SpireManaDisplayProps {
  maxMana: number;
  effectiveRegen: number;
}

export function SpireManaDisplay({ maxMana, effectiveRegen }: SpireManaDisplayProps) {
  const rawMana = useManaStore((s) => s.rawMana);
  const elements = useManaStore((s) => s.elements);

  const unlockedElements = Object.entries(elements)
    .filter(([, state]) => state.unlocked && state.current > 0)
    .sort((a, b) => b[1].current - a[1].current)
    .slice(0, 6); // Show max 6 in compact view

  const manaPercent = maxMana > 0 ? (rawMana / maxMana) * 100 : 0;

  return (
    <DebugName name="SpireManaDisplay">
    <Card className="bg-gray-900/80 border-gray-700">
      <CardContent className="py-3 space-y-2">
        {/* Raw Mana */}
        <div>
          <div className="flex items-baseline gap-1">
            <span className="text-xl font-bold game-mono" style={{ color: '#60A5FA' }}>
              {fmt(rawMana)}
            </span>
            <span className="text-xs text-gray-500">/ {fmt(maxMana)}</span>
          </div>
          <div className="text-[10px] text-gray-500">
            +{fmtDec(effectiveRegen)}/hr
          </div>
        </div>

        <Progress
          value={manaPercent}
          className="h-1.5 bg-gray-800"
          style={{ '--progress-bg': '#60A5FA' } as React.CSSProperties}
        />

        {/* Elemental pools (compact) */}
        {unlockedElements.length > 0 && (
          <div className="grid grid-cols-3 gap-1">
            {unlockedElements.map(([id, state]) => {
              const elem = ELEMENTS[id];
              if (!elem) return null;
              const pct = state.max > 0 ? (state.current / state.max) * 100 : 0;
              return (
                <div key={id} className="text-center">
                  <div className="text-[10px]" style={{ color: elem.color }}>
                    {elem.sym} {fmt(state.current)}
                  </div>
                  <div className="h-1 bg-gray-800 rounded-full overflow-hidden">
                    <div
                      className="h-full rounded-full"
                      style={{ width: `${pct}%`, backgroundColor: elem.color }}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </CardContent>
    </Card>
    </DebugName>
  );
}