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

<?= $this->section('content') ?>
<h5 class="mb-3">Upcoming Interviews</h5>
<div id="interviewsList"></div>
<div id="interviewsEmpty" class="li-card li-card-body text-center text-muted py-5 d-none">
    <i class="bi bi-camera-video display-4 d-block mb-2"></i>No upcoming interviews.
</div>
<div class="modal fade" id="timelineModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Interview History</h6>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6 class="mb-2">Files</h6>
                <div id="filesList" class="mb-3"></div>

                <h6 class="mb-2">Timeline</h6>
                <div id="timelineList" style="max-height:300px; overflow-y:auto;"></div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
function updateIcon(type) {
    const map = { note: 'bi-chat-left-text', status_change: 'bi-arrow-repeat', file_added: 'bi-paperclip', reminder_sent: 'bi-bell' };
    return map[type] || 'bi-dot';
}

function openTimeline(interviewId) {
    new bootstrap.Modal(document.getElementById('timelineModal')).show();
    loadTimeline(interviewId);
}

async function loadTimeline(interviewId) {
    try {
        const res = await apiFetch(`/interviews/${interviewId}/timeline`);
        const { timeline, files } = res.data;

        document.getElementById('filesList').innerHTML = files.length === 0
            ? '<p class="text-muted small mb-0">No files attached yet.</p>'
            : files.map(f => `
                <div class="d-flex justify-content-between align-items-center border-bottom py-1">
                    <span class="small"><i class="bi bi-file-earmark me-1"></i>${escapeHtml(f.original_filename)}</span>
                    <a href="${API_BASE}/interview-files/${f.id}/download" target="_blank" class="btn btn-li-ghost btn-sm"><i class="bi bi-download"></i></a>
                </div>
            `).join('');

        document.getElementById('timelineList').innerHTML = timeline.length === 0
            ? '<p class="text-muted small mb-0">No activity yet.</p>'
            : timeline.map(t => `
                <div class="border-bottom py-2">
                    <div class="small"><i class="bi ${updateIcon(t.update_type)} me-1"></i>${escapeHtml(t.content)}</div>
                    <div class="text-muted" style="font-size:11px;">${formatDateTime(t.created_at)}</div>
                </div>
            `).join('');
    } catch (e) { showToast(e.message, true); }
}

function modeIcon(mode) {
    return { zoom: 'bi-camera-video', google_meet: 'bi-camera-video', onsite: 'bi-geo-alt', phone: 'bi-telephone' }[mode] || 'bi-calendar';
}

async function loadInterviews() {
    try {
        const res = await apiFetch('/interviews/me');
        const list = res.data.interviews || [];
        const el = document.getElementById('interviewsList');
        const empty = document.getElementById('interviewsEmpty');

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

        el.innerHTML = list.map(i => `
            <div class="li-card mb-2">
                <div class="li-card-body d-flex justify-content-between">
                    <div>
                        <span class="fw-bold">${escapeHtml(i.job_title || 'Interview')}</span>
                        <div class="text-muted small mt-1"><i class="bi ${modeIcon(i.mode)}"></i> ${i.mode.replace('_',' ')} · ${formatDateTime(i.scheduled_at)}</div>
                    </div>
                    <div class="d-flex gap-2 align-items-start">
                        <button class="btn btn-li-outline btn-sm" onclick="openTimeline(${i.id})"><i class="bi bi-clock-history me-1"></i>History</button>
                        ${i.meeting_link ? `<a href="${i.meeting_link}" target="_blank" class="btn btn-li-primary btn-sm">Join</a>` : ''}
                    </div>
                </div>
            </div>
        `).join('');
    } catch (e) { showToast(e.message, true); }
}

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