<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centro de Análise de Usuários - Game Store Admin</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <script type="module" async src="https://static.rocket.new/rocket-web.js?_cfg=https%3A%2F%2Fgamestore9284back.builtwithrocket.new&_be=https%3A%2F%2Fapplication.rocket.new&_v=0.1.10"></script>
  <script type="module" defer src="https://static.rocket.new/rocket-shot.js?v=0.0.1"></script>
  </head>
<body class="bg-background font-inter">
    <!-- Sidebar Navigation -->
    <div class="flex min-h-screen">
        <aside class="w-64 bg-surface shadow-elevated border-r border-border-light">
            <div class="p-6">
                <!-- Logo -->
                <div class="flex items-center space-x-3 mb-8">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-lg font-semibold text-text-primary">GameStore</h1>
                        <p class="text-xs text-text-secondary">Admin Dashboard</p>
                    </div>
                </div>

                <!-- Navigation Menu -->
                <nav class="space-y-2">
                    <a href="admin.html" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
                        </svg>
                        <span>Visão Geral</span>
                    </a>
                    <a href="user_analytics_center.html" class="flex items-center space-x-3 px-4 py-3 bg-primary-50 text-primary-700 rounded-lg font-medium">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <span>Análise de Usuários</span>
                    </a>
                    <a href="sales_performance_hub.html" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                        </svg>
                        <span>Performance de Vendas</span>
                    </a>
                    <a href="GestaoGames.php" class="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-secondary-50 hover:text-text-primary rounded-lg transition-smooth">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM21 17a2 2 0 11-4 0 2 2 0 014 0zM7 12h14l-1-5H6l-1 5z"/>
                        </svg>
                        <span>Catálogo de Jogos</span>
                    </a>
                </nav>
            </div>

            <!-- User Profile -->
            <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-border-light">
                <div class="flex items-center space-x-3">
                    <img src="https://img.rocket.new/generatedImages/rocket_gen_img_11df01673-1763296947751.png" 
                         alt="Foto do perfil do administrador" 
                         class="w-10 h-10 rounded-full object-cover"
                         onerror="this.src='https://images.unsplash.com/photo-1584824486509-112e4181ff6b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'; this.onerror=null;">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-text-primary">Carlos Silva</p>
                        <p class="text-xs text-text-secondary">Administrador</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 overflow-auto">
            <!-- Header -->
            <header class="bg-surface border-b border-border-light px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-semibold text-text-primary">Centro de Análise de Usuários</h1>
                        <p class="text-text-secondary">Compreenda padrões de comportamento e métricas de engajamento</p>
                    </div>
                    
                    <!-- Real-time User Counter -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-2 px-4 py-2 bg-success-50 rounded-lg">
                            <div class="w-2 h-2 bg-success-500 rounded-full animate-pulse"></div>
                            <span class="text-sm font-medium text-success-700">Usuários Online:</span>
                            <span class="text-sm font-semibold text-success-700 font-data">1.247</span>
                        </div>
                        
                        <!-- Export Button -->
                        <button class="flex items-center space-x-2 px-3 py-2 border border-border rounded-lg hover:bg-secondary-50 transition-smooth">
                            <svg class="w-4 h-4 text-text-secondary" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 16l-6-6h4V4h4v6h4l-6 6zM20 18v2H4v-2h16z"/>
                            </svg>
                            <span class="text-sm text-text-secondary">Exportar</span>
                        </button>
                    </div>
                </div>

                <!-- Multi-dimensional Filters -->
                <div class="mt-4 flex flex-wrap items-center gap-4">
                    <!-- User Segments Filter -->
                   
                    <!-- Saved Filters -->
                    <div class="flex items-center space-x-2">
                      
                      
                      
                      <!-- Adicionando o CSS do Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- Botão para abrir a Modal de Usuários -->
<button class="btn btn-primary d-flex align-items-center space-x-2" onclick="showUsersModal()">
    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
        <path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
    </svg>
    <span class="text-sm">Ver Usuarios</span>
