<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Billing & Subscription</h1>

    <!-- Current Plan -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Current Plan</h3>
                <p class="text-2xl font-bold text-gray-900 mt-1"><?= htmlspecialchars($subscription['plan_name'] ?? 'Free') ?></p>
                <p class="text-sm text-gray-500 mt-1"><?= $subscription ? formatMoney($subscription['price']).'/month' : 'No active subscription' ?></p>
            </div>
            <div class="text-right">
                <?php if ($subscription): ?>
                    <p class="text-sm text-gray-500">Renews <?= formatDate($subscription['current_period_end'] ?? '') ?></p>
                    <?= statusBadge($subscription['status'] ?? 'active') ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Usage -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-gray-700">Units</p>
                <p class="text-sm text-gray-500"><?= $usage['units'] ?> / <?= $subscription['max_units'] ?? '∞' ?></p>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2"><div class="bg-indigo-600 rounded-full h-2" style="width: <?= ($subscription['max_units'] ?? 0) > 0 ? min(100, round(($usage['units'] / $subscription['max_units']) * 100)) : 0 ?>%"></div></div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-gray-700">Users</p>
                <p class="text-sm text-gray-500"><?= $usage['users'] ?> / <?= $subscription['max_users'] ?? '∞' ?></p>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2"><div class="bg-indigo-600 rounded-full h-2" style="width: <?= ($subscription['max_users'] ?? 0) > 0 ? min(100, round(($usage['users'] / $subscription['max_users']) * 100)) : 0 ?>%"></div></div>
        </div>
    </div>

    <!-- Plans -->
    <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Available Plans</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <?php foreach ($plans ?? [] as $p): $isCurrent = ($subscription['plan_id'] ?? null) == $p['id']; ?>
            <div class="bg-white rounded-xl shadow-sm border <?= $isCurrent ? 'border-indigo-500 ring-2 ring-indigo-200' : 'border-gray-200' ?> p-6">
                <?php if ($isCurrent): ?><span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 mb-2">Current Plan</span><?php endif; ?>
                <h3 class="text-lg font-bold text-gray-900"><?= htmlspecialchars($p['name']) ?></h3>
                <p class="text-3xl font-bold text-gray-900 mt-2"><?= formatMoney($p['price']) ?><span class="text-sm font-normal text-gray-500">/mo</span></p>
                <ul class="mt-4 space-y-2 text-sm text-gray-600">
                    <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Up to <?= $p['max_units'] ?> units</li>
                    <li class="flex items-center gap-2"><svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Up to <?= $p['max_users'] ?> users</li>
                </ul>
                <?php if (!$isCurrent): ?><button class="w-full mt-4 px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 text-sm font-medium">Upgrade</button><?php endif; ?>
            </div>
        <?php endforeach; ?>
        <?php if (empty($plans)): ?><p class="col-span-full text-center text-gray-400 py-8">No plans available. Run installer to seed plans.</p><?php endif; ?>
    </div>
</div>
