@extends('layouts.admin')

@section('title', 'Analytics')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }

    .page-header h1 { font-size: 1.75rem; font-weight: 700; }
    .page-header p { color: var(--text-secondary); margin-top: 0.25rem; font-size: 0.9rem; }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        transition: border-color var(--transition);
    }

    .stat-card:hover { border-color: var(--accent); }

    .stat-card .stat-info h3 {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }

    .stat-card .stat-info .stat-value { font-size: 1.75rem; font-weight: 700; }

    .stat-card .stat-info .stat-sub {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .stat-icon.purple { background: var(--accent-light); color: var(--accent); }
    .stat-icon.green { background: var(--success-light); color: var(--success); }
    .stat-icon.orange { background: var(--warning-light); color: var(--warning); }

    .charts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .section-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
    }

    .section-card h2 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .section-card h2 i { color: var(--accent); }

    .chart-placeholder {
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-hover);
        border-radius: var(--radius-md);
        color: var(--text-muted);
        font-size: 0.875rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .chart-placeholder i { font-size: 2rem; opacity: 0.5; }

    /* Top Users Table */
    .admin-table { width: 100%; border-collapse: collapse; }

    .admin-table thead th {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        text-align: left;
    }

    .admin-table tbody td {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border);
    }

    .admin-table tbody tr:hover { background: var(--bg-hover); }
    .admin-table tbody tr:last-child td { border-bottom: none; }

    .rank-badge {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .rank-1 { background: linear-gradient(135deg, #ffd700, #ffb700); color: #000; }
    .rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #000; }
    .rank-3 { background: linear-gradient(135deg, #cd7f32, #b06820); color: #fff; }
    .rank-default { background: var(--bg-hover); color: var(--text-muted); }

    /* Module Breakdown */
    .module-breakdown {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .module-item {
        background: var(--bg-hover);
        border-radius: var(--radius-md);
        padding: 1.25rem;
        text-align: center;
    }

    .module-item .module-value { font-size: 1.5rem; font-weight: 700; }
    .module-item .module-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

    .module-item.escrow .module-value { color: var(--accent); }
    .module-item.inventory .module-value { color: var(--warning); }
    .module-item.marketplace .module-value { color: var(--success); }

    @media (max-width: 1024px) {
        .stats-grid { grid-template-columns: 1fr; }
        .charts-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
        .module-breakdown { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <h1><i class="fas fa-chart-line" style="color: var(--accent); margin-right: 0.5rem;"></i> Platform Analytics</h1>
        <p>Platform-wide performance metrics and trends.</p>
    </div>

    {{-- This Month Stats --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-info">
                <h3>New Users This Month</h3>
                <div class="stat-value">{{ number_format($newUsersThisMonth ?? 0) }}</div>
                <div class="stat-sub">vs {{ number_format($newUsersLastMonth ?? 0) }} last month</div>
            </div>
            <div class="stat-icon purple"><i class="fas fa-user-plus"></i></div>
        </div>

        <div class="stat-card">
            <div class="stat-info">
                <h3>Revenue This Month</h3>
                <div class="stat-value">&#8358;{{ number_format($revenueThisMonth ?? 0, 2) }}</div>
                <div class="stat-sub">vs &#8358;{{ number_format($revenueLastMonth ?? 0, 2) }} last month</div>
            </div>
            <div class="stat-icon green"><i class="fas fa-coins"></i></div>
        </div>

        <div class="stat-card">
            <div class="stat-info">
                <h3>Transactions This Month</h3>
                <div class="stat-value">{{ number_format($transactionsThisMonth ?? 0) }}</div>
                <div class="stat-sub">vs {{ number_format($transactionsLastMonth ?? 0) }} last month</div>
            </div>
            <div class="stat-icon orange"><i class="fas fa-exchange-alt"></i></div>
        </div>
    </div>

    {{-- Charts --}}
    <div class="charts-grid">
        <div class="section-card">
            <h2><i class="fas fa-users"></i> User Growth</h2>
            <div class="chart-placeholder" id="usersGrowthChart">
                <i class="fas fa-chart-line"></i>
                <span>Users growth chart placeholder</span>
            </div>
        </div>

        <div class="section-card">
            <h2><i class="fas fa-money-bill-wave"></i> Revenue Trend</h2>
            <div class="chart-placeholder" id="revenueTrendChart">
                <i class="fas fa-chart-area"></i>
                <span>Revenue trend chart placeholder</span>
            </div>
        </div>
    </div>

    <div class="section-card" style="margin-bottom: 1.5rem;">
        <h2><i class="fas fa-chart-bar"></i> Transactions by Type</h2>
        <div class="chart-placeholder" id="transactionsByTypeChart">
            <i class="fas fa-chart-bar"></i>
            <span>Transactions by type chart placeholder</span>
        </div>
    </div>

    {{-- Bottom Row: Top Users + Module Breakdown --}}
    <div class="charts-grid">
        <div class="section-card">
            <h2><i class="fas fa-trophy"></i> Top Users by Volume</h2>
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>User</th>
                        <th>Volume</th>
                        <th>Transactions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($topUsers ?? []) as $index => $topUser)
                        <tr>
                            <td>
                                <span class="rank-badge {{ $index < 3 ? 'rank-' . ($index + 1) : 'rank-default' }}">
                                    {{ $index + 1 }}
                                </span>
                            </td>
                            <td style="font-weight: 500;">{{ $topUser->name ?? 'N/A' }}</td>
                            <td style="font-weight: 600;">&#8358;{{ number_format($topUser->total_volume ?? 0, 2) }}</td>
                            <td style="color: var(--text-secondary);">{{ number_format($topUser->total_transactions ?? 0) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" style="text-align: center; color: var(--text-muted); padding: 2rem;">No data yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="section-card">
            <h2><i class="fas fa-puzzle-piece"></i> Module Revenue Breakdown</h2>
            <div class="module-breakdown">
                <div class="module-item escrow">
                    <div class="module-value">&#8358;{{ number_format($escrowRevenue ?? 0, 2) }}</div>
                    <div class="module-label">Escrow</div>
                </div>
                <div class="module-item inventory">
                    <div class="module-value">&#8358;{{ number_format($inventoryRevenue ?? 0, 2) }}</div>
                    <div class="module-label">Inventory</div>
                </div>
                <div class="module-item marketplace">
                    <div class="module-value">&#8358;{{ number_format($marketplaceRevenue ?? 0, 2) }}</div>
                    <div class="module-label">Marketplace</div>
                </div>
            </div>
        </div>
    </div>
@endsection