<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-white">Contact Messages</h2>
            <p class="text-slate-400 text-sm mt-1">View and manage messages submitted via the contact form.</p>
        </div>
        <span class="px-3 py-1.5 rounded-full text-xs font-extrabold uppercase bg-purple-500/15 text-purple-400 border border-purple-500/25">
            <?php echo count($messages); ?> Total
        </span>
    </div>

    <?php if (empty($messages)): ?>
    <div class="rounded-2xl p-12 text-center" style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07)">
        <i class="fas fa-envelope-open text-4xl text-slate-500/40 mb-4"></i>
        <p class="text-slate-400 font-medium">No contact messages yet.</p>
    </div>
    <?php else: ?>
    <div class="rounded-2xl overflow-hidden border border-white/5 bg-white/[0.02]">
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-white/5 bg-white/[0.01] text-left">
                        <th class="px-5 py-3.5 text-slate-400 font-bold uppercase tracking-wider">Sender</th>
                        <th class="px-5 py-3.5 text-slate-400 font-bold uppercase tracking-wider">Contact</th>
                        <th class="px-5 py-3.5 text-slate-400 font-bold uppercase tracking-wider">Subject</th>
                        <th class="px-5 py-3.5 text-slate-400 font-bold uppercase tracking-wider">Message</th>
                        <th class="px-5 py-3.5 text-slate-400 font-bold uppercase tracking-wider">Date</th>
                        <th class="px-5 py-3.5 text-right text-slate-400 font-bold uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    <?php foreach ($messages as $msg): ?>
                    <tr x-data="{ expanded: false }" class="hover:bg-white/[0.015] transition">
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-2.5">
                                <img class="h-8 w-8 rounded-full flex-shrink-0" src="https://ui-avatars.com/api/?name=<?php echo urlencode($msg['name']); ?>&background=7c3aed&color=fff&size=64" alt="">
                                <span class="font-semibold text-white"><?php echo htmlspecialchars($msg['name']); ?></span>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            <div class="space-y-1">
                                <div class="text-slate-300"><i class="fas fa-envelope text-slate-600 mr-1"></i><?php echo htmlspecialchars($msg['email']); ?></div>
                                <?php if (!empty($msg['phone'])): ?>
                                <div class="text-slate-400"><i class="fas fa-phone text-slate-600 mr-1"></i><?php echo htmlspecialchars($msg['phone']); ?></div>
                                <?php endif; ?>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            <span class="font-medium text-white"><?php echo htmlspecialchars($msg['subject'] ?? '—'); ?></span>
                        </td>
                        <td class="px-5 py-4 max-w-xs">
                            <div>
                                <p class="text-slate-300 truncate cursor-pointer" @click="expanded = !expanded" x-show="!expanded">
                                    <?php echo htmlspecialchars(mb_substr($msg['message'], 0, 60)); ?><?php echo mb_strlen($msg['message']) > 60 ? '...' : ''; ?>
                                    <?php if (mb_strlen($msg['message']) > 60): ?>
                                    <span class="text-purple-400 text-3xs font-bold ml-1"><i class="fas fa-expand-alt"></i> Expand</span>
                                    <?php endif; ?>
                                </p>
                                <div x-show="expanded" x-transition style="display:none" class="cursor-pointer" @click="expanded = false">
                                    <p class="text-slate-300 whitespace-pre-wrap"><?php echo htmlspecialchars($msg['message']); ?></p>
                                    <span class="text-purple-400 text-3xs font-bold mt-1 inline-block"><i class="fas fa-compress-alt"></i> Collapse</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-slate-500 whitespace-nowrap">
                            <?php echo date('M d, Y', strtotime($msg['created_at'])); ?>
                            <br><span class="text-3xs"><?php echo date('h:i A', strtotime($msg['created_at'])); ?></span>
                        </td>
                        <td class="px-5 py-4 text-right">
                            <form action="/superadmin/contacts/delete" method="POST" class="inline">
                                <input type="hidden" name="id" value="<?php echo $msg['id']; ?>">
                                <button type="submit" onclick="return confirm('Delete this message?')" class="text-xs font-semibold py-1.5 px-3 rounded-lg text-red-400 bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 transition active:scale-[0.98]">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php endif; ?>
</div>
