@extends('layouts.dashboard')
@section('title', __('API Security'))
@section('page_title', __('API Security'))

@section('content')
    <div class="card shadow-sm">
        <div class="card-header bg-white fw-semibold">
            <i class="bi bi-shield-lock me-1"></i>{{ __('API Security') }}
        </div>
        <div class="card-body">
            <p class="text-muted">
                {{ __('The application key is a shared X-App-Key header used by mobile clients. It is an additional client gate, not a replacement for authentication or authorization.') }}
            </p>

            <div class="mb-3">
                @if ($apiKey !== '')
                    <span class="badge text-bg-success">{{ __('Protection active') }}</span>
                    <span class="badge text-bg-secondary">{{ __('Source: database') }}</span>
                @else
                    <span class="badge text-bg-danger">{{ __('Protection disabled') }}</span>
                @endif
                @if ($generatedAt)
                    <small class="text-muted d-block mt-2">{{ __('Last generated') }}: {{ $generatedAt }}</small>
                @endif
            </div>

            @if ($apiKey === '')
                <div class="alert alert-warning">
                    {{ __('No application key is configured. API key enforcement is currently disabled.') }}
                </div>
            @endif

            <label class="form-label" for="appApiKeyField">{{ __('Application API key') }}</label>
            <div class="input-group">
                <input id="appApiKeyField" type="password" class="form-control" value="{{ $apiKey }}" readonly autocomplete="off" spellcheck="false" placeholder="{{ __('Not configured') }}">
                <button class="btn btn-outline-secondary" type="button" id="appApiKeyToggle">{{ __('Show') }}</button>
                <button class="btn btn-outline-primary" type="button" id="appApiKeyCopy">{{ __('Copy') }}</button>
            </div>
            <div class="form-text">{{ __('The Flutter app must be rebuilt with --dart-define=APP_API_KEY=... after setting or rotating this key.') }}</div>

            <div class="alert alert-danger mt-4">
                <strong>{{ __('Rotation warning') }}</strong>
                <div>{{ __('Regenerating immediately invalidates every released app containing the old key. Release a rebuilt app before rotating in production.') }}</div>
            </div>

            <button type="button" class="btn btn-danger" id="appApiKeyRegenerate" data-url="{{ route('admin.api-security.regenerate') }}">
                <i class="bi bi-arrow-repeat me-1"></i>{{ __('Regenerate key') }}
            </button>
            <span id="appApiKeyResult" class="ms-2"></span>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(() => {
    const field = document.getElementById('appApiKeyField');
    const toggle = document.getElementById('appApiKeyToggle');
    const copy = document.getElementById('appApiKeyCopy');
    const regenerate = document.getElementById('appApiKeyRegenerate');
    const result = document.getElementById('appApiKeyResult');
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content;

    toggle?.addEventListener('click', () => {
        const visible = field.type === 'password';
        field.type = visible ? 'text' : 'password';
        toggle.textContent = visible ? @json(__('Hide')) : @json(__('Show'));
    });

    copy?.addEventListener('click', async () => {
        if (!field.value) return;
        await navigator.clipboard.writeText(field.value);
        result.textContent = @json(__('Copied.'));
        result.className = 'ms-2 text-success';
    });

    regenerate?.addEventListener('click', async () => {
        const confirmed = await window.LearnifyConfirm(
            @json(__('This invalidates all currently released apps. Continue?')),
            {
                title: @json(__('Regenerate application key?')),
                confirmText: @json(__('Regenerate key')),
                cancelText: @json(__('Keep current key')),
                icon: 'warning',
                danger: true,
            }
        );
        if (!confirmed) return;

        regenerate.disabled = true;
        result.textContent = @json(__('Regenerating...'));
        result.className = 'ms-2 text-muted';

        try {
            const response = await fetch(regenerate.dataset.url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrf,
                    'Accept': 'application/json',
                },
            });
            const data = await response.json();
            if (!response.ok || !data.status) throw new Error(data.message || @json(__('Regeneration failed.')));

            field.value = data.key;
            field.type = 'text';
            toggle.textContent = @json(__('Hide'));
            result.textContent = data.message;
            result.className = 'ms-2 text-success';
        } catch (error) {
            result.textContent = error.message;
            result.className = 'ms-2 text-danger';
        } finally {
            regenerate.disabled = false;
        }
    });
})();
</script>
@endpush