{% extends "base.html" %}

{% block title %}AI Prompt Builder - {{ context.site_info.title }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold text-gray-900">AI Prompt Builder</h1>
    <div class="flex space-x-2">
        <a href="{{ url_for('view_results', domain=domain) }}" class="btn-secondary">
            <i class="fas fa-eye mr-2"></i>Back to Results
        </a>
        <a href="{{ url_for('index') }}" class="btn-secondary">
            <i class="fas fa-home mr-2"></i>Home
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-1">
        <div class="card" x-data="promptBuilder()">
            <h2 class="text-xl font-bold text-gray-900 mb-4">
                <i class="fas fa-magic mr-2 text-primary-500"></i>Select Components
            </h2>
            <p class="text-gray-600 mb-6">Choose which elements to include in your AI prompt for rebuilding this site with Tailwind CSS.</p>
            
            <div class="space-y-4">
                <!-- Layout Selection -->
                <div class="flex items-start">
                    <div class="flex h-5 items-center">
                        <input 
                            id="layout" 
                            name="layout" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="layout"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="layout" class="font-medium text-gray-700">Layout Structure</label>
                        <p class="text-gray-500">Include overall layout dimensions and structure</p>
                    </div>
                </div>
                
                <!-- Sections Selection -->
                <div class="flex items-start">
                    <div class="flex h-5 items-center">
                        <input 
                            id="sections" 
                            name="sections" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="sections"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="sections" class="font-medium text-gray-700">Page Sections</label>
                        <p class="text-gray-500">Include detailed section information (header, nav, etc.)</p>
                    </div>
                </div>
                
                <!-- Colors Selection -->
                <div class="flex items-start">
                    <div class="flex h-5 items-center">
                        <input 
                            id="colors" 
                            name="colors" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="colors"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="colors" class="font-medium text-gray-700">Color Scheme</label>
                        <p class="text-gray-500">Include background, text, and accent colors</p>
                    </div>
                </div>
                
                <!-- Typography Selection -->
                <div class="flex items-start">
                    <div class="flex h-5 items-center">
                        <input 
                            id="typography" 
                            name="typography" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="typography"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="typography" class="font-medium text-gray-700">Typography</label>
                        <p class="text-gray-500">Include font families, heading styles, and body text</p>
                    </div>
                </div>
                
                <!-- Content Selection -->
                <div class="flex items-start">
                    <div class="flex h-5 items-center">
                        <input 
                            id="content" 
                            name="content" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="content"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="content" class="font-medium text-gray-700">Content</label>
                        <p class="text-gray-500">Include content references (text, images, etc.)</p>
                    </div>
                </div>
                
                <!-- Text Selection -->
                <div class="flex items-start pl-6" x-show="selectedElements.includes('content')">
                    <div class="flex h-5 items-center">
                        <input 
                            id="text" 
                            name="text" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="text"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="text" class="font-medium text-gray-700">Text Content</label>
                        <p class="text-gray-500">Include actual text content (headings, paragraphs)</p>
                    </div>
                </div>
                
                <!-- Images Selection -->
                <div class="flex items-start pl-6" x-show="selectedElements.includes('content')">
                    <div class="flex h-5 items-center">
                        <input 
                            id="images" 
                            name="images" 
                            type="checkbox" 
                            x-model="selectedElements" 
                            value="images"
                            class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="images" class="font-medium text-gray-700">Image References</label>
                        <p class="text-gray-500">Include references to images and their context</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-6">
                <button 
                    class="btn-primary w-full"
                    x-on:click="generatePrompt"
                    x-bind:disabled="isGenerating || selectedElements.length === 0">
                    <template x-if="!isGenerating">
                        <span><i class="fas fa-magic mr-2"></i>Generate AI Prompt</span>
                    </template>
                    <template x-if="isGenerating">
                        <span><i class="fas fa-spinner fa-spin mr-2"></i>Generating...</span>
                    </template>
                </button>
                <p class="text-sm text-gray-500 mt-2 text-center" x-show="selectedElements.length === 0">
                    Select at least one element to generate a prompt
                </p>
            </div>
        </div>
    </div>
    
    <div class="lg:col-span-2">
        <div class="card" x-data="{ copied: false }">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold text-gray-900">
                    <i class="fas fa-file-alt mr-2 text-primary-500"></i>Generated Prompt
                </h2>
                <button 
                    x-show="prompt !== ''"
                    x-on:click="copyToClipboard"
                    class="text-gray-600 hover:text-primary-600 transition-ease">
                    <span x-show="!copied"><i class="far fa-copy mr-1"></i>Copy</span>
                    <span x-show="copied" class="text-green-600"><i class="fas fa-check mr-1"></i>Copied!</span>
                </button>
            </div>
            
            <div 
                id="prompt-container"
                class="bg-gray-100 rounded-md p-4 min-h-[400px] text-gray-800 whitespace-pre-wrap font-mono text-sm relative">
                <template x-if="prompt === '' && !isGenerating">
                    <div class="text-gray-500 absolute inset-0 flex items-center justify-center">
                        <p class="text-center">
                            <i class="fas fa-magic text-2xl mb-2 block"></i>
                            Select elements and click "Generate AI Prompt" to create a prompt
                        </p>
                    </div>
                </template>
                <template x-if="isGenerating">
                    <div class="text-gray-500 absolute inset-0 flex items-center justify-center">
                        <p class="text-center">
                            <i class="fas fa-spinner fa-spin text-2xl mb-2 block"></i>
                            Generating prompt...
                        </p>
                    </div>
                </template>
                <div x-text="prompt"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function promptBuilder() {
        return {
            selectedElements: ["layout", "colors", "typography"],
            prompt: "",
            isGenerating: false,
            
            generatePrompt() {
                if (this.selectedElements.length === 0) return;
                
                this.isGenerating = true;
                this.prompt = "";
                
                // Send selected elements to backend for prompt generation
                fetch('/api/generate_prompt', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        domain: '{{ domain }}',
                        selected_elements: this.selectedElements
                    })
                })
                .then(response => response.json())
                .then(data => {
                    this.isGenerating = false;
                    if (data.status === 'success') {
                        this.prompt = data.prompt;
                    } else {
                        this.prompt = "Error generating prompt: " + data.message;
                    }
                })
                .catch(error => {
                    this.isGenerating = false;
                    this.prompt = "Error generating prompt: " + error;
                });
            },
            
            copyToClipboard() {
                const promptText = this.prompt;
                
                if (!promptText) return;
                
                navigator.clipboard.writeText(promptText).then(() => {
                    this.copied = true;
                    setTimeout(() => {
                        this.copied = false;
                    }, 2000);
                });
            }
        };
    }
</script>
{% endblock %}