@extends('layouts.admin')
@section('title', 'Agency Console')

@section('breadcrumb')
<span class="text-amber-600 font-semibold text-xs uppercase tracking-wider">⚡ Super Admin</span>
<svg class="w-3 h-3 text-slate-300 mx-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="text-slate-700 font-medium">Agency Console</span>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Agency Console</h1>
        <p class="page-subtitle">Global overview of all tenants and system health</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('superadmin.system.health') }}" class="btn-ghost">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/></svg>
            System Health
        </a>
        <a href="{{ route('superadmin.tenants.index') }}" class="btn-primary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
            New Tenant
        </a>
    </div>
</div>

{{-- KPI Grid --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card border-l-4 border-emerald-500">
        <div class="stat-label">Active Tenants</div>
        <div class="stat-value">{{ $stats['active_tenants'] }}</div>
        <div class="text-xs text-emerald-600 mt-2 font-medium">+ {{ $stats['trialing'] }} trialing</div>
    </div>
    <div class="stat-card border-l-4 border-indigo-500">
        <div class="stat-label">Monthly Recurring Revenue</div>
        <div class="stat-value text-xl">₹{{ number_format($stats['mrr']) }}</div>
        <div class="text-xs text-slate-400 mt-2">estimated MRR</div>
    </div>
    <div class="stat-card border-l-4 border-amber-500">
        <div class="stat-label">Trials Active</div>
        <div class="stat-value">{{ $stats['trialing'] }}</div>
        <a href="{{ route('superadmin.tenants.index', ['status' => 'trialing']) }}" class="stat-link">View all →</a>
    </div>
    <div class="stat-card border-l-4 {{ $stats['past_due'] > 0 ? 'border-rose-500' : 'border-slate-300' }}">
        <div class="stat-label">Past Due / At Risk</div>
        <div class="stat-value {{ $stats['past_due'] > 0 ? 'text-rose-600' : '' }}">{{ $stats['past_due'] }}</div>
        @if($stats['past_due'] > 0)
        <a href="{{ route('superadmin.tenants.index', ['status' => 'past_due']) }}" class="stat-link text-rose-600">Requires attention →</a>
        @endif
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-5">

    {{-- Recent Tenants --}}
    <div class="xl:col-span-2 card">
        <div class="card-header">
            <h2 class="card-title">Recent Tenants</h2>
            <a href="{{ route('superadmin.tenants.index') }}" class="text-xs text-indigo-600 hover:underline">View all →</a>
        </div>
        <div class="table-wrapper">
            <table class="data-table">
                <thead><tr>
                    <th>Tenant</th>
                    <th>Plan</th>
                    <th>Status</th>
                    <th>Last Active</th>
                    <th class="text-right">Actions</th>
                </tr></thead>
                <tbody>
                    @foreach($recentTenants as $tenant)
                    <tr>
                        <td>
                            <div class="flex items-center gap-2.5">
                                <div class="w-7 h-7 rounded-lg bg-indigo-100 text-indigo-700 flex items-center justify-center text-xs font-bold shrink-0">
                                    {{ strtoupper(substr($tenant->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="font-semibold text-slate-800">{{ $tenant->name }}</div>
                                    <div class="text-xs text-slate-400">{{ $tenant->slug }}.{{ config('app.domain') }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-indigo">{{ $tenant->subscription?->plan?->display_name ?? 'No plan' }}</span>
                        </td>
                        <td>
                            <span class="status-badge status-{{ $tenant->status }}">{{ ucfirst($tenant->status) }}</span>
                        </td>
                        <td class="text-slate-500 text-xs">{{ $tenant->updated_at->diffForHumans() }}</td>
                        <td>
                            <div class="flex items-center justify-end gap-1">
                                <form method="POST" action="{{ route('superadmin.tenants.impersonate', $tenant) }}">@csrf
                                    <button type="submit" class="btn-ghost btn-sm text-amber-600 hover:text-amber-800 hover:bg-amber-50">View</button>
                                </form>
                                <a href="{{ route('superadmin.tenants.show', $tenant) }}" class="btn-ghost btn-sm">Manage</a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Churn Risk + Quick Actions --}}
    <div class="space-y-5">
        {{-- Churn Risks --}}
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">⚠️ Churn Risk</h2>
                <span class="badge badge-red">{{ $churnRisks->count() }}</span>
            </div>
            @if($churnRisks->isEmpty())
            <div class="p-5 text-center text-sm text-slate-400">✓ No tenants at risk</div>
            @else
            <div class="divide-y divide-slate-100">
                @foreach($churnRisks as $tenant)
                <div class="px-4 py-3 flex items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold text-slate-800">{{ $tenant->name }}</div>
                        <div class="text-xs text-rose-600 mt-0.5">
                            @if($tenant->status === 'past_due') Payment overdue
                            @elseif($tenant->status === 'trialing') Trial expiring soon
                            @endif
                        </div>
                    </div>
                    <form method="POST" action="{{ route('superadmin.tenants.impersonate', $tenant) }}">@csrf
                        <button type="submit" class="btn-ghost btn-sm text-xs shrink-0">View</button>
                    </form>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Quick Links --}}
        <div class="card p-4">
            <div class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Quick Actions</div>
            <div class="space-y-1">
                @foreach([
                    [route('superadmin.tenants.index'), 'All Tenants', '🏢'],
                    [route('superadmin.billing.index'), 'Billing Console', '💳'],
                    [route('superadmin.system.health'), 'System Health', '🖥'],
                    [route('superadmin.analytics.index'), 'Cross-Tenant Analytics', '📊'],
                    [route('superadmin.feature-flags.index'), 'Feature Flags', '🚩'],
                ] as [$url, $label, $icon])
                <a href="{{ $url }}" class="flex items-center gap-2.5 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition text-sm text-slate-700 hover:text-slate-900">
                    <span class="text-base">{{ $icon }}</span>
                    {{ $label }}
                    <svg class="w-3.5 h-3.5 ml-auto text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection