<!-- Command Interface -->
<div class="space-y-4">
    
    <!-- Command Header -->
    <div class="cyber-card p-3 border border-cyber-primary/30">
        <div class="cyber-terminal">
            <span class="cyber-text-primary">></span> COMMAND INTERFACE READY
        </div>
    </div>
    
    <!-- Action Buttons Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
        
        <!-- Movement -->
        <!--{if $gamestate < 40}-->
        <button class="cyber-btn cyber-btn-primary h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='move';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">🚶</div>
            <div class="text-xs">MOVE</div>
        </button>
        <!--{/if}-->
        
        <!-- Search -->
        <button class="cyber-btn cyber-btn-secondary h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='search';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">🔍</div>
            <div class="text-xs">SEARCH</div>
        </button>
        
        <!-- Rest -->
        <button class="cyber-btn cyber-btn-accent h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='rest';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">😴</div>
            <div class="text-xs">REST</div>
        </button>
        
        <!-- Use Item -->
        <!--{if $itms1 || $itms2 || $itms3 || $itms4 || $itms5 || $itms6}-->
        <button class="cyber-btn cyber-btn-warning h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='itemmain';$('command').value='useitem';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">🎒</div>
            <div class="text-xs">USE ITEM</div>
        </button>
        <!--{/if}-->
        
        <!-- Attack -->
        <!--{if $gamestate >= 10}-->
        <button class="cyber-btn cyber-btn-danger h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='attack';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">⚔️</div>
            <div class="text-xs">ATTACK</div>
        </button>
        <!--{/if}-->
        
        <!-- Skills -->
        <!--{if !empty($clbpara['skill'])}-->
        <button class="cyber-btn cyber-btn-success h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='skill';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">🎯</div>
            <div class="text-xs">SKILLS</div>
        </button>
        <!--{/if}-->
        
        <!-- Team -->
        <!--{if $gamestate < 40}-->
        <button class="cyber-btn cyber-btn-primary h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='team';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">👥</div>
            <div class="text-xs">TEAM</div>
        </button>
        <!--{/if}-->
        
        <!-- Shop -->
        <!--{if $shopopen}-->
        <button class="cyber-btn cyber-btn-accent h-16 flex flex-col items-center justify-center"
                onclick="$('mode').value='command';$('command').value='shop';postCmd('gamecmd','command.php');return false;">
            <div class="text-lg">🏪</div>
            <div class="text-xs">SHOP</div>
        </button>
        <!--{/if}-->
        
    </div>
    
    <!-- Quick Actions -->
    <div class="cyber-card p-3 border border-cyber-primary/30">
        <h4 class="cyber-text-primary font-cyber mb-3">QUICK ACTIONS</h4>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
            
            <!-- Refresh -->
            <button class="cyber-btn cyber-btn-secondary text-xs"
                    onclick="window.location.reload();">
                🔄 REFRESH
            </button>
            
            <!-- Map -->
            <button class="cyber-btn cyber-btn-secondary text-xs"
                    onclick="window.open('map.php', '_blank');">
                🗺️ MAP
            </button>
            
            <!-- Help -->
            <button class="cyber-btn cyber-btn-secondary text-xs"
                    onclick="window.open('help.php', '_blank');">
                ❓ HELP
            </button>
            
            <!-- Profile -->
            <button class="cyber-btn cyber-btn-secondary text-xs"
                    onclick="window.open('user_profile.php', '_blank');">
                👤 PROFILE
            </button>
            
        </div>
    </div>
    
    <!-- Status Information -->
    <div class="cyber-card p-3 border border-cyber-primary/30">
        <h4 class="cyber-text-primary font-cyber mb-3">STATUS INFO</h4>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <div class="cyber-text-secondary">Game State</div>
                <div class="cyber-text-primary">
                    <!--{if $gamestate == 0}-->Preparation
                    <!--{elseif $gamestate == 10}-->Active
                    <!--{elseif $gamestate == 40}-->Combo Mode
                    <!--{elseif $gamestate == 50}-->Duel Mode
                    <!--{else}-->Unknown
                    <!--{/if}-->
                </div>
            </div>
            <div>
                <div class="cyber-text-secondary">Players Alive</div>
                <div class="cyber-text-primary">$alivenum</div>
            </div>
            <div>
                <div class="cyber-text-secondary">Current Area</div>
                <div class="cyber-text-primary">$plsinfo[$pls]</div>
            </div>
            <div>
                <div class="cyber-text-secondary">Weather</div>
                <div class="cyber-text-primary">$wthinfo[$weather]</div>
            </div>
        </div>
    </div>
    
    <!-- Advanced Commands -->
    <!--{if $club == 22}-->
    <div class="cyber-card p-3 border border-cyber-warning/30">
        <h4 class="cyber-text-warning font-cyber mb-3">FIRESEED COMMANDS</h4>
        <div class="grid grid-cols-2 gap-2">
            <button class="cyber-btn cyber-btn-warning text-xs"
                    onclick="$('mode').value='command';$('command').value='fireseed';postCmd('gamecmd','command.php');return false;">
                🔥 FIRESEED
            </button>
            <button class="cyber-btn cyber-btn-warning text-xs"
                    onclick="$('mode').value='command';$('command').value='fireseedmng';postCmd('gamecmd','command.php');return false;">
                ⚙️ MANAGE
            </button>
        </div>
    </div>
    <!--{/if}-->
    
    <!-- Special Club Commands -->
    <!--{if $club == 20}-->
    <div class="cyber-card p-3 border border-cyber-success/30">
        <h4 class="cyber-text-success font-cyber mb-3">NECROMANCER COMMANDS</h4>
        <div class="grid grid-cols-2 gap-2">
            <button class="cyber-btn cyber-btn-success text-xs"
                    onclick="$('mode').value='command';$('command').value='elementmix';postCmd('gamecmd','command.php');return false;">
                🧪 ELEMENT MIX
            </button>
            <button class="cyber-btn cyber-btn-success text-xs"
                    onclick="$('mode').value='command';$('command').value='corpse';postCmd('gamecmd','command.php');return false;">
                💀 CORPSE
            </button>
        </div>
    </div>
    <!--{/if}-->
    
    <!-- Emergency Actions -->
    <div class="cyber-card p-3 border border-cyber-danger/30">
        <h4 class="cyber-text-danger font-cyber mb-3">EMERGENCY</h4>
        <div class="grid grid-cols-1 gap-2">
            <!--{if $hp > 0}-->
            <button class="cyber-btn cyber-btn-danger text-xs"
                    onclick="if(confirm('Are you sure you want to suicide?')) { $('mode').value='command';$('command').value='suicide';postCmd('gamecmd','command.php'); }"
                    data-tooltip="Terminate your character">
                💀 SELF-DESTRUCT
            </button>
            <!--{/if}-->
        </div>
    </div>
    
