<div class="p-8 max-w-7xl mx-auto space-y-6">

    <!-- Header & Action Buttons -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Contacts & Leads</h1>
            <p class="text-slate-400 text-xs">Customer database, WhatsApp phone numbers, tags, and lifecycle stages.</p>
        </div>
        <div class="flex items-center space-x-3">
            <a href="/contacts/export" class="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold px-3.5 py-2.5 rounded-xl border border-slate-700 transition flex items-center space-x-1.5">
                <i class="fa-solid fa-file-export text-xs"></i>
                <span>Export CSV</span>
            </a>
            <button onclick="document.getElementById('import-csv-modal').classList.remove('hidden')" class="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold px-3.5 py-2.5 rounded-xl border border-slate-700 transition flex items-center space-x-1.5">
                <i class="fa-solid fa-file-import text-xs"></i>
                <span>Import CSV</span>
            </button>
            <button onclick="document.getElementById('create-contact-modal').classList.remove('hidden')" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-1.5">
                <i class="fa-solid fa-user-plus text-xs"></i>
                <span>Add Contact</span>
            </button>
        </div>
    </div>

    <!-- Filters Bar -->
    <form method="GET" action="/contacts" class="bg-slate-900 border border-slate-800 rounded-2xl p-4 grid grid-cols-1 sm:grid-cols-4 gap-3">
        <div>
            <input type="text" name="search" value="<?= htmlspecialchars($filters['search'] ?? '') ?>" placeholder="Search name, phone, email..."
                   class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500">
        </div>
        <div>
            <select name="stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                <option value="">All Stages</option>
                <?php foreach ($stages as $st): ?>
                    <option value="<?= $st['id'] ?>" <?= ($filters['stage_id'] == $st['id']) ? 'selected' : '' ?>><?= htmlspecialchars($st['name']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div>
            <select name="tag_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                <option value="">All Tags</option>
                <?php foreach ($tags as $tg): ?>
                    <option value="<?= $tg['id'] ?>" <?= ($filters['tag_id'] == $tg['id']) ? 'selected' : '' ?>><?= htmlspecialchars($tg['name']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="flex items-center space-x-2">
            <button type="submit" class="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold py-2 rounded-xl transition">
                Filter
            </button>
            <a href="/contacts" class="bg-slate-950 hover:bg-slate-800 text-slate-400 text-xs p-2 rounded-xl border border-slate-800 transition">Reset</a>
        </div>
    </form>

    <!-- Contacts Table -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-slate-950/70 border-b border-slate-800 text-slate-400 font-semibold uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4">Contact</th>
                        <th class="px-6 py-4">WhatsApp Phone</th>
                        <th class="px-6 py-4">Stage</th>
                        <th class="px-6 py-4">Tags</th>
                        <th class="px-6 py-4">Assigned Agent</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    <?php if (empty($contacts)): ?>
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-500">
                                <i class="fa-solid fa-address-book text-3xl mb-2 opacity-40"></i>
                                <p>No contacts found matching your query.</p>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($contacts as $c): ?>
                            <tr class="hover:bg-slate-800/30 transition">
                                <td class="px-6 py-4">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-500 flex items-center justify-center font-bold text-white text-xs">
                                            <?= strtoupper(substr($c['name'], 0, 2)) ?>
                                        </div>
                                        <div>
                                            <a href="/contacts/<?= $c['id'] ?>" class="font-bold text-white hover:text-emerald-400 transition">
                                                <?= htmlspecialchars($c['name']) ?>
                                            </a>
                                            <?php if ($c['company']): ?>
                                                <div class="text-[10px] text-slate-500"><?= htmlspecialchars($c['company']) ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 font-mono text-slate-300">
                                    <?= htmlspecialchars($c['phone_number']) ?>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-[10px] font-semibold px-2 py-0.5 rounded-md text-white" style="background-color: <?= $c['stage_color'] ?? '#3b82f6' ?>">
                                        <?= htmlspecialchars($c['stage_name'] ?? 'Lead') ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-wrap gap-1">
                                        <?php foreach ($c['tags'] as $t): ?>
                                            <span class="text-[9px] px-1.5 py-0.5 rounded-full font-semibold" style="background-color: <?= $t['color'] ?>25; color: <?= $t['color'] ?>;">
                                                <?= htmlspecialchars($t['name']) ?>
                                            </span>
                                        <?php endforeach; ?>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-slate-400">
                                    👤 <?= htmlspecialchars($c['assigned_user_name'] ?? 'Unassigned') ?>
                                </td>
                                <td class="px-6 py-4 text-right space-x-2">
                                    <a href="/chat?conv_id=<?= $c['id'] ?>" title="Open WhatsApp Chat" class="inline-flex items-center space-x-1 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-2.5 py-1.5 rounded-lg transition font-semibold">
                                        <i class="fa-brands fa-whatsapp text-sm"></i>
                                        <span>Chat</span>
                                    </a>
                                    <a href="/contacts/<?= $c['id'] ?>" class="inline-block p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition">
                                        <i class="fa-solid fa-eye text-xs"></i>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>

<!-- Create Contact Modal -->
<div id="create-contact-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Add New WhatsApp Lead</h3>
            <button onclick="document.getElementById('create-contact-modal').classList.add('hidden')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="/contacts" class="space-y-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">WhatsApp Phone Number (with country code)</label>
                <input type="text" name="phone_number" required placeholder="+15551234567" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Full Name</label>
                    <input type="text" name="name" required placeholder="John Doe" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Email</label>
                    <input type="email" name="email" placeholder="john@example.com" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Company</label>
                    <input type="text" name="company" placeholder="Acme Corp" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Stage</label>
                    <select name="stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <?php foreach ($stages as $st): ?>
                            <option value="<?= $st['id'] ?>"><?= htmlspecialchars($st['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Assign Agent</label>
                <select name="assigned_to" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                    <option value="">Unassigned</option>
                    <?php foreach ($agents as $ag): ?>
                        <option value="<?= $ag['id'] ?>"><?= htmlspecialchars($ag['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Notes</label>
                <textarea name="notes" rows="2" placeholder="Initial context..." class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-emerald-500 resize-none"></textarea>
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Save & Initialize Chat
            </button>
        </form>
    </div>
</div>

<!-- Import CSV Modal -->
<div id="import-csv-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">Bulk Import Leads (CSV)</h3>
            <button onclick="document.getElementById('import-csv-modal').classList.add('hidden')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="/contacts/import" enctype="multipart/form-data" class="space-y-4">
            <p class="text-xs text-slate-400">CSV file format: <code>Name, Phone, Email, Company, Notes</code></p>
            <input type="file" name="csv_file" accept=".csv" required class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none">
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Upload & Import
            </button>
        </form>
    </div>
</div>
