<div class="mb-6"><h1 class="text-2xl font-bold text-gray-900">AI Agent Center</h1><p class="text-sm text-gray-500 mt-1">Manage AI agents that automate tenant support, leasing, maintenance, and more</p></div>

<!-- Agent Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
    <?php
    $agentDefs = [
        ['Tenant Support Agent', 'Answers tenant questions, payment inquiries, and lease details', 'text-blue-600 bg-blue-50', 'tenant_support'],
        ['Leasing Agent', 'Handles tour scheduling, application follow-ups, and lead qualification', 'text-purple-600 bg-purple-50', 'leasing'],
        ['Maintenance Intake Agent', 'Receives maintenance requests, triages priority, and dispatches vendors', 'text-orange-600 bg-orange-50', 'maintenance'],
        ['Rent Collection Agent', 'Sends payment reminders, follows up on late payments, and processes disputes', 'text-green-600 bg-green-50', 'rent_collection'],
        ['Owner Reporting Agent', 'Generates owner statements, answers owner queries, and sends updates', 'text-indigo-600 bg-indigo-50', 'owner_reporting'],
        ['Vendor Coordination Agent', 'Manages vendor assignments, follows up on work orders, and tracks completion', 'text-teal-600 bg-teal-50', 'vendor_coordination'],
        ['Internal Staff Assistant', 'Helps staff with data lookups, report generation, and task management', 'text-gray-600 bg-gray-100', 'staff_assistant'],
    ];
    foreach ($agentDefs as [$name, $desc, $color, $type]):
        $agent = null;
        foreach ($agents ?? [] as $a) { if ($a['type'] === $type) { $agent = $a; break; } }
        $active = $agent && $agent['status'] === 'active';
    ?>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
        <div class="flex items-start justify-between mb-3">
            <div class="p-2.5 rounded-xl <?= $color ?>"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div>
            <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium <?= $active ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500' ?>"><?= $active ? 'Active' : 'Inactive' ?></span>
        </div>
        <h3 class="font-semibold text-gray-900"><?= $name ?></h3>
        <p class="text-sm text-gray-500 mt-1 mb-4"><?= $desc ?></p>
        <div class="flex items-center justify-between">
            <div class="text-xs text-gray-400"><?php if ($agent): ?>Conversations: <?= $agent['conversation_count'] ?? 0 ?><?php else: ?>Not configured<?php endif; ?></div>
            <?php if ($agent): ?><a href="?page=ai&action=configure&id=<?= $agent['id'] ?>" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">Configure →</a>
            <?php else: ?><span class="text-xs text-gray-400 italic">Coming soon</span><?php endif; ?>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- Recent Conversations -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-100"><h3 class="font-semibold text-gray-900">Recent AI Conversations</h3></div>
    <?php if (empty($conversations)): ?>
        <div class="px-6 py-12 text-center text-gray-400">No AI conversations yet. Configure and activate agents to get started.</div>
    <?php else: ?>
        <div class="divide-y divide-gray-100">
            <?php foreach ($conversations as $c): ?>
            <div class="px-6 py-3 flex items-center justify-between hover:bg-gray-50">
                <div><span class="text-sm font-medium text-gray-900"><?= htmlspecialchars($c['agent_name'] ?? 'Agent') ?></span><span class="text-xs text-gray-400 ml-2"><?= timeAgo($c['created_at']) ?></span><p class="text-xs text-gray-500 truncate max-w-md"><?= htmlspecialchars(substr($c['summary'] ?? $c['last_message'] ?? '', 0, 100)) ?></p></div>
                <span class="text-xs"><?= statusBadge($c['status'] ?? 'open') ?></span>
            </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>

<!-- Future Channels -->
<div class="mt-8 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl border border-indigo-100 p-6">
    <div class="flex items-center gap-3 mb-3"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg><h3 class="font-semibold text-indigo-900">AI Voice Agents</h3><span class="text-xs px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full font-medium">Coming Soon</span></div>
    <p class="text-sm text-indigo-700 mb-2">AI-powered voice agents that answer tenant calls, route emergencies, book tours, create maintenance tickets, and more — similar to Giga AI.</p>
    <div class="flex flex-wrap gap-2 mt-3">
        <?php foreach (['Voice','Email','SMS','Chat','Mobile App','Website Widget'] as $ch): ?><span class="text-xs px-2 py-1 bg-white/70 text-indigo-700 rounded-full border border-indigo-200"><?= $ch ?></span><?php endforeach; ?>
    </div>
</div>
