{{-- resources/views/company/api-key/show.blade.php --}}
@extends('companies.layouts.master')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 20px;
            color: white;
            margin-bottom: 20px;
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-card h6 {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .stat-card h3 {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-card .stat-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 48px;
            opacity: 0.2;
        }

        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-authentic {
            background: #d4edda;
            color: #155724;
        }

        .status-counterfeit {
            background: #f8d7da;
            color: #721c24;
        }

        .nav-tabs .nav-link {
            color: #495057;
            font-weight: 500;
        }

        .nav-tabs .nav-link.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
        }

        #usageChart {
            max-height: 300px;
        }
    </style>

    <div class="main-content app-content mt-0">
        <div class="side-app">
            <div class="main-container container-fluid">
                <div class="page-header">
                    <h1 class="page-title">{{ __('locale.page_title_details') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a
                                    href="{{ route('company.dashboard') }}">{{ __('common.home') }}</a></li>
                            <li class="breadcrumb-item"><a
                                    href="{{ route('company.api-key.index') }}">{{ __('api_key.page_title') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('locale.details') }}</li>
                        </ol>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8">
                        <!-- Key Details Card -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fe fe-info"></i> {{ __('locale.api_key_info') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <th width="40%">{{ __('locale.partner_id') }}:</th>
                                                <td><code>{{ $partner->partner_id }}</code></td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.created_at') }}:</th>
                                                <td>{{ $partner->created_at->format('F d, Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.last_updated') }}:</th>
                                                <td>{{ $partner->updated_at->format('F d, Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.rate_limit') }}:</th>
                                                <td>{{ $partner->rate_limit_per_minute }}
                                                    {{ __('locale.requests_per_minute') }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.webhook_url') }}:</th>
                                                <td>@if($partner->webhook_url)<code>{{ $partner->webhook_url }}</code>@else<span
                                                class="text-muted">{{ __('locale.not_configured') }}</span>@endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="col-md-6">
                                        <table class="table table-borderless">
                                            <tr>
                                                <th width="40%">{{ __('locale.total_verifications') }}:</th>
                                                <td>{{ number_format($recentLogs->count()) }}</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.authentic_rate') }}:</th>
                                                <td>
                                                    @php $successRate = $recentLogs->count() > 0 ? round(($recentLogs->where('authentic', true)->count() / $recentLogs->count()) * 100, 2) : 0; @endphp
                                                    <div class="progress" style="height: 25px;">
                                                        <div class="progress-bar bg-success"
                                                            style="width: {{ $successRate }}%">{{ $successRate }}%</div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.avg_response_time') }}:</th>
                                                <td>{{ round($recentLogs->avg('response_ms') ?? 0) }} ms</td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.last_activity') }}:</th>
                                                <td>@if($recentLogs->first()){{ $recentLogs->first()->created_at->diffForHumans() }}@else
                                                {{ __('locale.no_activity') }} @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>{{ __('locale.status') }}:</th>
                                                <td><span
                                                        class="badge bg-{{ $expiryStatus['class'] }}">{{ $expiryStatus['text'] }}</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Recent Verifications -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fe fe-clock"></i>
                                    {{ __('locale.recent_verification_activity') }}</h3>
                            </div>
                            <div class="card-body">
                                @if($recentLogs->count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="logsTable">
                                            <thead>
                                                <tr>
                                                    <th>{{ __('locale.timestamp') }}</th>
                                                    <th>{{ __('locale.uid') }}</th>
                                                    <th>{{ __('locale.status') }}</th>
                                                    <th>{{ __('locale.response_time') }}</th>
                                                    <th>{{ __('locale.transaction_id') }}</th>
                                                    <th>{{ __('locale.location') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($recentLogs as $log)
                                                    <tr>
                                                        <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                                                        <td><code>{{ $log->uid }}</code></td>
                                                        <td><span
                                                                class="status-badge {{ $log->authentic ? 'status-authentic' : 'status-counterfeit' }}">{{ $log->authentic ? __('locale.authentic') : __('locale.counterfeit') }}</span>
                                                        </td>
                                                        <td>{{ $log->response_ms }} ms</td>
                                                        <td>{{ $log->transaction_id ?? 'N/A' }}</td>
                                                        <td>{{ $log->location ?? 'N/A' }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-5"><i class="fe fe-inbox fs-1 text-muted"></i>
                                        <p class="mt-2">{{ __('locale.no_verification_activity') }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <!-- Quick Actions -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fe fe-zap"></i> {{ __('locale.quick_actions') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="{{ route('company.api-docs') }}" class="btn btn-primary"><i
                                            class="fe fe-book-open"></i>
                                        {{ __('locale.view_api_documentation') }}</a>
                                    <a href="{{ route('company.api-key.index') }}" class="btn btn-secondary"><i
                                            class="fe fe-key"></i> {{ __('locale.back_to_overview') }}</a>
                                    <button onclick="regenerateKey()" class="btn btn-warning"><i
                                            class="fe fe-refresh-cw"></i>
                                        {{ __('locale.regenerate_api_key') }}</button>
                                </div>
                            </div>
                        </div>

                        <!-- Monthly Stats -->
                        @if($monthlyStats->count() > 0)
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h3 class="card-title"><i class="fe fe-bar-chart"></i>
                                        {{ __('locale.monthly_breakdown') }}</h3>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>{{ __('locale.month') }}</th>
                                                    <th>{{ __('locale.total') }}</th>
                                                    <th>{{ __('locale.authentic') }}</th>
                                                    <th>{{ __('locale.avg_response') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($monthlyStats as $stat)
                                                    <tr>
                                                        <td>{{ DateTime::createFromFormat('!m', $stat->month)->format('F') }}</td>
                                                        <td>{{ number_format($stat->total) }}</td>
                                                        <td class="text-success">{{ number_format($stat->authentic) }}</td>
                                                        <td>{{ round($stat->avg_response) }}ms</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- IP Whitelist -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fe fe-server"></i> {{ __('locale.ip_whitelist') }}
                                </h3>
                            </div>
                            <div class="card-body">
                                @php $ipWhitelist = is_array($partner->ip_whitelist) ? $partner->ip_whitelist : []; @endphp
                                @if(count($ipWhitelist) > 0)
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($ipWhitelist as $ip)<span class="badge bg-secondary p-2"><i
                                        class="fe fe-shield"></i> {{ $ip }}</span>@endforeach
                                    </div>
                                @else
                                    <p class="text-muted mb-0">{{ __('locale.no_ip_restrictions') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('bottom_script')
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            if ($('#logsTable tbody tr').length > 10) {
                $('#logsTable').DataTable({
                    pageLength: 10,
                    order: [[0, 'desc']],
                    language: {
                        search: "{{ __('locale.filter_records') }}:"
                    }
                });
            }
        });

        function regenerateKey() {
            if (confirm('{{ __('locale.regenerate_warning') }}')) {
                $.ajax({
                    url: '{{ route("company.api-key.regenerate") }}',
                    method: 'POST',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function (response) {
                        if (response.success) { location.href = '{{ route("company.api-key.index") }}'; }
                        else { alert('{{ __('locale.error_prefix') }} ' + response.message); }
                    },
                    error: function () { alert('{{ __('locale.error_occurred') }}'); }
                });
            }
        }
    </script>
@endsection