<?php
/**
 * Layout Controls Component - Allows switching between different display modes
 */
if (!defined('ABSPATH')) exit;

// Get layout control settings
$em_show_layout_controls = $event_settings['em_show_layout_controls'] ?? 'no';
$em_default_layout_mode = $event_settings['em_default_layout_mode'] ?? 'default';
$em_available_layouts = $event_settings['em_available_layouts'] ?? array('default', 'compact', 'list');

// Only show if layout controls are enabled
if ($em_show_layout_controls !== 'yes') {
    return;
}
?>

<div class="em-layout-controls em-fixed em-top-6 em-right-6 em-z-50 em-no-print" id="em-layout-controls">
    <div class="em-bg-white em-rounded-lg em-shadow-md em-border em-border-gray-200 em-p-3">
        <div class="em-flex em-items-center em-gap-2">
            <!-- Layout Mode Controls -->
            <div class="em-flex em-items-center em-gap-1">
                <span class="em-text-xs em-font-medium em-text-gray-600 em-mr-2">
                    <?php _e('View:', 'event-monster'); ?>
                </span>
                
                <?php if (in_array('default', $em_available_layouts)): ?>
                    <button type="button" 
                            class="em-layout-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100 em-active"
                            data-layout-mode="default"
                            title="<?php _e('Default View', 'event-monster'); ?>">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="15" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                <?php endif; ?>
                
                <?php if (in_array('compact', $em_available_layouts)): ?>
                    <button type="button" 
                            class="em-layout-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                            data-layout-mode="compact"
                            title="<?php _e('Compact View', 'event-monster'); ?>">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                            <line x1="7" y1="8" x2="17" y2="8" stroke="currentColor" stroke-width="2"/>
                            <line x1="7" y1="12" x2="17" y2="12" stroke="currentColor" stroke-width="2"/>
                            <line x1="7" y1="16" x2="17" y2="16" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                <?php endif; ?>
                
                <?php if (in_array('list', $em_available_layouts)): ?>
                    <button type="button" 
                            class="em-layout-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                            data-layout-mode="list"
                            title="<?php _e('List View', 'event-monster'); ?>">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line x1="8" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2"/>
                            <line x1="8" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                            <line x1="8" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2"/>
                            <line x1="3" y1="6" x2="3.01" y2="6" stroke="currentColor" stroke-width="2"/>
                            <line x1="3" y1="12" x2="3.01" y2="12" stroke="currentColor" stroke-width="2"/>
                            <line x1="3" y1="18" x2="3.01" y2="18" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                <?php endif; ?>
                
                <?php if (in_array('modal', $em_available_layouts)): ?>
                    <button type="button" 
                            class="em-layout-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                            data-layout-mode="modal"
                            title="<?php _e('Modal View', 'event-monster'); ?>">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="6" x2="15" y2="6" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="10" x2="15" y2="10" stroke="currentColor" stroke-width="2"/>
                            <line x1="9" y1="14" x2="15" y2="14" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </button>
                <?php endif; ?>
            </div>
            
            <!-- Divider -->
            <div class="em-w-px em-h-6 em-bg-gray-300"></div>
            
            <!-- Style Controls -->
            <div class="em-flex em-items-center em-gap-1">
                <button type="button" 
                        class="em-style-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100 em-active"
                        data-layout-style="modern"
                        title="<?php _e('Modern Style', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                        <path d="M12 1V3" stroke="currentColor" stroke-width="2"/>
                        <path d="M12 21V23" stroke="currentColor" stroke-width="2"/>
                        <path d="M4.22 4.22L5.64 5.64" stroke="currentColor" stroke-width="2"/>
                        <path d="M18.36 18.36L19.78 19.78" stroke="currentColor" stroke-width="2"/>
                        <path d="M1 12H3" stroke="currentColor" stroke-width="2"/>
                        <path d="M21 12H23" stroke="currentColor" stroke-width="2"/>
                        <path d="M4.22 19.78L5.64 18.36" stroke="currentColor" stroke-width="2"/>
                        <path d="M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                
                <button type="button" 
                        class="em-style-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                        data-layout-style="minimal"
                        title="<?php _e('Minimal Style', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                
                <button type="button" 
                        class="em-style-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                        data-layout-style="elegant"
                        title="<?php _e('Elegant Style', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
            </div>
            
            <!-- Divider -->
            <div class="em-w-px em-h-6 em-bg-gray-300"></div>
            
            <!-- Density Controls -->
            <div class="em-flex em-items-center em-gap-1">
                <button type="button" 
                        class="em-density-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                        data-layout-density="compact"
                        title="<?php _e('Compact Density', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                
                <button type="button" 
                        class="em-density-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100 em-active"
                        data-layout-density="comfortable"
                        title="<?php _e('Comfortable Density', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <line x1="3" y1="4" x2="21" y2="4" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="20" x2="21" y2="20" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                
                <button type="button" 
                        class="em-density-btn em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100"
                        data-layout-density="spacious"
                        title="<?php _e('Spacious Density', 'event-monster'); ?>">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <line x1="3" y1="2" x2="21" y2="2" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                        <line x1="3" y1="22" x2="21" y2="22" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
            </div>
            
            <!-- Toggle Button -->
            <button type="button" 
                    class="em-toggle-controls em-p-2 em-rounded-lg em-transition-all em-duration-200 hover:em-bg-gray-100 em-ml-2"
                    title="<?php _e('Toggle Controls', 'event-monster'); ?>">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2"/>
                    <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
                    <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2"/>
                </svg>
            </button>
        </div>
    </div>
