'use client';

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 { TooltipProvider, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { BookOpen, ChevronUp, ChevronDown, RotateCcw, X, Mountain, Skull, Zap, Wind, Shield } from 'lucide-react';
import type { ActivityLogEntry } from '@/lib/game/types';
import type { GameStore } from '@/lib/game/store';
import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, ROOM_TYPE_LABELS } from '@/lib/game/constants';
import { GOLEMS_DEF, getGolemDamage, getGolemAttackSpeed } from '@/lib/game/data/golems';
import { fmt, fmtDec, getFloorElement, canAffordSpellCost, getEnemyName } from '@/lib/game/store';
import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
import { CraftingProgress, StudyProgress } from '@/components/game';
import { getUnifiedEffects } from '@/lib/game/effects';

interface SpireTabProps {
  store: GameStore;
  simpleMode?: boolean; // When true, only show essential Spire info (for Spire Mode)
}

// Helper to check if player can enter spire mode
const canEnterSpireMode = (store: GameStore): boolean => {
  return !store.spireMode; // Can enter if not already in Spire Mode
};

// Room type configurations for display
const ROOM_TYPE_CONFIG: Record<string, { label: string; icon: string; color: string }> = {
  combat: { label: 'Combat', icon: '⚔️', color: '#EF4444' },
  swarm: { label: 'Swarm', icon: '🐝', color: '#F59E0B' },
  speed: { label: 'Speed', icon: '💨', color: '#3B82F6' },
  guardian: { label: 'Guardian', icon: '🛡️', color: '#EF4444' },
  puzzle: { label: 'Puzzle', icon: '🧩', color: '#8B5CF6' },
};

