<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            License Management
        </h2>
    </x-slot>

    @include('components.license-warning')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 text-gray-900 mb-2">License Management</h1>
            <p class="text-gray-600">Manage your ProInvoice license and verify activation status</p>
        </div>

        <!-- License Status Card -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-900 text-gray-900">License Status</h2>
                <div class="flex gap-2">
                    <button id="independenceStatusBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        <span class="flex items-center gap-2">
                            <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Independence Status
                        </span>
                    </button>
                    <button id="verifyBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <span class="flex items-center gap-2">
                            <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"></path>
                            </svg>
                            Verify License
                        </span>
                    </button>
                </div>
            </div>

            <!-- Status Indicator -->
            <div class="mb-6">
                @if($status['valid'] === true && $status['can_use'] === true)
                    <div class="flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg">
                        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <p class="font-semibold text-green-800">License Active</p>
                            <p class="text-sm text-green-700">{{ $status['message'] }}</p>
                        </div>
                    </div>
                @else
                    <div class="flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <svg class="w-6 h-6 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <p class="font-semibold text-red-800">License Invalid</p>
                            <p class="text-sm text-red-700">{{ $status['message'] }}</p>
                        </div>
                    </div>
                @endif
            </div>

            <!-- License Details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Domain Information -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-2">Domain Information</h3>
                    <div class="space-y-2">
                        <div>
                            <p class="text-xs text-gray-500">License Domain</p>
                            <p class="text-sm font-mono text-gray-900 text-gray-900">{{ $licenseDomain ?? 'Not set' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Current Domain</p>
                            <p class="text-sm font-mono text-gray-900 text-gray-900">{{ $currentDomain }}</p>
                        </div>
                        @if($licenseDomain && $licenseDomain !== $currentDomain)
                            <div class="mt-2 p-2 bg-yellow-50 border border-yellow-200 rounded">
                                <p class="text-xs text-yellow-800">⚠️ Domain mismatch detected</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- License Information -->
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-2">License Information</h3>
                    <div class="space-y-2">
                        <div>
                            <p class="text-xs text-gray-500">Product ID</p>
                            <p class="text-sm font-mono text-gray-900 text-gray-900">{{ $productId }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Status</p>
                            <p class="text-sm text-gray-900 text-gray-900 capitalize">{{ $status['status'] ?? 'unknown' }}</p>
                        </div>
                        @if(isset($status['expires_at']))
                            <div>
                                <p class="text-xs text-gray-500">Expires At</p>
                                <p class="text-sm text-gray-900 text-gray-900">{{ $status['expires_at'] }}</p>
                            </div>
                        @endif
                        @if(isset($status['verified_at']))
                            <div>
                                <p class="text-xs text-gray-500">Last Verified</p>
                                <p class="text-sm text-gray-900 text-gray-900">{{ $status['verified_at'] }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Information Card -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
            <h3 class="text-lg font-semibold text-blue-900 mb-3">About License Protection</h3>
            <ul class="space-y-2 text-sm text-blue-800">
                <li>• Your license is bound to your installation domain</li>
                <li>• License status is cached for 24 hours to improve performance</li>
                <li>• If the license server is unavailable, cached status is used (graceful degradation)</li>
                <li>• Frontend access remains available even if license validation fails</li>
                <li>• Admin access may be restricted if license is invalid</li>
            </ul>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Independence Status Button
document.getElementById('independenceStatusBtn').addEventListener('click', async function() {
    const btn = this;
    const originalText = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '<span class="flex items-center gap-2"><svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Checking...</span>';
    
    try {
        const response = await fetch('{{ route("admin.license.independence-status") }}', {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            let message = 'Independence Status: ' + (data.independence_status || 'Unknown');
            if (data.progress) {
                message += '\nProgress: ' + data.progress;
            }
            if (data.message) {
                message += '\n' + data.message;
            }
            alert(message);
        } else {
            alert('Failed to retrieve independence status: ' + (data.message || 'Unknown error'));
        }
    } catch (error) {
        alert('Error: ' + error.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
});

// Verify License Button
document.getElementById('verifyBtn').addEventListener('click', async function() {
    const btn = this;
    const originalText = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '<span class="flex items-center gap-2"><svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Verifying...</span>';
    
    try {
        const response = await fetch('{{ route("admin.license.verify") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Reload page to show updated status
            window.location.reload();
        } else {
            alert('Verification failed: ' + (data.status?.message || 'Unknown error'));
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    } catch (error) {
        alert('Error: ' + error.message);
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
});
</script>
@endpush
</x-app-layout>