</div>

<style>
/* Clean Layout Controls - Google Style */
.em-layout-controls {
    animation: em-slideInLeft 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.em-layout-controls .em-active {
    background-color: #e8f0fe;
    color: #1a73e8;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.em-layout-controls button {
    color: #5f6368;
    border-radius: 8px;
    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
    border: none;
    background: transparent;
}

.em-layout-controls button:hover {
    background-color: #f8f9fa;
    color: #3c4043;
}

.em-layout-controls .em-active:hover {
    background-color: #d2e3fc;
    color: #1557b0;
}

.em-layout-controls .em-bg-white {
    background: white;
    border: 1px solid #dadce0;
    box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
}

/* Responsive behavior */
@media (max-width: 1024px) {
    .em-layout-controls {
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .em-layout-controls {
        display: none;
    }
}

/* Collapsed state */
.em-layout-controls.em-collapsed .em-flex > *:not(.em-toggle-controls) {
    display: none;
}

.em-layout-controls.em-collapsed {
    width: auto;
}

.em-layout-controls.em-collapsed .em-bg-white {
    padding: 0.5rem;
}
</style>

<script>
jQuery(document).ready(function($) {
    const $controls = $('#em-layout-controls');
    const $layoutBtns = $('.em-layout-btn');
    const $styleBtns = $('.em-style-btn');
    const $densityBtns = $('.em-density-btn');
    const $toggleBtn = $('.em-toggle-controls');
    
    // Layout mode switching
    $layoutBtns.on('click', function() {
        const mode = $(this).data('layout-mode');
        $layoutBtns.removeClass('em-active');
        $(this).addClass('em-active');
        
        if (window.EventMonsterLayout) {
            window.EventMonsterLayout.setMode(mode);
        }
        
        // Store preference
        localStorage.setItem('em_layout_mode', mode);
    });
    
    // Style switching
    $styleBtns.on('click', function() {
        const style = $(this).data('layout-style');
        $styleBtns.removeClass('em-active');
        $(this).addClass('em-active');
        
        if (window.EventMonsterLayout) {
            window.EventMonsterLayout.setStyle(style);
        }
        
        // Store preference
        localStorage.setItem('em_layout_style', style);
    });
    
    // Density switching
    $densityBtns.on('click', function() {
        const density = $(this).data('layout-density');
        $densityBtns.removeClass('em-active');
        $(this).addClass('em-active');
        
        if (window.EventMonsterLayout) {
            window.EventMonsterLayout.setDensity(density);
        }
        
        // Store preference
        localStorage.setItem('em_layout_density', density);
    });
    
    // Toggle controls visibility
    $toggleBtn.on('click', function() {
        $controls.toggleClass('em-collapsed');
        localStorage.setItem('em_controls_collapsed', $controls.hasClass('em-collapsed'));
    });
    
    // Restore user preferences
    const savedMode = localStorage.getItem('em_layout_mode');
    const savedStyle = localStorage.getItem('em_layout_style');
    const savedDensity = localStorage.getItem('em_layout_density');
    const controlsCollapsed = localStorage.getItem('em_controls_collapsed') === 'true';
    
    if (savedMode) {
        $layoutBtns.filter(`[data-layout-mode="${savedMode}"]`).click();
    }
    
    if (savedStyle) {
        $styleBtns.filter(`[data-layout-style="${savedStyle}"]`).click();
    }
    
    if (savedDensity) {
        $densityBtns.filter(`[data-layout-density="${savedDensity}"]`).click();
    }
    
    if (controlsCollapsed) {
        $controls.addClass('em-collapsed');
    }
    
    console.log('Layout controls initialized');
});
</script>
