@extends('layouts.app')

@section('title', 'OTP Statistics')

@section('nav-items')
    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li><a href="{{ route('admin.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('admin.logos.index') }}">Logos</a></li>
    <li><a href="{{ route('admin.company-profiles.index') }}">Company Profile</a></li>
    <li><a href="{{ route('admin.customer-download-requests.index') }}">Download Requests</a></li>
    <li><a href="{{ route('admin.marketing-requests.index') }}">Marketing Requests</a></li>
    <li><a href="{{ route('admin.media.index') }}">Media</a></li>
@endsection

@section('styles')
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
        text-align: center;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.5rem;
    }

    .stat-label {
        color: var(--gray-600);
        font-size: 0.875rem;
    }

    .otps-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: var(--gray-50);
    }

    th {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.875rem;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background: var(--gray-50);
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        display: inline-block;
    }

    .badge-success {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .badge-warning {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .badge-danger {
        background: rgba(220, 38, 38, 0.1);
        color: var(--error);
    }

    .badge-secondary {
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .otp-code {
        font-family: 'Courier New', monospace;
        font-size: 1rem;
        font-weight: 700;
        color: var(--primary);
        letter-spacing: 0.25rem;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--gray-500);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }

    @media (max-width: 768px) {
        .otps-table {
            overflow-x: auto;
        }
        table {
            min-width: 800px;
        }
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        OTP Statistics
    </h1>
    <a href="{{ route('admin.download-logs.index') }}" class="btn btn-secondary">
        ← Back to Download Logs
    </a>
</div>

<!-- Statistics -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value">{{ $stats['total_generated'] }}</div>
        <div class="stat-label">Total Generated</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['verified'] }}</div>
        <div class="stat-label">Verified</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['expired'] }}</div>
        <div class="stat-label">Expired</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ $stats['failed_attempts'] }}</div>
        <div class="stat-label">Failed Attempts</div>
    </div>
</div>

<!-- Recent OTPs -->
<div class="otps-table">
    <div style="padding: 1.5rem; border-bottom: 1px solid var(--gray-200);">
        <h2 style="font-size: 1.25rem; font-weight: 600; color: var(--gray-900);">Recent OTP Codes</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>User</th>
                <th>OTP Code</th>
                <th>Status</th>
                <th>Failed Attempts</th>
                <th>Created</th>
                <th>Expires</th>
                <th>Verified</th>
            </tr>
        </thead>
        <tbody>
            @forelse($recentOtps as $otp)
                <tr>
                    <td>
                        <div class="user-info">
                            <div class="user-avatar">{{ strtoupper(substr($otp->user->name, 0, 1)) }}</div>
                            <span>{{ $otp->user->name }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="otp-code">{{ $otp->otp_code }}</span>
                    </td>
                    <td>
                        @if($otp->isVerified())
                            <span class="badge badge-success">Verified</span>
                        @elseif($otp->isExpired())
                            <span class="badge badge-danger">Expired</span>
                        @elseif($otp->maxFailedAttemptsReached())
                            <span class="badge badge-danger">Locked</span>
                        @else
                            <span class="badge badge-warning">Pending</span>
                        @endif
                    </td>
                    <td>
                        @if($otp->failed_attempts > 0)
                            <span style="color: var(--error); font-weight: 600;">{{ $otp->failed_attempts }}</span>
                        @else
                            <span style="color: var(--gray-400);">0</span>
                        @endif
                    </td>
                    <td>
                        <div>{{ $otp->created_at->format('M d, Y') }}</div>
                        <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $otp->created_at->format('g:i A') }}</div>
                    </td>
                    <td>
                        <div>{{ $otp->expires_at->format('M d, Y') }}</div>
                        <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $otp->expires_at->format('g:i A') }}</div>
                        @if($otp->expires_at->isPast())
                            <div style="font-size: 0.75rem; color: var(--error);">(Expired)</div>
                        @endif
                    </td>
                    <td>
                        @if($otp->verified_at)
                            <div>{{ $otp->verified_at->format('M d, Y') }}</div>
                            <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $otp->verified_at->format('g:i A') }}</div>
                        @else
                            <span style="color: var(--gray-400);">—</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7">
                        <div class="empty-state">
                            <svg style="width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                            <p>No OTP codes generated yet</p>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection