@extends('layouts.admin')

@section('title', 'Fraud & Security')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Fraud & Security Dashboard</h1>
        <p class="page-subtitle">Monitor suspicious activities and security events</p>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Security Events" value="{{ number_format($securityEvents ?? 0) }}" color="red">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2l8 4v4c0 4.5-3 8-8 10-5-2-8-5.5-8-10V6l8-4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M12 9v4M12 16h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Failed Logins" value="{{ number_format($failedLogins ?? 0) }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 11V7a4 4 0 118 0v4" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Flagged Transactions" value="{{ number_format($flaggedTransactions ?? 0) }}" color="purple">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 15V4h10l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 15l4-4h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Locked Accounts" value="{{ number_format($lockedAccounts ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 11V7a4 4 0 118 0v4" stroke="currentColor" stroke-width="1.5"/></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">Failed Login Attempts (Last 7 Days)</h3>
        </div>
        <div class="card-body">
            <canvas id="failedLoginChart" height="250"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Quick Links</h3>
        </div>
        <div class="card-body">
            <div class="quick-actions-grid">
                <a href="{{ route('admin.audit', ['action' => 'login']) }}" class="quick-action-card">
                    <div class="quick-action-icon quick-action-icon-red">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 11V7a4 4 0 118 0v4" stroke="currentColor" stroke-width="1.5"/></svg>
                    </div>
                    <span>Login Logs</span>
                </a>
                <a href="{{ route('admin.transactions', ['flagged' => 1]) }}" 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 15V4h10l3 3-3 3M4 15l4-4h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <span>Flagged Txns</span>
                </a>
                <a href="{{ route('admin.customers', ['status' => 'suspended']) }}" 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="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M8 12h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    </div>
                    <span>Locked Users</span>
                </a>
                <a href="{{ route('admin.audit') }}" 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 3h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5"/><path d="M8 8h8M8 12h6M8 16h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    </div>
                    <span>All Logs</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Flagged Activities</h3>
    </div>
    <x-data-table emptyMessage="No flagged activities found.">
        <x-slot:thead>
            <th>Event Type</th>
            <th>User</th>
            <th>Description</th>
            <th>Date</th>
            <th>Severity</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($flagged ?? [] as $event)
            <tr>
                <td><span class="badge badge-blue">{{ $event->type ?? $event->event_type ?? 'N/A' }}</span></td>
                <td class="text-semibold">{{ $event->user->name ?? 'N/A' }}</td>
                <td>{{ Str::limit($event->description ?? '', 50) }}</td>
                <td>{{ $event->created_at->format('M d, Y H:i') }}</td>
                <td>
                    @if(($event->severity ?? '') === 'high' || ($event->severity ?? '') === 'critical')
                    <span class="badge badge-red">{{ ucfirst($event->severity) }}</span>
                    @elseif(($event->severity ?? '') === 'medium')
                    <span class="badge badge-orange">{{ ucfirst($event->severity) }}</span>
                    @else
                    <span class="badge badge-blue">{{ ucfirst($event->severity ?? 'low') }}</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5">
                    <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="M24 12l8 4v4c0 5-3.5 9-8 11-4.5-2-8-6-8-11v-4l8-4z" stroke="#94A3B8" stroke-width="1.5"/><path d="M24 20v4M24 28h.01" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No flagged activities.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</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 ctx = document.getElementById('failedLoginChart');
    if (ctx) {
        new Chart(ctx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: @json($failedLoginLabels ?? []),
                datasets: [{
                    label: 'Failed Attempts',
                    data: @json($failedLoginData ?? []),
                    backgroundColor: 'rgba(239, 68, 68, 0.7)',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false } },
                    y: { grid: { color: '#f0f0f0' }, beginAtZero: true }
                }
            }
        });
    }
});
</script>
@endpush