'use client';

import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Card, CardContent } from '@/components/ui/card';
import { Zap } from 'lucide-react';
import { fmt, fmtDec } from '@/lib/game/store';

interface ManaDisplayProps {
  rawMana: number;
  maxMana: number;
  effectiveRegen: number;
  meditationMultiplier: number;
  clickMana: number;
  isGathering: boolean;
  onGatherStart: () => void;
  onGatherEnd: () => void;
}

export function ManaDisplay({
  rawMana,
  maxMana,
  effectiveRegen,
  meditationMultiplier,
  clickMana,
  isGathering,
  onGatherStart,
  onGatherEnd,
}: ManaDisplayProps) {
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardContent className="pt-4 space-y-3">
        <div>
          <div className="flex items-baseline gap-1">
            <span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
            <span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
          </div>
          <div className="text-xs text-gray-400">
            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
          </div>
        </div>
        
        <Progress
          value={(rawMana / maxMana) * 100}
          className="h-2 bg-gray-800"
        />
        
        <Button
          className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
          onMouseDown={onGatherStart}
          onMouseUp={onGatherEnd}
          onMouseLeave={onGatherEnd}
          onTouchStart={onGatherStart}
          onTouchEnd={onGatherEnd}
        >
          <Zap className="w-4 h-4 mr-2" />
          Gather +{clickMana} Mana
          {isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
        </Button>
      </CardContent>
    </Card>
  );
}