<!-- Battle Interface -->
<div class="space-y-6">
    
    <!-- Battle Header -->
    <div class="cyber-card p-4 border border-cyber-danger/50 bg-red-900/20">
        <div class="text-center">
            <div class="cyber-terminal mb-2">
                <span class="cyber-text-danger text-lg font-bold">⚔️ COMBAT ENGAGED ⚔️</span>
            </div>
            <div class="text-sm cyber-text-secondary">
                Battle System Active - Prepare for Combat
            </div>
        </div>
    </div>
    
    <!-- Battle Participants -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Player Side -->
        <div class="cyber-card p-4 border border-cyber-primary/30">
            <h3 class="cyber-text-primary font-cyber mb-4">YOUR STATUS</h3>
            <div class="space-y-3">
                
                <!-- Player Avatar and Info -->
                <div class="flex items-center space-x-4">
                    <img src="img/$iconImg" 
                         class="w-16 h-10 object-cover border border-cyber-primary/50 rounded cyber-glow"
                         alt="Player Avatar" />
                    <div>
                        <div class="cyber-text-primary font-bold">$name</div>
                        <div class="text-sm cyber-text-secondary">Level $lvl | $clubinfo[$club]</div>
                    </div>
                </div>
                
                <!-- Player Stats -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="cyber-card p-2">
                        <div class="cyber-text-secondary text-xs">HP</div>
                        <div class="cyber-text-primary">$hp / $mhp</div>
                        <div class="cyber-progress h-2 mt-1">
                            <div class="cyber-progress-bar bg-red-500" 
                                 style="width: <!--{eval echo round(($hp/$mhp)*100);}-->%"></div>
                        </div>
                    </div>
                    <div class="cyber-card p-2">
                        <div class="cyber-text-secondary text-xs">SP</div>
                        <div class="cyber-text-primary">$sp / $msp</div>
                        <div class="cyber-progress h-2 mt-1">
                            <div class="cyber-progress-bar bg-blue-500" 
                                 style="width: <!--{eval echo round(($sp/$msp)*100);}-->%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Combat Stats -->
                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div class="text-center">
                        <div class="cyber-text-secondary">ATK</div>
                        <div class="cyber-text-primary font-bold">$atkinfo</div>
                    </div>
                    <div class="text-center">
                        <div class="cyber-text-secondary">DEF</div>
                        <div class="cyber-text-primary font-bold">$definfo</div>
                    </div>
                </div>
                
                <!-- Status Effects -->
                <!--{if $inf}-->
                <div class="cyber-card p-2 border border-cyber-warning/30">
                    <div class="cyber-text-warning text-xs font-bold">STATUS EFFECTS:</div>
                    <div class="flex flex-wrap gap-1 mt-1">
                        <!--{if strpos($inf,'p') !== false}-->
                        <span class="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded">POISON</span>
                        <!--{/if}-->
                        <!--{if strpos($inf,'u') !== false}-->
                        <span class="px-2 py-1 bg-red-500/20 text-red-400 text-xs rounded">BURN</span>
                        <!--{/if}-->
                        <!--{if strpos($inf,'i') !== false}-->
                        <span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded">FREEZE</span>
                        <!--{/if}-->
                        <!--{if strpos($inf,'e') !== false}-->
                        <span class="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded">PARALYSIS</span>
                        <!--{/if}-->
                        <!--{if strpos($inf,'w') !== false}-->
                        <span class="px-2 py-1 bg-pink-500/20 text-pink-400 text-xs rounded">CONFUSION</span>
                        <!--{/if}-->
                    </div>
                </div>
                <!--{/if}-->
                
            </div>
        </div>
        
        <!-- Enemy Side -->
        <div class="cyber-card p-4 border border-cyber-danger/30">
            <h3 class="cyber-text-danger font-cyber mb-4">ENEMY STATUS</h3>
            <div class="space-y-3">
                
                <!-- Enemy Info Display -->
                <div class="text-center">
                    <div class="cyber-text-danger text-lg font-bold">HOSTILE DETECTED</div>
                    <div class="text-sm cyber-text-secondary mt-1">
                        Analyzing threat level...
                    </div>
                </div>
                
                <!-- Enemy Stats Placeholder -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="cyber-card p-2 border border-cyber-danger/30">
                        <div class="cyber-text-secondary text-xs">THREAT</div>
                        <div class="cyber-text-danger">UNKNOWN</div>
                    </div>
                    <div class="cyber-card p-2 border border-cyber-danger/30">
                        <div class="cyber-text-secondary text-xs">STATUS</div>
                        <div class="cyber-text-danger">HOSTILE</div>
                    </div>
                </div>
                
                <!-- Combat Readiness -->
                <div class="cyber-card p-3 border border-cyber-warning/30">
                    <div class="cyber-text-warning text-sm font-bold">⚠️ COMBAT WARNING</div>
                    <div class="cyber-text-secondary text-xs mt-1">
                        Enemy engagement imminent. Prepare defensive measures.
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
    
    <!-- Battle Actions -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="cyber-text-primary font-cyber mb-4">COMBAT ACTIONS</h3>
        
        <!-- Action Buttons -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            
            <!-- Attack -->
            <button class="cyber-btn cyber-btn-danger h-16 flex flex-col items-center justify-center"
                    onclick="$('mode').value='battle';$('command').value='attack';postCmd('gamecmd','command.php');return false;">
                <div class="text-lg">⚔️</div>
                <div class="text-xs">ATTACK</div>
            </button>
            
            <!-- Defend -->
            <button class="cyber-btn cyber-btn-primary h-16 flex flex-col items-center justify-center"
                    onclick="$('mode').value='battle';$('command').value='defend';postCmd('gamecmd','command.php');return false;">
                <div class="text-lg">🛡️</div>
                <div class="text-xs">DEFEND</div>
            </button>
            
            <!-- Use Item -->
            <!--{if $itms1 || $itms2 || $itms3 || $itms4 || $itms5 || $itms6}-->
            <button class="cyber-btn cyber-btn-accent h-16 flex flex-col items-center justify-center"
                    onclick="$('mode').value='battle';$('command').value='useitem';postCmd('gamecmd','command.php');return false;">
                <div class="text-lg">💊</div>
                <div class="text-xs">USE ITEM</div>
            </button>
            <!--{/if}-->
            
            <!-- Escape -->
            <button class="cyber-btn cyber-btn-warning h-16 flex flex-col items-center justify-center"
                    onclick="$('mode').value='battle';$('command').value='escape';postCmd('gamecmd','command.php');return false;">
                <div class="text-lg">🏃</div>
                <div class="text-xs">ESCAPE</div>
            </button>
            
        </div>
        
        <!-- Special Actions -->
        <!--{if !empty($clbpara['skill'])}-->
        <div class="mt-4">
            <h4 class="cyber-text-secondary text-sm font-bold mb-2">SPECIAL ABILITIES</h4>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                <button class="cyber-btn cyber-btn-success text-xs"
                        onclick="$('mode').value='battle';$('command').value='skill';postCmd('gamecmd','command.php');return false;">
                    🎯 SKILLS
                </button>
                <!--{if $club == 22}-->
                <button class="cyber-btn cyber-btn-warning text-xs"
                        onclick="$('mode').value='battle';$('command').value='fireseed';postCmd('gamecmd','command.php');return false;">
                    🔥 FIRESEED
                </button>
                <!--{/if}-->
            </div>
        </div>
        <!--{/if}-->
        
    </div>
    
    <!-- Battle Log -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="cyber-text-primary font-cyber mb-4">COMBAT LOG</h3>
        <div class="cyber-card p-3 bg-black/50 h-32 overflow-y-auto">
            <div id="battle-log" class="text-sm font-mono space-y-1">
                <div class="cyber-text-primary">[SYSTEM] Combat interface initialized</div>
                <div class="cyber-text-warning">[WARNING] Enemy detected in combat range</div>
                <div class="cyber-text-secondary">[INFO] Awaiting player action...</div>
            </div>
        </div>
    </div>
    
    <!-- Combat Tips -->
    <div class="cyber-card p-4 border border-cyber-accent/30">
        <h3 class="cyber-text-accent font-cyber mb-4">TACTICAL ADVICE</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
                <div class="cyber-text-primary font-bold">💡 Combat Tips:</div>
                <ul class="cyber-text-secondary mt-2 space-y-1">
                    <li>• Monitor your HP and SP levels</li>
                    <li>• Use items strategically</li>
                    <li>• Consider your stance and tactic</li>
                    <li>• Watch for status effects</li>
                </ul>
            </div>
            <div>
                <div class="cyber-text-primary font-bold">⚡ Quick Actions:</div>
                <ul class="cyber-text-secondary mt-2 space-y-1">
                    <li>• A - Attack</li>
                    <li>• D - Defend</li>
                    <li>• I - Use Item</li>
                    <li>• E - Escape</li>
                </ul>
            </div>
        </div>
    </div>
    
