<?php
// Inclui o cabeçalho do usuário
require_once 'header.php';

// Certifica-se de que a sessão foi iniciada e o user_id está disponível
if (!isset($_SESSION['user_id'])) {
    // Redirecionar para a página de login ou exibir uma mensagem de erro
    header('Location: login.php'); // Exemplo de redirecionamento
    exit();
}

// Obter informações do usuário logado
$user_id = $_SESSION['user_id'];

// Definir a data de 30 dias atrás
$thirty_days_ago = date('Y-m-d H:i:s', strtotime('-30 days'));


// Buscar transações do usuário nos últimos 30 dias
// Usando $link para a conexão com o banco de dados, assumindo que 'header.php' a define
$sql_transactions = "SELECT * FROM transactions
                     WHERE user_id = ? AND transaction_date >= ?
                     ORDER BY transaction_date DESC";

$transactions = [];
// Verifica se a conexão $link está disponível antes de preparar a query
if (isset($link) && $stmt_transactions = mysqli_prepare($link, $sql_transactions)) {
    mysqli_stmt_bind_param($stmt_transactions, "is", $user_id, $thirty_days_ago);
    if (mysqli_stmt_execute($stmt_transactions)) {
        $result_transactions = mysqli_stmt_get_result($stmt_transactions);

        while ($row_transaction = mysqli_fetch_assoc($result_transactions)) {
            $transactions[] = $row_transaction;
        }
        mysqli_free_result($result_transactions);
    } else {
        // Log de erro detalhado para debugging
        error_log("Erro na execução da query de transações: " . mysqli_stmt_error($stmt_transactions));
        $_SESSION['error_message'] = "Erro ao carregar extrato de transações.";
    }
    mysqli_stmt_close($stmt_transactions);
} else {
    // Log de erro detalhado para debugging
    error_log("Erro na preparação da query de transações ou conexão $link não disponível: " . (isset($link) ? mysqli_error($link) : "Conexão não definida"));
    $_SESSION['error_message'] = "Erro interno ao carregar extrato de transações.";
}

