<?php
require_once 'db_config.php';
session_start();

if (!isset($_SESSION['usuario_id'])) {
    header("Location: index.php");
    exit;
}

$usuario_id = $_SESSION['usuario_id'];
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Carteira PRO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/layout.css">
    <style>
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-up { animation: slideUp 0.6s ease-out forwards; }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <?php require_once 'menu.php'; ?>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Topbar -->
            <div class="topbar animate-slide-up">
                <div class="flex items-center gap-4">
                    <button id="menu-toggle" class="lg:hidden text-gray-500 hover:text-blue-500">☰</button>
                    <h2 class="text-xl font-bold text-gray-800 m-0">📊 Dashboard</h2>
                </div>
                <div class="flex items-center gap-4">
                    <button id="theme-toggle" class="text-gray-500 hover:text-blue-500 text-xl">🌙</button>
                    <div class="flex items-center gap-2 font-medium text-gray-700">
                        <span>Olá, <?php echo htmlspecialchars($_SESSION['usuario_nome'] ?? 'Usuário'); ?></span>
                        <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold">
                            <?php echo strtoupper(substr($_SESSION['usuario_nome'] ?? 'U', 0, 1)); ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content Wrapper -->
            <div class="content-wrapper animate-slide-up delay-100">
                <!-- Resumo Executivo (Cards) -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
                    <div class="stat-card animate-slide-up">
                        <div class="flex-1">
                            <p class="text-gray-500 text-sm font-medium">Total Investido</p>
                            <p class="stat-value text-2xl font-bold text-gray-800 mt-2" id="card-investido">R$ 0,00</p>
                        </div>
                        <div class="text-3xl">💰</div>
                    </div>

                    <div class="stat-card animate-slide-up delay-100">
                        <div class="flex-1">
                            <p class="text-gray-500 text-sm font-medium">Valor Atual</p>
                            <p class="stat-value text-2xl font-bold text-gray-800 mt-2" id="card-atual">R$ 0,00</p>
                        </div>
                        <div class="text-3xl">📈</div>
                    </div>

                    <div class="stat-card animate-slide-up delay-200">
                        <div class="flex-1">
                            <p class="text-gray-500 text-sm font-medium">Ganho/Perda</p>
                            <p class="stat-value text-2xl font-bold text-green-500 mt-2" id="card-pnl">R$ 0,00</p>
                        </div>
                        <div class="text-3xl">📊</div>
                    </div>

                    <div class="stat-card animate-slide-up delay-200">
                        <div class="flex-1">
                            <p class="text-gray-500 text-sm font-medium">ROA (%)</p>
                            <p class="stat-value text-2xl font-bold text-blue-500 mt-2" id="card-roa">0%</p>
                        </div>
                        <div class="text-3xl">🎯</div>
                    </div>
                </div>

                <!-- Seção de Gráficos -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                    <!-- Gráfico de Composição -->
                    <div class="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
                        <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Composição da Carteira</h3>
                        <div class="relative h-64">
                            <canvas id="grafico-composicao"></canvas>
                        </div>
                    </div>

                    <!-- Informações Rápidas -->
                    <div class="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
                        <h3 class="text-lg font-bold text-gray-800 mb-4">⚡ Informações Rápidas</h3>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center p-3 bg-blue-50 rounded-lg">
                                <span class="text-gray-700 font-medium">Ativos na Carteira</span>
                                <span class="text-blue-600 font-bold text-lg" id="info-ativos">0</span>
                            </div>
                            <div class="flex justify-between items-center p-3 bg-green-50 rounded-lg">
                                <span class="text-gray-700 font-medium">Opções Abertas</span>
                                <span class="text-green-600 font-bold text-lg" id="info-abertas">0</span>
                            </div>
                            <div class="flex justify-between items-center p-3 bg-purple-50 rounded-lg">
                                <span class="text-gray-700 font-medium">Prêmios Recebidos</span>
                                <span class="text-purple-600 font-bold text-lg" id="info-premios">R$ 0,00</span>
                            </div>
                            <div class="flex justify-between items-center p-3 bg-yellow-50 rounded-lg">
                                <span class="text-gray-700 font-medium">Ações Bloqueadas</span>
                                <span class="text-yellow-600 font-bold text-lg" id="info-bloqueadas">0</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabela de Ativos -->
                <div class="bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-lg font-bold text-gray-800">💼 Seus Ativos</h3>
                    </div>
                    <div class="table-container">
                        <table class="data-table" id="tabela-ativos">
                            <thead>
                                <tr>
                                    <th>Ticker</th>
                                    <th>Quantidade</th>
                                    <th>Bloqueada</th>
                                    <th>Preço Médio</th>
                                    <th>Valor Total</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-ativos">
                                <tr><td colspan="6" class="text-center py-4 text-gray-500">Carregando...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Scripts -->
    <script src="../javascript/api_client.js"></script>
    <script src="../javascript/dashboard.js"></script>
    <script>
        // Toggle de tema
        document.getElementById('theme-toggle').addEventListener('click', () => {
            const html = document.documentElement;
            const tema = html.getAttribute('data-theme');
            html.setAttribute('data-theme', tema === 'dark' ? 'light' : 'dark');
            localStorage.setItem('tema', tema === 'dark' ? 'light' : 'dark');
        });

        // Aplicar tema salvo
        const temaSalvo = localStorage.getItem('tema') || 'light';
        document.documentElement.setAttribute('data-theme', temaSalvo);
    </script>
</body>
</html>