</div>

<script>
// Battle interface enhancements
document.addEventListener('DOMContentLoaded', function() {
    initBattleInterface();
    setupBattleKeyboards();
    startBattleAnimations();
});

function initBattleInterface() {
    // Add battle-specific styling
    document.body.classList.add('battle-mode');
    
    // Update theme to combat colors
    if (window.themeManager) {
        window.themeManager.setGameStateTheme('battle');
    }
    
    // Add combat sound effects (placeholder)
    playBattleSound('combat_start');
}

function setupBattleKeyboards() {
    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
            return;
        }
        
        switch(e.key.toLowerCase()) {
            case 'a':
                e.preventDefault();
                triggerBattleAction('attack');
                break;
            case 'd':
                e.preventDefault();
                triggerBattleAction('defend');
                break;
            case 'i':
                e.preventDefault();
                triggerBattleAction('useitem');
                break;
            case 'e':
                e.preventDefault();
                triggerBattleAction('escape');
                break;
            case 's':
                e.preventDefault();
                triggerBattleAction('skill');
                break;
        }
    });
}

function triggerBattleAction(action) {
    const modeInput = document.getElementById('mode');
    const commandInput = document.getElementById('command');
    
    if (modeInput && commandInput) {
        modeInput.value = 'battle';
        commandInput.value = action;
        
        // Add visual feedback
        addBattleLogEntry(`[PLAYER] Executing ${action.toUpperCase()} command`);
        
        // Submit command
        postCmd('gamecmd', 'command.php');
    }
}

