<div class="p-8 max-w-7xl mx-auto space-y-8">

    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">CRM Dashboard</h1>
            <p class="text-slate-400 text-sm">Real-time WhatsApp metrics, lead conversion, and pipeline revenue.</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="/chat" class="bg-emerald-500 hover:bg-emerald-600 text-white font-semibold text-sm px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-2">
                <i class="fa-brands fa-whatsapp text-base"></i>
                <span>Open Live Chat</span>
            </a>
            <a href="/pipeline" class="bg-slate-800 hover:bg-slate-700 text-slate-200 font-semibold text-sm px-4 py-2.5 rounded-xl border border-slate-700 transition flex items-center space-x-2">
                <i class="fa-solid fa-columns text-sm"></i>
                <span>Deals Board</span>
            </a>
        </div>
    </div>

    <!-- Stat Metric Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        <!-- 1. Total Leads -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-slate-700 transition">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Total Leads</span>
                    <div class="text-3xl font-bold text-white mt-1"><?= number_format($totalContacts) ?></div>
                </div>
                <div class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400 text-xl group-hover:scale-110 transition">
                    <i class="fa-solid fa-users"></i>
                </div>
            </div>
            <div class="mt-3 flex items-center text-xs text-slate-400">
                <span class="text-emerald-400 font-semibold flex items-center mr-1">
                    <i class="fa-solid fa-arrow-trend-up mr-1"></i> Active
                </span>
                across all stages
            </div>
        </div>

        <!-- 2. Active Conversations -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-slate-700 transition">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Active Chats</span>
                    <div class="text-3xl font-bold text-white mt-1"><?= number_format($openConversations) ?></div>
                </div>
                <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 text-xl group-hover:scale-110 transition">
                    <i class="fa-brands fa-whatsapp"></i>
                </div>
            </div>
            <div class="mt-3 flex items-center text-xs text-slate-400">
                <?php if ($unreadCount > 0): ?>
                    <span class="bg-red-500/20 text-red-400 font-semibold px-2 py-0.5 rounded-full mr-1.5 animate-pulse">
                        <?= $unreadCount ?> Unread
                    </span>
                    requires attention
                <?php else: ?>
                    <span class="text-emerald-400 font-semibold mr-1">All caught up</span>
                <?php endif; ?>
            </div>
        </div>

        <!-- 3. Pipeline Forecast -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-slate-700 transition">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Open Pipeline</span>
                    <div class="text-3xl font-bold text-white mt-1">$<?= number_format($pipelineSummary['open_value'] ?? 0, 2) ?></div>
                </div>
                <div class="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 text-xl group-hover:scale-110 transition">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                </div>
            </div>
            <div class="mt-3 flex items-center text-xs text-slate-400">
                <span class="text-emerald-400 font-semibold mr-1">$<?= number_format($pipelineSummary['won_value'] ?? 0, 2) ?></span> Won revenue
            </div>
        </div>

        <!-- 4. WhatsApp Messages -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg relative overflow-hidden group hover:border-slate-700 transition">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Messages Today</span>
                    <div class="text-3xl font-bold text-white mt-1"><?= number_format(($messageMetrics['today_sent'] ?? 0) + ($messageMetrics['today_received'] ?? 0)) ?></div>
                </div>
                <div class="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400 text-xl group-hover:scale-110 transition">
                    <i class="fa-solid fa-paper-plane"></i>
                </div>
            </div>
            <div class="mt-3 flex items-center text-xs text-slate-400 space-x-2">
                <span><i class="fa-solid fa-arrow-up text-emerald-400"></i> <?= $messageMetrics['today_sent'] ?? 0 ?> sent</span>
                <span>•</span>
                <span><i class="fa-solid fa-arrow-down text-blue-400"></i> <?= $messageMetrics['today_received'] ?? 0 ?> rcvd</span>
            </div>
        </div>
    </div>

    <!-- Main Grid: Pipeline Breakdown & Recent Chats -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left 2 Cols: Sales Pipeline Overview -->
        <div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-6">
            <div class="flex items-center justify-between border-b border-slate-800/80 pb-4">
                <div>
                    <h2 class="text-lg font-bold text-white">Sales Pipeline Distribution</h2>
                    <p class="text-xs text-slate-400">Deals by lifecycle stage</p>
                </div>
                <a href="/pipeline" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold flex items-center space-x-1">
                    <span>View Kanban Board</span>
                    <i class="fa-solid fa-chevron-right text-[10px]"></i>
                </a>
            </div>

            <div class="space-y-4">
                <?php foreach ($stagesWithDeals as $stage): 
                    $pct = ($pipelineSummary['total_deals'] > 0) ? round(($stage['count'] / $pipelineSummary['total_deals']) * 100) : 0;
                ?>
                    <div class="space-y-1.5">
                        <div class="flex items-center justify-between text-xs">
                            <span class="font-medium text-slate-200 flex items-center space-x-2">
                                <span class="w-2.5 h-2.5 rounded-full" style="background-color: <?= $stage['color'] ?>"></span>
                                <span><?= htmlspecialchars($stage['name']) ?></span>
                                <span class="text-slate-500 font-normal">(<?= $stage['count'] ?> deals)</span>
                            </span>
                            <span class="font-semibold text-slate-300">$<?= number_format($stage['total_value'], 2) ?></span>
                        </div>
                        <div class="w-full bg-slate-800 rounded-full h-2 overflow-hidden">
                            <div class="h-2 rounded-full transition-all duration-500" style="width: <?= max($pct, 3) ?>%; background-color: <?= $stage['color'] ?>;"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

        <!-- Right 1 Col: Recent WhatsApp Conversations -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl flex flex-col">
            <div class="flex items-center justify-between border-b border-slate-800/80 pb-4 mb-4">
                <div>
                    <h2 class="text-lg font-bold text-white">Recent WhatsApp Chats</h2>
                    <p class="text-xs text-slate-400">Latest active customer conversations</p>
                </div>
                <a href="/chat" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold">View All</a>
            </div>

            <div class="flex-1 space-y-3 overflow-y-auto">
                <?php if (empty($recentConversations)): ?>
                    <div class="text-center py-10 text-slate-500 text-sm">
                        <i class="fa-solid fa-comments text-3xl mb-2 opacity-40"></i>
                        <p>No active conversations yet.</p>
                        <a href="/settings/simulator" class="text-xs text-purple-400 underline mt-1 inline-block">Send a test message via Simulator</a>
                    </div>
                <?php else: ?>
                    <?php foreach ($recentConversations as $conv): ?>
                        <a href="/chat?conv_id=<?= $conv['id'] ?>" class="block p-3 rounded-2xl bg-slate-950/60 border border-slate-800/80 hover:border-emerald-500/40 hover:bg-slate-800/40 transition group">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-400 flex items-center justify-center font-bold text-white text-sm flex-shrink-0">
                                    <?= strtoupper(substr($conv['contact_name'], 0, 2)) ?>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between">
                                        <h4 class="text-sm font-semibold text-white truncate group-hover:text-emerald-400 transition">
                                            <?= htmlspecialchars($conv['contact_name']) ?>
                                        </h4>
                                        <span class="text-[10px] text-slate-500">
                                            <?= date('M d, H:i', strtotime($conv['last_message_at'])) ?>
                                        </span>
                                    </div>
                                    <p class="text-xs text-slate-400 truncate mt-0.5">
                                        <?= htmlspecialchars($conv['last_message'] ?: 'No message preview') ?>
                                    </p>
                                </div>
                                <?php if ($conv['unread_count'] > 0): ?>
                                    <span class="w-5 h-5 bg-emerald-500 text-slate-950 font-bold text-[10px] rounded-full flex items-center justify-center flex-shrink-0">
                                        <?= $conv['unread_count'] ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                        </a>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>

    </div>

</div>
