@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <p class="page-subtitle">Welcome back, {{ Auth::user()->name ?? 'Admin' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.reports.index') }}" class="btn btn-outline">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 12V5l3-2 3 2 3-3 3 3v7H2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
            View Reports
        </a>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card
        title="Total Customers"
        value="{{ number_format($totalCustomers ?? 0) }}"
        change="{{ $customerChange ?? null }}"
        changeType="up"
        color="blue"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M3 21c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="17" cy="8" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M15 21c0-2.2 1.3-4 3-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="Active Accounts"
        value="{{ number_format($activeAccounts ?? 0) }}"
        change="{{ $accountChange ?? null }}"
        changeType="up"
        color="green"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="5" width="20" height="14" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M2 10h20" stroke="currentColor" stroke-width="1.5"/><circle cx="18" cy="15" r="2" fill="currentColor"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="Total Deposits"
        value="{{ site_money($totalDeposits ?? 0) }}"
        change="{{ $depositChange ?? null }}"
        changeType="up"
        color="purple"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M7 10l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 18h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="Total Withdrawals"
        value="{{ site_money($totalWithdrawals ?? 0) }}"
        change="{{ $withdrawalChange ?? null }}"
        changeType="down"
        color="orange"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 19V5M7 14l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 6h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="stats-grid stats-grid-4" style="margin-top: 1.5rem;">
    <x-stat-card
        title="Total Transfers"
        value="{{ site_money($totalTransfers ?? 0) }}"
        color="green"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 9h14M15 5l4 4-4 4M19 15H5M9 11l-4 4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="Transaction Volume"
        value="{{ number_format($transactionVolume ?? 0) }}"
        color="blue"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="20" cy="18" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="Pending Card Requests"
        value="{{ number_format($pendingCardRequests ?? 0) }}"
        color="orange"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="5" width="20" height="14" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M2 10h20" stroke="currentColor" stroke-width="1.5"/><path d="M7 15h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>

    <x-stat-card
        title="System Notifications"
        value="{{ number_format($systemNotifications ?? 0) }}"
        color="red"
    >
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3a6 6 0 016 6v3l2 2H4l2-2V9a6 6 0 016-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M10 19a2 2 0 004 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="grid-2" style="margin-top: 1.5rem;">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Transaction Volume (Last 30 Days)</h3>
        </div>
        <div class="card-body">
            <canvas id="transactionVolumeChart" height="280"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Transaction Types</h3>
        </div>
        <div class="card-body">
            <canvas id="transactionTypesChart" height="280"></canvas>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Recent Transactions</h3>
        <a href="{{ route('admin.transactions') }}" class="btn btn-sm btn-outline">View All</a>
    </div>
    <x-data-table :emptyMessage="'No recent transactions.'">
        <x-slot:thead>
            <th>Reference</th>
            <th>Customer</th>
            <th>Type</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Date</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($recentTransactions ?? [] as $transaction)
            <tr>
                <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                <td>{{ $transaction->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-{{ $transaction->type === 'credit' ? 'green' : 'blue' }}">{{ ucfirst($transaction->type) }}</span></td>
                <td class="text-semibold">{{ site_money($transaction->amount) }}</td>
                <td><span class="badge badge-{{ $transaction->status === 'completed' ? 'green' : ($transaction->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($transaction->status) }}</span></td>
                <td>{{ $transaction->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="data-table-empty">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><path d="M16 20h16M16 26h10" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/><rect x="12" y="14" width="24" height="20" rx="3" stroke="#94A3B8" stroke-width="1.5"/></svg>
                        <p>No recent transactions.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>

<div class="grid-2" style="margin-top: 1.5rem;">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Recent Support Tickets</h3>
            <a href="{{ route('admin.support') }}" class="btn btn-sm btn-outline">View All</a>
        </div>
        <div class="card-body">
            @forelse($recentTickets ?? [] as $ticket)
            <div class="list-item">
                <div class="list-item-info">
                    <span class="text-semibold">#{{ $ticket->id }} - {{ $ticket->subject }}</span>
                    <span class="text-muted text-sm">{{ $ticket->user->name ?? 'N/A' }} &middot; {{ $ticket->created_at->diffForHumans() }}</span>
                </div>
                <span class="badge badge-{{ $ticket->status === 'open' ? 'orange' : ($ticket->status === 'resolved' ? 'green' : 'blue') }}">{{ ucfirst($ticket->status) }}</span>
            </div>
            @empty
            <div class="empty-state-sm">
                <p>No support tickets.</p>
            </div>
            @endforelse
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Recent Card Requests</h3>
            <a href="{{ route('admin.cards.requests') }}" class="btn btn-sm btn-outline">View All</a>
        </div>
        <div class="card-body">
            @forelse($recentCardRequests ?? [] as $request)
            <div class="list-item">
                <div class="list-item-info">
                    <span class="text-semibold">{{ $request->card_type }} Card</span>
                    <span class="text-muted text-sm">{{ $request->user->name ?? 'N/A' }} &middot; {{ $request->created_at->diffForHumans() }}</span>
                </div>
                <span class="badge badge-{{ $request->status === 'approved' ? 'green' : ($request->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($request->status) }}</span>
            </div>
            @empty
            <div class="empty-state-sm">
                <p>No card requests.</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Quick Actions</h3>
    </div>
    <div class="card-body">
        <div class="quick-actions-grid">
            <a href="{{ route('admin.customers.create') }}" class="quick-action-card">
                <div class="quick-action-icon quick-action-icon-blue">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M3 21c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M19 8v6M16 11h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </div>
                <span>Create Customer</span>
            </a>
            <a href="{{ route('admin.reports.index') }}" class="quick-action-card">
                <div class="quick-action-icon quick-action-icon-green">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 20V6l4-3 4 3 4-4 4 4v14H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M4 15h16" stroke="currentColor" stroke-width="1.5"/></svg>
                </div>
                <span>View Reports</span>
            </a>
            <a href="{{ route('admin.settings.fees') }}" class="quick-action-card">
                <div class="quick-action-icon quick-action-icon-purple">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v10M9 9h6c1.1 0 2 .9 2 2s-.9 2-2 2H9M9 13h6c1.1 0 2 .9 2 2s-.9 2-2 2H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </div>
                <span>Manage Fees</span>
            </a>
            <a href="{{ route('admin.messages.compose') }}" class="quick-action-card">
                <div class="quick-action-icon quick-action-icon-orange">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 5h16a1 1 0 011 1v10a1 1 0 01-1 1H7l-4 3V6a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 10h8M8 14h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                </div>
                <span>Compose Message</span>
            </a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var volumeCtx = document.getElementById('transactionVolumeChart');
    if (volumeCtx) {
        new Chart(volumeCtx.getContext('2d'), {
            type: 'line',
            data: {
                labels: @json($volumeLabels ?? []),
                datasets: [{
                    label: 'Transaction Volume',
                    data: @json($volumeData ?? []),
                    borderColor: '#0D6B58',
                    backgroundColor: 'rgba(13, 107, 88, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false } },
                    y: { grid: { color: '#f0f0f0' }, ticks: { callback: function(v) { return '{{ site_currency()['symbol'] }}' + v.toLocaleString(); } } }
                }
            }
        });
    }

    var typesCtx = document.getElementById('transactionTypesChart');
    if (typesCtx) {
        new Chart(typesCtx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Deposits', 'Withdrawals', 'Transfers'],
                datasets: [{
                    data: @json($typeData ?? [0, 0, 0]),
                    backgroundColor: ['#0D6B58', '#F59E0B', '#3B82F6'],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { padding: 20 } }
                },
                cutout: '65%'
            }
        });
    }
});
</script>
@endpush