const FREE_DAILY_CREDITS = 3;
let userId = "user_" + Math.random().toString(36).substring(2, 9); // Mock user ID

document.getElementById('generate-btn').addEventListener('click', async () => {
    const prompt = document.getElementById('prompt').value;
    if (!prompt) return alert("Please enter a description!");

    // Show loading state
    const btn = document.getElementById('generate-btn');
    btn.disabled = true;
    btn.textContent = "Generating...";
    document.getElementById('preview-container').innerHTML = "<p>Generating preview...</p>";

    try {
        const response = await fetch('/generate-preview', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ prompt, user_id: userId })
        });
        const data = await response.json();
        
        if (data.error) {
            alert(data.error);
        } else {
            // Display watermarked preview
            document.getElementById('preview-container').innerHTML = `
                <img src="${data.preview_url}" class="watermarked">
                <p>Credits left today: ${data.credits_left}/${FREE_DAILY_CREDITS}</p>
                <button id="unlock-btn">Unlock Full Quality (₹10)</button>
            `;
            document.getElementById('unlock-btn').addEventListener('click', unlockFullVersion);
        }
    } catch (error) {
        alert("Generation failed. Please try again.");
    } finally {
        btn.disabled = false;
        btn.textContent = "Generate Preview (Free)";
    }
});

function unlockFullVersion() {
    // Payment integration will go here
    alert("Payment integration coming soon!");
}