?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extrato de Transações</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Importar fonte Arial (ou similar, se Arial não for padrão) */
        /* Arial é uma fonte padrão na maioria dos sistemas, mas podemos garantir */
        body {
            font-family: "Arial", sans-serif;
            background-color: var(--background-color, #1a202c); /* Cor de fundo escura padrão */
            color: var(--text-color, #ffffff); /* Cor do texto branca padrão */
            margin: 0;
            padding: 0;
            line-height: 1.6;
            overflow-x: hidden; /* Evita rolagem horizontal */
            min-height: 100vh; /* Garante que o corpo ocupa pelo menos a altura da viewport */
            display: flex; /* Usa flexbox para organizar o conteúdo principal e o rodapé */
            flex-direction: column; /* Organiza os itens em coluna */
        }

        /* Variáveis CSS para cores (para a função de trocar cor do admin) */
        :root {
            --background-color: #1a202c; /* Fundo principal escuro */
            --text-color: #ffffff; /* Texto principal branco */
            --primary-color: #4a90e2; /* Exemplo de cor primária (azul) para títulos, links, etc. */
            --accent-color: #f5a623; /* Cor amarela para botões de pagamento/destaque */
            --button-bg-color: #4a90e2; /* Fundo padrão dos botões */
            --button-text-color: #ffffff; /* Cor do texto dos botões */
            --input-bg-color: #2d3748; /* Fundo escuro para inputs */
            --input-text-color: #ffffff; /* Cor do texto dos inputs */
            --border-color: #4a5568; /* Cor para bordas e divisores */
            --card-bg-color: #2d3748; /* Fundo para cards/containers */
            --error-color: #ff6b6b; /* Cor para mensagens de erro */
            --success-color: #28a745; /* Cor para mensagens de sucesso */
        }

        /* Estilo para o corpo com a cor definida pelo admin */
        body.custom-color {
            background-color: var(--background-color);
        }

        .container {
            width: 95%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 10px;
            flex-grow: 1; /* Permite que o container principal ocupe o espaço disponível */
        }

        header {
            background-color: var(--card-bg-color);
            color: var(--text-color);
            padding: 15px 0; /* Aumenta o padding */
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra sutil */
        }

        header h1 {
            margin: 0;
            font-size: 2em; /* Aumenta o tamanho da fonte */
            font-weight: bold; /* Arial Bold */
            color: var(--primary-color); /* Cor primária para o título */
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 15px 0 0 0; /* Aumenta a margem superior */
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
        }

        nav ul li {
            margin: 5px 10px; /* Ajusta a margem entre os itens do menu */
        }

        nav ul li a {
            color: var(--button-text-color); /* Cor do texto dos botões */
            text-decoration: none;
            font-weight: bold; /* Arial Bold */
            padding: 10px 20px; /* Aumenta o padding dos botões */
            border-radius: 25px; /* Botões redondos */
            background-color: var(--button-bg-color); /* Cor de fundo dos botões */
            transition: background-color 0.3s ease, transform 0.2s ease; /* Adiciona transição para hover/active */
            display: inline-block; /* Garante que o padding e a margem funcionem corretamente */
        }

        nav ul li a:hover {
            background-color: var(--primary-color); /* Cor ao passar o mouse */
            transform: translateY(-2px); /* Efeito sutil ao passar o mouse */
        }
        nav ul li a:active {
             transform: translateY(0); /* Remove o efeito ao clicar */
        }


        .content {
            padding: 20px 0;
            flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
        }

        footer {
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
            color: var(--text-color);
            border-top: 1px solid var(--border-color);
            background-color: var(--card-bg-color);
            width: 100%; /* Garante que o rodapé ocupe a largura total */
        }

        /* Formulários e Inputs */
        form {
            background-color: var(--card-bg-color);
            padding: 25px; /* Aumenta o padding */
            border-radius: 10px; /* Bordas arredondadas */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px; /* Aumenta a margem inferior */
        }

        .form-group label {
            display: block;
            margin-bottom: 8px; /* Aumenta a margem inferior */
            font-weight: bold; /* Arial Bold */
            color: var(--text-color); /* Cor do texto da label */
        }

        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group input[type="email"],
        .form-group input[type="number"],
        .form-group input[type="file"],
        .form-group textarea,
        .form-group select {
            width: calc(100% - 24px); /* Ajusta largura considerando padding e borda (2*10px padding + 2*1px border) */
            padding: 12px; /* Aumenta o padding */
            border: 1px solid var(--border-color);
            border-radius: 5px; /* Bordas arredondadas */
            background-color: var(--input-bg-color);
            color: var(--input-text-color);
            font-size: 1em;
            box-sizing: border-box; /* Inclui padding e borda no cálculo da largura */
        }

        .form-group input[type="file"] {
            padding: 10px; /* Ajuste para input file */
        }

        .form-group textarea {
            resize: vertical; /* Permite redimensionar verticalmente */
        }


        /* Botões */
        button, .button {
            display: inline-block;
            background-color: var(--button-bg-color);
            color: var(--button-text-color);
            padding: 12px 25px; /* Aumenta o padding */
            border: none;
            border-radius: 25px; /* Botões redondos */
            cursor: pointer;
            font-size: 1.1em; /* Aumenta o tamanho da fonte */
            font-weight: bold; /* Arial Bold */
            transition: background-color 0.3s ease, transform 0.2s ease;
            text-align: center;
            text-decoration: none;
            margin-top: 10px; /* Adiciona margem superior para separar de outros elementos */
        }

        button:hover, .button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        button:active, .button:active {
             transform: translateY(0);
        }

        button.yellow, .button.yellow {
            background-color: var(--accent-color); /* Cor amarela */
            color: #333; /* Texto escuro para contraste */
        }

        button:disabled {
            background-color: #555;
            cursor: not-allowed;
            transform: none; /* Remove efeito ao passar o mouse em disabled */
        }

        /* Mensagens de Status */
        .message {
            padding: 15px; /* Aumenta o padding */
            margin-bottom: 20px; /* Aumenta a margem inferior */
            border-radius: 8px; /* Bordas mais arredondadas */
            font-weight: bold;
            text-align: center;
        }

        .message.success {
            background-color: var(--success-color); /* Verde */
            color: white;
        }

        .message.error {
            background-color: var(--error-color); /* Vermelho */
            color: white;
        }

        .help-block {
            font-size: 0.9em;
            color: var(--error-color); /* Cor para mensagens de erro */
            margin-top: 5px;
            display: block;
        }


        /* Cards/Containers de Conteúdo */
        .card {
            background-color: var(--card-bg-color);
            padding: 25px; /* Aumenta o padding */
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        }

        .card h2 {
            margin-top: 0;
            color: var(--primary-color);
            font-size: 1.8em; /* Aumenta o tamanho da fonte */
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px; /* Espaço abaixo do título */
            margin-bottom: 20px; /* Espaço abaixo da borda */
        }

        /* Estilos da Tabela de Extrato (Aplicando o CSS que você enviou e adaptando) */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            background-color: var(--card-bg-color); /* Fundo da tabela igual ao card */
            color: var(--text-color); /* Cor do texto da tabela */
            border-radius: 10px; /* Bordas arredondadas na tabela */
            overflow: hidden; /* Garante que as bordas arredondadas funcionem com o conteúdo */
        }

        thead {
            background-color: var(--border-color); /* Fundo do cabeçalho um pouco mais claro que o fundo */
            color: var(--text-color);
        }

        th {
            padding: 12px 15px;
            text-align: left;
            font-weight: bold;
            border-bottom: 1px solid var(--background-color); /* Borda inferior para separar do corpo */
        }

        tbody tr {
            border-bottom: 1px solid var(--border-color); /* Borda inferior para separar as linhas */
        }

        tbody tr:last-child {
            border-bottom: none; /* Remove a borda da última linha */
        }

        tbody tr:nth-of-type(even) {
             /* Sem fundo zebrado explícito para manter o tema escuro, borda já separa */
             background-color: rgba(255, 255, 255, 0.05); /* Um leve sombreamento para linhas pares */
        }

        tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.1); /* Fundo mais claro ao passar o mouse */
        }

        td {
            padding: 12px 15px;
            text-align: left;
            /* Adicionado para responsividade */
            position: relative;
            padding-left: 50%; /* Espaço para o data-label */
        }

        /* Estilo para o data-label em telas pequenas */
        td:before {
            content: attr(data-label);
            position: absolute;
            left: 0;
            width: 45%; /* Largura do label */
            padding-left: 15px;
            font-weight: bold;
            text-align: right; /* Alinha o label à direita */
            white-space: nowrap; /* Evita quebra de linha no label */
            color: var(--primary-color); /* Cor do label */
        }

        /* Oculta o data-label em telas maiores */
        @media (min-width: 600px) {
            td {
                padding-left: 15px; /* Remove o padding extra em telas maiores */
            }
            td:before {
                content: none; /* Oculta o label em telas maiores */
            }
        }


        /* Cores para o valor */
        td[data-label='Valor'] {
            font-weight: bold;
        }
        /* Ajustando os seletores para usar as variáveis CSS */
        td[data-label='Valor'] {
            color: var(--text-color); /* Cor padrão do texto */
        }
        td[data-label='Valor'] span.positive {
            color: var(--success-color); /* Verde para valores positivos */
        }
        td[data-label='Valor'] span.negative {
            color: var(--error-color); /* Vermelho para valores negativos */
        }


        /* Estilo para a mensagem de "Nenhuma transação" */
        .card p {
            text-align: center;
            color: var(--text-color); /* Cor do texto consistente com o tema */
            margin-top: 1rem;
        }

        /* Estilo para mensagens de erro */
        .error-message {
            color: var(--error-color);
            text-align: center;
            margin-bottom: 1rem;
            font-weight: bold;
        }

        /* Continuacao dos estilos do card */
        .card p {
            color: var(--text-color); /* Cor do texto padrão dentro do card */
        }

    </style>
