<div class="p-4 lg:p-6 space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="?page=properties" class="p-2 rounded-lg hover:bg-gray-100 transition">
                <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900"><?= e($property['name']) ?></h1>
                <p class="text-sm text-gray-500"><?= e($property['address']) ?>, <?= e($property['city']) ?>, <?= e($property['state']) ?> <?= e($property['zip']) ?></p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="?page=units&action=create&property_id=<?= $property['id'] ?>" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add Unit
            </a>
            <a href="?page=properties&action=edit&id=<?= $property['id'] ?>" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">Edit</a>
            <form method="POST" action="?page=properties&action=delete" class="inline" onsubmit="return confirm('Delete this property?')">
                <?= CSRF::field() ?>
                <input type="hidden" name="id" value="<?= $property['id'] ?>">
                <button type="submit" class="px-4 py-2 text-sm font-medium text-red-600 bg-white border border-gray-200 rounded-xl hover:bg-red-50 transition">Delete</button>
            </form>
        </div>
    </div>

    <!-- Property Info Cards -->
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5">
            <div class="text-xs text-gray-500 mb-1">Type</div>
            <div class="text-sm font-semibold text-gray-900"><?= ucwords(str_replace('-', ' ', $property['type'])) ?></div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5">
            <div class="text-xs text-gray-500 mb-1">Owner</div>
            <div class="text-sm font-semibold text-gray-900"><?= e(($property['owner_first'] ?? '') . ' ' . ($property['owner_last'] ?? '')) ?: '—' ?></div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5">
            <div class="text-xs text-gray-500 mb-1">Total Units</div>
            <div class="text-sm font-semibold text-gray-900"><?= count($units) ?></div>
        </div>
        <div class="bg-white rounded-2xl border border-gray-200/80 p-5">
            <div class="text-xs text-gray-500 mb-1">Occupancy</div>
            <?php
            $occ = count($units) > 0 ? round(count(array_filter($units, fn($u) => $u['status'] === 'occupied')) / count($units) * 100) : 0;
            ?>
            <div class="text-sm font-semibold text-gray-900"><?= $occ ?>%</div>
        </div>
    </div>

    <!-- Units Table -->
    <div class="bg-white rounded-2xl border border-gray-200/80 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h2 class="text-sm font-semibold text-gray-900">Units (<?= count($units) ?>)</h2>
        </div>
        <?php if (empty($units)): ?>
            <div class="text-center py-12">
                <p class="text-sm text-gray-400">No units added yet</p>
                <a href="?page=units&action=create&property_id=<?= $property['id'] ?>" class="inline-flex items-center gap-1 mt-2 text-sm text-blue-600 font-medium">Add a unit</a>
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50/80 border-b border-gray-100">
                            <th class="px-5 py-3">Unit</th>
                            <th class="px-5 py-3">Status</th>
                            <th class="px-5 py-3">Tenant</th>
                            <th class="px-5 py-3">Beds / Baths</th>
                            <th class="px-5 py-3">Rent</th>
                            <th class="px-5 py-3"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <?php foreach ($units as $unit): ?>
                        <tr class="hover:bg-gray-50/50">
                            <td class="px-5 py-3">
                                <a href="?page=units&action=show&id=<?= $unit['id'] ?>" class="font-medium text-gray-900 hover:text-blue-600">#<?= e($unit['unit_number']) ?></a>
                            </td>
                            <td class="px-5 py-3"><?= statusBadge($unit['status']) ?></td>
                            <td class="px-5 py-3 text-gray-600"><?= $unit['first_name'] ? e($unit['first_name'] . ' ' . $unit['last_name']) : '—' ?></td>
                            <td class="px-5 py-3 text-gray-600"><?= $unit['bedrooms'] ?? '—' ?> / <?= $unit['bathrooms'] ?? '—' ?></td>
                            <td class="px-5 py-3 font-medium text-gray-900"><?= $unit['market_rent'] ? formatMoney($unit['market_rent']) : '—' ?></td>
                            <td class="px-5 py-3 text-right">
                                <a href="?page=units&action=edit&id=<?= $unit['id'] ?>" class="text-gray-400 hover:text-blue-600">
                                    <svg class="w-4 h-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>

    <!-- Notes -->
    <?php if (!empty($property['notes'])): ?>
    <div class="bg-white rounded-2xl border border-gray-200/80 p-6">
        <h2 class="text-sm font-semibold text-gray-900 mb-3">Notes</h2>
        <p class="text-sm text-gray-600 whitespace-pre-line"><?= e($property['notes']) ?></p>
    </div>
    <?php endif; ?>
</div>