</button>
                      
                      
                    </div>
                </div>
            </header>
            
            
            
           <!-- Modal de Usuários -->
<div id="usersModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="usersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="usersModalLabel">Lista de Usuários</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="usersList"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Perfil do Usuário -->
<div id="profileModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="profileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="profileModalLabel">Perfil do Usuário</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="userProfile">
                <!-- Dados do usuário serão injetados aqui -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary" onclick="enableEditForm()">Editar</button>
                <button type="button" class="btn btn-success" id="saveBtn" style="display:none;" onclick="saveUserProfile()">Salvar Alterações</button>
            </div>
        </div>
    </div>
</div>


<!-- Adicionando os Scripts do Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    // Função para mostrar a Modal de Usuários
    function showUsersModal() {
        $('#usersModal').modal('show'); // Usando jQuery para exibir a modal de usuários
        loadUsers(); // Carregar os usuários ao abrir a modal
    }

    // Função para carregar os usuários da base de dados
    function loadUsers() {
        const usersListContainer = document.getElementById("usersList");
        fetch('BuscarUser.php')  // Arquivo PHP que retorna a lista de usuários
            .then(response => response.json())
            .then(data => {
                if (data.length > 0) {
                    let html = '';
                    data.forEach(user => {
                        html += `
                            <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                                <span>${user.primeiro_nome} ${user.sobrenome}</span>
                                <span>${user.email}</span>
                                <button onclick="showUserProfile(${user.id})" class="btn btn-info btn-sm">Exibir Perfil</button>
                            </div>
                        `;
                    });
                    usersListContainer.innerHTML = html;
                } else {
                    usersListContainer.innerHTML = "<p>Não há usuários registrados.</p>";
                }
            })
            .catch(error => console.error('Erro ao carregar usuários:', error));
    }

// Função para carregar os detalhes do usuário
function showUserProfile(userId) {
    fetch(`buscarPerfilUser.php?id=${userId}`)  // Arquivo PHP que retorna as informações do usuário
        .then(response => response.json())
        .then(data => {
            let html = `
                <form id="profileForm">
                    <input type="hidden" id="user_id" value="${data.id}">  <!-- Campo oculto para armazenar o ID -->
                    <div class="form-group">
                        <label for="primeiro_nome"><strong>Nome:</strong></label>
                        <input type="text" class="form-control" id="primeiro_nome" value="${data.primeiro_nome}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="sobrenome"><strong>Sobrenome:</strong></label>
                        <input type="text" class="form-control" id="sobrenome" value="${data.sobrenome}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="email"><strong>Email:</strong></label>
                        <input type="email" class="form-control" id="email" value="${data.email}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="telefone"><strong>Telefone:</strong></label>
                        <input type="text" class="form-control" id="telefone" value="${data.telefone}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="data_nascimento"><strong>Data de Nascimento:</strong></label>
                        <input type="date" class="form-control" id="data_nascimento" value="${data.data_nascimento}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="nivel"><strong>Nível:</strong></label>
                        <input type="text" class="form-control" id="nivel" value="${data.nivel}" readonly>
                    </div>
                    <!-- Campo de Status Editável -->
                    <div class="form-group">
                        <label for="status"><strong>Status:</strong></label>
                        <select class="form-control" id="status">
                            <option value="Ativo" ${data.status === 'Ativo' ? 'selected' : ''}>Ativo</option>
                            <option value="Inativo" ${data.status === 'Inativo' ? 'selected' : ''}>Inativo</option>
                        </select>
                    </div>
                    <!-- Exibição da Data de Criação -->
                    <div class="form-group">
                        <label for="criado_em"><strong>Data de Cadastro:</strong></label>
                        <input type="text" class="form-control" id="criado_em" value="${data.criado_em}" readonly>
                    </div>
                </form>
            `;
            document.getElementById("userProfile").innerHTML = html;
            $('#profileModal').modal('show');  // Usando jQuery para exibir a modal de perfil
        })
        .catch(error => console.error('Erro ao carregar perfil do usuário:', error));
}



