<!-- Rest State Interface -->
<div class="space-y-6">
    
    <!-- Rest Header -->
    <div class="cyber-card p-6 border border-cyber-accent/50 bg-blue-900/20">
        <div class="text-center">
            <div class="cyber-terminal mb-4">
                <span class="cyber-text-accent text-xl font-bold">😴 RECOVERY MODE ACTIVE 😴</span>
            </div>
            <div class="text-lg cyber-text-secondary mb-2">
                Neural systems are regenerating
            </div>
            <div class="text-sm cyber-text-muted">
                Please wait while your avatar recovers
            </div>
        </div>
    </div>
    
    <!-- Recovery Progress -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="cyber-text-primary font-cyber mb-4">RECOVERY STATUS</h3>
        
        <!-- Recovery Timer -->
        <div class="mb-4">
            <div class="flex justify-between text-sm mb-2">
                <span class="cyber-text-secondary">Recovery Time Remaining</span>
                <span class="cyber-text-primary" id="recovery-timer">
                    <!--{if isset($state) && $state > 0}-->
                        <!--{eval $remaining = $state * 60;}-->
                        <span data-countdown="$remaining">$state minutes</span>
                    <!--{else}-->
                        Calculating...
                    <!--{/if}-->
                </span>
            </div>
            <div class="cyber-progress">
                <div class="cyber-progress-bar bg-blue-500" id="recovery-progress" style="width: 0%"></div>
            </div>
        </div>
        
        <!-- Recovery Effects -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div class="cyber-card p-3">
                <div class="cyber-text-secondary">HP Recovery</div>
                <div class="cyber-text-success">+<!--{eval echo min(10, $mhp - $hp);}--> per minute</div>
            </div>
            <div class="cyber-card p-3">
                <div class="cyber-text-secondary">SP Recovery</div>
                <div class="cyber-text-success">+<!--{eval echo min(15, $msp - $sp);}--> per minute</div>
            </div>
            <div class="cyber-card p-3">
                <div class="cyber-text-secondary">Status Effects</div>
                <div class="<!--{if $inf}-->cyber-text-warning<!--{else}-->cyber-text-success<!--{/if}-->">
                    <!--{if $inf}-->Clearing...<!--{else}-->Clear<!--{/if}-->
                </div>
            </div>
        </div>
    </div>
    
    <!-- Current Status -->
    <div class="cyber-card p-4 border border-cyber-secondary/30">
        <h3 class="cyber-text-secondary font-cyber mb-4">CURRENT VITALS</h3>
        <div class="space-y-3">
            
            <!-- HP Status -->
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="cyber-text-secondary">Health Points</span>
                    <span class="cyber-text-primary">$hp / $mhp</span>
                </div>
                <div class="cyber-progress">
                    <div class="cyber-progress-bar <!--{if $hp <= $mhp*0.2}-->bg-red-500<!--{elseif $hp <= $mhp*0.5}-->bg-yellow-500<!--{else}-->bg-green-500<!--{/if}-->" 
                         style="width: <!--{eval echo round(($hp/$mhp)*100);}-->%"></div>
                </div>
            </div>
            
            <!-- SP Status -->
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="cyber-text-secondary">Skill Points</span>
                    <span class="cyber-text-primary">$sp / $msp</span>
                </div>
                <div class="cyber-progress">
                    <div class="cyber-progress-bar <!--{if $sp <= $msp*0.2}-->bg-red-500<!--{elseif $sp <= $msp*0.5}-->bg-yellow-500<!--{else}-->bg-blue-500<!--{/if}-->" 
                         style="width: <!--{eval echo round(($sp/$msp)*100);}-->%"></div>
                </div>
            </div>
            
            <!-- SS Status -->
            <!--{if isset($ss) && isset($mss)}-->
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="cyber-text-secondary">Special Skills</span>
                    <span class="cyber-text-primary">$ss / $mss</span>
                </div>
                <div class="cyber-progress">
                    <div class="cyber-progress-bar <!--{if $ss <= $mss*0.2}-->bg-red-500<!--{elseif $ss <= $mss*0.5}-->bg-yellow-500<!--{else}-->bg-purple-500<!--{/if}-->" 
                         style="width: <!--{eval echo round(($ss/$mss)*100);}-->%"></div>
                </div>
            </div>
            <!--{/if}-->
            
        </div>
    </div>
    
    <!-- Status Effects -->
    <!--{if $inf}-->
    <div class="cyber-card p-4 border border-cyber-warning/30">
        <h3 class="cyber-text-warning font-cyber mb-4">STATUS EFFECTS</h3>
        <div class="space-y-2">
            <!--{if strpos($inf,'p') !== false}-->
            <div class="flex items-center space-x-3 p-2 bg-purple-500/20 rounded">
                <img src="img/p.gif" class="w-6 h-4" alt="Poisoned">
                <div>
                    <div class="cyber-text-primary text-sm">Poisoned</div>
                    <div class="cyber-text-secondary text-xs">Toxins are being neutralized during recovery</div>
                </div>
            </div>
            <!--{/if}-->
            <!--{if strpos($inf,'u') !== false}-->
            <div class="flex items-center space-x-3 p-2 bg-red-500/20 rounded">
                <img src="img/u.gif" class="w-6 h-4" alt="Burned">
                <div>
                    <div class="cyber-text-primary text-sm">Burned</div>
                    <div class="cyber-text-secondary text-xs">Thermal damage is being repaired</div>
                </div>
            </div>
            <!--{/if}-->
            <!--{if strpos($inf,'i') !== false}-->
            <div class="flex items-center space-x-3 p-2 bg-blue-500/20 rounded">
                <img src="img/i.gif" class="w-6 h-4" alt="Frozen">
                <div>
                    <div class="cyber-text-primary text-sm">Frozen</div>
                    <div class="cyber-text-secondary text-xs">Core temperature is stabilizing</div>
                </div>
            </div>
            <!--{/if}-->
            <!--{if strpos($inf,'e') !== false}-->
            <div class="flex items-center space-x-3 p-2 bg-yellow-500/20 rounded">
                <img src="img/e.gif" class="w-6 h-4" alt="Paralyzed">
                <div>
                    <div class="cyber-text-primary text-sm">Paralyzed</div>
                    <div class="cyber-text-secondary text-xs">Neural pathways are being restored</div>
                </div>
            </div>
            <!--{/if}-->
            <!--{if strpos($inf,'w') !== false}-->
            <div class="flex items-center space-x-3 p-2 bg-pink-500/20 rounded">
                <img src="img/w.gif" class="w-6 h-4" alt="Confused">
                <div>
                    <div class="cyber-text-primary text-sm">Confused</div>
                    <div class="cyber-text-secondary text-xs">Cognitive functions are recalibrating</div>
                </div>
            </div>
            <!--{/if}-->
        </div>
    </div>
    <!--{/if}-->
    
    <!-- Rest Actions -->
    <div class="cyber-card p-4 border border-cyber-accent/30">
        <h3 class="cyber-text-accent font-cyber mb-4">RECOVERY OPTIONS</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            
            <!-- Continue Rest -->
            <button class="cyber-btn cyber-btn-primary 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">CONTINUE</div>
            </button>
            
            <!-- Wake Up -->
            <button class="cyber-btn cyber-btn-warning h-16 flex flex-col items-center justify-center"
                    onclick="$('mode').value='command';$('command').value='wakeup';postCmd('gamecmd','command.php');return false;">
                <div class="text-lg">⏰</div>
                <div class="text-xs">WAKE UP</div>
            </button>
            
            <!-- Use Item -->
            <!--{if $itms1 || $itms2 || $itms3 || $itms4 || $itms5 || $itms6}-->
            <button class="cyber-btn cyber-btn-secondary 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}-->
            
            <!-- Refresh -->
            <button class="cyber-btn cyber-btn-accent h-16 flex flex-col items-center justify-center"
                    onclick="window.location.reload();">
                <div class="text-lg">🔄</div>
                <div class="text-xs">REFRESH</div>
            </button>
            
        </div>
    </div>
    
    <!-- Rest Tips -->
    <div class="cyber-card p-4 border border-cyber-success/30">
        <h3 class="cyber-text-success font-cyber mb-4">RECOVERY TIPS</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div>
                <div class="cyber-text-primary font-bold">💡 Recovery Benefits:</div>
                <ul class="cyber-text-secondary mt-2 space-y-1">
                    <li>• Restores HP and SP over time</li>
                    <li>• Clears negative status effects</li>
                    <li>• Reduces fatigue and stress</li>
                    <li>• Improves combat readiness</li>
                </ul>
            </div>
            <div>
                <div class="cyber-text-primary font-bold">⚠️ Important Notes:</div>
                <ul class="cyber-text-secondary mt-2 space-y-1">
                    <li>• You are vulnerable while resting</li>
                    <li>• Other players can still find you</li>
                    <li>• Consider your location carefully</li>
                    <li>• Wake up if you hear danger</li>
                </ul>
            </div>
        </div>
    </div>
    
