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

if (!isset($_SESSION['usuario_id'])) {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ativos - Carteira PRO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/layout.css">
    <style>
        .modal-overlay {
            background-color: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(4px);
        }
        .modal-content {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <?php require_once 'menu.php'; ?>

        <!-- Main Content -->
        <main class="main-content">
            <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">💼 Gestão de Ativos</h2>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 font-medium text-gray-700">
                        <span>Olá, <?php echo htmlspecialchars($_SESSION['usuario_nome'] ?? 'Usuário'); ?></span>
                    </div>
                </div>
            </div>

            <div class="content-wrapper animate-slide-up delay-100">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold text-gray-800">Seus Ativos</h3>
                    <button onclick="abrirModalNovoAtivo()" class="btn btn-primary shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all">
                        + Novo Ativo
                    </button>
                </div>

                <div id="alert-container"></div>

                <div class="table-container">
                    <table class="data-table" id="tabela-ativos">
                        <thead>
                            <tr>
                                <th>Ticker</th>
                                <th>Nome</th>
                                <th>Tipo</th>
                                <th>Quantidade</th>
                                <th>Livre</th>
                                <th>Bloqueada</th>
                                <th>Preço Médio</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-ativos">
                            <tr><td colspan="8" class="text-center py-4">Carregando...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- MODAL NOVO ATIVO -->
    <div id="modalNovoAtivo" class="fixed inset-0 z-50 hidden flex items-center justify-center modal-overlay p-4">
        <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 modal-content transform scale-95 opacity-0 border-t-6 border-blue-500">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-2xl font-bold text-gray-800">Cadastrar Ativo</h3>
                <button onclick="fecharModal('modalNovoAtivo')" class="text-gray-400 hover:text-red-500 text-2xl font-bold">&times;</button>
            </div>
            
            <form id="formNovoAtivo" onsubmit="salvarNovoAtivo(event)" class="space-y-4">
                <div class="form-group">
                    <label class="form-label">Ticker (Ex: PETR4)</label>
                    <input type="text" id="novo-ticker" class="form-control uppercase" required maxlength="10">
                </div>
                
                <div class="form-group">
                    <label class="form-label">Nome da Empresa</label>
                    <input type="text" id="novo-nome" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Tipo de Ativo</label>
                    <select id="novo-tipo" class="form-control" required>
                        <option value="ACAO">Ação</option>
                        <option value="FII">Fundo Imobiliário (FII)</option>
                        <option value="BDR">BDR</option>
                        <option value="ETF">ETF</option>
                    </select>
                </div>

                <div class="flex gap-4 mt-8">
                    <button type="button" onclick="fecharModal('modalNovoAtivo')" class="flex-1 py-3 px-4 rounded-xl border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition-colors">Cancelar</button>
                    <button type="submit" class="flex-1 py-3 px-4 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors shadow-md">Salvar</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL COMPRA / VENDA (MOVIMENTAÇÃO) -->
    <div id="modalMovimentacao" class="fixed inset-0 z-50 hidden flex items-center justify-center modal-overlay p-4">
        <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 modal-content transform scale-95 opacity-0 border-t-6 border-green-500" id="modalMovimentacaoBorder">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-2xl font-bold text-gray-800" id="movimentacao-titulo">Comprar Ativo</h3>
                <button onclick="fecharModal('modalMovimentacao')" class="text-gray-400 hover:text-red-500 text-2xl font-bold">&times;</button>
            </div>
            
            <div class="bg-gray-50 p-4 rounded-xl mb-6 border border-gray-200">
                <div class="flex justify-between mb-2">
                    <span class="text-gray-500 font-medium">Ativo:</span>
                    <span class="font-bold text-blue-600 text-lg" id="mov-ticker-display">PETR4</span>
                </div>
                <div class="flex justify-between mb-2">
                    <span class="text-gray-500 font-medium">Saldo Livre Atual:</span>
                    <span class="font-bold text-gray-800" id="mov-saldo-display">0</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500 font-medium">Preço Médio Atual:</span>
                    <span class="font-bold text-gray-800" id="mov-pm-display">R$ 0,00</span>
                </div>
            </div>

            <form id="formMovimentacao" onsubmit="salvarMovimentacao(event)" class="space-y-4">
                <input type="hidden" id="mov-ativo-id">
                <input type="hidden" id="mov-tipo" value="COMPRA">
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Quantidade</label>
                        <input type="number" id="mov-quantidade" class="form-control" required min="1" step="1">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Preço Unitário (R$)</label>
                        <input type="number" id="mov-preco" class="form-control" required min="0.01" step="0.01">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Data da Operação</label>
                    <input type="date" id="mov-data" class="form-control" required>
                </div>

                <div class="flex gap-4 mt-8">
                    <button type="button" onclick="fecharModal('modalMovimentacao')" class="flex-1 py-3 px-4 rounded-xl border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition-colors">Cancelar</button>
                    <button type="submit" id="btn-salvar-mov" class="flex-1 py-3 px-4 rounded-xl bg-green-600 text-white font-bold hover:bg-green-700 transition-colors shadow-md">Confirmar Compra</button>
                </div>
            </form>
        </div>
    </div>

    <script src="../javascript/api_client.js"></script>
    <script>
        // Setar data de hoje por padrão
        document.getElementById('mov-data').valueAsDate = new Date();

        document.addEventListener('DOMContentLoaded', () => {
            carregarAtivos();
        });

        // Funções de Modal Genéricas
        function abrirModal(id) {
            const modal = document.getElementById(id);
            const content = modal.querySelector('.modal-content');
            modal.classList.remove('hidden');
            
            // Trigger reflow
            void modal.offsetWidth;
            
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }

        function fecharModal(id) {
            const modal = document.getElementById(id);
            const content = modal.querySelector('.modal-content');
            
            content.classList.remove('scale-100', 'opacity-100');
            content.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }

        async function carregarAtivos() {
            try {
                const res = await ApiClient.get('api_ativos.php');
                const tbody = document.getElementById('tbody-ativos');
                tbody.innerHTML = '';
                
                if (!res.data || res.data.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="8" class="text-center py-8 text-gray-500">Nenhum ativo cadastrado. Clique em "+ Novo Ativo" para começar.</td></tr>';
                    return;
                }

                res.data.forEach(ativo => {
                    const tr = document.createElement('tr');
                    const livre = ativo.quantidade_total - ativo.quantidade_bloqueada;
                    tr.innerHTML = `
                        <td class="font-bold text-blue-600 text-lg">${ativo.ticker}</td>
                        <td class="text-gray-600">${ativo.nome}</td>
                        <td><span class="badge badge-aberta">${ativo.tipo}</span></td>
                        <td class="font-bold text-gray-800">${ativo.quantidade_total}</td>
                        <td class="font-bold text-green-600">${livre}</td>
                        <td class="font-bold text-red-500">${ativo.quantidade_bloqueada}</td>
                        <td class="font-medium text-gray-700">${Utils.formatarMoeda(ativo.preco_medio)}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick='abrirModalMovimentacao(${JSON.stringify(ativo)}, "COMPRA")' class="px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm font-bold hover:bg-green-200 transition-colors">Comprar</button>
                                <button onclick='abrirModalMovimentacao(${JSON.stringify(ativo)}, "VENDA")' class="px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm font-bold hover:bg-red-200 transition-colors" ${livre <= 0 ? 'disabled opacity-50 cursor-not-allowed' : ''}>Vender</button>
                            </div>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            } catch (e) {
                console.error(e);
                Alertas.erro('Erro ao carregar ativos');
            }
        }

        function abrirModalNovoAtivo() {
            document.getElementById('formNovoAtivo').reset();
            abrirModal('modalNovoAtivo');
        }

        async function salvarNovoAtivo(e) {
            e.preventDefault();
            
            const data = {
                ticker: document.getElementById('novo-ticker').value,
                nome: document.getElementById('novo-nome').value,
                tipo: document.getElementById('novo-tipo').value,
                quantidade: 0,
                preco_medio: 0
            };

            try {
                const res = await ApiClient.post('api_ativos.php', data);
                if (res.status === 'success') {
                    Alertas.sucesso(res.message);
                    fecharModal('modalNovoAtivo');
                    carregarAtivos();
                }
            } catch (error) {
                Alertas.erro(error.message);
            }
        }

        function abrirModalMovimentacao(ativo, tipo) {
            const livre = ativo.quantidade_total - ativo.quantidade_bloqueada;
            
            document.getElementById('mov-ativo-id').value = ativo.id;
            document.getElementById('mov-tipo').value = tipo;
            document.getElementById('mov-ticker-display').textContent = ativo.ticker;
            document.getElementById('mov-saldo-display').textContent = livre;
            document.getElementById('mov-pm-display').textContent = Utils.formatarMoeda(ativo.preco_medio);
            
            const titulo = document.getElementById('movimentacao-titulo');
            const btn = document.getElementById('btn-salvar-mov');
            const border = document.getElementById('modalMovimentacaoBorder');
            
            document.getElementById('mov-quantidade').value = '';
            document.getElementById('mov-preco').value = '';
            
            if (tipo === 'COMPRA') {
                titulo.textContent = 'Comprar Ativo';
                btn.textContent = 'Confirmar Compra';
                btn.className = 'flex-1 py-3 px-4 rounded-xl bg-green-600 text-white font-bold hover:bg-green-700 transition-colors shadow-md';
                border.className = 'bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 modal-content transform scale-95 opacity-0 border-t-6 border-green-500';
                
                document.getElementById('mov-quantidade').max = ''; // Sem limite na compra
            } else {
                titulo.textContent = 'Vender Ativo';
                btn.textContent = 'Confirmar Venda';
                btn.className = 'flex-1 py-3 px-4 rounded-xl bg-red-600 text-white font-bold hover:bg-red-700 transition-colors shadow-md';
                border.className = 'bg-white rounded-3xl shadow-2xl w-full max-w-md p-8 modal-content transform scale-95 opacity-0 border-t-6 border-red-500';
                
                document.getElementById('mov-quantidade').max = livre; // Limite na venda é o saldo livre
            }
            
            abrirModal('modalMovimentacao');
        }

        async function salvarMovimentacao(e) {
            e.preventDefault();
            
            const data = {
                ativo_id: document.getElementById('mov-ativo-id').value,
                tipo_movimento: document.getElementById('mov-tipo').value,
                quantidade: document.getElementById('mov-quantidade').value,
                preco_unitario: document.getElementById('mov-preco').value,
                data_movimento: document.getElementById('mov-data').value
            };

            try {
                const res = await ApiClient.post('api_movimentacoes.php', data);
                if (res.status === 'success') {
                    Alertas.sucesso(res.message);
                    fecharModal('modalMovimentacao');
                    carregarAtivos(); // Recarrega a tabela para atualizar PM e Saldos
                }
            } catch (error) {
                Alertas.erro(error.message);
            }
        }
    </script>
</body>
</html>
