{% extends "base.html" %}

{% block title %}Verification - MSVERIFY{% endblock %}

{% block extra_css %}
<style>
.verify-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.verify-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    color: white;
    text-align: center;
}

.verify-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.verify-card {
    background: rgba(10, 10, 10, 0.9);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 40px rgba(139, 92, 246, 0.3);
    margin-bottom: 2rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(20px);
    color: #ffffff;
}

.service-selector {
    margin-bottom: 2rem;
}

.service-option {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(26, 26, 26, 0.6);
    color: #ffffff;
}

.service-option:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.15);
}

.service-option.selected {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-right: 1.5rem;
}

.service-info {
    flex: 1;
}

.service-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.service-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.service-badge {
    margin-left: auto;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
}

.url-input-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.url-input-wrapper input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(26, 26, 26, 0.8);
    color: #ffffff;
}

.url-input-wrapper input:focus {
    outline: none;
    border-color: var(--neon-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.3);
    background: rgba(26, 26, 26, 0.95);
}

.verify-btn {
    width: 100%;
    padding: 1.2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verify-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.verify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.info-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%);
    border-left: 4px solid #0ea5e9;
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 2rem;
    color: #ffffff;
}

.result-modal .modal-content {
    border-radius: 20px;
    border: none;
}

.result-header {
    padding: 2rem;
    text-align: center;
    border-bottom: 2px solid #f0f0f0;
}

.result-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 3rem;
}

.result-icon.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.result-icon.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.result-details {
    padding: 2rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #64748b;
}

.detail-value {
    font-weight: 600;
    color: #1e293b;
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2rem;
}

@media (max-width: 768px) {
    .verify-header h1 {
        font-size: 1.8rem;
    }
    
    .verify-card {
        padding: 1.5rem;
    }
    
    .service-option {
        padding: 1rem;
    }
    
    .service-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="verify-container">
    <!-- Header -->
    <div class="verify-header">
        <h1><i class="bi bi-patch-check-fill me-2"></i>Start Verification</h1>
        <p class="mb-0">Verify your student/teacher status for premium discounts</p>
    </div>

    <!-- Main Card -->
    <div class="verify-card">
        <h3 class="mb-4">Select Service</h3>
        
        <!-- Service Selection -->
        <div class="service-selector">
            <div class="service-option" data-service="gemini" onclick="selectService('gemini')">
                <div class="service-icon" style="background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);">
                    <i class="bi bi-stars text-white"></i>
                </div>
                <div class="service-info">
                    <div class="service-name">Gemini One Pro</div>
                    <div class="service-desc">Google AI Studio Education Discount</div>
                </div>
                <span class="service-badge bg-success text-white">
                    <i class="bi bi-coin me-1"></i>1 Point
                </span>
            </div>

            <div class="service-option" data-service="chatgpt" onclick="selectService('chatgpt')">
                <div class="service-icon" style="background: linear-gradient(135deg, #ff6b9d 0%, #c768e8 100%);">
                    <i class="bi bi-chat-dots-fill text-white"></i>
                </div>
                <div class="service-info">
                    <div class="service-name">ChatGPT K12</div>
                    <div class="service-desc">OpenAI ChatGPT Education Discount</div>
                </div>
                <span class="service-badge bg-success text-white">
                    <i class="bi bi-coin me-1"></i>1 Point
                </span>
            </div>

            <div class="service-option" data-service="spotify" onclick="selectService('spotify')">
                <div class="service-icon" style="background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);">
                    <i class="bi bi-music-note-beamed text-white"></i>
                </div>
                <div class="service-info">
                    <div class="service-name">Spotify Student</div>
                    <div class="service-desc">Spotify Premium Student Discount</div>
                </div>
                <span class="service-badge bg-success text-white">
                    <i class="bi bi-coin me-1"></i>1 Point
                </span>
            </div>

            <div class="service-option" data-service="youtube" onclick="selectService('youtube')">
                <div class="service-icon" style="background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);">
                    <i class="bi bi-youtube text-white"></i>
                </div>
                <div class="service-info">
                    <div class="service-name">YouTube Premium</div>
                    <div class="service-desc">YouTube Premium Student Discount</div>
                </div>
                <span class="service-badge bg-success text-white">
                    <i class="bi bi-coin me-1"></i>1 Point
                </span>
            </div>
        </div>

        <!-- URL Input -->
        <div class="url-input-wrapper" id="urlInputWrapper" style="display: none;">
            <label class="form-label fw-bold mb-2">SheerID Verification URL</label>
            <input type="url" id="sheeridUrl" class="form-control" 
                   placeholder="Paste your SheerID verification URL here..." />
            <small class="text-muted mt-1 d-block">
                <i class="bi bi-info-circle me-1"></i>
                The URL should start with https://services.sheerid.com/verify/
            </small>
        </div>

        <!-- Verify Button -->
        <button class="verify-btn" id="verifyBtn" onclick="startVerification()" disabled>
            <i class="bi bi-rocket-takeoff me-2"></i>Start Verification
        </button>

        <!-- Info Box -->
        <div class="info-box">
            <h6 class="fw-bold mb-2"><i class="bi bi-lightbulb-fill me-2"></i>How it works</h6>
            <ol class="mb-0 ps-3">
                <li>Select the service you want to verify</li>
                <li>Paste your SheerID verification URL</li>
                <li>Click "Start Verification" and wait</li>
                <li>Get your verified account details</li>
            </ol>
        </div>
    </div>

    <!-- User Balance -->
    <div class="text-center">
        <div class="badge bg-primary px-4 py-2" style="font-size: 1rem;">
            <i class="bi bi-coin me-2"></i>
            Your Balance: <strong>{{ user.balance }}</strong> Points
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade result-modal" id="resultModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="result-header">
                <div class="result-icon" id="resultIcon">
                    <i class="bi bi-check-lg"></i>
                </div>
                <h3 class="fw-bold mb-2" id="resultTitle">Verification Successful!</h3>
                <p class="text-muted mb-0" id="resultMessage">Your verification has been completed</p>
            </div>
            <div class="result-details" id="resultDetails">
                <!-- Details will be populated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
let selectedService = null;

function selectService(service) {
    selectedService = service;
    
    // Update UI
    document.querySelectorAll('.service-option').forEach(el => {
        el.classList.remove('selected');
    });
    document.querySelector(`[data-service="${service}"]`).classList.add('selected');
    
    // Show URL input
    document.getElementById('urlInputWrapper').style.display = 'block';
    
    // Enable verify button if URL is filled
    checkFormReady();
}

function checkFormReady() {
    const url = document.getElementById('sheeridUrl').value.trim();
    const btn = document.getElementById('verifyBtn');
    
    if (selectedService && url) {
        btn.disabled = false;
    } else {
        btn.disabled = true;
    }
}

// Listen to URL input
document.getElementById('sheeridUrl').addEventListener('input', checkFormReady);

function startVerification() {
    const url = document.getElementById('sheeridUrl').value.trim();
    
    if (!selectedService || !url) {
        showToast('Please select a service and enter URL', 'danger');
        return;
    }
    
    // Validate URL
    if (!url.includes('sheerid.com')) {
        showToast('Invalid SheerID URL', 'danger');
        return;
    }
    
    // Disable button and show loading
    const btn = document.getElementById('verifyBtn');
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Verifying...';
    
    // Determine API endpoint based on service
    const endpoints = {
        'gemini': '/api/verify/gemini',
        'chatgpt': '/api/verify/chatgpt',
        'spotify': '/api/verify/spotify',
        'youtube': '/api/verify/youtube'
    };
    
    const endpoint = endpoints[selectedService];
    if (!endpoint) {
        showToast('Invalid service selected', 'danger');
        btn.disabled = false;
        btn.innerHTML = originalText;
        return;
    }
    
    // Make API request
    fetch(endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            url: url
        })
    })
    .then(response => response.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = originalText;
        
        if (data.success) {
            showResultModal(true, data);
        } else {
            showResultModal(false, data);
        }
    })
    .catch(error => {
        btn.disabled = false;
        btn.innerHTML = originalText;
        showToast('Verification failed: ' + error.message, 'danger');
    });
}

