Mana-Loop/src/components/game/ActionButtons.tsx

'use client';

import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
import type { GameAction } from '@/lib/game/types';

interface ActionButtonsProps {
  currentAction: GameAction;
  currentStudyTarget: { type: 'skill' | 'spell'; id: string; progress: number; required: number } | null;
  designProgress: { progress: number; required: number } | null;
  designProgress2: { progress: number; required: number } | null;
  preparationProgress: { progress: number; required: number } | null;
  applicationProgress: { progress: number; required: number } | null;
  equipmentCraftingProgress: { progress: number; required: number } | null;
}

// Map action IDs to labels and icons
const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
  meditate: { label: 'Meditating', icon: Sparkles, color: 'text-blue-400' },
  climb: { label: 'Climbing', icon: Swords, color: 'text-green-400' },
  study: { label: 'Studying', icon: BookOpen, color: 'text-yellow-400' },
  design: { label: 'Designing Enchantment', icon: Target, color: 'text-purple-400' },
  prepare: { label: 'Preparing Equipment', icon: FlaskConical, color: 'text-purple-400' },
  enchant: { label: 'Enchanting', icon: Sparkles, color: 'text-purple-400' },
  craft: { label: 'Crafting Equipment', icon: Hammer, color: 'text-orange-400' },
  convert: { label: 'Converting Mana', icon: Cog, color: 'text-cyan-400' },
};

function ProgressBar({ progress, required, label }: { progress: number; required: number; label?: string }) {
  const percentage = Math.min(100, (progress / required) * 100);
  return (
    <div className="mt-1">
      {label && <div className="text-xs text-gray-400 mb-0.5">{label}</div>}
      <div className="w-full bg-gray-700 rounded-full h-1.5">
        <div 
          className="bg-blue-500 h-1.5 rounded-full transition-all duration-300" 
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
}

export function ActionButtons({
  currentAction,
  currentStudyTarget,
  designProgress,
  designProgress2,
  preparationProgress,
  applicationProgress,
  equipmentCraftingProgress,
}: ActionButtonsProps) {
  const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
  const Icon = config.icon;

  // Calculate additional info for specific actions
  const getActionDetails = () => {
    switch (currentAction) {
      case 'study':
        if (currentStudyTarget) {
          const progress = currentStudyTarget.progress;
          const required = currentStudyTarget.required;
          const percentage = Math.min(100, (progress / required) * 100);
          return (
            <ProgressBar 
              progress={progress} 
              required={required} 
              label={`${currentStudyTarget.type === 'skill' ? 'Skill' : 'Spell'}: ${percentage.toFixed(0)}%`}
            />
          );
        }
        break;
      case 'design':
        if (designProgress) {
          return (
            <ProgressBar 
              progress={designProgress.progress} 
              required={designProgress.required}
              label="Design progress"
            />
          );
        }
        break;
      case 'prepare':
        if (preparationProgress) {
          return (
            <ProgressBar 
              progress={preparationProgress.progress} 
              required={preparationProgress.required}
              label="Preparation progress"
            />
          );
        }
        break;
      case 'enchant':
        if (applicationProgress) {
          return (
            <ProgressBar 
              progress={applicationProgress.progress} 
              required={applicationProgress.required}
              label="Enchantment progress"
            />
          );
        }
        break;
      case 'craft':
        if (equipmentCraftingProgress) {
          return (
            <ProgressBar 
              progress={equipmentCraftingProgress.progress} 
              required={equipmentCraftingProgress.required}
              label="Crafting progress"
            />
          );
        }
        break;
    }
    return null;
  };

  return (
    <div className="space-y-2">
      <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
        <div className="flex items-center gap-2">
          <Icon className={`w-4 h-4 ${config.color}`} />
          <span className="text-sm font-medium text-gray-200">Current Activity</span>
        </div>
        <div className={`text-lg font-semibold mt-1 ${config.color}`}>
          {config.label}
        </div>
        {getActionDetails()}
        
        {/* Show second design slot if active */}
        {designProgress2 && (
          <div className="mt-2 pt-2 border-t border-gray-700">
            <div className="flex items-center gap-2">
              <Target className="w-3 h-3 text-purple-400" />
              <span className="text-xs text-gray-400">Second Design Slot</span>
            </div>
            <ProgressBar 
              progress={designProgress2.progress} 
              required={designProgress2.required}
              label="Design progress"
            />
          </div>
        )}
      </div>
    </div>
  );
}

ActionButtons.displayName = "ActionButtons";
ProgressBar.displayName = "ProgressBar";