</div>

<script>
// Rest interface enhancements
document.addEventListener('DOMContentLoaded', function() {
    initRestInterface();
    setupRecoveryTimer();
    startRecoveryAnimations();
});

function initRestInterface() {
    // Change theme to safe mode
    if (window.themeManager) {
        window.themeManager.setGameStateTheme('safe');
    }
    
    // Add rest-specific styling
    document.body.classList.add('rest-mode');
    
    // Play rest sound effect (placeholder)
    playRestSound('recovery_start');
}

function setupRecoveryTimer() {
    const timerElement = document.querySelector('[data-countdown]');
    if (timerElement) {
        const totalSeconds = parseInt(timerElement.getAttribute('data-countdown'));
        let remainingSeconds = totalSeconds;
        
        const updateTimer = () => {
            const minutes = Math.floor(remainingSeconds / 60);
            const seconds = remainingSeconds % 60;
            timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
            
            // Update progress bar
            const progress = ((totalSeconds - remainingSeconds) / totalSeconds) * 100;
            const progressBar = document.getElementById('recovery-progress');
            if (progressBar) {
                progressBar.style.width = progress + '%';
            }
            
            if (remainingSeconds > 0) {
                remainingSeconds--;
                setTimeout(updateTimer, 1000);
            } else {
                // Recovery complete
                timerElement.textContent = 'Recovery Complete!';
                if (progressBar) {
                    progressBar.style.width = '100%';
                }
                showRecoveryComplete();
            }
        };
        
        updateTimer();
    }
}