function showResultModal(success, data) {
    const modal = new bootstrap.Modal(document.getElementById('resultModal'));
    const icon = document.getElementById('resultIcon');
    const title = document.getElementById('resultTitle');
    const message = document.getElementById('resultMessage');
    const details = document.getElementById('resultDetails');
    
    if (success) {
        icon.className = 'result-icon success';
        icon.innerHTML = '<i class="bi bi-check-lg"></i>';
        title.textContent = 'Verification Successful!';
        message.textContent = data.message || 'Your account has been verified successfully';
        
        // Build details
        let detailsHtml = '';
        if (data.result) {
            const serviceNames = {
                'gemini': 'Gemini One Pro',
                'chatgpt': 'ChatGPT K12',
                'spotify': 'Spotify Student',
                'youtube': 'YouTube Premium'
            };
            
            detailsHtml = `
                <div class="detail-item">
                    <span class="detail-label">Service</span>
                    <span class="detail-value">${serviceNames[selectedService] || selectedService}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Verification ID</span>
                    <span class="detail-value"><code>${data.result.verification_id || 'N/A'}</code></span>
                </div>
            `;
            
            // Show redirect URL if available
            if (data.result.redirect_url) {
                detailsHtml += `
                    <div class="detail-item">
                        <span class="detail-label">Redirect URL</span>
                        <span class="detail-value">
                            <a href="${data.result.redirect_url}" target="_blank" class="btn btn-sm btn-primary">
                                <i class="bi bi-box-arrow-up-right me-1"></i>Open Link
                            </a>
                        </span>
                    </div>
                `;
            }
            
            detailsHtml += `
                <div class="detail-item">
                    <span class="detail-label">Status</span>
                    <span class="detail-value">
                        ${data.result.pending ? 
                            '<span class="badge bg-warning">Pending Review</span>' : 
                            '<span class="badge bg-success">Verified</span>'}
                    </span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Points Used</span>
                    <span class="detail-value"><strong>1 Point</strong></span>
                </div>
            `;
        }
        details.innerHTML = detailsHtml;
    } else {
        icon.className = 'result-icon error';
        icon.innerHTML = '<i class="bi bi-x-lg"></i>';
        title.textContent = 'Verification Failed';
        message.textContent = data.message || 'Something went wrong';
        
        details.innerHTML = `
            <div class="alert alert-danger m-3">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                ${data.message || 'Please try again or contact support'}
            </div>
        `;
    }
    
    modal.show();
    
    // Reload page after modal close
    document.getElementById('resultModal').addEventListener('hidden.bs.modal', function () {
        if (success) {
            window.location.reload();
        }
    }, { once: true });
}

function showToast(message, type = 'info') {
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type} border-0 position-fixed top-0 end-0 m-3" style="z-index: 9999;">
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;
    const toastEl = document.createRange().createContextualFragment(toastHtml).firstElementChild;
    document.body.appendChild(toastEl);
    const toast = new bootstrap.Toast(toastEl);
    toast.show();
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}
</script>
{% endblock %}