export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
  const floorElem = getFloorElement(store.currentFloor);
  const floorElemDef = ELEMENTS[floorElem];
  const isGuardianFloor = !!GUARDIANS[store.currentFloor];
  const currentGuardian = GUARDIANS[store.currentFloor];
  const climbDirection = store.climbDirection || 'up';
  const clearedFloors = store.clearedFloors || {};
  const currentRoom = store.currentRoom;
  
  // Check if current floor is cleared (for respawn indicator)
  const isFloorCleared = clearedFloors[store.currentFloor];
  
  // Get room type info
  const roomType = currentRoom?.roomType || 'combat';
  const roomConfig = ROOM_TYPE_CONFIG[roomType] || ROOM_TYPE_CONFIG.combat;
  
  // Get active equipment spells
  const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
  
  // Get upgrade effects and DPS
  const upgradeEffects = getUnifiedEffects(store);
  const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
  const studySpeedMult = 1; // Base study speed
  
  const canCastSpell = (spellId: string): boolean => {
    const spell = SPELLS_DEF[spellId];
    if (!spell) return false;
    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
  };

  // Get enemy display info
  const getEnemyDisplayInfo = () => {
    if (!currentRoom || !currentRoom.enemies || currentRoom.enemies.length === 0) {
      return { primaryEnemy: null, swarmEnemies: [] };
    }
    
    const enemies = currentRoom.enemies;
    const primaryEnemy = enemies[0];
    
    // For swarm rooms, return all enemies
    if (roomType === 'swarm') {
      return { primaryEnemy: null, swarmEnemies: enemies };
    }
    
    return { primaryEnemy, swarmEnemies: [] };
  };
  
  const { primaryEnemy, swarmEnemies } = getEnemyDisplayInfo();

  return (
    <TooltipProvider>
      <div className={`grid gap-4 ${simpleMode ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'}`}>
        {/* Spire Stats View - Only show in normal mode (not simpleMode) */}
        {!simpleMode && (
          <>
            {/* Enter Spire Mode Button */}
            <Card className="bg-gray-900/80 border-amber-600/50">
              <CardContent className="pt-4">
                <Button
                  className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
                  size="lg"
                  onClick={() => store.enterSpireMode()}
                  disabled={!canEnterSpireMode(store)}
                >
                  <Mountain className="w-5 h-5 mr-2" />
                  Enter Spire Mode
                </Button>
                <div className="text-xs text-gray-400 text-center mt-2">
                  Climb the Spire to face guardians and earn pacts
                </div>
              </CardContent>
            </Card>
            
            {/* Spire Stats Card - Replaces Current Floor stat */}
            <Card className="bg-gray-900/80 border-gray-700">
              <CardHeader className="pb-2">
                <CardTitle className="text-amber-400 game-panel-title text-xs">Spire Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  <div className="p-3 bg-gray-800/50 rounded">
                    <div className="text-2xl font-bold text-amber-400 game-mono">{store.maxFloorReached}</div>
                    <div className="text-xs text-gray-400">Best Floor</div>
                  </div>
                  <div className="p-3 bg-gray-800/50 rounded">
                    <div className="text-2xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
                    <div className="text-xs text-gray-400">Pacts Signed</div>
                  </div>
                </div>
                <div className="text-sm text-gray-400">
                  Current Floor: <strong className="text-gray-200">{store.currentFloor}</strong>
                </div>
              </CardContent>
            </Card>
          </>
        )}
        
        {/* Current Floor Card - Only show in Spire Mode (simpleMode) */}
        {simpleMode && (
          <Card className="bg-gray-900/80 border-gray-700">
            <CardHeader className="pb-2">
              <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center justify-between">
                <span>Current Floor</span>
                <Badge 
                  className="ml-2" 
                  style={{ 
                    backgroundColor: `${roomConfig.color}20`, 
                    color: roomConfig.color,
                    borderColor: `${roomConfig.color}60`
                  }}
                >
                  {roomConfig.icon} {roomConfig.label}
                </Badge>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-baseline gap-2">
                <span className="text-4xl font-bold game-title" style={{ color: floorElemDef?.color }}>
                  {store.currentFloor}
                </span>
                <span className="text-gray-400 text-sm">/ 100</span>
                <span className="ml-auto text-sm" style={{ color: floorElemDef?.color }}>
                  {floorElemDef?.sym} {floorElemDef?.name}
                </span>
                {isGuardianFloor && (
                  <Badge className="bg-red-900/50 text-red-300 border-red-600">GUARDIAN</Badge>
                )}
              </div>
            
              {/* Guardian Name */}
              {isGuardianFloor && currentGuardian && (
                <div className="text-sm font-semibold game-panel-title" style={{ color: floorElemDef?.color }}>
                  ⚔️ {currentGuardian.name}
                </div>
              )}
              
              {/* Single Enemy Display (Combat/Speed/Guardian) */}
              {!isGuardianFloor && primaryEnemy && roomType !== 'swarm' && (
                <div className="p-3 bg-gray-800/50 rounded border border-gray-700">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <Skull className="w-4 h-4 text-red-400" />
                      <span className="text-sm font-semibold text-gray-200">
                        {primaryEnemy.name || 'Unknown Enemy'}
                      </span>
                    </div>
                    <Badge variant="outline" className="text-xs">
                      {ELEMENTS[primaryEnemy.element]?.sym} {ELEMENTS[primaryEnemy.element]?.name}
                    </Badge>
                  </div>
                  
                  {/* Enemy HP Bar */}
                  <div className="space-y-1 mb-2">
                    <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all duration-300"
                        style={{
                          width: `${Math.max(0, (primaryEnemy.hp / primaryEnemy.maxHP) * 100)}%`,
                          background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
                        }}
                      />
                    </div>
                    <div className="flex justify-between text-xs text-gray-400 game-mono">
                      <span>{fmt(primaryEnemy.hp)} / {fmt(primaryEnemy.maxHP)} HP</span>
                    </div>
                  </div>
                  
                  {/* Enemy Properties */}
                  <div className="flex flex-wrap gap-2 text-xs">
                    {primaryEnemy.armor > 0 && (
                      <Tooltip>
                        <TooltipTrigger>
                          <Badge variant="outline" className="text-xs py-0">
                            <Shield className="w-3 h-3 mr-1" />
                            {(primaryEnemy.armor * 100).toFixed(0)}% Armor
                          </Badge>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>Reduces incoming damage by {(primaryEnemy.armor * 100).toFixed(0)}%</p>
                        </TooltipContent>
                      </Tooltip>
                    )}
                    {primaryEnemy.dodgeChance > 0 && (
                      <Tooltip>
                        <TooltipTrigger>
                          <Badge variant="outline" className="text-xs py-0">
                            <Wind className="w-3 h-3 mr-1" />
                            {(primaryEnemy.dodgeChance * 100).toFixed(0)}% Dodge
                          </Badge>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>Chance to dodge attacks and reduce progress</p>
                        </TooltipContent>
                      </Tooltip>
                    )}
                  </div>
                </div>
              )}
              
              {/* Swarm Enemies Display */}
              {roomType === 'swarm' && swarmEnemies.length > 0 && (
                <div className="space-y-2">
                  <div className="text-xs text-gray-400 font-semibold">
                    Swarm Enemies ({swarmEnemies.length})
                  </div>
                  {swarmEnemies.map((enemy, index) => (
                    <div key={enemy.id || `swarm-${index}`} className="p-2 bg-gray-800/50 rounded border border-gray-700">
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <Skull className="w-3 h-3 text-red-400" />
                          <span className="text-xs font-semibold text-gray-300">
                            {enemy.name || `Enemy ${index + 1}`}
                          </span>
                        </div>
                        <Badge variant="outline" className="text-xs py-0">
                          {ELEMENTS[enemy.element]?.sym} {fmt(enemy.hp)}/{fmt(enemy.maxHP)} HP
                        </Badge>
                      </div>
                      <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
                        <div
                          className="h-full rounded-full transition-all duration-300"
                          style={{
                            width: `${Math.max(0, (enemy.hp / enemy.maxHP) * 100)}%`,
                            background: `linear-gradient(90deg, ${ELEMENTS[enemy.element]?.color}99, ${ELEMENTS[enemy.element]?.color})`,
                          }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              )}
              
              {/* Puzzle Room Display */}
              {roomType === 'puzzle' && (
                <div className="p-3 bg-purple-900/20 rounded border border-purple-700">
                  <div className="flex items-center gap-2 mb-2">
                    <span className="text-lg">🧩</span>
                    <span className="text-sm font-semibold text-purple-300">
                      {currentRoom.puzzleId ? currentRoom.puzzleId.replace(/_/g, ' ').toUpperCase() : 'Puzzle Room'}
                    </span>
                  </div>
                  <div className="space-y-1">
                    <div className="flex justify-between text-xs text-gray-400">
                      <span>Progress</span>
                      <span>{((currentRoom.puzzleProgress || 0) * 100).toFixed(0)}%</span>
                    </div>
                    <Progress 
                      value={Math.min(100, (currentRoom.puzzleProgress || 0) * 100)} 
                      className="h-2 bg-gray-800" 
                    />
                  </div>
                </div>
              )}
              
              {/* Floor HP Bar (for non-swarm, non-puzzle) */}
              {roomType !== 'swarm' && roomType !== 'puzzle' && (
                <div className="space-y-1">
                  <div className="h-3 bg-gray-800 rounded-full overflow-hidden">
                    <div
                      className="h-full rounded-full transition-all duration-300"
                      style={{
                        width: `${Math.max(0, (store.floorHP / store.floorMaxHP) * 100)}%`,
                        background: `linear-gradient(90deg, ${floorElemDef?.color}99, ${floorElemDef?.color})`,
                        boxShadow: `0 0 10px ${floorElemDef?.glow}`,
                      }}
                    />
                  </div>
                  <div className="flex justify-between text-xs text-gray-400 game-mono">
                    <span>{fmt(store.floorHP)} / {fmt(store.floorMaxHP)} HP</span>
                    <span>DPS: {store.currentAction === 'climb' && activeEquipmentSpells.length > 0 ? fmtDec(totalDPS) : '—'}</span>
                  </div>
                </div>
              )}
              
              <div className="text-sm text-gray-400">
                Best: Floor <strong className="text-gray-200">{store.maxFloorReached}</strong> • 
                Pacts: <strong className="text-amber-400">{store.signedPacts.length}</strong>
              </div>
            </CardContent>
          </Card>
        )}
        
        {/* Active Spells Card - Only show in Spire Mode (simpleMode) */}
        {simpleMode && (
          <Card className="bg-gray-900/80 border-gray-700">
            <CardHeader className="pb-2">
              <CardTitle className="text-amber-400 game-panel-title text-xs">
                Active Spells ({activeEquipmentSpells.length})
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {activeEquipmentSpells.length > 0 ? (
                <div className="space-y-3">
                  {activeEquipmentSpells.map(({ spellId, equipmentId }) => {
                    const spellDef = SPELLS_DEF[spellId];
                    if (!spellDef) return null;
                    
                    const spellState = store.equipmentSpellStates?.find(
                      s => s.spellId === spellId && s.sourceEquipment === equipmentId
                    );
                    const progress = spellState?.castProgress || 0;
                    const canCast = canAffordSpellCost(spellDef.cost, store.rawMana, store.elements);
                    
                    return (
                      <div key={`${spellId}-${equipmentId}`} className="p-2 rounded border border-gray-700 bg-gray-800/30">
                        <div className="flex items-center justify-between mb-1">
                          <div className="text-sm font-semibold game-panel-title" style={{ color: spellDef.elem === 'raw' ? '#60A5FA' : ELEMENTS[spellDef.elem]?.color }}>
                            {spellDef.name}
                            {spellDef.tier === 0 && <Badge className="ml-2 bg-gray-600 text-gray-200 text-xs">Basic</Badge>}
                            {spellDef.tier >= 4 && <Badge className="ml-2 bg-amber-600 text-amber-100 text-xs">Legendary</Badge>}
                          </div>
                          <span className={`text-xs ${canCast ? 'text-green-400' : 'text-red-400'}`}>
                            {canCast ? '✓' : '✗'}
                          </span>
                        </div>
                        <div className="text-xs text-gray-400 game-mono mb-1">
                          ⚔️ {fmt(calcDamage(store, spellId))} dmg/cast • 
                          <span style={{ color: getSpellCostColor(spellDef.cost) }}>
                            {' '}{formatSpellCost(spellDef.cost)}
                          </span>
                          {' '}• ⚡ {fmt(Math.floor(calcDamage(store, spellId) * (spellDef.castSpeed || 1)))} dmg/hr
                        </div>
                      
                        {/* Cast progress bar when climbing */}
                        {store.currentAction === 'climb' && (
                          <div className="space-y-0.5">
                            <div className="flex justify-between text-xs text-gray-500">
                              <span>Cast</span>
                              <span>{(progress * 100).toFixed(0)}%</span>
                            </div>
                            <Progress value={Math.min(100, progress * 100)} className="h-1.5 bg-gray-700" />
                          </div>
                        )}
                      
                        {spellDef.effects && spellDef.effects.length > 0 && (
                          <div className="flex gap-1 flex-wrap mt-1">
                            {spellDef.effects.map((eff, i) => (
                              <Badge key={i} variant="outline" className="text-xs py-0">
                                {eff.type === 'burn' && `🔥 Burn`}
                                {eff.type === 'freeze' && `❄️ Freeze`}
                                {eff.type === 'stun' && `⚡ Stun`}
                                {eff.type === 'armor_pierce' && `🗡️ Pierce`}
                                {eff.type === 'buff' && `⬆ Buff`}
                                {eff.type === 'chain' && `⛓️ Chain`}
                                {eff.type === 'aoe' && `💥 AOE`}
                              </Badge>
                            ))}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="text-gray-500 text-sm">No spells on equipped weapons. Enchant a staff with spell effects in the Crafting tab.</div>
              )}
            </CardContent>
          </Card>
        )}
        
        {/* Summoned Golems Card - Show in Spire Mode (simpleMode) or if have golems */}
        {simpleMode && store.golemancy.summonedGolems.length > 0 && (
          <Card className="bg-gray-900/80 border-amber-600/50">
            <CardHeader className="pb-2">
              <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
                <Mountain className="w-4 h-4" />
                Active Golems ({store.golemancy.summonedGolems.length})
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {store.golemancy.summonedGolems.map((summoned) => {
                const golemDef = GOLEMS_DEF[summoned.golemId];
                if (!golemDef) return null;
                
                const elemColor = ELEMENTS[golemDef.baseManaType]?.color || '#888';
                const damage = getGolemDamage(summoned.golemId, store.skills);
                const attackSpeed = getGolemAttackSpeed(summoned.golemId, store.skills);
                
                return (
                  <div key={summoned.golemId} className="p-2 rounded border border-gray-700 bg-gray-800/30">
                    <div className="flex items-center justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <Mountain className="w-4 h-4" style={{ color: elemColor }} />
                        <span className="text-sm font-semibold game-panel-title" style={{ color: elemColor }}>
                          {golemDef.name}
                        </span>
                      </div>
                      {golemDef.isAoe && (
                        <Badge variant="outline" className="text-xs">AOE {golemDef.aoeTargets}</Badge>
                      )}
                    </div>
                    <div className="text-xs text-gray-400 game-mono">
                      ⚔️ {damage} DMG • ⚡ {attackSpeed.toFixed(1)}/hr • 
                      🗡️ {Math.floor(golemDef.armorPierce * 100)}% Pierce
                    </div>
                    {/* Attack progress bar when climbing */}
                    {store.currentAction === 'climb' && summoned.attackProgress > 0 && (
                      <div className="space-y-0.5 mt-1">
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>Attack</span>
                          <span>{Math.min(100, (summoned.attackProgress * 100)).toFixed(0)}%</span>
                        </div>
                        <Progress value={Math.min(100, summoned.attackProgress * 100)} className="h-1.5 bg-gray-700" />
                      </div>
                    )}
                  </div>
                );
              })}
            </CardContent>
          </Card>
        )}
        
        {/* Current Study (if any) - Only show in normal mode */}
        {!simpleMode && store.currentStudyTarget && (
          <Card className="bg-gray-900/80 border-purple-600/50 lg:col-span-2">
            <CardContent className="pt-4 space-y-3">
              <StudyProgress
                currentStudyTarget={store.currentStudyTarget}
                skills={store.skills}
                studySpeedMult={studySpeedMult}
                cancelStudy={store.cancelStudy}
              />
            
              {/* Parallel Study Progress */}
              {store.parallelStudyTarget && (
                <div className="p-3 rounded border border-cyan-600/50 bg-cyan-900/20">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <BookOpen className="w-4 h-4 text-cyan-400" />
                      <span className="text-sm font-semibold text-cyan-300">
                        Parallel: {SKILLS_DEF[store.parallelStudyTarget.id]?.name}
                        {store.parallelStudyTarget.type === 'skill' && ` Lv.${(store.skills[store.parallelStudyTarget.id] || 0) + 1}`}
                      </span>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 w-6 p-0 text-gray-400 hover:text-white"
                      onClick={() => store.cancelParallelStudy?.()}
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                  <Progress value={Math.min(100, (store.parallelStudyTarget.progress / store.parallelStudyTarget.required) * 100)} className="h-2 bg-gray-800" />
                  <div className="flex justify-between text-xs text-gray-400 mt-1">
                    <span>{formatStudyTime(store.parallelStudyTarget.progress)} / {formatStudyTime(store.parallelStudyTarget.required)}</span>
                    <span>50% speed (Parallel Study)</span>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}
        
        {/* Activity Log - Show in Spire Mode (simpleMode) */}
        {simpleMode && (
          <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
            <CardHeader className="pb-2">
              <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-48">
                <div className="space-y-1">
                  {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
                    // Style based on event type
                    const getEventStyle = (eventType: string) => {
                      switch (eventType) {
                        case 'enemy_defeated':
                        case 'floor_cleared':
                          return 'text-green-400';
                        case 'damage_dealt':
                          return 'text-red-400';
                        case 'dodge':
                          return 'text-yellow-400';
                        case 'armor_proc':
                          return 'text-blue-400';
                        case 'special_effect':
                          return 'text-purple-400';
                        case 'floor_transition':
                          return 'text-cyan-400';
                        case 'spell_cast':
                          return 'text-amber-400';
                        case 'golem_attack':
                          return 'text-orange-400';
                        case 'puzzle_solved':
                          return 'text-pink-400';
                        default:
                          return 'text-gray-300';
                      }
                    };
                    
                    return (
                      <div
                        key={entry.id}
                        className={`text-xs ${i === 0 ? 'text-gray-200 font-semibold' : getEventStyle(entry.eventType)}`}
                      >
                        {entry.message}
                      </div>
                    );
                  })}
                  {(store.activityLog || []).length === 0 && (
                    <div className="text-xs text-gray-500 italic">No activity yet...</div>
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        )}
        
        {/* Crafting Progress (if any) - Only show in normal mode */}
        {!simpleMode && (store.designProgress || store.preparationProgress || store.applicationProgress) && (
          <Card className="bg-gray-900/80 border-cyan-600/50 lg:col-span-2">
            <CardContent className="pt-4">
              <CraftingProgress
                designProgress={store.designProgress}
                preparationProgress={store.preparationProgress}
                applicationProgress={store.applicationProgress}
                equipmentInstances={store.equipmentInstances}
                enchantmentDesigns={store.enchantmentDesigns}
                cancelDesign={store.cancelDesign!}
                cancelPreparation={store.cancelPreparation!}
                pauseApplication={store.pauseApplication!}
                resumeApplication={store.resumeApplication!}
                cancelApplication={store.cancelApplication!}
              />
            </CardContent>
          </Card>
        )}
      </div>
    </TooltipProvider>
  );
}

SpireTab.displayName = "SpireTab";