<?= $this->extend('layout/app') ?>

<?= $this->section('title') ?>Dashboard<?= $this->endSection() ?>
<?= $this->section('pageTitle') ?>Agent Dashboard<?= $this->endSection() ?>

<?= $this->section('content') ?>

<div class="mb-8">
    <div class="glass rounded-2xl p-6 border border-white/60 shadow-sm">
        <div class="flex items-start justify-between flex-wrap gap-4">
            <div>
                <h3 class="text-2xl font-bold text-slate-800">Welcome back! 👋</h3>
                <p class="text-slate-600 mt-1">Ready to make some calls today? Here's your quick overview.</p>
            </div>
            <div class="flex gap-3">
                <a href="<?= esc(site_url('/agent/documents')) ?>" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white font-medium shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/30 transition-all duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    Browse Docs
                </a>
                <a href="<?= esc(site_url('/agent/leads')) ?>" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white text-slate-700 font-medium border border-slate-200 hover:bg-slate-50 hover:border-slate-300 transition-all duration-200 shadow-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    View Leads
                </a>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
    <div class="glass rounded-2xl p-6 border border-white/60 shadow-sm hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
            </div>
            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-blue-50 text-blue-700 text-xs font-medium">
                Total
            </span>
        </div>
        <div class="text-3xl font-bold text-slate-800"><?= number_format($totalDocs) ?></div>
        <p class="text-sm text-slate-500 mt-1">Knowledge Base Documents</p>
    </div>

    <div class="glass rounded-2xl p-6 border border-white/60 shadow-sm hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
            </div>
            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-700 text-xs font-medium">
                Assigned
            </span>
        </div>
        <div class="text-3xl font-bold text-slate-800"><?= number_format($leadsAssigned) ?></div>
        <p class="text-sm text-slate-500 mt-1">Leads Assigned to You</p>
    </div>

    <div class="glass rounded-2xl p-6 border border-white/60 shadow-sm hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
            </div>
            <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-amber-50 text-amber-700 text-xs font-medium">
                Pool
            </span>
        </div>
        <div class="text-3xl font-bold text-slate-800"><?= number_format($totalLeads) ?></div>
        <p class="text-sm text-slate-500 mt-1">Total Leads in System</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200/60 flex items-center justify-between">
            <h3 class="font-semibold text-slate-800 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Recent Documents
            </h3>
            <a href="<?= esc(site_url('/agent/documents')) ?>" class="text-sm text-blue-600 font-medium hover:text-blue-700">View all →</a>
        </div>
        <div class="divide-y divide-slate-100">
            <?php if (empty($recentDocs)): ?>
                <div class="px-6 py-10 text-center">
                    <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-slate-100 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <p class="text-sm text-slate-500">No documents yet.</p>
                </div>
            <?php else: ?>
                <?php foreach ($recentDocs as $doc): ?>
                    <a href="<?= esc(site_url('/agent/documents/view/' . $doc['id'])) ?>" class="flex items-center gap-4 px-6 py-4 hover:bg-slate-50/70 transition-colors">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center border border-blue-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-slate-800 truncate"><?= esc($doc['title']) ?></p>
                            <p class="text-xs text-slate-500 mt-0.5">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 uppercase font-semibold text-[10px] mr-2"><?= esc($doc['type']) ?></span>
                                Added <?= date('M j, Y', strtotime($doc['created_at'])) ?>
                            </p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200/60">
            <h3 class="font-semibold text-slate-800 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Quick Actions
            </h3>
        </div>
        <div class="p-6 grid grid-cols-2 gap-4">
            <a href="<?= esc(site_url('/agent/documents')) ?>" class="group p-5 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 hover:border-blue-200 hover:shadow-md transition-all duration-200">
                <div class="w-11 h-11 rounded-xl bg-white flex items-center justify-center mb-3 shadow-sm group-hover:shadow transition-shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5.5 h-5.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                </div>
                <p class="font-semibold text-slate-800">Call Scripts</p>
                <p class="text-xs text-slate-500 mt-1">Browse scripts & docs</p>
            </a>

            <a href="<?= esc(site_url('/agent/leads')) ?>" class="group p-5 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 hover:border-emerald-200 hover:shadow-md transition-all duration-200">
                <div class="w-11 h-11 rounded-xl bg-white flex items-center justify-center mb-3 shadow-sm group-hover:shadow transition-shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5.5 h-5.5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </div>
                <p class="font-semibold text-slate-800">My Leads</p>
                <p class="text-xs text-slate-500 mt-1">View assigned leads</p>
            </a>

            <a href="<?= esc(site_url('/agent/leads')) ?>" class="group p-5 rounded-2xl bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-100 hover:border-amber-200 hover:shadow-md transition-all duration-200">
                <div class="w-11 h-11 rounded-xl bg-white flex items-center justify-center mb-3 shadow-sm group-hover:shadow transition-shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5.5 h-5.5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                </div>
                <p class="font-semibold text-slate-800">Start Calling</p>
                <p class="text-xs text-slate-500 mt-1">Pick a lead & dial</p>
            </a>

            <a href="<?= esc(site_url('/chat')) ?>" class="group p-5 rounded-2xl bg-gradient-to-br from-purple-50 to-fuchsia-50 border border-purple-100 hover:border-purple-200 hover:shadow-md transition-all duration-200">
                <div class="w-11 h-11 rounded-xl bg-white flex items-center justify-center mb-3 shadow-sm group-hover:shadow transition-shadow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5.5 h-5.5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                    </svg>
                </div>
                <p class="font-semibold text-slate-800">AI Assistant</p>
                <p class="text-xs text-slate-500 mt-1">Get instant answers</p>
            </a>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
