<div class="max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <a href="?page=tenants" class="text-gray-400 hover:text-gray-600"><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="M15 19l-7-7 7-7"/></svg></a>
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-lg"><?= strtoupper(substr($tenant['first_name'],0,1).substr($tenant['last_name'],0,1)) ?></div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900"><?= htmlspecialchars($tenant['first_name'].' '.$tenant['last_name']) ?></h1>
                    <p class="text-sm text-gray-500"><?= htmlspecialchars($tenant['email'] ?? '') ?></p>
                </div>
            </div>
            <?= statusBadge($tenant['status'] ?? 'active') ?>
        </div>
        <div class="flex gap-2">
            <a href="?page=tenants&action=edit&id=<?= $tenant['id'] ?>" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">Edit</a>
            <form method="POST" action="?page=tenants&action=delete&id=<?= $tenant['id'] ?>" onsubmit="return confirm('Delete this tenant?')">
                <?= CSRF::field() ?>
                <button class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 text-sm font-medium">Delete</button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <p class="text-xs font-medium text-gray-500 uppercase">Balance</p>
            <p class="text-2xl font-bold <?= ($balance ?? 0) > 0 ? 'text-red-600' : 'text-green-600' ?> mt-1"><?= formatMoney($balance ?? 0) ?></p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <p class="text-xs font-medium text-gray-500 uppercase">Property / Unit</p>
            <p class="text-lg font-bold text-gray-900 mt-1"><?= htmlspecialchars(($tenant['property_name'] ?? 'Unassigned') . ($tenant['unit_number'] ? ' / '.$tenant['unit_number'] : '')) ?></p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <p class="text-xs font-medium text-gray-500 uppercase">Phone</p>
            <p class="text-lg font-bold text-gray-900 mt-1"><?= htmlspecialchars($tenant['phone'] ?? '-') ?></p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Details</h3>
            <dl class="space-y-3 text-sm">
                <div class="flex justify-between"><dt class="text-gray-500">Date of Birth</dt><dd class="font-medium"><?= $tenant['date_of_birth'] ? formatDate($tenant['date_of_birth']) : '-' ?></dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Emergency Contact</dt><dd class="font-medium"><?= htmlspecialchars($tenant['emergency_contact_name'] ?? '-') ?></dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Emergency Phone</dt><dd class="font-medium"><?= htmlspecialchars($tenant['emergency_contact_phone'] ?? '-') ?></dd></div>
                <div class="flex justify-between"><dt class="text-gray-500">Added</dt><dd class="font-medium"><?= formatDate($tenant['created_at']) ?></dd></div>
            </dl>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Lease Info</h3>
            <?php if (!empty($lease)): ?>
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between"><dt class="text-gray-500">Status</dt><dd><?= statusBadge($lease['status']) ?></dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Period</dt><dd class="font-medium"><?= formatDate($lease['start_date']) ?> – <?= formatDate($lease['end_date']) ?></dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Rent</dt><dd class="font-medium"><?= formatMoney($lease['rent_amount']) ?>/mo</dd></div>
                    <div class="flex justify-between"><dt class="text-gray-500">Deposit</dt><dd class="font-medium"><?= formatMoney($lease['security_deposit'] ?? 0) ?></dd></div>
                </dl>
                <a href="?page=leases&action=show&id=<?= $lease['id'] ?>" class="inline-block mt-3 text-sm text-indigo-600 hover:underline">View Lease →</a>
            <?php else: ?>
                <p class="text-gray-400 text-sm">No active lease</p>
                <a href="?page=leases&action=create" class="inline-block mt-3 text-sm text-indigo-600 hover:underline">Create Lease</a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Recent Payments -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Recent Payments</h3>
        <?php if (!empty($payments)): ?>
            <table class="w-full text-sm">
                <thead class="text-left"><tr>
                    <th class="pb-2 font-medium text-gray-600">Date</th>
                    <th class="pb-2 font-medium text-gray-600">Amount</th>
                    <th class="pb-2 font-medium text-gray-600">Method</th>
                    <th class="pb-2 font-medium text-gray-600">Status</th>
                </tr></thead>
                <tbody class="divide-y divide-gray-50">
                    <?php foreach ($payments as $pay): ?>
                        <tr>
                            <td class="py-2 text-gray-600"><?= formatDate($pay['payment_date']) ?></td>
                            <td class="py-2 font-medium"><?= formatMoney($pay['amount']) ?></td>
                            <td class="py-2 text-gray-600"><?= ucfirst($pay['payment_method'] ?? '-') ?></td>
                            <td class="py-2"><?= statusBadge($pay['status']) ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php else: ?>
            <p class="text-gray-400 text-sm">No payments recorded</p>
        <?php endif; ?>
    </div>

    <?php if ($tenant['notes']): ?>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Notes</h3>
            <p class="text-sm text-gray-700 whitespace-pre-line"><?= htmlspecialchars($tenant['notes']) ?></p>
        </div>
    <?php endif; ?>
</div>
