<?php
// ==========================
// dashboard.php - DemoBank with currency symbols
// ==========================

require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';

if (session_status() === PHP_SESSION_NONE) session_start();

// Ensure user is logged in
$user_id = $_SESSION['user_id'] ?? null;
if (!$user_id) {
    header("Location: /auth/login.php");
    exit;
}

// Database connection
$conn = db();
if (!$conn) die("Database connection failed");

// Fetch user info
$stmt = $conn->prepare("SELECT * FROM users WHERE id=?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$user = $stmt->get_result()->fetch_assoc();
$stmt->close();

// Fetch user accounts
$stmt = $conn->prepare("SELECT id, account_number, balance, currency FROM accounts WHERE user_id=?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$accounts = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Fetch recent transactions (last 10)
$stmt = $conn->prepare("
    SELECT t.id, t.type, t.amount, t.created_at, a.currency
    FROM transactions t
    INNER JOIN accounts a ON t.account_id = a.id
    WHERE a.user_id = ?
    ORDER BY t.created_at DESC
    LIMIT 10
");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$transactions = $stmt->get_result()->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Currency symbol map
$currencySymbols = [
    'USD' => '$',
    'EUR' => '€',
    'GBP' => '£',
    'JPY' => '¥',
    'CNY' => '¥',
    'NGN' => '₦',
    'GHS' => '₵',
    'INR' => '₹',
    'CAD' => 'C$',
    'AUD' => 'A$'
];

// Function to get the balance text color class
function getBalanceColorClass($balance) {
    if ($balance < 0) {
        return 'negative'; // Red for negative balance
    } else {
        return 'positive'; // Green for positive balance
    }
}

// Capture content for layout
ob_start();
?>

<div class="dashboard">
    <h1>Welcome, <?= htmlspecialchars($user['first_name'] ?? $user['email']) ?>!</h1>
    <div class="account-overview">
        <h2>Account Overview</h2>
        <div class="account-cards">
            <?php foreach($accounts as $acc): 
                $symbol = $currencySymbols[$acc['currency']] ?? $acc['currency'];
                $balanceColorClass = getBalanceColorClass($acc['balance']);
            ?>
                <div class="account-card">
                    <h3>Account <?= htmlspecialchars($acc['account_number']) ?></h3>
                    <p class="balance <?= $balanceColorClass ?>"><?= $symbol . number_format($acc['balance'], 2) ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="recent-transactions">
        <h2>Recent Transactions</h2>
        <?php if(empty($transactions)): ?>
            <p>No transactions found.</p>
        <?php else: ?>
        <table>
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Currency</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($transactions as $t): 
                    $symbol = $currencySymbols[$t['currency']] ?? $t['currency'];
                ?>
                    <tr>
                        <td data-label="Type"><?= htmlspecialchars($t['type']) ?></td>
                        <td data-label="Amount"><?= $symbol . number_format($t['amount'], 2) ?></td>
                        <td data-label="Currency"><?= htmlspecialchars($t['currency']) ?></td>
                        <td data-label="Date"><?= htmlspecialchars($t['created_at']) ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        <?php endif; ?>
    </div>
</div>

<?php
$content = ob_get_clean();

// --------------------------
// Render layout
// --------------------------
renderLayout("Dashboard", $content, $conn);

?>

<style>
/* Basic Reset and Layout */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7fa;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Dashboard Container */
.dashboard {
    max-width: 100%;
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Account Overview */
.account-overview h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.account-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.account-card {
    flex: 1 1 100%;
    min-width: 250px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 20px;
}

.account-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

/* Balance Color Classes */
.balance {
    font-size: 20px;
    font-weight: bold;
}

.balance.positive {
    color: green; /* Green for positive balance */
}

.balance.negative {
    color: red; /* Red for negative balance */
}

/* Recent Transactions */
.recent-transactions {
    margin-top: 40px;
}

/* Table Style for Larger Screens */
table {
    width: 100%;
    border-collapse: collapse;
}

table th, table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

table th {
    background-color: #003366;
    color: #fff;
}

table tr:hover {
    background-color: #f5f5f5;
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Responsive Design for Small Screens */
@media (max-width: 768px) {
    /* Increase font size for better readability */
    h1, h2 {
        font-size: 28px;
    }

    /* Make account cards stack vertically on small screens */
    .account-cards {
        flex-direction: column;
        gap: 10px;
    }

    .account-card {
        width: 100%;
        text-align: left;
    }

    /* Increase font size in tables */
    table th, table td {
        font-size: 14px;
    }

    table th {
        font-size: 16px;
    }

    /* Stack the table rows */
    .recent-transactions table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    table td, table th {
        display: block;
        width: 100%;
    }

    table th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: bold;
    }

    .balance {
        font-size: 18px; /* Reduce balance font size */
    }
}

/* For even smaller screens (e.g. phones in portrait mode) */
@media (max-width: 480px) {
    .dashboard {
        margin: 10px;
        padding: 10px;
    }

    .account-card h3 {
        font-size: 16px;
    }

    .balance {
        font-size: 16px;
    }
}
</style>