@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.api_keys'))
@section('api_keys', 'bg-blue-50 text-blue-700')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.menu.api_keys')}}</h2>
                <p class="text-gray-600">Manage API keys and sync tokens for secure server-to-server communication</p>
            </div>
        </div>
    </div>

    <!-- Sync Token Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <span class="material-icons text-blue-600 mr-2">vpn_key</span>
                <h3 class="text-xl font-bold text-gray-900">Sync Token</h3>
            </div>
        </div>

        <p class="text-gray-600 mb-4">This token is used for secure synchronization between local servers and this live server. Keep it secure and update it on all local servers when changed.</p>

        @if($syncToken)
        <div class="bg-gray-50 border border-gray-200 rounded-xl p-4 mb-4">
            <div class="flex items-center justify-between">
                <code class="text-sm font-mono text-gray-800 break-all flex-1">{{$syncToken}}</code>
                <button onclick="copyToClipboard('{{$syncToken}}')" class="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                    <span class="material-icons text-sm mr-1">content_copy</span>
                    Copy
                </button>
            </div>
        </div>
        @else
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-4">
            <p class="text-yellow-800">No sync token configured. Generate one to enable synchronization.</p>
        </div>
        @endif

        <!-- Generate New Token -->
        <form action="{{route('api.keys.generate')}}" method="POST" onsubmit="return confirm('Are you sure? This will invalidate the current token on all local servers. You must update the token on all local servers after generating a new one.');">
            @csrf
            <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
                <div class="flex items-start">
                    <span class="material-icons text-red-600 mr-2">warning</span>
                    <div>
                        <p class="text-red-800 font-semibold mb-1">Warning</p>
                        <p class="text-red-700 text-sm">Generating a new token will invalidate the current one. All local servers must be updated with the new token to continue syncing.</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <input type="checkbox" name="confirm" id="confirm" required class="mr-2">
                <label for="confirm" class="text-gray-700">I understand that I need to update all local servers with the new token</label>
            </div>
            <button type="submit" class="px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-semibold flex items-center">
                <span class="material-icons mr-2">refresh</span>
                Generate New Token
            </button>
        </form>
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Token copied to clipboard!');
    });
}
</script>
@endsection