<?php
$statusColors = [
    'booked'    => ['bg-emerald-100', 'text-emerald-700'],
    'cancelled' => ['bg-rose-100', 'text-rose-700'],
    'pending'   => ['bg-amber-100', 'text-amber-700'],
    'completed' => ['bg-sky-100', 'text-sky-700'],
];
?>

<div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-lg font-bold text-slate-800">Bookings</h2>
            <p class="text-sm text-slate-500">Manage all scheduled appointments, cancellations, and booking analytics.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5 bg-gradient-to-br from-emerald-50/70 to-white">
            <div class="flex items-start justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 text-white flex items-center justify-center shadow-md shadow-emerald-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Total Bookings</p>
            <p class="text-2xl font-extrabold text-slate-800"><?= (int)($analytics['total_booked'] ?? 0) ?></p>
            <p class="text-[11px] text-emerald-600 font-semibold mt-1">status = booked</p>
        </div>

        <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5 bg-gradient-to-br from-rose-50/70 to-white">
            <div class="flex items-start justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-rose-500 to-pink-500 text-white flex items-center justify-center shadow-md shadow-rose-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Cancelled</p>
            <p class="text-2xl font-extrabold text-slate-800"><?= (int)($analytics['total_cancelled'] ?? 0) ?></p>
            <p class="text-[11px] text-rose-600 font-semibold mt-1">status = cancelled</p>
        </div>

        <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5 bg-gradient-to-br from-amber-50/70 to-white">
            <div class="flex items-start justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 text-white flex items-center justify-center shadow-md shadow-amber-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Total Revenue</p>
            <p class="text-2xl font-extrabold text-slate-800">$<?= number_format((float)($analytics['total_revenue'] ?? 0), 2) ?></p>
            <p class="text-[11px] text-amber-600 font-semibold mt-1">placeholder</p>
        </div>

        <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5 bg-gradient-to-br from-indigo-50/70 to-white">
            <div class="flex items-start justify-between mb-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-500 text-white flex items-center justify-center shadow-md shadow-indigo-500/20">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                </div>
            </div>
            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Lead → Booking</p>
            <p class="text-2xl font-extrabold text-slate-800"><?= number_format((float)($analytics['lead_rate_pct'] ?? 0), 1) ?>%</p>
            <p class="text-[11px] text-indigo-600 font-semibold mt-1"><?= (int)($analytics['upcoming_7d'] ?? 0) ?> upcoming (7d)</p>
        </div>
    </div>

    <div class="glass rounded-2xl shadow-sm border border-slate-200/60 p-5">
        <form method="get" action="<?= site_url('/admin/bookings') ?>" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4 items-end">
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1.5">Schedule</label>
                <select name="scheduleId" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 outline-none transition">
                    <option value="">All Schedules</option>
                    <?php foreach ($schedules as $s): ?>
                        <option value="<?= (int)$s['id'] ?>" <?= $scheduleId == $s['id'] ? 'selected' : '' ?>><?= esc($s['title']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1.5">Agent</label>
                <select name="agentId" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 outline-none transition">
                    <option value="">All Agents</option>
                    <?php foreach ($agents as $a): ?>
                        <option value="<?= (int)$a['id'] ?>" <?= $agentId == $a['id'] ? 'selected' : '' ?>><?= esc($a['full_name'] ?? $a['username'] ?? 'Agent') ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1.5">From Date</label>
                <input type="date" name="from" value="<?= esc($from) ?>" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 outline-none transition">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1.5">To Date</label>
                <input type="date" name="to" value="<?= esc($to) ?>" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 outline-none transition">
            </div>
            <div class="flex items-stretch gap-2">
                <div class="flex-1">
                    <label class="block text-xs font-semibold text-slate-600 mb-1.5">Status</label>
                    <select name="status" class="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 outline-none transition">
                        <option value="">All Statuses</option>
                        <option value="booked" <?= $status === 'booked' ? 'selected' : '' ?>>Booked</option>
                        <option value="cancelled" <?= $status === 'cancelled' ? 'selected' : '' ?>>Cancelled</option>
                    </select>
                </div>
                <button type="submit" class="self-end inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 text-white text-sm font-semibold shadow-md hover:shadow-lg transition whitespace-nowrap">
                    <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
                    Filter
                </button>
            </div>
        </form>
    </div>

    <div class="glass rounded-2xl shadow-sm border border-slate-200/60 overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200/80 bg-slate-50/50 flex items-center justify-between">
            <div>
                <h3 class="text-sm font-bold text-slate-800">Results</h3>
                <p class="text-[11px] text-slate-500 mt-0.5"><?= count($bookings) ?> booking<?= count($bookings) === 1 ? '' : 's' ?> found</p>
            </div>
        </div>
        <?php if (empty($bookings)): ?>
            <div class="text-center py-16">
                <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mx-auto mb-3">
                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                </div>
                <p class="text-sm font-medium text-slate-600">No bookings found.</p>
                <p class="text-[11px] text-slate-500 mt-1">Try adjusting the filters above.</p>
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50/80 border-b border-slate-200/60">
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Date</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Lead</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Agent</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Start</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">End</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Duration</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Status</th>
                            <th class="px-5 py-3 text-left text-[11px] font-bold text-slate-500 uppercase tracking-wider">Schedule</th>
                            <th class="px-5 py-3 text-right text-[11px] font-bold text-slate-500 uppercase tracking-wider"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <?php foreach ($bookings as $b):
                            $bid = (int)$b['id'];
                            $st = $b['status'] ?? 'booked';
                            $sc = $statusColors[$st] ?? ['bg-slate-100', 'text-slate-700'];
                            $startTs = !empty($b['starts_at']) ? strtotime($b['starts_at']) : null;
                            $endTs = !empty($b['ends_at']) ? strtotime($b['ends_at']) : null;
                            $durMin = ($startTs && $endTs) ? (int)round(($endTs - $startTs) / 60) : 0;
                        ?>
                            <tr class="hover:bg-slate-50/50 transition">
                                <td class="px-5 py-3.5">
                                    <span class="text-sm font-semibold text-slate-800 whitespace-nowrap">
                                        <?= $startTs ? date('M j, Y', $startTs) : '—' ?>
                                    </span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <div class="flex flex-col">
                                        <span class="text-sm font-medium text-slate-800"><?= esc($b['lead_name'] ?? $b['lead_display'] ?? 'Unknown Lead') ?></span>
                                        <?php if (!empty($b['lead_email'])): ?>
                                            <span class="text-[10px] text-slate-500"><?= esc($b['lead_email']) ?></span>
                                        <?php endif; ?>
                                        <?php if (!empty($b['lead_phone'])): ?>
                                            <span class="text-[10px] text-slate-500"><?= esc($b['lead_phone']) ?></span>
                                        <?php endif; ?>
                                    </div>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="text-sm text-slate-700"><?= esc($b['agent_name'] ?? $b['agent_display'] ?? '—') ?></span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="text-sm font-mono text-slate-700 whitespace-nowrap"><?= $startTs ? date('H:i', $startTs) : '—' ?></span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="text-sm font-mono text-slate-700 whitespace-nowrap"><?= $endTs ? date('H:i', $endTs) : '—' ?></span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-slate-100 text-slate-700 text-[11px] font-bold"><?= $durMin ?> min</span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full <?= $sc[0] ?> <?= $sc[1] ?> text-[11px] font-bold uppercase tracking-wide"><?= esc($st) ?></span>
                                </td>
                                <td class="px-5 py-3.5">
                                    <span class="text-sm text-slate-600 truncate max-w-[140px] block" title="<?= esc($b['schedule_title'] ?? '') ?>"><?= esc($b['schedule_title'] ?? '—') ?></span>
                                </td>
                                <td class="px-5 py-3.5 text-right">
                                    <a href="<?= site_url('/admin/bookings/view/' . $bid) ?>" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-[11px] font-bold transition">
                                        View
                                        <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="M9 5l7 7-7 7" /></svg>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>
