app/templates/credits.html

{% extends "base.html" %}

{% block title %}Credits{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Credits</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-300">Manage your credits for using AI tools</p>
        </div>
        <div class="text-right">
            <div class="text-2xl font-bold text-blue-600">{{ user_credits }}</div>
            <div class="text-sm text-gray-500">credits available</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Earn Credits -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Earn Credits</h2>
            
            <!-- Daily Rewards -->
            <div class="mb-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Daily Rewards</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    Watch ads to earn up to 30 credits per day (3 rewards of 10 credits each)
                </p>
                <div class="flex items-center justify-between mb-4">
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        <span id="daily-count">0</span>/3 rewards claimed today
                    </div>
                    <div id="daily-cooldown" class="text-sm text-gray-500 dark:text-gray-400 hidden">
                        Next reward in: <span id="cooldown-timer">5:00</span>
                    </div>
                </div>
                <button id="daily-reward-btn"
                        class="w-full py-3 px-4 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    Watch Ad for 10 Credits
                </button>
            </div>

            <!-- Special Reward -->
            <div class="mb-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Special Reward</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    Watch a longer ad to earn 25 bonus credits (available once per day)
                </p>
                <button id="special-reward-btn"
                        class="w-full py-3 px-4 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    Watch Special Ad for 25 Credits
                </button>
            </div>

            <!-- Referral Program -->
            <div>
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Referral Program</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    Invite friends to earn 50 credits for each referral
                </p>
                <div class="flex items-center space-x-4">
                    <input type="text" id="referral-link" 
                           value="{{ referral_link }}" 
                           class="flex-1 px-4 py-2 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           readonly>
                    <button id="copy-referral" 
                            class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        Copy
                    </button>
                </div>
            </div>
        </div>

        <!-- Purchase Credits -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Purchase Credits</h2>
            
            <!-- Credit Packages -->
            <div class="space-y-4">
                {% for package in credit_packages %}
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-2">
                        <div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ package.name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ package.description }}</p>
                        </div>
                        <div class="text-right">
                            <div class="text-xl font-bold text-blue-600">${{ package.price }}</div>
                            <div class="text-sm text-gray-500">{{ package.credits }} credits</div>
                        </div>
                    </div>
                    <button onclick="purchaseCredits('{{ package.id }}')"
                            class="w-full py-2 px-4 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Purchase
                    </button>
                </div>
                {% endfor %}
            </div>

            <!-- Payment Methods -->
            <div class="mt-6">
                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Accepted Payment Methods</h3>
                <div class="flex items-center space-x-4">
                    <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    </svg>
                    <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                    </svg>
                    <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Credit History -->
    <div class="mt-8">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Credit History</h2>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Details</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        {% for transaction in credit_history %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                {{ transaction.date }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                                {{ transaction.type }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm {% if transaction.amount > 0 %}text-green-600{% else %}text-red-600{% endif %}">
                                {{ transaction.amount }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ transaction.details }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Ad Modal -->
<div id="ad-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-lg w-full mx-4">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold">Watch Ad</h2>
            <button id="close-ad-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                <svg class="h-6 w-6" 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>
            </button>
        </div>

        <!-- Ad Container -->
        <div id="ad-container" class="aspect-video bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 flex items-center justify-center">
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-400 mb-2" id="ad-countdown">30</div>
                <div class="text-sm text-gray-500">seconds remaining</div>
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
            <div id="ad-progress" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
        </div>

        <!-- Status Message -->
        <div id="ad-status" class="text-center text-sm text-gray-500 dark:text-gray-400">
            Please watch the ad to earn your reward
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dailyBtn = document.getElementById('daily-reward-btn');
    const specialBtn = document.getElementById('special-reward-btn');
    const adModal = document.getElementById('ad-modal');
    const closeAdModal = document.getElementById('close-ad-modal');
    const copyReferralBtn = document.getElementById('copy-referral');
    const referralLink = document.getElementById('referral-link');

    // Load reward status
    loadRewardStatus();

    // Set up event listeners
    dailyBtn.addEventListener('click', () => showAdModal('daily'));
    specialBtn.addEventListener('click', () => showAdModal('special'));
    closeAdModal.addEventListener('click', hideAdModal);
    copyReferralBtn.addEventListener('click', copyReferralLink);

    // Load reward status
    async function loadRewardStatus() {
        try {
            const response = await fetch('/api/ads/status');
            const data = await response.json();

            if (data.success) {
                updateDailyRewardStatus(data.daily_rewards);
                updateSpecialRewardStatus(data.special_reward);
            }
        } catch (error) {
            console.error('Error loading reward status:', error);
        }
    }

    // Update daily reward status
    function updateDailyRewardStatus(status) {
        const dailyCount = document.getElementById('daily-count');
        const cooldownDiv = document.getElementById('daily-cooldown');
        const cooldownTimer = document.getElementById('cooldown-timer');

        dailyCount.textContent = status.count;

        if (status.can_claim) {
            dailyBtn.disabled = false;
            cooldownDiv.classList.add('hidden');
        } else {
            dailyBtn.disabled = true;
            cooldownDiv.classList.remove('hidden');
            updateCooldownTimer(status.cooldown_remaining);
        }
    }

    // Update special reward status
    function updateSpecialRewardStatus(status) {
        specialBtn.disabled = !status.can_claim;
    }

    // Show ad modal
    function showAdModal(type) {
        currentRewardType = type;
        adModal.classList.remove('hidden');
        adModal.classList.add('flex');
        startAdTimer();
    }

    // Hide ad modal
    function hideAdModal() {
        adModal.classList.add('hidden');
        adModal.classList.remove('flex');
        stopAdTimer();
        resetAdProgress();
    }

    // Copy referral link
    function copyReferralLink() {
        referralLink.select();
        document.execCommand('copy');
        showToast('Referral link copied to clipboard!', 'success');
    }

    // Purchase credits
    window.purchaseCredits = async function(packageId) {
        try {
            const response = await fetch('/api/credits/purchase', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    package_id: packageId
                })
            });

            const data = await response.json();

            if (data.success) {
                // Redirect to payment page
                window.location.href = data.payment_url;
            } else {
                showToast(data.error || 'Failed to initiate purchase', 'error');
            }
        } catch (error) {
            console.error('Error purchasing credits:', error);
            showToast('Failed to initiate purchase', 'error');
        }
    };
});
</script>
{% endblock %}