<?php 
use App\Models\Settings;
$appConfig = new Settings();
$appName = $appConfig->get('company_name', 'Finance Manager');
$logo = $appConfig->get('logo');
$logoUrl = $logo ? $this->baseUrl('/' . ltrim($logo, '/')) : null;

$clientData = $client ?? [];
$clientName = htmlspecialchars($clientData['full_name'] ?? 'Client');
$clientCode = htmlspecialchars($clientData['client_code'] ?? '000000');
$balance = $clientData['balance'] ?? 0;

// Prepare recent transaction data for chart (last 10 transactions)
$chartLabels = [];
$chartData = [];
if (!empty($recentTransactions)) {
    $recentTransactions = array_reverse($recentTransactions); // show oldest first
    foreach ($recentTransactions as $t) {
        $chartLabels[] = date('d M', strtotime($t['transaction_date']));
        $chartData[] = $t['transaction_type'] === 'credit' ? $t['amount'] : -$t['amount'];
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $clientName ?> - <?= htmlspecialchars($appName) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="<?= $this->baseUrl('/css/style.css') ?>">
    <style>
        body { background: #f5f7fa; }
        .client-topbar {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #fff;
            padding: 1rem 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .client-topbar .navbar-brand img { height: 35px; }
        .balance-card {
            background: linear-gradient(135deg, #059669, #10b981);
            border-radius: 20px;
            color: #fff;
            padding: 2rem;
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }
        .balance-card .amount {
            font-size: 2.8rem;
            font-weight: 700;
        }
        .stat-card {
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
            transition: transform 0.2s;
        }
        .stat-card:hover { transform: translateY(-4px); }
        .transactions-table th { font-weight: 600; color: #475569; }
        .transactions-table td { vertical-align: middle; }
        .badge-credit { background: #d1fae5; color: #065f46; }
        .badge-debit { background: #fee2e2; color: #991b1b; }
    </style>
</head>
<body>

<!-- Top Navigation Bar -->
<nav class="client-topbar d-flex align-items-center justify-content-between">
    <a href="<?= $this->baseUrl('/client/dashboard') ?>" class="d-flex align-items-center text-decoration-none text-white">
        <?php if ($logoUrl): ?>
            <img src="<?= $logoUrl ?>" alt="Logo" class="me-2">
        <?php else: ?>
            <span style="font-size:1.8rem;">💰</span>
        <?php endif; ?>
        <span class="fw-bold ms-2"><?= htmlspecialchars($appName) ?></span>
    </a>
    <div class="d-flex align-items-center gap-3">
        <div class="text-end small">
            <div><?= $clientName ?></div>
            <div class="text-white-50"><?= $clientCode ?></div>
        </div>
        <a href="<?= $this->baseUrl('/client/logout') ?>" class="btn btn-outline-light btn-sm">
            <i class="bi bi-box-arrow-right"></i> Logout
        </a>
    </div>
</nav>

<div class="container mt-4">
    <!-- Welcome Row -->
    <div class="row mb-4">
        <div class="col-12">
            <h4>Welcome back, <?= $clientName ?></h4>
            <p class="text-muted">Here’s your financial overview.</p>
        </div>
    </div>

    <!-- Main Cards -->
    <div class="row g-4">
        <!-- Balance Card -->
        <div class="col-lg-4">
            <div class="balance-card h-100 d-flex flex-column justify-content-between">
                <div>
                    <div class="text-uppercase small opacity-75">Current Balance</div>
                    <div class="amount"><?= number_format($balance, 2) ?> <small>KES</small></div>
                </div>
                <div class="mt-3">
                    <span class="badge bg-light text-dark">Last updated: <?= date('d M Y') ?></span>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="col-lg-4">
            <div class="row g-3">
                <div class="col-6">
                    <div class="card stat-card p-3 bg-white">
                        <div class="text-muted small">Total Credits</div>
                        <h5 class="mt-1"><?= number_format($totalCredits ?? 0, 0) ?> KES</h5>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card stat-card p-3 bg-white">
                        <div class="text-muted small">Total Debits</div>
                        <h5 class="mt-1 text-danger"><?= number_format($totalDebits ?? 0, 0) ?> KES</h5>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card stat-card p-3 bg-white">
                        <div class="text-muted small">Transactions</div>
                        <h5 class="mt-1"><?= $transactionCount ?? 0 ?> this month</h5>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mini Chart (Balance Trend) -->
        <div class="col-lg-4">
            <div class="card stat-card bg-white p-3 h-100">
                <h6 class="text-muted">Recent Activity</h6>
                <?php if (!empty($chartLabels)): ?>
                    <canvas id="balanceMiniChart" height="120"></canvas>
                <?php else: ?>
                    <div class="text-center text-muted py-4">No transactions yet.</div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Recent Transactions -->
    <div class="card mt-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Recent Transactions</h5>
            <div>
                <a href="<?= $this->baseUrl('/client/transactions') ?>" class="btn btn-outline-primary btn-sm">View All</a>
                <a href="<?= $this->baseUrl('/client/statement/pdf') ?>" class="btn btn-outline-danger btn-sm"><i class="bi bi-file-pdf"></i> PDF</a>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover mb-0 transactions-table">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Balance</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($recentTransactions)): ?>
                        <tr><td colspan="4" class="text-center py-4 text-muted">No transactions recorded yet.</td></tr>
                    <?php else: ?>
                        <?php foreach ($recentTransactions as $t): 
                            $isCredit = $t['transaction_type'] === 'credit';
                            $amount = $t['amount'];
                            $balanceAfter = $t['balance'] ?? 0; // from statement method? not in original transaction query; adjust if needed
                        ?>
                        <tr>
                            <td><?= date('Y-m-d H:i', strtotime($t['transaction_date'])) ?></td>
                            <td><?= htmlspecialchars($t['description'] ?? 'Transaction') ?></td>
                            <td class="<?= $isCredit ? 'text-success' : 'text-danger' ?>">
                                <?= $isCredit ? '+' : '-' ?><?= number_format($amount, 2) ?>
                            </td>
                            <td><?= number_format($balanceAfter, 2) ?></td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
<?php if (!empty($chartLabels)): ?>
new Chart(document.getElementById('balanceMiniChart'), {
    type: 'line',
    data: {
        labels: <?= json_encode($chartLabels) ?>,
        datasets: [{
            label: 'Amount',
            data: <?= json_encode($chartData) ?>,
            borderColor: '#10b981',
            backgroundColor: 'rgba(16,185,129,0.1)',
            tension: 0.3,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true }
        }
    }
});
<?php endif; ?>
</script>
</body>
</html>