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

'use client';

import type { SkillUpgradeChoice } from '@/lib/game/types';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';

export interface UpgradeDialogProps {
  open: boolean;
  skillId: string | null;
  milestone: 5 | 10;
  pendingSelections: string[];
  available: SkillUpgradeChoice[];
  alreadySelected: string[];
  onToggle: (upgradeId: string) => void;
  onConfirm: () => void;
  onCancel: () => void;
  onOpenChange: (open: boolean) => void;
}

export function UpgradeDialog({
  open,
  skillId,
  milestone,
  pendingSelections,
  available,
  alreadySelected,
  onToggle,
  onConfirm,
  onCancel,
  onOpenChange,
}: UpgradeDialogProps) {
  if (!skillId) return null;

  const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-amber-400">
            Choose Upgrade - {skillId}
          </DialogTitle>
          <DialogDescription className="text-gray-400">
            Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-2 mt-4">
          {available.map((upgrade) => {
            const isSelected = currentSelections.includes(upgrade.id);
            const canToggle = currentSelections.length < 2 || isSelected;

            return (
              <div
                key={upgrade.id}
                className={`p-3 rounded border cursor-pointer transition-all ${
                  isSelected
                    ? 'border-amber-500 bg-amber-900/30'
                    : canToggle
                      ? 'border-gray-600 bg-gray-800/50 hover:border-amber-500/50 hover:bg-gray-800'
                      : 'border-gray-700 bg-gray-800/30 opacity-50 cursor-not-allowed'
                }`}
                onClick={() => {
                  if (canToggle) {
                    onToggle(upgrade.id);
                  }
                }}
              >
                <div className="flex items-center justify-between">
                  <div className="font-semibold text-sm text-amber-300">{upgrade.name}</div>
                  {isSelected && <Badge className="bg-amber-600 text-amber-100">Selected</Badge>}
                </div>
                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
                {upgrade.effect.type === 'multiplier' && (
                  <div className="text-xs text-green-400 mt-1">
                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'bonus' && (
                  <div className="text-xs text-blue-400 mt-1">
                    +{upgrade.effect.value} {upgrade.effect.stat}
                  </div>
                )}
                {upgrade.effect.type === 'special' && (
                  <div className="text-xs text-cyan-400 mt-1">
                    ⚡ {upgrade.effect.specialDesc || 'Special effect'}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div className="flex justify-end gap-2 mt-4">
          <Button
            variant="outline"
            onClick={onCancel}
          >
            Cancel
          </Button>
          <Button
            variant="default"
            onClick={onConfirm}
            disabled={currentSelections.length !== 2}
          >
            {currentSelections.length < 2 ? `Select ${2 - currentSelections.length} more` : 'Confirm'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

UpgradeDialog.displayName = "UpgradeDialog";