<?= $this->extend('layouts/panel') ?>
<?= $this->section('sidebar') ?>
<?= $this->include('panel/_sidebar') ?>
<?= $this->endSection() ?>

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

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">Who Viewed My Profile</h5>
    <span class="li-pill li-pill-blue"><i class="bi bi-eye"></i> <span id="totalViews">0</span> total views</span>
</div>

<div id="viewersList"></div>
<div id="viewersEmpty" class="li-card li-card-body text-center text-muted py-5 d-none">
    <i class="bi bi-eye-slash display-4 d-block mb-2"></i>
    No one has viewed your profile yet. Complete your profile and share your public URL to get discovered.
</div>

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

<?= $this->section('scripts') ?>
<script>
function roleLabel(role) {
    const map = { agency_owner: 'Agency Owner', recruiter: 'Recruiter', candidate: 'Candidate', super_admin: 'Admin' };
    return map[role] || role;
}

async function loadViewers() {
    try {
        const res = await apiFetch('<?= esc($endpoint, "js") ?>');
        const viewers = res.data.viewers || [];
        document.getElementById('totalViews').textContent = res.data.total_views || 0;

        const list = document.getElementById('viewersList');
        const empty = document.getElementById('viewersEmpty');

        if (viewers.length === 0) { list.innerHTML = ''; empty.classList.remove('d-none'); return; }
        empty.classList.add('d-none');

        list.innerHTML = viewers.map(v => `
            <div class="li-card mb-2">
                <div class="li-card-body d-flex justify-content-between align-items-center">
                    <div class="d-flex gap-3 align-items-center">
                        <span class="avatar-circle md">${escapeHtml((v.company_name || v.name || 'U')[0].toUpperCase())}</span>
                        <div>
                            <div class="fw-bold">
                                ${escapeHtml(v.company_name || v.name)}
                                ${v.verification_status === 'verified' ? '<i class="bi bi-patch-check-fill text-primary"></i>' : ''}
                            </div>
                            <div class="text-muted small">
                                ${v.company_name ? `${escapeHtml(v.name)} · ` : ''}${roleLabel(v.role_slug)}
                            </div>
                            <div class="text-muted small">
                                Viewed ${timeAgo(v.last_viewed_at)} ${v.view_count > 1 ? `· ${v.view_count} times` : ''}
                            </div>
                        </div>
                    </div>
                    <div>
                        ${v.profile_url ? `<a href="${v.profile_url}" target="_blank" class="btn btn-li-primary btn-sm"><i class="bi bi-box-arrow-up-right me-1"></i>View Profile</a>` : ''}
                    </div>
                </div>
            </div>
        `).join('');
    } catch (e) { showToast(e.message, true); }
}

loadViewers();
</script>
<?= $this->endSection() ?>
