<?php
/**
 * LAUDO CONTROL - HEADER MODERNO
 * Layout com Tailwind CSS + Alpine.js
 * @version 2.0
 */

function renderHeader($title) {
    $usu_nome = isset($_SESSION['usu_nome']) ? htmlspecialchars($_SESSION['usu_nome']) : 'Usuário';
    $usu_email = isset($_SESSION['usu_email']) ? htmlspecialchars($_SESSION['usu_email']) : '';
    $usu_tema = isset($_SESSION['usu_tema']) ? $_SESSION['usu_tema'] : 'claro';
    $isDark = $usu_tema === 'escuro';
    
    // Calcular caminho relativo baseado no caminho do arquivo atual
    // O header.php está em layout/, então precisamos calcular a partir do arquivo que o inclui
    $script_path = $_SERVER['SCRIPT_NAME'] ?? $_SERVER['PHP_SELF'] ?? '';
    
    // Normalizar o caminho: remover barra inicial
    $script_path = ltrim($script_path, '/');
    
    // Dividir o caminho em partes
    $path_parts = explode('/', $script_path);
    
    // Filtrar partes vazias
    $path_parts = array_filter($path_parts, function($part) {
        return !empty($part);
    });
    
    // Contar apenas os diretórios (excluir o arquivo PHP)
    // Exemplos:
    // - "index.php" -> [] -> depth = 0 -> ./
    // - "conciliacao/index.php" -> ["conciliacao", "index.php"] -> depth = 1 -> ../
    // - "pasta/subpasta/arquivo.php" -> ["pasta", "subpasta", "arquivo.php"] -> depth = 2 -> ../../
    $depth = 0;
    foreach ($path_parts as $part) {
        // Se não for um arquivo PHP, é um diretório
        if (!preg_match('/\.php$/', $part)) {
            $depth++;
        }
    }
    
    // Calcular o caminho base
    if ($depth > 0) {
        $base_path = str_repeat('../', $depth);
    } else {
        $base_path = './';
    }
    
    ?>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- Flatpickr -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/pt.js"></script>
    
    <!-- jQuery (deve ser carregado ANTES do Select2) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <!-- Select2 JS - Carregado após jQuery estar pronto -->
    <script>
        (function() {
            function loadSelect2() {
                if (typeof jQuery !== 'undefined' && typeof window.jQuery !== 'undefined') {
                    var script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js';
                    script.onload = function() {
                        console.log('✅ Select2 carregado com sucesso');
                    };
                    script.onerror = function() {
                        console.error('❌ Erro ao carregar Select2');
                    };
                    document.head.appendChild(script);
                } else {
                    setTimeout(loadSelect2, 50);
                }
            }
            // Tentar carregar imediatamente se jQuery já estiver disponível
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', loadSelect2);
            } else {
                loadSelect2();
            }
        })();
    </script>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?php echo $base_path; ?>css/modern-layout.css">
    
    <!-- App JS -->
    <script src="<?php echo $base_path; ?>js/app.js"></script>
    
    <script>
        // Configuração do Tailwind
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        },
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- Header Moderno -->
    <header x-data="{ userMenuOpen: false, notificationsOpen: false }" 
            class="fixed top-0 left-0 right-0 bg-white/95 dark:bg-gray-800/95 backdrop-blur-lg z-50 transition-all duration-500 animate-fadeInDown border-b-2 border-gray-200/50 dark:border-gray-700/50"
            style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between px-8 py-4">
            <!-- Logo e Título -->
            <div class="flex items-center space-x-4">
                <button @click="$dispatch('toggle-sidebar')" 
                        class="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-110 active:scale-95 lg:hidden group relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-primary-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-bars w-6 h-6 text-gray-600 dark:text-gray-300 relative z-10 transition-transform duration-300 group-hover:rotate-90"></i>
                </button>
                
                <a href="<?php echo $base_path; ?>PaginaInicial.php" class="flex items-center space-x-3 group transition-all duration-300 hover:scale-105">
                    <div class="relative">
                        <img src="<?php echo $base_path; ?>img/logo.png" alt="Logo" class="h-10 w-auto transition-transform duration-300 group-hover:rotate-6">
                        <div class="absolute inset-0 bg-gradient-to-r from-primary-500/20 to-purple-500/20 rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                    <div class="hidden md:block">
                        <h1 class="text-xl font-bold text-gray-800 dark:text-white transition-colors duration-300 group-hover:text-primary-600 dark:group-hover:text-primary-400">Laudo Control</h1>
                        <p class="text-xs text-gray-500 dark:text-gray-400">PRN Sistema</p>
                    </div>
                </a>
            </div>
            
            <!-- Ações do Header -->
            <div class="flex items-center space-x-3">
                <!-- Notificações -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" 
                            class="relative p-2.5 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-110 active:scale-95 group">
                        <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/20 to-orange-400/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <i class="fas fa-bell text-gray-600 dark:text-gray-300 relative z-10 transition-transform duration-300 group-hover:rotate-12"></i>
                        <span class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse shadow-lg shadow-red-500/50"></span>
                    </button>
                    
                    <!-- Dropdown de Notificações -->
                    <div x-show="open" 
                         @click.away="open = false"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 scale-95 translate-y-2"
                         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-200"
                         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                         x-transition:leave-end="opacity-0 scale-95 translate-y-2"
                         class="absolute right-0 mt-2 w-80 bg-white/95 dark:bg-gray-800/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden animate-zoomIn">
                        <div class="p-4 border-b border-gray-200/50 dark:border-gray-700/50 bg-gradient-to-r from-primary-500/10 to-purple-500/10">
                            <h3 class="font-bold text-gray-800 dark:text-white flex items-center gap-2">
                                <i class="fas fa-bell text-primary-500"></i>
                                Notificações
                            </h3>
                        </div>
                        <div class="max-h-96 overflow-y-auto">
                            <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
                                    <i class="fas fa-inbox text-5xl text-gray-400 dark:text-gray-500"></i>
                                </div>
                                <p class="text-sm font-medium">Nenhuma notificação</p>
                                <p class="text-xs mt-1 opacity-70">Você está em dia!</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Toggle Tema -->
                <button @click="toggleTheme()" 
                        class="relative p-2.5 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-110 active:scale-95 group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/20 to-orange-400/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <i class="fas fa-moon text-gray-600 dark:text-gray-300 dark:hidden relative z-10 transition-all duration-500 group-hover:rotate-12"></i>
                    <i class="fas fa-sun text-yellow-500 hidden dark:block relative z-10 transition-all duration-500 group-hover:rotate-180"></i>
                </button>
                
                <!-- Menu do Usuário -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" 
                            class="flex items-center space-x-3 px-3 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 hover:scale-105 active:scale-95 group">
                        <div class="relative">
                            <div class="w-9 h-9 rounded-full bg-gradient-to-br from-primary-500 via-primary-600 to-purple-600 flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-primary-500/50 transition-transform duration-300 group-hover:scale-110 group-hover:rotate-6">
                                <?php echo strtoupper(substr($usu_nome, 0, 2)); ?>
                            </div>
                            <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 animate-pulse"></div>
                        </div>
                        <div class="hidden md:block text-left">
                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 transition-colors duration-300 group-hover:text-primary-600 dark:group-hover:text-primary-400"><?php echo $usu_nome; ?></p>
                            <p class="text-xs text-gray-500 dark:text-gray-400"><?php echo $usu_email; ?></p>
                        </div>
                        <i class="fas fa-chevron-down text-gray-500 dark:text-gray-400 transition-transform duration-300" :class="open && 'rotate-180'"></i>
                    </button>
                    
                    <!-- Dropdown do Usuário -->
                    <div x-show="open" 
                         @click.away="open = false"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="opacity-0 scale-95 translate-y-2"
                         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-200"
                         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                         x-transition:leave-end="opacity-0 scale-95 translate-y-2"
                         class="absolute right-0 mt-2 w-64 bg-white/95 dark:bg-gray-800/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden animate-zoomIn">
                        <div class="p-4 border-b border-gray-200/50 dark:border-gray-700/50 bg-gradient-to-r from-primary-500/10 to-purple-500/10">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-500 via-primary-600 to-purple-600 flex items-center justify-center text-white font-bold text-base shadow-lg shadow-primary-500/50">
                                    <?php echo strtoupper(substr($usu_nome, 0, 2)); ?>
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-gray-700 dark:text-gray-200"><?php echo $usu_nome; ?></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400"><?php echo $usu_email; ?></p>
                                </div>
                            </div>
                        </div>
                        <div class="py-2">
                            <a href="<?php echo $base_path; ?>Perfil.php" class="flex items-center px-4 py-3 text-sm text-gray-700 dark:text-gray-200 hover:bg-gradient-to-r hover:from-primary-50 hover:to-purple-50 dark:hover:from-primary-900/20 dark:hover:to-purple-900/20 transition-all duration-300 group">
                                <div class="w-8 h-8 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-user text-primary-600 dark:text-primary-400"></i>
                                </div>
                                <span class="font-medium">Meu Perfil</span>
                                <i class="fas fa-chevron-right ml-auto opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300"></i>
                            </a>
                            <a href="<?php echo $base_path; ?>logout.php" class="flex items-center px-4 py-3 text-sm text-red-600 dark:text-red-400 hover:bg-gradient-to-r hover:from-red-50 hover:to-orange-50 dark:hover:from-red-900/20 dark:hover:to-orange-900/20 transition-all duration-300 group">
                                <div class="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
                                    <i class="fas fa-right-from-bracket text-red-600 dark:text-red-400"></i>
                                </div>
                                <span class="font-medium">Sair</span>
                                <i class="fas fa-chevron-right ml-auto opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <?php
}
?>