// Função para habilitar o formulário de edição
function enableEditForm() {
    // Torna os campos editáveis
    document.getElementById("primeiro_nome").readOnly = false;
    document.getElementById("sobrenome").readOnly = false;
    document.getElementById("email").readOnly = false;
    document.getElementById("telefone").readOnly = false;
    document.getElementById("data_nascimento").readOnly = false;
    document.getElementById("nivel").readOnly = false;

    // Exibe o botão de salvar alterações
    document.getElementById("saveBtn").style.display = "inline-block";  // Exibe o botão de salvar

    // Esconde o botão de editar
    document.querySelector(".btn-primary").style.display = "none";  // Esconde o botão de editar
}

// Função para salvar as alterações no perfil do usuário
function saveUserProfile() {
    const userId = document.getElementById("user_id").value;  // Pegando o ID do campo oculto
    const updatedUser = {
        id: userId,  // ID do usuário
        primeiro_nome: document.getElementById("primeiro_nome").value,
        sobrenome: document.getElementById("sobrenome").value,
        email: document.getElementById("email").value,
        telefone: document.getElementById("telefone").value,
        data_nascimento: document.getElementById("data_nascimento").value,
        nivel: document.getElementById("nivel").value,
         status: document.getElementById("status").value  // Adicionando o status
    };

    // Enviar dados para o servidor para atualizar no banco de dados
    fetch('editarPerf.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedUser)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Perfil atualizado com sucesso!');
            $('#profileModal').modal('hide');  // Fechar a modal

            // Esconde o botão de salvar e exibe o botão de editar novamente
            document.getElementById("saveBtn").style.display = "none";  // Esconde o botão de salvar
            document.querySelector(".btn-primary").style.display = "inline-block";  // Exibe o botão de editar
        } else {
            alert('Erro ao atualizar o perfil.');
        }
    })
    .catch(error => console.error('Erro ao salvar as alterações:', error));
}



</script>








            <!-- Dashboard Content -->
            <div class="p-6">
                <!-- Primary Metrics Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <!-- User Acquisition -->
                    
                    
                <?php
// Conexão com o banco de dados (usando PDO, conforme o seu exemplo anterior)
include_once($_SERVER['DOCUMENT_ROOT'] . '/db.php');

// Consulta SQL para contar o número de usuários
$sql = "SELECT COUNT(*) as user_count FROM usuarios";
$stmt = $pdo->prepare($sql);
$stmt->execute();

// Recupera o número de usuários
$result = $stmt->fetch();
$userCount = $result['user_count'];  // Contagem de usuários


// SQL para contar os cadastros dos últimos 30 dias
$sql = "SELECT COUNT(*) as recent_user_count FROM usuarios WHERE criado_em >= CURDATE() - INTERVAL 30 DAY";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$result = $stmt->fetch();

// Número de cadastros nos últimos 30 dias
$recentUserCount = $result['recent_user_count'];

// Calculando a média diária de cadastros
$averageDailyRegistrations = $recentUserCount / 30;


// SQL para contar os cadastros do mês anterior
$sqlPreviousMonth = "SELECT COUNT(*) as previous_user_count FROM usuarios WHERE criado_em >= CURDATE() - INTERVAL 1 MONTH AND criado_em < CURDATE() - INTERVAL 30 DAY";
$stmtPreviousMonth = $pdo->prepare($sqlPreviousMonth);
$stmtPreviousMonth->execute();
$resultPreviousMonth = $stmtPreviousMonth->fetch();

// Número de cadastros no mês anterior
$previousUserCount = $resultPreviousMonth['previous_user_count'];

// Calculando a variação percentual
$percentageChange = 0;
if ($previousUserCount > 0) {
    $percentageChange = (($recentUserCount - $previousUserCount) / $previousUserCount) * 100;
}
?>

