<?php
require_once dirname(__DIR__) . '/config/config.php';
requireLogin();

$auth = new Auth();
$userModel = new User();
$currentBalance = $auth->refreshBalance($_SESSION['user_id']);
$pdo = getDBConnection();

$page = max(1, intval($_GET['page'] ?? 1));
$perPage = 20;
$type = $_GET['type'] ?? '';

// Build query
$where = "WHERE user_id = ?";
$params = [$_SESSION['user_id']];

if ($type && in_array($type, ['deposit', 'sms_order', 'smm_order', 'refund', 'bonus', 'withdrawal'])) {
    $where .= " AND type = ?";
    $params[] = $type;
}

// Count total
$stmt = $pdo->prepare("SELECT COUNT(*) FROM transactions $where");
$stmt->execute($params);
$total = $stmt->fetchColumn();
$totalPages = ceil($total / $perPage);

// Get transactions
$offset = ($page - 1) * $perPage;
$stmt = $pdo->prepare("SELECT * FROM transactions $where ORDER BY created_at DESC LIMIT $perPage OFFSET $offset");
$stmt->execute($params);
$transactions = $stmt->fetchAll();

// Get summary
$stmt = $pdo->prepare("SELECT type, SUM(amount) as total FROM transactions WHERE user_id = ? GROUP BY type");
$stmt->execute([$_SESSION['user_id']]);
$summary = [];
while ($row = $stmt->fetch()) {
    $summary[$row['type']] = $row['total'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transactions - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: #0A1628; color: #fff; min-height: 100vh; padding-bottom: 80px; }
        .header { background: #0F2744; padding: 1rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
        .header-logo { display: flex; align-items: center; gap: 0.5rem; color: #F5A623; font-weight: 700; }
        .header-logo img { width: 48px; height: 48px; min-width: 48px; min-height: 48px; object-fit: contain; }
        .header-balance { background: #F5A623; color: #0A1628; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; }
        .hamburger { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
        .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; display: none; }
        .menu-overlay.active { display: block; }
        .side-menu { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background: #0F2744; z-index: 300; transition: left 0.3s; padding: 1.5rem 0; overflow-y: auto; }
        .side-menu.active { left: 0; }
        .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem 1.5rem; border-bottom: 1px solid #1E3A5F; }
        .menu-close { background: none; border: none; color: #9CA3AF; font-size: 1.5rem; cursor: pointer; }
        .menu-items { padding: 1rem 0; }
        .menu-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; color: #E5E7EB; text-decoration: none; }
        .menu-item:hover, .menu-item.active { background: #1E3A5F; color: #F5A623; }
        .menu-item i { width: 20px; text-align: center; }
        .menu-divider { height: 1px; background: #1E3A5F; margin: 0.5rem 1.5rem; }
        .content { padding: 1rem; max-width: 800px; margin: 0 auto; }
        .page-title { font-size: 1.25rem; margin-bottom: 1rem; }
        .page-title i { color: #F5A623; }
        .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
        .summary-card { background: #0F2744; border-radius: 12px; padding: 1rem; }
        .summary-label { font-size: 0.8rem; color: #9CA3AF; margin-bottom: 0.25rem; }
        .summary-value { font-size: 1.25rem; font-weight: 700; }
        .summary-value.positive { color: #10B981; }
        .summary-value.negative { color: #EF4444; }
        .card { background: #0F2744; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
        .card-title { font-size: 1rem; color: #F5A623; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .filter-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
        .filter-btn { padding: 0.5rem 1rem; background: #0A1628; border: none; border-radius: 20px; color: #9CA3AF; font-size: 0.85rem; cursor: pointer; text-decoration: none; }
        .filter-btn:hover, .filter-btn.active { background: #F5A623; color: #0A1628; }
        .txn-item { display: flex; align-items: center; padding: 0.75rem; background: #0A1628; border-radius: 8px; margin-bottom: 0.5rem; }
        .txn-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem; flex-shrink: 0; }
        .txn-icon.credit { background: rgba(16,185,129,0.2); color: #10B981; }
        .txn-icon.debit { background: rgba(239,68,68,0.2); color: #EF4444; }
        .txn-info { flex: 1; min-width: 0; }
        .txn-type { font-weight: 600; color: #fff; text-transform: capitalize; }
        .txn-desc { font-size: 0.8rem; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .txn-amount { text-align: right; flex-shrink: 0; }
        .txn-amount .amount { font-weight: 600; }
        .txn-amount .amount.credit { color: #10B981; }
        .txn-amount .amount.debit { color: #EF4444; }
        .txn-amount .date { font-size: 0.75rem; color: #9CA3AF; }
        .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
        .pagination a, .pagination span { padding: 0.5rem 1rem; background: #0A1628; border-radius: 8px; color: #fff; text-decoration: none; }
        .pagination a:hover { background: #1E3A5F; }
        .pagination .current { background: #F5A623; color: #0A1628; }
        .empty { text-align: center; padding: 2rem; color: #9CA3AF; }
        .empty i { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #0F2744; display: flex; justify-content: space-around; padding: 0.75rem 0; border-top: 1px solid #1E3A5F; z-index: 100; }
        .bottom-nav a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #9CA3AF; font-size: 0.7rem; gap: 0.25rem; }
        .bottom-nav a i { font-size: 1.25rem; }
        .bottom-nav a.active { color: #F5A623; }
    </style>
    <link rel="stylesheet" href="/assets/css/premium-dark.css">
</head>
<body>
    <header class="header">
        <button class="hamburger" onclick="toggleMenu()"><i class="fas fa-bars"></i></button>
        <div class="header-logo"><img src="/assets/images/logo.png" alt="<?php echo SITE_NAME; ?>"></div>
        <div class="header-balance"><?php echo formatCurrency($currentBalance); ?></div>
    </header>
    <div class="menu-overlay" id="menuOverlay" onclick="toggleMenu()"></div>
    <nav class="side-menu" id="sideMenu">
        <div class="menu-header">
            <div class="header-logo"><img src="/assets/images/logo.png" alt="<?php echo SITE_NAME; ?>"></div>
            <button class="menu-close" onclick="toggleMenu()"><i class="fas fa-times"></i></button>
        </div>
        <div class="menu-items">
            <a href="dashboard.php" class="menu-item"><i class="fas fa-home"></i> Dashboard</a>
            <a href="sms.php" class="menu-item"><i class="fas fa-sms"></i> SMS Service</a>
            <a href="smm.php" class="menu-item"><i class="fas fa-rocket"></i> SMM Service</a>
            <a href="banner.php" class="menu-item"><i class="fas fa-ad"></i> Banner Service</a>
            <a href="orders.php" class="menu-item"><i class="fas fa-history"></i> Orders</a>
            <a href="add-funds.php" class="menu-item"><i class="fas fa-wallet"></i> Add Funds</a>
            <a href="transactions.php" class="menu-item active"><i class="fas fa-exchange-alt"></i> Transactions</a>
            <a href="profile.php" class="menu-item"><i class="fas fa-user"></i> Profile</a>
            <div class="menu-divider"></div>
            <a href="<?php echo SITE_URL; ?>/logout.php" class="menu-item"><i class="fas fa-sign-out-alt"></i> Log Out</a>
        </div>
    </nav>
    <main class="content">
        <h1 class="page-title"><i class="fas fa-exchange-alt"></i> Transactions</h1>
        
        <div class="summary-grid">
            <div class="summary-card">
                <div class="summary-label">Total Deposits</div>
                <div class="summary-value positive">+<?php echo formatCurrency($summary['deposit'] ?? 0); ?></div>
            </div>
            <div class="summary-card">
                <div class="summary-label">Total Spent</div>
                <div class="summary-value negative">-<?php echo formatCurrency(($summary['sms_order'] ?? 0) + ($summary['smm_order'] ?? 0)); ?></div>
            </div>
        </div>
        
        <div class="card">
            <div class="filter-row">
                <a href="?" class="filter-btn <?php echo !$type ? 'active' : ''; ?>">All</a>
                <a href="?type=deposit" class="filter-btn <?php echo $type === 'deposit' ? 'active' : ''; ?>">Deposits</a>
                <a href="?type=smm_order" class="filter-btn <?php echo $type === 'smm_order' ? 'active' : ''; ?>">SMM</a>
                <a href="?type=sms_order" class="filter-btn <?php echo $type === 'sms_order' ? 'active' : ''; ?>">SMS</a>
                <a href="?type=refund" class="filter-btn <?php echo $type === 'refund' ? 'active' : ''; ?>">Refunds</a>
            </div>
            
            <?php if (empty($transactions)): ?>
            <div class="empty"><i class="fas fa-receipt"></i>No transactions yet</div>
            <?php else: ?>
            <?php foreach ($transactions as $txn): 
                $isCredit = in_array($txn['type'], ['deposit', 'refund', 'bonus']);
            ?>
            <div class="txn-item">
                <div class="txn-icon <?php echo $isCredit ? 'credit' : 'debit'; ?>">
                    <i class="fas fa-<?php echo $isCredit ? 'arrow-down' : 'arrow-up'; ?>"></i>
                </div>
                <div class="txn-info">
                    <div class="txn-type"><?php echo str_replace('_', ' ', $txn['type']); ?></div>
                    <div class="txn-desc"><?php echo htmlspecialchars($txn['description'] ?? $txn['reference'] ?? ''); ?></div>
                </div>
                <div class="txn-amount">
                    <div class="amount <?php echo $isCredit ? 'credit' : 'debit'; ?>"><?php echo $isCredit ? '+' : '-'; ?><?php echo formatCurrency($txn['amount']); ?></div>
                    <div class="date"><?php echo date('M j, g:i A', strtotime($txn['created_at'])); ?></div>
                </div>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
            
            <?php if ($totalPages > 1): ?>
            <div class="pagination">
                <?php if ($page > 1): ?>
                <a href="?<?php echo $type ? "type=$type&" : ''; ?>page=<?php echo $page - 1; ?>"><i class="fas fa-chevron-left"></i></a>
                <?php endif; ?>
                <span class="current"><?php echo $page; ?> / <?php echo $totalPages; ?></span>
                <?php if ($page < $totalPages): ?>
                <a href="?<?php echo $type ? "type=$type&" : ''; ?>page=<?php echo $page + 1; ?>"><i class="fas fa-chevron-right"></i></a>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        </div>
    </main>
    
    <nav class="bottom-nav">
        <a href="dashboard.php"><i class="fas fa-home"></i> Home</a>
        <a href="sms.php"><i class="fas fa-sms"></i> SMS</a>
        <a href="smm.php"><i class="fas fa-rocket"></i> SMM</a>
        <a href="orders.php"><i class="fas fa-history"></i> Orders</a>
        <a href="profile.php"><i class="fas fa-user"></i> Profile</a>
    </nav>
    
    <script>function toggleMenu() { document.getElementById('sideMenu').classList.toggle('active'); document.getElementById('menuOverlay').classList.toggle('active'); }</script>
</body>
</html>