@extends('layouts.app')

@section('title', 'API Credentials')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    {{-- Header Section --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">API Credentials</h1>
            <p class="text-sm text-gray-500 mt-1">Manage your API credentials for integration</p>
        </div>
    </div>

    @include('partials.messages')

    {{-- Warning Banner --}}
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-5">
        <div class="flex items-start gap-3">
            <div class="flex-shrink-0">
                <svg class="w-5 h-5 text-amber-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-sm font-semibold text-amber-900 mb-1">Keep Your Credentials Safe</h3>
                <ul class="text-xs text-amber-800 space-y-1 list-disc ml-4">
                    <li>Never share your API Key with anyone</li>
                    <li>Store it securely in environment variables</li>
                    <li>Renew your key immediately if compromised</li>
                    <li>Each renewal will invalidate the previous key</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- API Credentials Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="p-6 space-y-6">
            
            {{-- API ID Section --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-2">
                    API ID
                </label>
                <div class="relative">
                    <input type="text" 
                           id="apiId"
                           value="{{ auth()->user()->api_id ?? 'Not generated yet' }}"
                           readonly
                           class="w-full px-4 py-3 pr-24 text-sm font-mono bg-gray-50 border border-gray-200 rounded-lg focus:outline-none">
                    <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
                        <button type="button"
                                onclick="copyToClipboard('apiId', 'API ID')"
                                class="p-2 text-gray-500 hover:text-brand hover:bg-brand/10 rounded-lg transition-all"
                                title="Copy API ID">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            {{-- API Key Section --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-2">
                    API Key
                </label>
                <div class="relative">
                    <input type="password" 
                           id="apiKey"
                           value="{{ auth()->user()->api_key ?? 'Not generated yet' }}"
                           readonly
                           class="w-full px-4 py-3 pr-32 text-sm font-mono bg-gray-50 border border-gray-200 rounded-lg focus:outline-none">
                    <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
                        <button type="button"
                                onclick="toggleVisibility()"
                                class="p-2 text-gray-500 hover:text-brand hover:bg-brand/10 rounded-lg transition-all"
                                title="Show/Hide API Key"
                                id="toggleBtn">
                            <svg class="w-4 h-4" id="eyeIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </button>
                        <button type="button"
                                onclick="copyToClipboard('apiKey', 'API Key')"
                                class="p-2 text-gray-500 hover:text-brand hover:bg-brand/10 rounded-lg transition-all"
                                title="Copy API Key">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            {{-- Generated Date --}}
            @if(auth()->user()->api_key)
                <div class="flex items-center gap-2 text-xs text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span>Last generated: {{ auth()->user()->updated_at->format('d M Y, H:i') }}</span>
                </div>
            @endif

        </div>

        {{-- Actions --}}
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-xs text-gray-500">
                @if(auth()->user()->api_key)
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-full ring-1 ring-emerald-600/20">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                        Active
                    </span>
                @else
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gray-100 text-gray-700 rounded-full ring-1 ring-gray-600/20">
                        <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
                        Not Generated
                    </span>
                @endif
            </div>
            
            <button type="button"
                    onclick="openRenewModal()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium bg-brand text-white rounded-lg hover:bg-brand/90 focus:ring-4 focus:ring-brand/20 transition-all shadow-sm hover:shadow">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                {{ auth()->user()->api_key ? 'Renew API Key' : 'Generate API Key' }}
            </button>
        </div>
    </div>

    {{-- Documentation Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex items-start gap-4">
            <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
            </div>
            <div class="flex-1">
                <h3 class="text-base font-semibold text-gray-900 mb-2">API Documentation</h3>
                <p class="text-sm text-gray-600 mb-4">
                    Learn how to integrate our API into your application. View endpoints, request examples, and response formats.
                </p>
                <a href="{{ route('api-docs.index') }}" 
                   class="inline-flex items-center gap-2 text-sm font-medium text-brand hover:text-brand/80 transition-colors">
                    View Documentation
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>

</div>

{{-- Renew Confirmation Modal --}}
<div id="renewModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        {{-- Background overlay --}}
        <div class="fixed inset-0 bg-gray-900/75 transition-opacity" aria-hidden="true" onclick="closeRenewModal()"></div>

        {{-- Center modal --}}
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        {{-- Modal panel --}}
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-50">
            <div class="bg-white px-6 pt-6 pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-amber-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                        <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
                            {{ auth()->user()->api_key ? 'Renew API Key?' : 'Generate API Key?' }}
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-600">
                                @if(auth()->user()->api_key)
                                    This action will generate a new API Key and invalidate your current one. 
                                    Any applications using the old key will stop working immediately.
                                @else
                                    This will generate new API credentials for your account. 
                                    You can use these to integrate with our API.
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-6 py-4 sm:flex sm:flex-row-reverse gap-3">
                <form method="POST" action="{{ route('user.api-credentials.renew') }}" class="w-full sm:w-auto">
                    @csrf
                    <button type="submit"
                        class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2.5 bg-brand text-sm font-medium text-white hover:bg-brand/90 focus:outline-none focus:ring-4 focus:ring-brand/20 transition-all sm:w-auto">
                        {{ auth()->user()->api_key ? 'Yes, Renew' : 'Yes, Generate' }}
                    </button>
                </form>
                <button type="button"
                    onclick="closeRenewModal()"
                    class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2.5 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-200 transition-all sm:mt-0 sm:w-auto">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function toggleVisibility() {
    const apiKeyInput = document.getElementById('apiKey');
    const eyeIcon = document.getElementById('eyeIcon');
    
    if (apiKeyInput.type === 'password') {
        apiKeyInput.type = 'text';
        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
        `;
    } else {
        apiKeyInput.type = 'password';
        eyeIcon.innerHTML = `
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
        `;
    }
}

function copyToClipboard(elementId, label) {
    const element = document.getElementById(elementId);
    const text = element.value;
    
    if (text === 'Not generated yet') {
        alert('Please generate your API key first');
        return;
    }
    
    navigator.clipboard.writeText(text).then(function() {
        const originalType = element.type;
        element.type = 'text';
        element.select();
        
        const button = event.currentTarget;
        const originalHTML = button.innerHTML;
        button.innerHTML = `
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
        `;
        button.classList.add('text-emerald-600');
        
        setTimeout(() => {
            button.innerHTML = originalHTML;
            button.classList.remove('text-emerald-600');
            element.type = originalType;
        }, 2000);
    }, function(err) {
        alert('Failed to copy: ' + err);
    });
}

function openRenewModal() {
    document.getElementById('renewModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeRenewModal() {
    document.getElementById('renewModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeRenewModal();
    }
});
</script>
@endsection
