{% extends "base.html" %}

{% block title %}Authorize Device — Log Thread{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center p-8 bg-slate-50">
    <div class="w-full max-w-md text-center">
        <div class="mb-8">
            <div class="w-16 h-16 rounded-2xl gradient-bg flex items-center justify-center mx-auto mb-6">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="5" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>
                    <circle cx="9" cy="19" r="2"/><circle cx="15" cy="19" r="2"/>
                </svg>
            </div>
            <h1 class="text-3xl font-bold mb-2">Authorize Device</h1>
            <p class="text-slate-600">A device is requesting access to your Log Thread account.</p>
        </div>
        
        <div id="authCard" class="bg-white rounded-2xl shadow-xl border border-slate-200 p-8">
            <!-- Not logged in state -->
            <div id="loginRequired" class="hidden">
                <p class="text-slate-600 mb-6">Please sign in to authorize this device.</p>
                <a href="/login" class="block w-full py-4 rounded-xl gradient-bg text-white font-semibold text-lg hover:opacity-90 transition">
                    Sign In
                </a>
            </div>
            
            <!-- No subscription state -->
            <div id="subscriptionRequired" class="hidden">
                <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-yellow-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>
                <h2 class="font-semibold text-lg mb-2">Subscription Required</h2>
                <p class="text-slate-600 mb-6">You need an active subscription to use Log Thread.</p>
                <a href="/pricing" class="block w-full py-4 rounded-xl gradient-bg text-white font-semibold text-lg hover:opacity-90 transition">
                    Subscribe Now
                </a>
            </div>
            
            <!-- Ready to authorize state -->
            <div id="readyToAuthorize" class="hidden">
                <div class="w-12 h-12 rounded-full bg-brand-100 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                </div>
                <h2 class="font-semibold text-lg mb-2">Authorize this device?</h2>
                <p class="text-slate-600 mb-6">
                    This will allow the Log Thread CLI or extension to access your account.
                </p>
                
                <div class="p-4 rounded-lg bg-slate-50 mb-6">
                    <p class="text-sm text-slate-600">Device code:</p>
                    <code id="deviceCodeDisplay" class="font-mono text-sm"></code>
                </div>
                
                <button onclick="authorizeDevice()" id="authorizeBtn"
                    class="w-full py-4 rounded-xl gradient-bg text-white font-semibold text-lg hover:opacity-90 transition mb-3">
                    Authorize Device
                </button>
                
                <button onclick="window.close()" class="w-full py-3 rounded-xl border border-slate-300 font-medium hover:bg-slate-50 transition">
                    Cancel
                </button>
            </div>
            
            <!-- Success state -->
            <div id="authorized" class="hidden">
                <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <h2 class="font-semibold text-lg mb-2">Device Authorized!</h2>
                <p class="text-slate-600 mb-4">
                    You can now close this window and return to your terminal or IDE.
                </p>
                <p class="text-sm text-slate-500">This window will close automatically...</p>
            </div>
            
            <!-- Error state -->
            <div id="error" class="hidden">
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </div>
                <h2 class="font-semibold text-lg mb-2">Authorization Failed</h2>
                <p id="errorMessage" class="text-slate-600 mb-6"></p>
                <button onclick="location.reload()" class="w-full py-3 rounded-xl border border-slate-300 font-medium hover:bg-slate-50 transition">
                    Try Again
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const deviceCode = '{{ device_code }}';
    const token = localStorage.getItem('lt_token');
    
    async function checkAuthState() {
        if (!deviceCode) {
            showError('No device code provided');
            return;
        }
        
        document.getElementById('deviceCodeDisplay').textContent = deviceCode;
        
        if (!token) {
            document.getElementById('loginRequired').classList.remove('hidden');
            // Store the device code for after login
            localStorage.setItem('lt_pending_device', deviceCode);
            return;
        }
        
        // Check user status
        try {
            const res = await fetch('/auth/me', {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            if (!res.ok) {
                localStorage.removeItem('lt_token');
                document.getElementById('loginRequired').classList.remove('hidden');
                return;
            }
            
            const user = await res.json();
            
            if (!user.subscription || !user.subscription.active) {
                document.getElementById('subscriptionRequired').classList.remove('hidden');
                return;
            }
            
            document.getElementById('readyToAuthorize').classList.remove('hidden');
            
        } catch (err) {
            showError(err.message);
        }
    }
    
    async function authorizeDevice() {
        const btn = document.getElementById('authorizeBtn');
        btn.disabled = true;
        btn.textContent = 'Authorizing...';
        
        try {
            const res = await fetch('/device/authorize', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ device_code: deviceCode })
            });
            
            if (!res.ok) {
                const data = await res.json();
                throw new Error(data.detail || 'Authorization failed');
            }
            
            // Show success
            document.getElementById('readyToAuthorize').classList.add('hidden');
            document.getElementById('authorized').classList.remove('hidden');
            
            // Close window after delay
            setTimeout(() => window.close(), 3000);
            
        } catch (err) {
            showError(err.message);
        }
    }
    
    function showError(message) {
        document.querySelectorAll('#authCard > div').forEach(el => el.classList.add('hidden'));
        document.getElementById('error').classList.remove('hidden');
        document.getElementById('errorMessage').textContent = message;
    }
    
    checkAuthState();
</script>
{% endblock %}