<div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-3 flex-wrap">
            <?php if (!empty($filterBindingId)):
                $filterBinding = null;
                foreach ($allBindings as $bb) { if ((int)$bb['id'] === (int)$filterBindingId) { $filterBinding = $bb; break; } }
            ?>
                <p class="text-sm text-slate-500">Calls for <span class="font-semibold text-slate-800"><?= esc($filterBinding['name'] ?? $filterBinding['vapi_name'] ?? 'Binding #' . (int)$filterBindingId) ?></span></p>
                <a href="<?= site_url('/admin/vapi/score-history') ?>" class="text-xs font-semibold text-violet-600 hover:text-violet-700">← Show all</a>
            <?php else: ?>
                <p class="text-sm text-slate-500"><?= count($calls ?? []) ?> total call(s) scored</p>
            <?php endif; ?>
        </div>
        <a href="<?= site_url('/admin/vapi-settings') ?>" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
            Vapi Settings
        </a>
    </div>

    <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5">
        <form method="get" action="<?= site_url('/admin/vapi/score-history') ?>" class="flex flex-wrap items-end gap-4">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs font-semibold text-slate-600 mb-1.5">Filter by Assistant</label>
                <select name="binding_id" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-violet-500/30 focus:border-violet-500 outline-none transition" onchange="this.form.submit()">
                    <option value="">All Assistants</option>
                    <?php foreach ($allBindings as $bb):
                        $bsel = (!empty($filterBindingId) && (int)$filterBindingId === (int)$bb['id']) ? 'selected' : '';
                    ?>
                        <option value="<?= (int)$bb['id'] ?>" <?= $bsel ?>><?= esc($bb['name'] ?? $bb['vapi_name'] ?? 'Binding #' . (int)$bb['id']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 flex-1 min-w-[360px]">
                <?php
                    $r = service('request');
                    $fromVal = (string)($r->getGet('from') ?? '');
                    $toVal   = (string)($r->getGet('to') ?? '');
                ?>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1.5">Date From</label>
                    <input type="date" name="from" value="<?= esc($fromVal) ?>" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-violet-500/30 focus:border-violet-500 outline-none transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1.5">Date To</label>
                    <input type="date" name="to" value="<?= esc($toVal) ?>" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-violet-500/30 focus:border-violet-500 outline-none transition">
                </div>
            </div>
            <div class="flex items-center gap-2">
                <button type="submit" class="px-4 py-2.5 rounded-xl text-sm font-semibold bg-slate-900 text-white hover:bg-slate-800 transition">Filter</button>
                <a href="<?= site_url('/admin/vapi/score-history') ?>" class="px-4 py-2.5 rounded-xl text-sm font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 transition">Reset</a>
            </div>
        </form>
    </div>

    <div class="glass rounded-2xl shadow-sm border border-slate-200/60 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-slate-50/70 border-b border-slate-200/60">
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Agent</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Assistant</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Duration</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Direction</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Phone</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Score</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Threshold</th>
                        <th class="px-5 py-3.5 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <?php if (empty($calls)): ?>
                        <tr><td colspan="9" class="px-5 py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <div class="w-16 h-16 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-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
                                </div>
                                <p class="text-sm font-medium text-slate-600">No scored calls yet.</p>
                                <p class="text-[11px] text-slate-500 mt-0.5">Completed Vapi calls with transcript will appear here once scored.</p>
                            </div>
                        </td></tr>
                    <?php else: ?>
                        <?php foreach ($calls as $c):
                            $score = isset($c['score_pct']) ? (float)$c['score_pct'] : null;
                            $threshold = isset($c['threshold_pct']) ? (int)$c['threshold_pct'] : (isset($c['score_threshold_pct']) ? (int)$c['score_threshold_pct'] : 70);
                            $passed = ($score !== null && $threshold > 0) ? $score >= $threshold : null;

                            $duration = (int)($c['duration_seconds'] ?? 0);
                            if ($duration > 0) {
                                $durStr = (int)($duration / 60) . 'm ' . ($duration % 60) . 's';
                            } else {
                                $durStr = '—';
                            }

                            $dir = strtolower((string)($c['direction'] ?? ''));
                            $dirBadge = $dir === 'outbound' ? 'bg-sky-100 text-sky-700' : ($dir === 'inbound' ? 'bg-violet-100 text-violet-700' : 'bg-slate-100 text-slate-600');
                            $dirLabel = $dir !== '' ? ucfirst($dir) : '—';

                            $assistantName = $c['binding_name'] ?? '';
                            if ($assistantName === '') $assistantName = $c['binding_vapi_name'] ?? '—';

                            $agentLabel = $c['agent_name'] ?? '';
                            if ($agentLabel === '') $agentLabel = $c['agent_username'] ?? 'Unassigned';
                        ?>
                            <tr class="hover:bg-slate-50/50 transition">
                                <td class="px-5 py-4 text-sm text-slate-600"><?= !empty($c['started_at']) ? date('M j, Y g:i A', strtotime($c['started_at'])) : '—' ?></td>
                                <td class="px-5 py-4">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-semibold text-slate-800"><?= esc($agentLabel) ?></span>
                                        <?php if (!empty($c['agent_username']) && $c['agent_username'] !== $agentLabel): ?>
                                            <span class="text-[11px] text-slate-500">@<?= esc($c['agent_username']) ?></span>
                                        <?php endif; ?>
                                    </div>
                                </td>
                                <td class="px-5 py-4 text-sm font-medium text-slate-700">
                                    <?php if (!empty($c['binding_id'])): ?>
                                        <a href="<?= site_url('/admin/vapi/score-history/binding/' . (int)$c['binding_id']) ?>" class="hover:text-violet-600 transition"><?= esc($assistantName) ?></a>
                                    <?php else: ?>
                                        <?= esc($assistantName) ?>
                                    <?php endif; ?>
                                </td>
                                <td class="px-5 py-4 text-sm text-slate-600 font-medium"><?= $durStr ?></td>
                                <td class="px-5 py-4">
                                    <span class="inline-flex px-2.5 py-1 rounded-full text-[11px] font-semibold <?= $dirBadge ?>"><?= $dirLabel ?></span>
                                </td>
                                <td class="px-5 py-4 text-sm text-slate-700 font-mono"><?= esc($c['phone_number'] ?? '—') ?></td>
                                <td class="px-5 py-4">
                                    <?php if ($score === null): ?>
                                        <span class="text-[11px] text-slate-500 italic">pending</span>
                                    <?php else:
                                        $scoreColor = $score >= 80 ? 'text-emerald-600' : ($score >= 60 ? 'text-amber-600' : 'text-rose-600');
                                    ?>
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <span class="text-sm font-bold <?= $scoreColor ?>"><?= number_format($score, 0) ?>%</span>
                                            <?php if ($passed !== null):
                                                $passClass = $passed ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700';
                                                $passText = $passed ? 'PASS' : 'FAIL';
                                            ?>
                                                <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-bold <?= $passClass ?>"><?= $passText ?></span>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </td>
                                <td class="px-5 py-4 text-sm font-semibold text-slate-700"><?= (int)$threshold ?>%</td>
                                <td class="px-5 py-4 text-right">
                                    <a href="<?= site_url('/admin/vapi/call-review/' . (int)$c['id']) ?>" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[12px] font-semibold bg-violet-50 text-violet-700 hover:bg-violet-100 transition">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                                        Review
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