</head>
<body>

<div class="card">
    <h2>Extrato de Transações (Últimos 30 Dias)</h2>

    <?php
    // Exibe mensagens de erro se houver
    if (isset($_SESSION['error_message'])) {
        echo '<p class="error-message">' . htmlspecialchars($_SESSION['error_message']) . '</p>';
        unset($_SESSION['error_message']); // Limpa a mensagem após exibir
    }
    ?>

    <?php if (!empty($transactions)): ?>
        <table>
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Valor</th>
                    <th>Descrição</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach ($transactions as $transaction) {
                    echo "<tr>";
                    // Adicionado data-label para responsividade
                    echo "<td data-label='Data'>" . date('d/m/Y H:i', strtotime($transaction['transaction_date'])) . "</td>";
                    echo "<td data-label='Tipo'>" . htmlspecialchars(ucfirst($transaction['type'])) . "</td>";
                    // Formatar valor com sinal e cor usando spans para aplicar cores via CSS
                    $amount_formatted = number_format(abs($transaction['amount']), 2, ',', '.'); // Usa valor absoluto para formatação
                    $amount_sign = ($transaction['amount'] > 0) ? '+' : (($transaction['amount'] < 0) ? '-' : ''); // Adiciona '-' para valores negativos
                    $amount_class = ($transaction['amount'] >= 0) ? 'positive' : 'negative'; // Classe para aplicar a cor
                    echo "<td data-label='Valor'><span class='" . $amount_class . "'>" . $amount_sign . " R$ " . $amount_formatted . "</span></td>"; // Adicionado span com classe
                    echo "<td data-label='Descrição'>" . nl2br(htmlspecialchars($transaction['description'])) . "</td>";
                    echo "<td data-label='Status'>" . htmlspecialchars(ucfirst($transaction['status'])) . "</td>";
                    echo "</tr>";
                }
                ?>
            </tbody>
        </table>
    <?php else: ?>
        <p>Nenhuma transação encontrada nos últimos 30 dias.</p>
    <?php endif; ?>

</div>

<?php
// Inclui o rodapé do usuário
require_once 'footer.php';
?>
