<?php
use App\Core\Auth;
use App\Models\Setting;
$appName = Setting::getVal('app_name', 'WhatsApp CRM');
$currentUser = Auth::user();
$currentUri = $_SERVER['REQUEST_URI'] ?? '';
?>
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-900">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($appName) ?> - Sales & Chat Engine</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        wa: {
                            50: '#eefcf4',
                            100: '#d6f8e4',
                            500: '#25D366',
                            600: '#128C7E',
                            700: '#075E54',
                            800: '#0b473f',
                            900: '#07332d',
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/assets/css/app.css">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
    </style>
</head>
<body class="h-full bg-slate-950 text-slate-100 flex overflow-hidden">

    <!-- Left Navigation Sidebar -->
    <aside class="w-64 bg-slate-900 border-r border-slate-800 flex flex-col flex-shrink-0 select-none">
        <!-- Brand / Header -->
        <div class="h-16 px-5 flex items-center justify-between border-b border-slate-800/80">
            <a href="/dashboard" class="flex items-center space-x-3">
                <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-wa-600 to-wa-500 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-wa-500/20">
                    <i class="fa-brands fa-whatsapp text-xl"></i>
                </div>
                <div>
                    <h1 class="font-bold text-white tracking-tight text-base"><?= htmlspecialchars($appName) ?></h1>
                    <span class="text-[10px] uppercase font-bold tracking-wider text-wa-500 bg-wa-500/10 px-1.5 py-0.5 rounded">Pro CRM</span>
                </div>
            </a>
        </div>

        <!-- Navigation Links -->
        <nav class="flex-1 px-3 py-4 space-y-1.5 overflow-y-auto custom-scrollbar">
            <?php
            $navItems = [
                ['url' => '/dashboard', 'icon' => 'fa-solid fa-chart-pie', 'label' => 'Dashboard'],
                ['url' => '/chat', 'icon' => 'fa-solid fa-comments', 'label' => 'Live Chat Inbox', 'badge' => 'Live'],
                ['url' => '/contacts', 'icon' => 'fa-solid fa-address-book', 'label' => 'Contacts & Leads'],
                ['url' => '/pipeline', 'icon' => 'fa-solid fa-columns', 'label' => 'Sales Pipeline'],
                ['url' => '/automations', 'icon' => 'fa-solid fa-robot', 'label' => 'Automation & Bot'],
                ['url' => '/campaigns', 'icon' => 'fa-solid fa-bullhorn', 'label' => 'Broadcasts'],
                ['url' => '/templates', 'icon' => 'fa-solid fa-file-lines', 'label' => 'Message Templates'],
            ];

            if (Auth::isAdmin()) {
                $navItems[] = ['url' => '/users', 'icon' => 'fa-solid fa-users-gear', 'label' => 'Team & Agents'];
                $navItems[] = ['url' => '/settings', 'icon' => 'fa-solid fa-sliders', 'label' => 'Settings & Meta API'];
            }
            $navItems[] = ['url' => '/settings/simulator', 'icon' => 'fa-solid fa-flask-vial', 'label' => 'Webhook Simulator', 'badge' => 'Test'];
            ?>

            <?php foreach ($navItems as $item): 
                $isActive = (str_starts_with($currentUri, $item['url']) && ($item['url'] !== '/dashboard' || $currentUri === '/dashboard' || $currentUri === '/'));
            ?>
                <a href="<?= $item['url'] ?>" class="flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-medium transition-all group <?= $isActive ? 'bg-wa-600/20 text-wa-500 border border-wa-500/30' : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60' ?>">
                    <div class="flex items-center space-x-3">
                        <i class="<?= $item['icon'] ?> text-base w-5 text-center transition-transform group-hover:scale-110 <?= $isActive ? 'text-wa-500' : 'text-slate-400' ?>"></i>
                        <span><?= $item['label'] ?></span>
                    </div>
                    <?php if (isset($item['badge'])): ?>
                        <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full <?= $item['badge'] === 'Live' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 animate-pulse' : 'bg-purple-500/20 text-purple-300 border border-purple-500/30' ?>">
                            <?= $item['badge'] ?>
                        </span>
                    <?php endif; ?>
                </a>
            <?php endforeach; ?>
        </nav>

        <!-- Current User Profile Footer -->
        <div class="p-3 border-t border-slate-800 bg-slate-900/50">
            <div class="flex items-center justify-between p-2 rounded-xl bg-slate-800/60 border border-slate-700/50">
                <a href="/profile" class="flex items-center space-x-2.5 min-w-0">
                    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center font-bold text-emerald-400 text-xs">
                        <?= strtoupper(substr($currentUser['name'] ?? 'A', 0, 2)) ?>
                    </div>
                    <div class="min-w-0">
                        <div class="text-xs font-semibold text-white truncate"><?= htmlspecialchars($currentUser['name'] ?? 'User') ?></div>
                        <div class="text-[10px] text-slate-400 capitalize"><?= htmlspecialchars($currentUser['role'] ?? 'Agent') ?></div>
                    </div>
                </a>
                <a href="/logout" title="Logout" class="p-1.5 text-slate-400 hover:text-red-400 hover:bg-slate-700/50 rounded-lg transition">
                    <i class="fa-solid fa-arrow-right-from-bracket text-xs"></i>
                </a>
            </div>
        </div>
    </aside>

    <!-- Main Content Shell -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
        <!-- Top Navbar -->
        <header class="h-16 bg-slate-900/80 backdrop-blur border-b border-slate-800 flex items-center justify-between px-6 z-10 flex-shrink-0">
            <div class="flex items-center space-x-3">
                <div class="relative">
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                        <span class="w-1.5 h-1.5 mr-1.5 bg-emerald-500 rounded-full animate-ping"></span>
                        Meta WhatsApp Cloud API Connected
                    </span>
                </div>
            </div>

            <div class="flex items-center space-x-4">
                <a href="/settings/simulator" class="text-xs bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-500/30 px-3 py-1.5 rounded-lg flex items-center space-x-1.5 transition">
                    <i class="fa-solid fa-flask text-xs"></i>
                    <span>Webhook Simulator</span>
                </a>
                <a href="/contacts" class="text-xs bg-wa-600 hover:bg-wa-500 text-white font-medium px-3 py-1.5 rounded-lg flex items-center space-x-1.5 shadow-md shadow-wa-600/20 transition">
                    <i class="fa-solid fa-plus text-xs"></i>
                    <span>New Lead</span>
                </a>
            </div>
        </header>

        <!-- Main Page View Container -->
        <main class="flex-1 overflow-y-auto custom-scrollbar bg-slate-950">
