{% extends "base.html" %}

{% block title %}Account - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 1000px; margin: 2rem auto; padding: 0 2rem; }
    .account-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
    .card-header { margin-bottom: 1.5rem; }
    .card-header h3 { margin: 0; color: #1e293b; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
    .btn:hover { background: #5a67d8; }
    .btn-danger { background: #dc2626; }
    .btn-danger:hover { background: #b91c1c; }
    .btn-success { background: #059669; }
    .btn-success:hover { background: #047857; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .token-balance { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin-bottom: 2rem; }
    .balance-amount { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; }
    .balance-label { font-size: 1.2rem; opacity: 0.9; }
    .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
    .pricing-card { border: 2px solid #e0e0e0; border-radius: 12px; padding: 1.5rem; text-align: center; transition: all 0.3s ease; cursor: pointer; }
    .pricing-card:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); }
    .pricing-card.selected { border-color: #667eea; background: #f0f4ff; }
    .pricing-name { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: #1e293b; }
    .pricing-tokens { font-size: 2rem; font-weight: 700; color: #667eea; margin-bottom: 0.5rem; }
    .pricing-price { font-size: 1.1rem; color: #374151; margin-bottom: 1rem; }
    .payment-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
    .payment-card { border: 2px solid #e0e0e0; border-radius: 8px; padding: 1rem; text-align: center; transition: all 0.3s ease; cursor: pointer; }
    .payment-card:hover { border-color: #667eea; }
    .payment-card.selected { border-color: #667eea; background: #f0f4ff; }
    .payment-icon { font-size: 2rem; margin-bottom: 0.5rem; }
    .payment-name { font-weight: 500; color: #374151; }
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: white; margin: 15% auto; padding: 0; width: 90%; max-width: 500px; border-radius: 12px; }
    .modal-header { padding: 1rem 2rem; border-bottom: 1px solid #e5e7eb; }
    .modal-body { padding: 2rem; }
    .modal-footer { padding: 1rem 2rem; border-top: 1px solid #e5e7eb; text-align: right; }
    .form-row { display: flex; gap: 1rem; }
    .form-row .form-group { flex: 1; }
</style>
{% endblock %}

{% block content %}

    <div class="container">
        <!-- Avatar Management -->
        <div class="account-card">
            <div class="card-header">
                <h3><i class="fas fa-user-circle"></i> Profile Picture</h3>
            </div>

            <div style="display: flex; align-items: center; gap: 2rem; margin-bottom: 1rem;">
                <img src="{{ user.avatar_url }}" alt="Current Avatar" style="width: 80px; height: 80px; border-radius: 50%; border: 2px solid #e5e7eb;">
                <div>
                    <p style="margin-bottom: 0.5rem; color: #6b7280;">Upload a new profile picture or use Gravatar.</p>
                    <p style="font-size: 0.9rem; color: #6b7280;">Supported formats: JPG, PNG, GIF. Max size: 2MB.</p>
                </div>
            </div>

            <form method="post" action="/account/upload_avatar" enctype="multipart/form-data" style="margin-bottom: 1rem;">
                <div class="form-group">
                    <label for="avatar_file">Choose new avatar:</label>
                    <input type="file" id="avatar_file" name="avatar" accept="image/*" required>
                </div>
                <button type="submit" class="btn"><i class="fas fa-upload"></i> Upload Avatar</button>
            </form>

            {% if user.get('avatar') %}
            <form method="post" action="/account/delete_avatar" style="display: inline;">
                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete your custom avatar and use Gravatar instead?')">
                    <i class="fas fa-trash"></i> Delete Custom Avatar
                </button>
            </form>
            {% endif %}

            <div style="margin-top: 1rem; padding: 1rem; background: #f0f9ff; border-radius: 8px; border-left: 4px solid #3b82f6;">
                <h4 style="margin: 0 0 0.5rem 0; color: #1e40af;">Gravatar</h4>
                <p style="margin: 0; color: #1e40af; font-size: 0.9rem;">If you don't upload a custom avatar, your Gravatar (based on your email) will be used automatically.</p>
                <a href="https://gravatar.com" target="_blank" style="color: #2563eb; text-decoration: underline;">Manage your Gravatar</a>
            </div>
        </div>

        {% if user.get('role') != 'admin' %}
        <!-- Token Balance -->
        <div class="token-balance">
            <div class="balance-amount">{{ user.get('tokens', 0) }}</div>
            <div class="balance-label">Available Tokens</div>
        </div>
        {% endif %}

        <!-- Password Change -->
        <div class="account-card">
            <div class="card-header">
                <h3><i class="fas fa-lock"></i> Change Password</h3>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    {% if 'password' in message.lower() %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
                    {% endif %}
                {% endfor %}
            {% endif %}
            {% endwith %}

            <form method="post" action="/account/change_password">
                <div class="form-group">
                    <label for="current_password">Current Password</label>
                    <input type="password" id="current_password" name="current_password" required>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="new_password">New Password</label>
                        <input type="password" id="new_password" name="new_password" required>
                    </div>
                    <div class="form-group">
                        <label for="confirm_password">Confirm New Password</label>
                        <input type="password" id="confirm_password" name="confirm_password" required>
                    </div>
                </div>

                <button type="submit" class="btn"><i class="fas fa-save"></i> Change Password</button>
            </form>
        </div>

        {% if user.get('role') != 'admin' %}
        <!-- Token Top-up -->
        <div class="account-card">
            <div class="card-header">
                <h3><i class="fas fa-coins"></i> Top Up Tokens</h3>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    {% if 'token' in message.lower() or 'purchase' in message.lower() %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
                    {% endif %}
                {% endfor %}
            {% endif %}
            {% endwith %}

            <div class="pricing-grid">
                <div class="pricing-card" onclick="selectPackage('starter')">
                    <div class="pricing-name">Starter Pack</div>
                    <div class="pricing-tokens">500</div>
                    <div class="pricing-price">$4.99</div>
                </div>
                <div class="pricing-card" onclick="selectPackage('professional')">
                    <div class="pricing-name">Professional Pack</div>
                    <div class="pricing-tokens">1,200</div>
                    <div class="pricing-price">$9.99</div>
                </div>
                <div class="pricing-card" onclick="selectPackage('enterprise')">
                    <div class="pricing-name">Enterprise Pack</div>
                    <div class="pricing-tokens">3,000</div>
                    <div class="pricing-price">$19.99</div>
                </div>
                <div class="pricing-card" onclick="selectPackage('custom')">
                    <div class="pricing-name">Custom Amount</div>
                    <div class="pricing-tokens">
                        <input type="number" id="custom_tokens" placeholder="100" min="100" style="width: 80px; text-align: center; border: none; background: transparent; font-size: 1.5rem; font-weight: 700; color: #667eea;">
                    </div>
                    <div class="pricing-price">Calculated</div>
                </div>
            </div>

            <div class="payment-methods">
                <div class="payment-card" onclick="selectPayment('card')">
                    <div class="payment-icon"><i class="fas fa-credit-card"></i></div>
                    <div class="payment-name">Credit Card</div>
                </div>
                <div class="payment-card" onclick="selectPayment('paypal')">
                    <div class="payment-icon"><i class="fab fa-paypal"></i></div>
                    <div class="payment-name">PayPal</div>
                </div>
                <div class="payment-card" onclick="selectPayment('crypto')">
                    <div class="payment-icon"><i class="fab fa-bitcoin"></i></div>
                    <div class="payment-name">Cryptocurrency</div>
                </div>
            </div>

            <div style="text-align: center; margin-top: 2rem;">
                <button type="button" class="btn btn-success" onclick="purchaseTokens()" id="purchaseBtn" disabled>
                    <i class="fas fa-shopping-cart"></i> Purchase Tokens
                </button>
            </div>
        </div>

        <!-- Payment Methods -->
        <div class="account-card">
            <div class="card-header">
                <h3><i class="fas fa-credit-card"></i> Saved Payment Methods</h3>
            </div>

            <p style="color: #6b7280; margin-bottom: 1rem;">Save your payment methods for faster checkout.</p>

            <div class="payment-methods">
                <div class="payment-card" onclick="addPaymentMethod('card')">
                    <div class="payment-icon"><i class="fas fa-plus"></i></div>
                    <div class="payment-name">Add Card</div>
                </div>
                <div class="payment-card" onclick="addPaymentMethod('paypal')">
                    <div class="payment-icon"><i class="fab fa-paypal"></i></div>
                    <div class="payment-name">Add PayPal</div>
                </div>
                <div class="payment-card" onclick="addPaymentMethod('crypto')">
                    <div class="payment-icon"><i class="fab fa-bitcoin"></i></div>
                    <div class="payment-name">Add Crypto</div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Purchase Modal -->
    <div id="purchaseModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Confirm Purchase</h3>
                <span onclick="closePurchaseModal()" style="cursor: pointer; font-size: 1.5rem;">&times;</span>
            </div>
            <div class="modal-body">
                <div id="purchaseSummary"></div>
                <p style="color: #dc2626; margin-top: 1rem;"><strong>Note:</strong> This is a demo implementation. In production, this would integrate with actual payment processors.</p>
            </div>
            <div class="modal-footer">
                <button onclick="closePurchaseModal()" class="btn" style="background: #6b7280;">Cancel</button>
                <button onclick="confirmPurchase()" class="btn btn-success">Complete Purchase</button>
            </div>
        </div>
    </div>

    <script>
        let selectedPackage = null;
        let selectedPayment = null;

        function selectPackage(packageType) {
            // Remove selected class from all cards
            document.querySelectorAll('.pricing-card').forEach(card => {
                card.classList.remove('selected');
            });

            // Add selected class to clicked card
            event.currentTarget.classList.add('selected');
            selectedPackage = packageType;

            updatePurchaseButton();
        }

        function selectPayment(paymentType) {
            // Remove selected class from all payment cards
            document.querySelectorAll('.payment-card').forEach(card => {
                card.classList.remove('selected');
            });

            // Add selected class to clicked card
            event.currentTarget.classList.add('selected');
            selectedPayment = paymentType;

            updatePurchaseButton();
        }

        function updatePurchaseButton() {
            const btn = document.getElementById('purchaseBtn');
            if (selectedPackage && selectedPayment) {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-shopping-cart"></i> Purchase Tokens';
            } else {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-shopping-cart"></i> Select Package & Payment';
            }
        }

        function purchaseTokens() {
            if (!selectedPackage || !selectedPayment) {
                alert('Please select both a package and payment method.');
                return;
            }

            let tokens, price;
            switch (selectedPackage) {
                case 'starter':
                    tokens = 500;
                    price = 4.99;
                    break;
                case 'professional':
                    tokens = 1200;
                    price = 9.99;
                    break;
                case 'enterprise':
                    tokens = 3000;
                    price = 19.99;
                    break;
                case 'custom':
                    tokens = parseInt(document.getElementById('custom_tokens').value) || 100;
                    price = (tokens / 100) * 0.10; // $0.10 per token
                    break;
            }

            const summary = document.getElementById('purchaseSummary');
            summary.innerHTML = `
                <h4>Purchase Summary</h4>
                <p><strong>Package:</strong> ${selectedPackage.charAt(0).toUpperCase() + selectedPackage.slice(1)}</p>
                <p><strong>Tokens:</strong> ${tokens.toLocaleString()}</p>
                <p><strong>Price:</strong> $${price.toFixed(2)}</p>
                <p><strong>Payment Method:</strong> ${selectedPayment.charAt(0).toUpperCase() + selectedPayment.slice(1)}</p>
            `;

            document.getElementById('purchaseModal').style.display = 'block';
        }

        function closePurchaseModal() {
            document.getElementById('purchaseModal').style.display = 'none';
        }

        function confirmPurchase() {
            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/account/purchase_tokens';

            const packageInput = document.createElement('input');
            packageInput.type = 'hidden';
            packageInput.name = 'package';
            packageInput.value = selectedPackage;
            form.appendChild(packageInput);

            const paymentInput = document.createElement('input');
            paymentInput.type = 'hidden';
            paymentInput.name = 'payment_method';
            paymentInput.value = selectedPayment;
            form.appendChild(paymentInput);

            if (selectedPackage === 'custom') {
                const tokensInput = document.createElement('input');
                tokensInput.type = 'hidden';
                tokensInput.name = 'custom_tokens';
                tokensInput.value = document.getElementById('custom_tokens').value;
                form.appendChild(tokensInput);
            }

            document.body.appendChild(form);
            form.submit();
        }

        function addPaymentMethod(type) {
            alert(`Add ${type} payment method - This would open a payment method form in production.`);
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const modal = document.getElementById('purchaseModal');
            if (event.target == modal) {
                closePurchaseModal();
            }
            // Close user dropdown
            const dropdown = document.getElementById('userDropdown');
            const icon = document.querySelector('.user-icon');
            if (dropdown && icon && !icon.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.style.display = 'none';
            }
        }

        function toggleUserMenu() {
            const dropdown = document.getElementById('userDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        }
    </script>
{% endblock %}