<!-- Card de Usuários Cad. -->
<div class="card p-6">
    <div class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-medium text-text-secondary">Usuários Cad.</h3>
        <div class="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
            <svg class="w-4 h-4 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
            </svg>
        </div>
    </div>
    <div class="flex items-end justify-between">
        <div>
            <p class="text-2xl font-semibold text-text-primary font-data"><?php echo number_format($userCount, 0, ',', '.'); ?></p> <!-- Exibe a contagem de usuários -->
            <div class="flex items-center mt-1">
                <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M7 14l5-5 5 5"/>
                </svg>
                <span class="text-sm text-success-600 font-medium">
                    <?php 
                    // Exibindo a variação percentual
                    echo ($percentageChange >= 0 ? "+" : "") . number_format($percentageChange, 1, ',', '.') . "%";
                    ?>
                </span>
            </div>
        </div>
        <!-- Sparkline -->
        <div class="w-16 h-8">
            <svg class="w-full h-full" viewBox="0 0 64 32">
                <polyline points="0,20 8,18 16,15 24,12 32,10 40,8 48,6 56,4 64,2" 
                          fill="none" stroke="#10B981" stroke-width="2"/>
            </svg>
        </div>
    </div>
</div>



                    <!-- Retention Rate -->
                    <div class="card p-6">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-medium text-text-secondary">Taxa de Retenção</h3>
                            <div class="w-8 h-8 bg-success-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-success-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div class="flex items-end justify-between">
                            <div>
                                <p class="text-2xl font-semibold text-text-primary font-data">78,4%</p>
                                <div class="flex items-center mt-1">
                                    <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M7 14l5-5 5 5"/>
                                    </svg>
                                    <span class="text-sm text-success-600 font-medium">+3,1%</span>
                                </div>
                            </div>
                            <!-- Sparkline -->
                            <div class="w-16 h-8">
                                <svg class="w-full h-full" viewBox="0 0 64 32">
                                    <polyline points="0,16 8,14 16,12 24,10 32,8 40,10 48,8 56,6 64,4" 
                                              fill="none" stroke="#10B981" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- Session Duration -->
                    <div class="card p-6">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-medium text-text-secondary">Duração da Sessão</h3>
                            <div class="w-8 h-8 bg-accent-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-accent-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div class="flex items-end justify-between">
                            <div>
                                <p class="text-2xl font-semibold text-text-primary font-data">24m 18s</p>
                                <div class="flex items-center mt-1">
                                    <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M7 14l5-5 5 5"/>
                                    </svg>
                                    <span class="text-sm text-success-600 font-medium">+7,2%</span>
                                </div>
                            </div>
                            <!-- Sparkline -->
                            <div class="w-16 h-8">
                                <svg class="w-full h-full" viewBox="0 0 64 32">
                                    <polyline points="0,24 8,22 16,20 24,18 32,16 40,14 48,12 56,10 64,8" 
                                              fill="none" stroke="#F59E0B" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- Churn Rate -->
                    <div class="card p-6">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-medium text-text-secondary">Taxa de Churn</h3>
                            <div class="w-8 h-8 bg-error-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-error-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                        </div>
                        <div class="flex items-end justify-between">
                            <div>
                                <p class="text-2xl font-semibold text-text-primary font-data">5,2%</p>
                                <div class="flex items-center mt-1">
                                    <svg class="w-4 h-4 text-success-500 mr-1" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M17 10l-5 5-5-5"/>
                                    </svg>
                                    <span class="text-sm text-success-600 font-medium">-1,8%</span>
                                </div>
                            </div>
                            <!-- Sparkline -->
                            <div class="w-16 h-8">
                                <svg class="w-full h-full" viewBox="0 0 64 32">
                                    <polyline points="0,12 8,14 16,16 24,18 32,16 40,14 48,12 56,10 64,8" 
                                              fill="none" stroke="#EF4444" stroke-width="2"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Analysis Area -->
                <div class="grid grid-cols-1 xl:grid-cols-16 gap-6 mb-8">
                    <!-- Main Charts Area (12 columns) -->
                    <div class="xl:col-span-12">
                        <div class="card p-6">
                            <!-- Tabbed Interface -->
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex space-x-1 bg-secondary-100 rounded-lg p-1">
                                    <button id="tab-registration" class="px-4 py-2 text-sm font-medium rounded-md bg-white text-text-primary shadow-sm transition-smooth">
                                        Tendência de Registro
                                    </button>
                                    <button id="tab-demographics" class="px-4 py-2 text-sm font-medium rounded-md text-text-secondary hover:text-text-primary transition-smooth">
                                        Demografia
                                    </button>
                                    <button id="tab-journey" class="px-4 py-2 text-sm font-medium rounded-md text-text-secondary hover:text-text-primary transition-smooth">
                                        Jornada do Usuário
                                    </button>
                                </div>
                                
                                <div class="flex items-center space-x-2">
                                    <span class="text-sm text-text-secondary">Última atualização:</span>
                                    <span class="text-sm font-medium text-text-primary">19/11/2025 02:10</span>
                                </div>
                            </div>

                            <!-- Registration Trend Chart -->
                            <div id="chart-registration" class="chart-container">
                                <div class="h-80 bg-secondary-50 rounded-lg flex items-center justify-center relative overflow-hidden">
                                    <svg class="w-full h-full" viewBox="0 0 800 320">
                                        <!-- Grid Lines -->
                                        <defs>
                                            <pattern id="grid" width="40" height="32" patternUnits="userSpaceOnUse">
                                                <path d="M 40 0 L 0 0 0 32" fill="none" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
                                            </pattern>
                                        </defs>
                                        <rect width="100%" height="100%" fill="url(#grid)"/>
                                        
                                        <!-- Registration Line -->
                                        <polyline points="50,250 100,230 150,210 200,190 250,170 300,150 350,160 400,140 450,120 500,100 550,110 600,90 650,80 700,70 750,60" 
                                                  fill="none" stroke="#1E40AF" stroke-width="3"/>
                                        
                                        <!-- Data Points -->
                                        <circle cx="50" cy="250" r="4" fill="#1E40AF"/>
                                        <circle cx="100" cy="230" r="4" fill="#1E40AF"/>
                                        <circle cx="150" cy="210" r="4" fill="#1E40AF"/>
                                        <circle cx="200" cy="190" r="4" fill="#1E40AF"/>
                                        <circle cx="250" cy="170" r="4" fill="#1E40AF"/>
                                        <circle cx="300" cy="150" r="4" fill="#1E40AF"/>
                                        <circle cx="350" cy="160" r="4" fill="#1E40AF"/>
                                        <circle cx="400" cy="140" r="4" fill="#1E40AF"/>
                                        <circle cx="450" cy="120" r="4" fill="#1E40AF"/>
                                        <circle cx="500" cy="100" r="4" fill="#1E40AF"/>
                                        <circle cx="550" cy="110" r="4" fill="#1E40AF"/>
                                        <circle cx="600" cy="90" r="4" fill="#1E40AF"/>
                                        <circle cx="650" cy="80" r="4" fill="#1E40AF"/>
                                        <circle cx="700" cy="70" r="4" fill="#1E40AF"/>
                                        <circle cx="750" cy="60" r="4" fill="#1E40AF"/>
                                        
                                        <!-- Labels -->
                                        <text x="50" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">01/11</text>
                                        <text x="200" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">05/11</text>
                                        <text x="350" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">09/11</text>
                                        <text x="500" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">13/11</text>
                                        <text x="650" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">17/11</text>
                                        <text x="750" y="290" text-anchor="middle" class="text-xs fill-current text-text-secondary">19/11</text>
                                    </svg>
                                </div>
                            </div>

                            <!-- Demographics Chart (Hidden by default) -->
                            <div id="chart-demographics" class="chart-container hidden">
                                <div class="h-80 bg-secondary-50 rounded-lg flex items-center justify-center relative overflow-hidden">
                                    <svg class="w-full h-full" viewBox="0 0 800 320">
                                        <!-- Age Groups Bars -->
                                        <rect x="100" y="180" width="60" height="100" fill="#1E40AF" opacity="0.8"/>
                                        <rect x="200" y="140" width="60" height="140" fill="#3B82F6" opacity="0.8"/>
                                        <rect x="300" y="120" width="60" height="160" fill="#60A5FA" opacity="0.8"/>
                                        <rect x="400" y="160" width="60" height="120" fill="#93C5FD" opacity="0.8"/>
                                        <rect x="500" y="200" width="60" height="80" fill="#DBEAFE" opacity="0.8"/>
                                        
                                        <!-- Labels -->
                                        <text x="130" y="300" text-anchor="middle" class="text-xs fill-current text-text-secondary">18-24</text>
                                        <text x="230" y="300" text-anchor="middle" class="text-xs fill-current text-text-secondary">25-34</text>
                                        <text x="330" y="300" text-anchor="middle" class="text-xs fill-current text-text-secondary">35-44</text>
                                        <text x="430" y="300" text-anchor="middle" class="text-xs fill-current text-text-secondary">45-54</text>
                                        <text x="530" y="300" text-anchor="middle" class="text-xs fill-current text-text-secondary">55+</text>
                                    </svg>
                                </div>
                            </div>

                            <!-- User Journey Funnel (Hidden by default) -->
                            <div id="chart-journey" class="chart-container hidden">
                                <div class="h-80 bg-secondary-50 rounded-lg flex items-center justify-center relative">
                                    <div class="w-full max-w-2xl">
                                        <!-- Funnel Steps -->
                                        <div class="space-y-4">
                                            <div class="flex items-center">
                                                <div class="w-full bg-primary h-12 rounded-lg flex items-center justify-between px-6" style="width: 100%;">
                                                    <span class="text-white font-medium">Visitantes</span>
                                                    <span class="text-white font-data">24.847</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-center">
                                                <div class="w-4/5 bg-primary-600 h-12 rounded-lg flex items-center justify-between px-6">
                                                    <span class="text-white font-medium">Visualizaram Jogos</span>
                                                    <span class="text-white font-data">18.635</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-center">
                                                <div class="w-3/5 bg-primary-700 h-12 rounded-lg flex items-center justify-between px-6">
                                                    <span class="text-white font-medium">Adicionaram ao Carrinho</span>
                                                    <span class="text-white font-data">8.247</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-center">
                                                <div class="w-2/5 bg-primary-800 h-12 rounded-lg flex items-center justify-between px-6">
                                                    <span class="text-white font-medium">Iniciaram Checkout</span>
                                                    <span class="text-white font-data">4.123</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-center">
                                                <div class="w-1/5 bg-primary-900 h-12 rounded-lg flex items-center justify-between px-6">
                                                    <span class="text-white font-medium">Compraram</span>
                                                    <span class="text-white font-data">3.247</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Side Panel (4 columns) -->
                    <div class="xl:col-span-4">
                        <!-- User Activity Heatmap -->
                        <div class="card p-6 mb-6">
                            <h3 class="text-lg font-semibold text-text-primary mb-4">Atividade por Horário</h3>
                            <div class="grid grid-cols-7 gap-1">
                                <!-- Days of week header -->
                                <div class="text-xs text-text-secondary text-center py-1">Dom</div>
                                <div class="text-xs text-text-secondary text-center py-1">Seg</div>
                                <div class="text-xs text-text-secondary text-center py-1">Ter</div>
                                <div class="text-xs text-text-secondary text-center py-1">Qua</div>
                                <div class="text-xs text-text-secondary text-center py-1">Qui</div>
                                <div class="text-xs text-text-secondary text-center py-1">Sex</div>
                                <div class="text-xs text-text-secondary text-center py-1">Sáb</div>
                                
                                <!-- Heatmap cells -->
                                <div class="w-6 h-6 bg-primary-100 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-300 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-500 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-700 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-800 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-600 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-400 rounded-sm"></div>
                                
                                <div class="w-6 h-6 bg-primary-200 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-400 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-600 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-800 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-900 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-700 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-500 rounded-sm"></div>
                                
                                <div class="w-6 h-6 bg-primary-100 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-300 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-500 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-700 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-800 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-600 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-400 rounded-sm"></div>
                                
                                <div class="w-6 h-6 bg-primary-200 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-400 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-600 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-800 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-900 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-700 rounded-sm"></div>
                                <div class="w-6 h-6 bg-primary-500 rounded-sm"></div>
                            </div>
                            <div class="flex items-center justify-between mt-4 text-xs text-text-secondary">
                                <span>Menos</span>
                                <div class="flex space-x-1">
                                    <div class="w-3 h-3 bg-secondary-200 rounded-sm"></div>
                                    <div class="w-3 h-3 bg-primary-200 rounded-sm"></div>
                                    <div class="w-3 h-3 bg-primary-400 rounded-sm"></div>
                                    <div class="w-3 h-3 bg-primary-600 rounded-sm"></div>
                                    <div class="w-3 h-3 bg-primary-800 rounded-sm"></div>
                                </div>
                                <span>Mais</span>
                            </div>
                        </div>

                        <!-- Engagement Score Distribution -->
                        <div class="card p-6">
                            <h3 class="text-lg font-semibold text-text-primary mb-4">Score de Engajamento</h3>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-text-secondary">Muito Alto (90-100)</span>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-20 h-2 bg-secondary-200 rounded-full">
                                            <div class="w-4/5 h-full bg-success rounded-full"></div>
                                        </div>
                                        <span class="text-sm font-medium text-text-primary font-data">1.247</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-text-secondary">Alto (70-89)</span>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-20 h-2 bg-secondary-200 rounded-full">
                                            <div class="w-full h-full bg-primary rounded-full"></div>
                                        </div>
                                        <span class="text-sm font-medium text-text-primary font-data">3.891</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-text-secondary">Médio (50-69)</span>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-20 h-2 bg-secondary-200 rounded-full">
                                            <div class="w-3/4 h-full bg-accent rounded-full"></div>
                                        </div>
                                        <span class="text-sm font-medium text-text-primary font-data">8.456</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-text-secondary">Baixo (30-49)</span>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-20 h-2 bg-secondary-200 rounded-full">
                                            <div class="w-2/5 h-full bg-warning rounded-full"></div>
                                        </div>
                                        <span class="text-sm font-medium text-text-primary font-data">6.123</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-text-secondary">Muito Baixo (0-29)</span>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-20 h-2 bg-secondary-200 rounded-full">
                                            <div class="w-1/5 h-full bg-error rounded-full"></div>
                                        </div>
                                        <span class="text-sm font-medium text-text-primary font-data">5.130</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cohort Analysis Table -->
                <div class="card p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-text-primary">Análise de Coorte - Taxa de Retenção</h3>
                        <div class="flex items-center space-x-2">
                            <span class="text-sm text-text-secondary">Período:</span>
                            <select class="px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <option>Semanal</option>
                                <option selected>Mensal</option>
                                <option>Trimestral</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-border">
                                    <th class="text-left py-3 px-4 text-sm font-medium text-text-secondary">Coorte</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Usuários</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 0</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 1</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 2</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 3</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 4</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 5</th>
                                    <th class="text-center py-3 px-4 text-sm font-medium text-text-secondary">Mês 6</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-border-light">
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Nov 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">2.847</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">78%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                </tr>
                                <tr class="border-b border-border-light">
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Out 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">3.124</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">82%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-accent text-white rounded text-xs font-medium">65%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                </tr>
                                <tr class="border-b border-border-light">
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Set 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">2.891</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">79%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-accent text-white rounded text-xs font-medium">62%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-warning text-white rounded text-xs font-medium">48%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                </tr>
                                <tr class="border-b border-border-light">
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Ago 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">3.456</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">85%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-accent text-white rounded text-xs font-medium">68%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-warning text-white rounded text-xs font-medium">52%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-error text-white rounded text-xs font-medium">38%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                </tr>
                                <tr class="border-b border-border-light">
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Jul 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">2.789</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">81%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-accent text-white rounded text-xs font-medium">64%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-warning text-white rounded text-xs font-medium">49%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-error text-white rounded text-xs font-medium">35%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-secondary text-white rounded text-xs font-medium">28%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center text-text-secondary">-</td>
                                </tr>
                                <tr>
                                    <td class="py-3 px-4 text-sm font-medium text-text-primary">Jun 2025</td>
                                    <td class="py-3 px-4 text-sm text-center font-data">3.012</td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-success text-white rounded text-xs font-medium">100%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-primary text-white rounded text-xs font-medium">83%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-accent text-white rounded text-xs font-medium">66%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-warning text-white rounded text-xs font-medium">51%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-error text-white rounded text-xs font-medium">37%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-secondary text-white rounded text-xs font-medium">29%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-center">
                                        <span class="px-2 py-1 bg-secondary-600 text-white rounded text-xs font-medium">24%</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="fixed top-4 right-4 bg-primary text-white px-4 py-2 rounded-lg shadow-lg hidden">
        <div class="flex items-center space-x-2">
            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-sm">Atualizando dados...</span>
        </div>
    </div>

    <script>
        // Tab switching functionality
        const tabs = {
            'tab-registration': 'chart-registration',
            'tab-demographics': 'chart-demographics',
            'tab-journey': 'chart-journey'
        };

        Object.keys(tabs).forEach(tabId => {
            document.getElementById(tabId).addEventListener('click', function() {
                // Remove active state from all tabs
                Object.keys(tabs).forEach(id => {
                    document.getElementById(id).classList.remove('bg-white', 'text-text-primary', 'shadow-sm');
                    document.getElementById(id).classList.add('text-text-secondary');
                });
                
                // Hide all charts
                Object.values(tabs).forEach(chartId => {
                    document.getElementById(chartId).classList.add('hidden');
                });
                
                // Activate clicked tab
                this.classList.add('bg-white', 'text-text-primary', 'shadow-sm');
                this.classList.remove('text-text-secondary');
                
                // Show corresponding chart
                document.getElementById(tabs[tabId]).classList.remove('hidden');
            });
        });

        // Simulate data refresh
        function refreshData() {
            const indicator = document.getElementById('loadingIndicator');
            indicator.classList.remove('hidden');
            
            setTimeout(() => {
                indicator.classList.add('hidden');
                // Update timestamp
                const timestamp = new Date().toLocaleString('pt-BR', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
                document.querySelector('.flex.items-center.space-x-2 span:last-child').textContent = timestamp;
            }, 2000);
        }

        // Auto refresh every 5 minutes
        setInterval(refreshData, 300000);

        // Manual refresh on export button click
        document.querySelector('button[class*="border-border"]').addEventListener('click', refreshData);

        // Simulate real-time user counter updates
        function updateUserCounter() {
            const counter = document.querySelector('.font-data');
            if (counter) {
                const currentCount = parseInt(counter.textContent.replace(/\./g, ''));
                const variation = Math.floor(Math.random() * 20) - 10; // -10 to +10
                const newCount = Math.max(1000, currentCount + variation);
                counter.textContent = newCount.toLocaleString('pt-BR');
            }
        }

        // Update user counter every 30 seconds
        setInterval(updateUserCounter, 30000);
    </script>
<script id="dhws-dataInjector" src="../public/dhws-data-injector.js"></script>
</body>
</html>