function startRecoveryAnimations() {
    // Add breathing effect to rest header
    const restHeader = document.querySelector('.cyber-card.border-cyber-accent\\/50');
    if (restHeader) {
        restHeader.style.animation = 'restBreathing 4s ease-in-out infinite';
    }
    
    // Add pulse effect to progress bars
    const progressBars = document.querySelectorAll('.cyber-progress-bar');
    progressBars.forEach(bar => {
        bar.style.animation = 'recoveryPulse 2s ease-in-out infinite';
    });
    
    // Add floating effect to status effects
    const statusEffects = document.querySelectorAll('.bg-purple-500\\/20, .bg-red-500\\/20, .bg-blue-500\\/20, .bg-yellow-500\\/20, .bg-pink-500\\/20');
    statusEffects.forEach((effect, index) => {
        effect.style.animation = `statusFloat ${3 + index * 0.5}s ease-in-out infinite`;
    });
}

function showRecoveryComplete() {
    if (window.nouveauTheme) {
        window.nouveauTheme.showNotification('Recovery complete! You are ready for action.', 'success');
    }
    
    // Play completion sound
    playRestSound('recovery_complete');
    
    // Auto-refresh after 3 seconds
    setTimeout(() => {
        window.location.reload();
    }, 3000);
}

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

// Keyboard shortcuts for rest mode
document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }
    
    switch(e.key.toLowerCase()) {
        case 'r':
            e.preventDefault();
            // Continue rest
            document.querySelector('button[onclick*="rest"]').click();
            break;
        case 'w':
            e.preventDefault();
            // Wake up
            document.querySelector('button[onclick*="wakeup"]').click();
            break;
        case 'i':
            e.preventDefault();
            // Use item
            const itemBtn = document.querySelector('button[onclick*="useitem"]');
            if (itemBtn) itemBtn.click();
            break;
    }
});

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

<style>
/* Rest-specific styles */
.rest-mode {
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(0, 255, 102, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(0, 102, 255, 0.1) 0%, transparent 50%);
}

@keyframes restBreathing {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.02);
        opacity: 0.9;
    }
}

@keyframes recoveryPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 10px currentColor;
    }
    50% { 
        opacity: 0.8;
        box-shadow: 0 0 20px currentColor;
    }
}

@keyframes statusFloat {
    0%, 100% { 
        transform: translateY(0px);
        opacity: 1;
    }
    50% { 
        transform: translateY(-5px);
        opacity: 0.8;
    }
}

/* Rest card styling */
.rest-mode .cyber-card {
    backdrop-filter: blur(5px);
    background: rgba(26, 26, 46, 0.8);
}

/* Recovery progress styling */
.rest-mode .cyber-progress {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cyber-accent);
}

.rest-mode .cyber-progress-bar {
    background: linear-gradient(90deg, var(--cyber-accent), var(--cyber-success));
    position: relative;
    overflow: hidden;
}

.rest-mode .cyber-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s linear infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Status effect styling */
.rest-mode .bg-purple-500\/20,
.rest-mode .bg-red-500\/20,
.rest-mode .bg-blue-500\/20,
.rest-mode .bg-yellow-500\/20,
.rest-mode .bg-pink-500\/20 {
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

/* Rest button enhancements */
.rest-mode .cyber-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 20px currentColor;
}

/* Mobile responsiveness for rest interface */
@media (max-width: 768px) {
    .grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cyber-btn h-16 {
        height: 3rem;
    }
    
    .rest-mode .cyber-card {
        margin-bottom: 1rem;
    }
}
</style>