</div>

<script>
// Command interface enhancements
document.addEventListener('DOMContentLoaded', function() {
    // Add hover effects to command buttons
    const commandButtons = document.querySelectorAll('.cyber-btn');
    commandButtons.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            this.style.transition = 'transform 0.2s ease';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
            return; // Don't trigger shortcuts when typing
        }
        
        switch(e.key.toLowerCase()) {
            case 'm':
                e.preventDefault();
                triggerCommand('move');
                break;
            case 's':
                e.preventDefault();
                triggerCommand('search');
                break;
            case 'r':
                e.preventDefault();
                triggerCommand('rest');
                break;
            case 'a':
                if (e.ctrlKey) return; // Don't interfere with Ctrl+A
                e.preventDefault();
                triggerCommand('attack');
                break;
            case 't':
                if (e.ctrlKey) return; // Don't interfere with Ctrl+T
                e.preventDefault();
                triggerCommand('team');
                break;
            case 'h':
                e.preventDefault();
                window.open('help.php', '_blank');
                break;
        }
    });
    
    // Show keyboard shortcuts help
    showKeyboardShortcuts();
});

function triggerCommand(command) {
    const modeInput = document.getElementById('mode');
    const commandInput = document.getElementById('command');
    
    if (modeInput && commandInput) {
        modeInput.value = 'command';
        commandInput.value = command;
        postCmd('gamecmd', 'command.php');
    }
}

function showKeyboardShortcuts() {
    // Add a small hint about keyboard shortcuts
    const shortcutsHint = document.createElement('div');
    shortcutsHint.className = 'cyber-card p-2 border border-cyber-primary/20 mt-4';
    shortcutsHint.innerHTML = `
        <div class="text-xs cyber-text-secondary">
            <div class="cyber-text-primary font-bold mb-1">⌨️ KEYBOARD SHORTCUTS:</div>
            <div class="grid grid-cols-2 gap-1">
                <div>M - Move</div>
                <div>S - Search</div>
                <div>R - Rest</div>
                <div>A - Attack</div>
                <div>T - Team</div>
                <div>H - Help</div>
            </div>
        </div>
    `;
    
    // Add to the end of the command interface
    const commandContainer = document.querySelector('.space-y-4');
    if (commandContainer) {
        commandContainer.appendChild(shortcutsHint);
    }
}

// Enhanced command feedback
function enhanceCommandFeedback() {
    const originalPostCmd = window.postCmd;
    if (originalPostCmd) {
        window.postCmd = function(formId, action) {
            // Show loading state
            const submitBtn = document.querySelector(`#${formId} input[type="submit"], #${formId} button[type="submit"]`);
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.classList.add('cyber-pulse');
                setTimeout(() => {
                    submitBtn.disabled = false;
                    submitBtn.classList.remove('cyber-pulse');
                }, 2000);
            }
            
            // Call original function
            return originalPostCmd.call(this, formId, action);
        };
    }
}

// Initialize enhancements
enhanceCommandFeedback();
</script>

<style>
/* Command interface specific styles */
.cyber-btn {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.cyber-btn:hover {
    box-shadow: 0 0 20px currentColor;
}

.cyber-btn:active {
    transform: scale(0.95);
}

/* Button loading state */
.cyber-btn.cyber-pulse {
    animation: pulse 1s infinite;
}

/* Grid responsive adjustments */
@media (max-width: 640px) {
    .grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Special club button styling */
.cyber-btn-warning:hover {
    background: linear-gradient(45deg, #ff6600, #ff9900);
    box-shadow: 0 0 30px #ff6600;
}

.cyber-btn-success:hover {
    background: linear-gradient(45deg, #00ff66, #00cc44);
    box-shadow: 0 0 30px #00ff66;
}

/* Keyboard shortcut hint styling */
.space-y-4 > div:last-child {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
