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

'use client';

import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { useGameContext } from '../GameContext';
import { SKILLS_DEF } from '@/lib/game/constants';

interface UpgradeDialogProps {
  skillId: string | null;
  milestone: 5 | 10;
  onClose: () => void;
}

export function UpgradeDialog({ skillId, milestone, onClose }: UpgradeDialogProps) {
  const { store } = useGameContext();

  const skillDef = skillId ? SKILLS_DEF[skillId] : null;
  const { available, selected: alreadySelected } = skillId
    ? store.getSkillUpgradeChoices(skillId, milestone)
    : { available: [], selected: [] };

  // Use local state for selections within this dialog session
  const [pendingSelections, setPendingSelections] = useState<string[]>(() => [...alreadySelected]);

  const toggleUpgrade = (upgradeId: string) => {
    setPendingSelections((prev) => {
      if (prev.includes(upgradeId)) {
        return prev.filter((id) => id !== upgradeId);
      } else if (prev.length < 2) {
        return [...prev, upgradeId];
      }
      return prev;
    });
  };

  const handleDone = () => {
    if (pendingSelections.length === 2 && skillId) {
      store.commitSkillUpgrades(skillId, pendingSelections);
    }
    onClose();
  };

  const handleOpenChange = (open: boolean) => {
    if (!open) {
      setPendingSelections([...alreadySelected]);
      onClose();
    }
  };

  // Don't render if no skill selected
  if (!skillId) return null;

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

        <div className="space-y-2 mt-4">
          {available.map((upgrade) => {
            const isSelected = pendingSelections.includes(upgrade.id);
            const canToggle = pendingSelections.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) {
                    toggleUpgrade(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.desc || 'Special effect'}</div>
                )}
              </div>
            );
          })}
        </div>

        <div className="flex justify-end gap-2 mt-4">
          <Button
            variant="outline"
            onClick={() => {
              setPendingSelections([...alreadySelected]);
              onClose();
            }}
          >
            Cancel
          </Button>
          <Button variant="default" onClick={handleDone} disabled={pendingSelections.length !== 2}>
            {pendingSelections.length < 2 ? `Select ${2 - pendingSelections.length} more` : 'Confirm'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}