'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { 
  Wand2, Scroll, Hammer, Sparkles, Trash2, Plus, Minus, 
  Package, Zap, Clock, ChevronRight, Circle, Anvil
} from 'lucide-react';
import { EQUIPMENT_TYPES, type EquipmentType, type EquipmentSlot } from '@/lib/game/data/equipment';
import { ENCHANTMENT_EFFECTS, type EnchantmentEffectDef, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
import { fmt, type GameStore } from '@/lib/game/store';

// Slot display names
const SLOT_NAMES: Record<EquipmentSlot, string> = {
  mainHand: 'Main Hand',
  offHand: 'Off Hand',
  head: 'Head',
  body: 'Body',
  hands: 'Hands',
  feet: 'Feet',
  accessory1: 'Accessory 1',
  accessory2: 'Accessory 2',
};

export interface CraftingTabProps {
  store: GameStore;
}

export function CraftingTab({ store }: CraftingTabProps) {
  const equippedInstances = store.equippedInstances;
  const equipmentInstances = store.equipmentInstances;
  const enchantmentDesigns = store.enchantmentDesigns;
  const designProgress = store.designProgress;
  const preparationProgress = store.preparationProgress;
  const applicationProgress = store.applicationProgress;
  const equipmentCraftingProgress = store.equipmentCraftingProgress;
  const rawMana = store.rawMana;
  const skills = store.skills;
  const currentAction = store.currentAction;
  const unlockedEffects = store.unlockedEffects;
  const lootInventory = store.lootInventory;
  const startDesigningEnchantment = store.startDesigningEnchantment;
  const cancelDesign = store.cancelDesign;
  const saveDesign = store.saveDesign;
  const deleteDesign = store.deleteDesign;
  const startPreparing = store.startPreparing;
  const cancelPreparation = store.cancelPreparation;
  const startApplying = store.startApplying;
  const pauseApplication = store.pauseApplication;
  const resumeApplication = store.resumeApplication;
  const cancelApplication = store.cancelApplication;
  const disenchantEquipment = store.disenchantEquipment;
  const getAvailableCapacity = store.getAvailableCapacity;
  const startCraftingEquipment = store.startCraftingEquipment;
  const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
  const deleteMaterial = store.deleteMaterial;
  const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
  const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
  const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
  const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
  
  // Design creation state
  const [designName, setDesignName] = useState('');
  const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
  
  const enchantingLevel = skills.enchanting || 0;
  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
  
  // Get equipped items as array
  const equippedItems = Object.entries(equippedInstances)
    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
    .map(([slot, instanceId]) => ({
      slot: slot as EquipmentSlot,
      instance: equipmentInstances[instanceId!],
    }));
  
  // Calculate total capacity cost for current design
  const designCapacityCost = selectedEffects.reduce(
    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
    0
  );
  
  // Calculate design time
  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
  
  // Add effect to design
  const addEffect = (effectId: string) => {
    const existing = selectedEffects.find(e => e.effectId === effectId);
    const effectDef = ENCHANTMENT_EFFECTS[effectId];
    if (!effectDef) return;
    
    if (existing) {
      if (existing.stacks < effectDef.maxStacks) {
        setSelectedEffects(selectedEffects.map(e => 
          e.effectId === effectId 
            ? { ...e, stacks: e.stacks + 1 }
            : e
        ));
      }
    } else {
      setSelectedEffects([...selectedEffects, {
        effectId,
        stacks: 1,
        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
      }]);
    }
  };
  
  // Remove effect from design
  const removeEffect = (effectId: string) => {
    const existing = selectedEffects.find(e => e.effectId === effectId);
    if (!existing) return;
    
    if (existing.stacks > 1) {
      setSelectedEffects(selectedEffects.map(e => 
        e.effectId === effectId 
          ? { ...e, stacks: e.stacks - 1 }
          : e
      ));
    } else {
      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
    }
  };
  
  // Create design
  const handleCreateDesign = () => {
    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
    
    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
    if (success) {
      // Reset form
      setDesignName('');
      setSelectedEquipmentType(null);
      setSelectedEffects([]);
    }
  };
  
  // Complete design after progress
  const handleCompleteDesign = () => {
    if (!designProgress || !selectedEquipmentType) return;
    
    const design: EnchantmentDesign = {
      id: designProgress.designId,
      name: designName || 'Untitled Design',
      equipmentType: selectedEquipmentType,
      effects: selectedEffects,
      totalCapacityUsed: designCapacityCost,
      designTime,
      created: Date.now(),
    };
    
    saveDesign(design);
    setDesignName('');
    setSelectedEquipmentType(null);
    setSelectedEffects([]);
  };
  
  // Get available effects for selected equipment type (only unlocked ones)
  const getAvailableEffects = () => {
    if (!selectedEquipmentType) return [];
    const type = EQUIPMENT_TYPES[selectedEquipmentType];
    if (!type) return [];
    
    return Object.values(ENCHANTMENT_EFFECTS).filter(
      effect => 
        effect.allowedEquipmentCategories.includes(type.category) &&
        unlockedEffects.includes(effect.id)
    );
  };
  
  // Render design stage
  const renderDesignStage = () => (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Type Selection */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">1. Select Equipment Type</CardTitle>
        </CardHeader>
        <CardContent>
          {designProgress ? (
            <div className="space-y-3">
              <div className="text-sm text-gray-400">Designing for: {EQUIPMENT_TYPES[selectedEquipmentType || '']?.name}</div>
              <Progress value={(designProgress.progress / designProgress.required) * 100} className="h-3" />
              <div className="flex justify-between text-xs text-gray-400">
                <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
                <Button size="sm" variant="outline" onClick={cancelDesign}>Cancel</Button>
              </div>
              {designProgress.progress >= designProgress.required && (
                <Button onClick={handleCompleteDesign} className="w-full">Complete Design</Button>
              )}
            </div>
          ) : (
            <ScrollArea className="h-64">
              <div className="grid grid-cols-2 gap-2">
                {Object.values(EQUIPMENT_TYPES).map(type => (
                  <div
                    key={type.id}
                    className={`p-2 rounded border cursor-pointer transition-all ${
                      selectedEquipmentType === type.id
                        ? 'border-amber-500 bg-amber-900/20'
                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
                    }`}
                    onClick={() => setSelectedEquipmentType(type.id)}
                  >
                    <div className="text-sm font-semibold">{type.name}</div>
                    <div className="text-xs text-gray-400">Cap: {type.baseCapacity}</div>
                  </div>
                ))}
              </div>
            </ScrollArea>
          )}
        </CardContent>
      </Card>
      
      {/* Effect Selection */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">2. Select Effects</CardTitle>
        </CardHeader>
        <CardContent>
          {enchantingLevel < 1 ? (
            <div className="text-center text-gray-400 py-8">
              <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50" />
              <p>Learn Enchanting skill to design enchantments</p>
            </div>
          ) : designProgress ? (
            <div className="space-y-2">
              <div className="text-sm text-gray-400">Design in progress...</div>
              {selectedEffects.map(eff => {
                const def = ENCHANTMENT_EFFECTS[eff.effectId];
                return (
                  <div key={eff.effectId} className="flex justify-between text-sm">
                    <span>{def?.name} x{eff.stacks}</span>
                    <span className="text-gray-400">{eff.capacityCost} cap</span>
                  </div>
                );
              })}
            </div>
          ) : !selectedEquipmentType ? (
            <div className="text-center text-gray-400 py-8">
              Select an equipment type first
            </div>
          ) : (
            <>
              <ScrollArea className="h-48 mb-4">
                <div className="space-y-2">
                  {getAvailableEffects().map(effect => {
                    const selected = selectedEffects.find(e => e.effectId === effect.id);
                    const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
                    
                    return (
                      <div
                        key={effect.id}
                        className={`p-2 rounded border transition-all ${
                          selected
                            ? 'border-purple-500 bg-purple-900/20'
                            : 'border-gray-700 bg-gray-800/50'
                        }`}
                      >
                        <div className="flex justify-between items-start">
                          <div className="flex-1">
                            <div className="text-sm font-semibold">{effect.name}</div>
                            <div className="text-xs text-gray-400">{effect.description}</div>
                            <div className="text-xs text-gray-500 mt-1">
                              Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
                            </div>
                          </div>
                          <div className="flex gap-1">
                            {selected && (
                              <Button
                                size="sm"
                                variant="outline"
                                className="h-6 w-6 p-0"
                                onClick={() => removeEffect(effect.id)}
                              >
                                <Minus className="w-3 h-3" />
                              </Button>
                            )}
                            <Button
                              size="sm"
                              variant="outline"
                              className="h-6 w-6 p-0"
                              onClick={() => addEffect(effect.id)}
                              disabled={!selected && selectedEffects.length >= 5}
                            >
                              <Plus className="w-3 h-3" />
                            </Button>
                          </div>
                        </div>
                        {selected && (
                          <Badge variant="outline" className="mt-1 text-xs">
                            {selected.stacks}/{effect.maxStacks}
                          </Badge>
                        )}
                      </div>
                    );
                  })}
                </div>
              </ScrollArea>
              
              {/* Selected effects summary */}
              <Separator className="bg-gray-700 my-2" />
              <div className="space-y-2">
                <input
                  type="text"
                  placeholder="Design name..."
                  value={designName}
                  onChange={(e) => setDesignName(e.target.value)}
                  className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
                />
                <div className="flex justify-between text-sm">
                  <span>Total Capacity:</span>
                  <span className={designCapacityCost > 100 ? 'text-red-400' : 'text-green-400'}>
                    {designCapacityCost.toFixed(0)}
                  </span>
                </div>
                <div className="flex justify-between text-sm text-gray-400">
                  <span>Design Time:</span>
                  <span>{designTime.toFixed(1)}h</span>
                </div>
                <Button
                  className="w-full"
                  disabled={!designName || selectedEffects.length === 0}
                  onClick={handleCreateDesign}
                >
                  Start Design ({designTime.toFixed(1)}h)
                </Button>
              </div>
            </>
          )}
        </CardContent>
      </Card>
      
      {/* Saved Designs */}
      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Saved Designs ({enchantmentDesigns.length})</CardTitle>
        </CardHeader>
        <CardContent>
          {enchantmentDesigns.length === 0 ? (
            <div className="text-center text-gray-400 py-4">
              No saved designs yet
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              {enchantmentDesigns.map(design => (
                <div
                  key={design.id}
                  className={`p-3 rounded border ${
                    selectedDesign === design.id
                      ? 'border-amber-500 bg-amber-900/20'
                      : 'border-gray-700 bg-gray-800/50'
                  }`}
                  onClick={() => setSelectedDesign(design.id)}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <div className="font-semibold">{design.name}</div>
                      <div className="text-xs text-gray-400">
                        {EQUIPMENT_TYPES[design.equipmentType]?.name}
                      </div>
                    </div>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-6 w-6 p-0 text-gray-400 hover:text-red-400"
                      onClick={(e) => {
                        e.stopPropagation();
                        deleteDesign(design.id);
                      }}
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                  <div className="mt-2 text-xs text-gray-400">
                    {design.effects.length} effects | {design.totalCapacityUsed} cap
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
  
  // Render prepare stage
  const renderPrepareStage = () => (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Selection */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare</CardTitle>
        </CardHeader>
        <CardContent>
          {preparationProgress ? (
            <div className="space-y-3">
              <div className="text-sm text-gray-400">
                Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
              </div>
              <Progress value={(preparationProgress.progress / preparationProgress.required) * 100} className="h-3" />
              <div className="flex justify-between text-xs text-gray-400">
                <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
                <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
              </div>
              <Button size="sm" variant="outline" onClick={cancelPreparation}>Cancel</Button>
            </div>
          ) : (
            <ScrollArea className="h-64">
              <div className="space-y-2">
                {equippedItems.map(({ slot, instance }) => (
                  <div
                    key={instance.instanceId}
                    className={`p-3 rounded border cursor-pointer transition-all ${
                      selectedEquipmentInstance === instance.instanceId
                        ? 'border-amber-500 bg-amber-900/20'
                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
                    }`}
                    onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                  >
                    <div className="flex justify-between">
                      <div>
                        <div className="font-semibold">{instance.name}</div>
                        <div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
                      </div>
                      <div className="text-right text-sm">
                        <div className="text-green-400">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
                        <div className="text-xs text-gray-400">{instance.enchantments.length} enchants</div>
                      </div>
                    </div>
                  </div>
                ))}
                {equippedItems.length === 0 && (
                  <div className="text-center text-gray-400 py-4">No equipped items</div>
                )}
              </div>
            </ScrollArea>
          )}
        </CardContent>
      </Card>
      
      {/* Preparation Details */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Preparation Details</CardTitle>
        </CardHeader>
        <CardContent>
          {!selectedEquipmentInstance ? (
            <div className="text-center text-gray-400 py-8">
              Select equipment to prepare
            </div>
          ) : preparationProgress ? (
            <div className="text-gray-400">Preparation in progress...</div>
          ) : (
            (() => {
              const instance = equipmentInstances[selectedEquipmentInstance];
              const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
              const manaCost = instance.totalCapacity * 10;
              
              return (
                <div className="space-y-4">
                  <div className="text-lg font-semibold">{instance.name}</div>
                  <Separator className="bg-gray-700" />
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-400">Capacity:</span>
                      <span>{instance.usedCapacity}/{instance.totalCapacity}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Prep Time:</span>
                      <span>{prepTime}h</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Mana Cost:</span>
                      <span className={rawMana < manaCost ? 'text-red-400' : 'text-green-400'}>
                        {fmt(manaCost)}
                      </span>
                    </div>
                  </div>
                  <Button
                    className="w-full"
                    disabled={rawMana < manaCost}
                    onClick={() => startPreparing(selectedEquipmentInstance)}
                  >
                    Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
                  </Button>
                </div>
              );
            })()
          )}
        </CardContent>
      </Card>
    </div>
  );
  
  // Render apply stage
  const renderApplyStage = () => (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment & Design Selection */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Select Equipment & Design</CardTitle>
        </CardHeader>
        <CardContent>
          {applicationProgress ? (
            <div className="space-y-3">
              <div className="text-sm text-gray-400">
                Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
              </div>
              <Progress value={(applicationProgress.progress / applicationProgress.required) * 100} className="h-3" />
              <div className="flex justify-between text-xs text-gray-400">
                <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
                <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
              </div>
              <div className="flex gap-2">
                {applicationProgress.paused ? (
                  <Button size="sm" onClick={resumeApplication}>Resume</Button>
                ) : (
                  <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
                )}
                <Button size="sm" variant="outline" onClick={cancelApplication}>Cancel</Button>
              </div>
            </div>
          ) : (
            <div className="space-y-4">
              <div>
                <div className="text-sm text-gray-400 mb-2">Equipment:</div>
                <ScrollArea className="h-32">
                  <div className="space-y-1">
                    {equippedItems.map(({ slot, instance }) => (
                      <div
                        key={instance.instanceId}
                        className={`p-2 rounded border cursor-pointer text-sm ${
                          selectedEquipmentInstance === instance.instanceId
                            ? 'border-amber-500 bg-amber-900/20'
                            : 'border-gray-700 bg-gray-800/50'
                        }`}
                        onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                      >
                        {instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </div>
              
              <div>
                <div className="text-sm text-gray-400 mb-2">Design:</div>
                <ScrollArea className="h-32">
                  <div className="space-y-1">
                    {enchantmentDesigns.map(design => (
                      <div
                        key={design.id}
                        className={`p-2 rounded border cursor-pointer text-sm ${
                          selectedDesign === design.id
                            ? 'border-purple-500 bg-purple-900/20'
                            : 'border-gray-700 bg-gray-800/50'
                        }`}
                        onClick={() => setSelectedDesign(design.id)}
                      >
                        {design.name} ({design.totalCapacityUsed} cap)
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
      
      {/* Application Details */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Apply Enchantment</CardTitle>
        </CardHeader>
        <CardContent>
          {!selectedEquipmentInstance || !selectedDesign ? (
            <div className="text-center text-gray-400 py-8">
              Select equipment and a design
            </div>
          ) : applicationProgress ? (
            <div className="text-gray-400">Application in progress...</div>
          ) : (
            (() => {
              const instance = equipmentInstances[selectedEquipmentInstance];
              const design = enchantmentDesigns.find(d => d.id === selectedDesign);
              if (!design) return null;
              
              const availableCap = instance.totalCapacity - instance.usedCapacity;
              const canFit = availableCap >= design.totalCapacityUsed;
              const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
              const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
              
              return (
                <div className="space-y-4">
                  <div className="text-lg font-semibold">{design.name}</div>
                  <div className="text-sm text-gray-400">→ {instance.name}</div>
                  <Separator className="bg-gray-700" />
                  
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-400">Required Capacity:</span>
                      <span className={canFit ? 'text-green-400' : 'text-red-400'}>
                        {design.totalCapacityUsed} / {availableCap} available
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Application Time:</span>
                      <span>{applicationTime}h</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Mana per Hour:</span>
                      <span>{manaPerHour}</span>
                    </div>
                  </div>
                  
                  <div className="text-sm text-gray-400">
                    Effects:
                    <ul className="list-disc list-inside">
                      {design.effects.map(eff => (
                        <li key={eff.effectId}>
                          {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
                        </li>
                      ))}
                    </ul>
                  </div>
                  
                  <Button
                    className="w-full"
                    disabled={!canFit}
                    onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
                  >
                    Apply Enchantment
                  </Button>
                </div>
              );
            })()
          )}
        </CardContent>
      </Card>
      
      {/* Disenchant Section */}
      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm">Disenchant Equipment</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
            {equippedItems
              .filter(({ instance }) => instance.enchantments.length > 0)
              .map(({ slot, instance }) => {
                const disenchantLevel = skills.disenchanting || 0;
                const recoveryRate = 0.1 + disenchantLevel * 0.2;
                const totalRecoverable = instance.enchantments.reduce(
                  (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
                  0
                );
                
                return (
                  <div key={instance.instanceId} className="p-3 rounded border border-gray-700 bg-gray-800/50">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="font-semibold">{instance.name}</div>
                        <div className="text-xs text-gray-400">{instance.enchantments.length} enchantments</div>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => disenchantEquipment(instance.instanceId)}
                      >
                        <Trash2 className="w-4 h-4 mr-1" />
                        Recover {fmt(totalRecoverable)}
                      </Button>
                    </div>
                  </div>
                );
              })}
            {equippedItems.filter(({ instance }) => instance.enchantments.length > 0).length === 0 && (
              <div className="col-span-full text-center text-gray-400 py-4">
                No enchanted equipment to disenchant
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  );
  
  // Render equipment crafting stage
  const renderCraftStage = () => (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Blueprint Selection */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
            <Anvil className="w-4 h-4" />
            Available Blueprints
          </CardTitle>
        </CardHeader>
        <CardContent>
          {equipmentCraftingProgress ? (
            <div className="space-y-3">
              <div className="text-sm text-gray-400">
                Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
              </div>
              <Progress value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} className="h-3" />
              <div className="flex justify-between text-xs text-gray-400">
                <span>{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h</span>
                <span>Mana spent: {fmt(equipmentCraftingProgress.manaSpent)}</span>
              </div>
              <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
            </div>
          ) : (
            <ScrollArea className="h-64">
              <div className="space-y-2">
                {lootInventory.blueprints.length === 0 ? (
                  <div className="text-center text-gray-400 py-4">
                    <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
                    <p>No blueprints discovered yet.</p>
                    <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
                  </div>
                ) : (
                  lootInventory.blueprints.map(bpId => {
                    const recipe = CRAFTING_RECIPES[bpId];
                    if (!recipe) return null;
                    
                    const { canCraft, missingMaterials, missingMana } = canCraftRecipe(
                      recipe,
                      lootInventory.materials,
                      rawMana
                    );
                    
                    const rarityStyle = RARITY_COLORS[recipe.rarity];
                    
                    return (
                      <div
                        key={bpId}
                        className="p-3 rounded border bg-gray-800/50"
                        style={{ borderColor: rarityStyle?.color }}
                      >
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <div className="font-semibold" style={{ color: rarityStyle?.color }}>
                              {recipe.name}
                            </div>
                            <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {EQUIPMENT_TYPES[recipe.equipmentTypeId]?.category}
                          </Badge>
                        </div>
                        
                        <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
                        
                        <Separator className="bg-gray-700 my-2" />
                        
                        <div className="text-xs space-y-1">
                          <div className="text-gray-500">Materials:</div>
                          {Object.entries(recipe.materials).map(([matId, amount]) => {
                            const available = lootInventory.materials[matId] || 0;
                            const matDrop = LOOT_DROPS[matId];
                            const hasEnough = available >= amount;
                            
                            return (
                              <div key={matId} className="flex justify-between">
                                <span>{matDrop?.name || matId}</span>
                                <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
                                  {available} / {amount}
                                </span>
                              </div>
                            );
                          })}
                          
                          <div className="flex justify-between mt-2">
                            <span>Mana Cost:</span>
                            <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
                              {fmt(recipe.manaCost)}
                            </span>
                          </div>
                          
                          <div className="flex justify-between">
                            <span>Craft Time:</span>
                            <span>{recipe.craftTime}h</span>
                          </div>
                        </div>
                        
                        <Button
                          className="w-full mt-3"
                          size="sm"
                          disabled={!canCraft || currentAction === 'craft'}
                          onClick={() => startCraftingEquipment(bpId)}
                        >
                          {canCraft ? 'Craft Equipment' : 'Missing Resources'}
                        </Button>
                      </div>
                    );
                  })
                )}
              </div>
            </ScrollArea>
          )}
        </CardContent>
      </Card>
      
      {/* Materials Inventory */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
            <Package className="w-4 h-4" />
            Materials ({Object.values(lootInventory.materials).reduce((a, b) => a + b, 0)})
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-64">
            {Object.keys(lootInventory.materials).length === 0 ? (
              <div className="text-center text-gray-400 py-4">
                <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
                <p>No materials collected yet.</p>
                <p className="text-xs mt-1">Defeat floors to gather materials!</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 gap-2">
                {Object.entries(lootInventory.materials).map(([matId, count]) => {
                  if (count <= 0) return null;
                  const drop = LOOT_DROPS[matId];
                  if (!drop) return null;
                  
                  const rarityStyle = RARITY_COLORS[drop.rarity];
                  
                  return (
                    <div
                      key={matId}
                      className="p-2 rounded border bg-gray-800/50 group relative"
                      style={{ borderColor: rarityStyle?.color }}
                    >
                      <div className="flex items-start justify-between">
                        <div>
                          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
                            {drop.name}
                          </div>
                          <div className="text-xs text-gray-400">x{count}</div>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
                          onClick={() => deleteMaterial(matId, count)}
                        >
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </ScrollArea>
        </CardContent>
      </Card>
    </div>
  );
  
  return (
    <div className="space-y-4">
      {/* Stage Tabs */}
      <Tabs value={craftingStage} onValueChange={(v) => setCraftingStage(v as typeof craftingStage)}>
        <TabsList className="bg-gray-800/50">
          <TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
            <Anvil className="w-4 h-4 mr-1" />
            Craft
          </TabsTrigger>
          <TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
            <Scroll className="w-4 h-4 mr-1" />
            Design
          </TabsTrigger>
          <TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
            <Hammer className="w-4 h-4 mr-1" />
            Prepare
          </TabsTrigger>
          <TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
            <Sparkles className="w-4 h-4 mr-1" />
            Apply
          </TabsTrigger>
        </TabsList>
        
        <TabsContent value="craft" className="mt-4">
          {renderCraftStage()}
        </TabsContent>
        <TabsContent value="design" className="mt-4">
          {renderDesignStage()}
        </TabsContent>
        <TabsContent value="prepare" className="mt-4">
          {renderPrepareStage()}
        </TabsContent>
        <TabsContent value="apply" className="mt-4">
          {renderApplyStage()}
        </TabsContent>
      </Tabs>
      
      {/* Current Activity Indicator */}
      {currentAction === 'craft' && equipmentCraftingProgress && (
        <Card className="bg-cyan-900/30 border-cyan-600">
          <CardContent className="py-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Anvil className="w-5 h-5 text-cyan-400" />
              <span>Crafting equipment...</span>
            </div>
            <div className="text-sm text-gray-400">
              {((equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100).toFixed(0)}%
            </div>
          </CardContent>
        </Card>
      )}
      
      {currentAction === 'design' && designProgress && (
        <Card className="bg-purple-900/30 border-purple-600">
          <CardContent className="py-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Scroll className="w-5 h-5 text-purple-400" />
              <span>Designing enchantment...</span>
            </div>
            <div className="text-sm text-gray-400">
              {((designProgress.progress / designProgress.required) * 100).toFixed(0)}%
            </div>
          </CardContent>
        </Card>
      )}
      
      {currentAction === 'prepare' && preparationProgress && (
        <Card className="bg-blue-900/30 border-blue-600">
          <CardContent className="py-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Hammer className="w-5 h-5 text-blue-400" />
              <span>Preparing equipment...</span>
            </div>
            <div className="text-sm text-gray-400">
              {((preparationProgress.progress / preparationProgress.required) * 100).toFixed(0)}%
            </div>
          </CardContent>
        </Card>
      )}
      
      {currentAction === 'enchant' && applicationProgress && (
        <Card className="bg-amber-900/30 border-amber-600">
          <CardContent className="py-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-amber-400" />
              <span>{applicationProgress.paused ? 'Enchantment paused' : 'Applying enchantment...'}</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="text-sm text-gray-400">
                {((applicationProgress.progress / applicationProgress.required) * 100).toFixed(0)}%
              </div>
              {applicationProgress.paused ? (
                <Button size="sm" onClick={resumeApplication}>Resume</Button>
              ) : (
                <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}