<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white dark:bg-darkcard rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm border-l-4 border-l-yellow-500">
        <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total At-Risk MRR</h3>
        <p class="text-3xl font-bold text-yellow-600 dark:text-yellow-500 mt-2">$<%= totalAtRiskMrr.toFixed(2) %></p>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm border-l-4 border-l-red-500">
        <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Subscribers in Grace</h3>
        <p class="text-3xl font-bold dark:text-white mt-2"><%= atRiskCount %></p>
    </div>
    <div class="bg-white dark:bg-darkcard rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm border-l-4 border-l-green-500">
        <h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">7-Day Recovery Rate</h3>
        <p class="text-3xl font-bold dark:text-white mt-2">--%</p>
        <p class="text-xs text-gray-500 mt-1">Metrics gathering in progress...</p>
    </div>
</div>

<div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm text-left">
            <thead class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
                <tr>
                    <th class="px-6 py-3 font-medium">Player</th>
                    <th class="px-6 py-3 font-medium">Tier & MRR</th>
                    <th class="px-6 py-3 font-medium">Failure Reason</th>
                    <th class="px-6 py-3 font-medium">Time Remaining</th>
                    <th class="px-6 py-3 font-medium text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                <% if (atRisk.length === 0) { %>
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                            <span class="text-2xl block mb-2">🎉</span>
                            No subscribers in grace period. MRR is secure!
                        </td>
                    </tr>
                <% } %>

                <% atRisk.forEach(sub => { 
                    const hoursRemaining = Math.max(0, Math.floor(sub.seconds_remaining / 3600));
                    let timeColor = 'text-green-500';
                    let timeBg = 'bg-green-100 dark:bg-green-900/30';
                    if (hoursRemaining <= 48) { timeColor = 'text-yellow-600 dark:text-yellow-500'; timeBg = 'bg-yellow-100 dark:bg-yellow-900/30'; }
                    if (hoursRemaining <= 24) { timeColor = 'text-red-600 dark:text-red-500'; timeBg = 'bg-red-100 dark:bg-red-900/30'; }
                    
                    const tierName = TIER_INFO[sub.tier_level]?.name || 'Unknown';
                %>
                <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
                    <td class="px-6 py-4">
                        <div class="font-bold dark:text-white"><%= sub.minecraft_username || 'Unlinked' %></div>
                        <div class="text-xs text-gray-500 font-mono mt-1"><%= sub.discord_id %></div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="font-medium dark:text-gray-200"><%= tierName %></div>
                        <div class="text-xs text-gray-500 font-mono mt-1">$<%= parseFloat(sub.mrr_value).toFixed(2) %>/mo</div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                            <%= sub.payment_failure_reason || 'Card Declined' %>
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1.5 rounded-full text-xs font-bold flex items-center gap-2 w-max <%= timeBg %> <%= timeColor %>">
                            <span class="w-2 h-2 rounded-full <%= timeColor.replace('text-', 'bg-') %> animate-pulse"></span>
                            <%= hoursRemaining %>h remaining
                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end gap-2" id="actions-<%= sub.discord_id %>">
                            <button hx-post="/admin/grace/<%= sub.discord_id %>/manual"
                                    hx-target="#actions-<%= sub.discord_id %>"
                                    hx-confirm="Convert to active manual payment?"
                                    class="px-3 py-1.5 bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400 rounded text-xs font-medium transition-colors">
                                Manual Pay
                            </button>
                            <button hx-post="/admin/grace/<%= sub.discord_id %>/extend"
                                    hx-target="#actions-<%= sub.discord_id %>"
                                    class="px-3 py-1.5 bg-yellow-100 text-yellow-700 hover:bg-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 rounded text-xs font-medium transition-colors">
                                +24h
                            </button>
                        </div>
                    </td>
                </tr>
                <% }) %>
            </tbody>
        </table>
    </div>
</div>
