<?php
require_once 'config.php';
$pageTitle = 'Dashboard';
require_once 'includes/header.php';
$stats = getDashboardStats();
?>

<!-- Stat Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card" style="background: linear-gradient(135deg,#6174f5,#4143d0)">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-white/80">Products</span>
            <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-box-open text-white text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-white"><?= number_format($stats['total_products']) ?></div>
        <div class="text-xs text-white/70 mt-1"><i class="fas fa-exclamation-triangle mr-1"></i><?= $stats['low_stock'] ?> low stock</div>
    </div>
    <div class="stat-card" style="background: linear-gradient(135deg,#06b6d4,#0891b2)">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-white/80">Customers</span>
            <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-users text-white text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-white"><?= number_format($stats['total_customers']) ?></div>
        <div class="text-xs text-white/70 mt-1"><i class="fas fa-circle mr-1"></i>Active clients</div>
    </div>
    <div class="stat-card" style="background: linear-gradient(135deg,#10b981,#059669)">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-white/80">Revenue</span>
            <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-indian-rupee-sign text-white text-sm"></i>
            </div>
        </div>
        <div class="text-2xl font-bold text-white"><?= formatCurrency($stats['total_revenue']) ?></div>
        <div class="text-xs text-white/70 mt-1"><i class="fas fa-check-circle mr-1"></i>Paid invoices</div>
    </div>
    <div class="stat-card" style="background: linear-gradient(135deg,#f59e0b,#d97706)">
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-medium text-white/80">Pending</span>
            <div class="w-9 h-9 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-clock text-white text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-white"><?= number_format($stats['pending_invoices']) ?></div>
        <div class="text-xs text-white/70 mt-1"><i class="fas fa-file-invoice mr-1"></i>Unpaid invoices</div>
    </div>
</div>

<!-- Charts & Recent Invoices -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Recent Invoices -->
    <div class="card lg:col-span-2 p-6">
        <div class="flex items-center justify-between mb-5">
            <h2 class="font-bold text-slate-800">Recent Invoices</h2>
            <a href="pages/invoices.php" class="text-xs text-brand-600 font-semibold hover:underline">View all →</a>
        </div>
        <?php if (empty($stats['recent_invoices'])): ?>
            <div class="text-center py-10 text-slate-400">
                <i class="fas fa-file-invoice text-4xl mb-3 block"></i>
                No invoices yet. <a href="pages/invoice_create.php" class="text-brand-600 font-semibold">Create one</a>
            </div>
        <?php else: ?>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-slate-100">
                        <th class="text-left pb-3 text-slate-400 font-semibold text-xs uppercase tracking-wide">Invoice</th>
                        <th class="text-left pb-3 text-slate-400 font-semibold text-xs uppercase tracking-wide">Customer</th>
                        <th class="text-left pb-3 text-slate-400 font-semibold text-xs uppercase tracking-wide">Amount</th>
                        <th class="text-left pb-3 text-slate-400 font-semibold text-xs uppercase tracking-wide">Status</th>
                        <th class="text-right pb-3 text-slate-400 font-semibold text-xs uppercase tracking-wide">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($stats['recent_invoices'] as $inv): ?>
                    <tr class="table-row border-b border-slate-50">
                        <td class="py-3">
                            <span class="font-mono text-xs bg-slate-100 px-2 py-1 rounded font-semibold text-slate-700"><?= sanitize($inv['invoice_number']) ?></span>
                        </td>
                        <td class="py-3 font-medium text-slate-700"><?= sanitize($inv['customer_name']) ?></td>
                        <td class="py-3 font-bold text-slate-800"><?= formatCurrency($inv['total_amount']) ?></td>
                        <td class="py-3"><?= statusBadge($inv['status']) ?></td>
                        <td class="py-3 text-right">
                            <a href="pages/invoice_view.php?id=<?= $inv['id'] ?>" class="text-brand-600 hover:text-brand-700 text-xs font-semibold">View</a>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>
    </div>

    <!-- Quick Stats -->
    <div class="space-y-4">
        <div class="card p-5">
            <h3 class="font-bold text-slate-700 mb-4 text-sm">Quick Actions</h3>
            <div class="space-y-2.5">
                <a href="pages/invoice_create.php" class="flex items-center gap-3 p-3 rounded-xl hover:bg-brand-50 transition group">
                    <div class="w-9 h-9 bg-brand-100 rounded-xl flex items-center justify-center group-hover:bg-brand-200 transition">
                        <i class="fas fa-plus text-brand-600 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-slate-700">New Invoice</span>
                </a>
                <a href="pages/products.php?action=add" class="flex items-center gap-3 p-3 rounded-xl hover:bg-emerald-50 transition group">
                    <div class="w-9 h-9 bg-emerald-100 rounded-xl flex items-center justify-center group-hover:bg-emerald-200 transition">
                        <i class="fas fa-box-open text-emerald-600 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-slate-700">Add Product</span>
                </a>
                <a href="pages/customers.php?action=add" class="flex items-center gap-3 p-3 rounded-xl hover:bg-cyan-50 transition group">
                    <div class="w-9 h-9 bg-cyan-100 rounded-xl flex items-center justify-center group-hover:bg-cyan-200 transition">
                        <i class="fas fa-user-plus text-cyan-600 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-slate-700">Add Customer</span>
                </a>
            </div>
        </div>

        <div class="card p-5">
            <h3 class="font-bold text-slate-700 mb-4 text-sm">Invoice Summary</h3>
            <?php
            $db = getDB();
            $summaries = $db->query("SELECT status, COUNT(*) as cnt, COALESCE(SUM(total_amount),0) as total FROM invoices GROUP BY status")->fetchAll();
            $statusColors = ['paid'=>'emerald','draft'=>'amber','sent'=>'blue','overdue'=>'red','cancelled'=>'slate'];
            foreach ($summaries as $s):
                $color = $statusColors[$s['status']] ?? 'slate';
            ?>
            <div class="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 rounded-full bg-<?= $color ?>-500"></div>
                    <span class="text-sm text-slate-600 capitalize"><?= $s['status'] ?></span>
                </div>
                <div class="text-right">
                    <div class="text-xs font-bold text-slate-700"><?= formatCurrency($s['total']) ?></div>
                    <div class="text-xs text-slate-400"><?= $s['cnt'] ?> inv.</div>
                </div>
            </div>
            <?php endforeach; ?>
            <?php if (empty($summaries)): ?>
                <p class="text-xs text-slate-400 text-center py-4">No invoices yet</p>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php require_once 'includes/footer.php'; ?>