function addBattleLogEntry(message) {
    const log = document.getElementById('battle-log');
    if (log) {
        const entry = document.createElement('div');
        entry.className = 'cyber-text-primary';
        entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        log.appendChild(entry);
        log.scrollTop = log.scrollHeight;
    }
}

function startBattleAnimations() {
    // Add pulsing effect to danger elements
    const dangerElements = document.querySelectorAll('.cyber-text-danger');
    dangerElements.forEach(el => {
        el.classList.add('cyber-pulse');
    });
    
    // Add scanning effect to battle header
    const battleHeader = document.querySelector('.cyber-card.border-cyber-danger\\/50');
    if (battleHeader) {
        battleHeader.style.animation = 'battleScan 2s linear infinite';
    }
    
    // Animate progress bars
    const progressBars = document.querySelectorAll('.cyber-progress-bar');
    progressBars.forEach(bar => {
        bar.style.animation = 'progressPulse 1s ease-in-out infinite';
    });
}

function playBattleSound(soundName) {
    // Placeholder for battle sound effects
    console.log(`Playing battle sound: ${soundName}`);
}

// Cleanup when leaving battle
window.addEventListener('beforeunload', function() {
    document.body.classList.remove('battle-mode');
});
</script>

<style>
/* Battle-specific styles */
.battle-mode {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 0, 102, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 102, 0, 0.1) 0%, transparent 50%);
}

@keyframes battleScan {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 0, 102, 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 0, 102, 0.6);
    }
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Battle button enhancements */
.cyber-btn-danger:hover {
    background: linear-gradient(45deg, #ff0066, #ff3399);
    box-shadow: 0 0 30px #ff0066;
    transform: scale(1.05);
}

/* Battle log styling */
#battle-log {
    line-height: 1.4;
}

#battle-log > div {
    padding: 0.125rem 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

#battle-log > div:last-child {
    border-bottom: none;
}

/* Status effect badges */
.status-effects span {
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.95); }
}

/* Combat readiness indicator */
.cyber-card.border-cyber-warning\\/30 {
    animation: warningBlink 1.5s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 100% { border-color: rgba(255, 165, 0, 0.3); }
    50% { border-color: rgba(255, 165, 0, 0.6); }
}

/* Mobile battle interface */
@media (max-width: 768px) {
    .grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cyber-btn h-16 {
        height: 3rem;
    }
    
    .cyber-btn h-16 .text-lg {
        font-size: 1rem;
    }
}
</style>
