{% extends "base_app.html" %}
{% set active_page = 'generate' %}
{% block title %}Generate Campaigns — TheNicheQuiz{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="/static/css/styles.css">
<style>
    /* Override styles for embedded app context */
    .top-bar { display: none !important; }
    .quiz-section { padding-top: 20px; }
    .campaigns-section { padding-top: 12px; }
    #particleCanvas { display: none !important; }
    body { overflow-x: hidden; }
</style>
{% endblock %}

{% block body %}
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- NICHE QUIZ SECTION -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<section class="quiz-section" id="quizSection">
    <!-- Step Indicator -->
    <div class="quiz-step-indicator">
        <div class="step-line">
            <div class="step-line-fill" id="stepLineFill"></div>
        </div>
        <div class="step-dot active" id="stepDot1" data-step="1">
            <span class="step-num">1</span>
            <span class="step-label">Industry</span>
        </div>
        <div class="step-dot" id="stepDot2" data-step="2">
            <span class="step-num">2</span>
            <span class="step-label">Sub-Niche</span>
        </div>
        <div class="step-dot" id="stepDot3" data-step="3">
            <span class="step-num">3</span>
            <span class="step-label">Micro-Niche</span>
        </div>
    </div>

    <!-- Step 1: Industry -->
    <div class="quiz-step" id="quizStep1">
        <div class="quiz-header">
            <h2 class="quiz-title">What industry are you in?</h2>
            <p class="quiz-subtitle">Select your broad market to get started</p>
        </div>
        <div class="industry-grid" id="industryGrid">
            <button class="industry-card" data-industry="Health & Wellness" onclick="selectIndustry(this)"><span class="industry-emoji">🏥</span><span class="industry-name">Health & Wellness</span></button>
            <button class="industry-card" data-industry="Technology" onclick="selectIndustry(this)"><span class="industry-emoji">💻</span><span class="industry-name">Technology</span></button>
            <button class="industry-card" data-industry="Finance" onclick="selectIndustry(this)"><span class="industry-emoji">💰</span><span class="industry-name">Finance</span></button>
            <button class="industry-card" data-industry="Education" onclick="selectIndustry(this)"><span class="industry-emoji">📚</span><span class="industry-name">Education</span></button>
            <button class="industry-card" data-industry="Food & Beverage" onclick="selectIndustry(this)"><span class="industry-emoji">🍕</span><span class="industry-name">Food & Beverage</span></button>
            <button class="industry-card" data-industry="Real Estate" onclick="selectIndustry(this)"><span class="industry-emoji">🏠</span><span class="industry-name">Real Estate</span></button>
            <button class="industry-card" data-industry="Fashion" onclick="selectIndustry(this)"><span class="industry-emoji">👗</span><span class="industry-name">Fashion</span></button>
            <button class="industry-card" data-industry="Fitness" onclick="selectIndustry(this)"><span class="industry-emoji">💪</span><span class="industry-name">Fitness</span></button>
            <button class="industry-card" data-industry="Beauty" onclick="selectIndustry(this)"><span class="industry-emoji">💄</span><span class="industry-name">Beauty</span></button>
            <button class="industry-card" data-industry="E-commerce" onclick="selectIndustry(this)"><span class="industry-emoji">🛒</span><span class="industry-name">E-commerce</span></button>
            <button class="industry-card" data-industry="SaaS" onclick="selectIndustry(this)"><span class="industry-emoji">☁️</span><span class="industry-name">SaaS</span></button>
            <button class="industry-card" data-industry="Coaching/Consulting" onclick="selectIndustry(this)"><span class="industry-emoji">🎯</span><span class="industry-name">Coaching / Consulting</span></button>
            <button class="industry-card" data-industry="Home Services" onclick="selectIndustry(this)"><span class="industry-emoji">🔧</span><span class="industry-name">Home Services</span></button>
            <button class="industry-card" data-industry="Travel" onclick="selectIndustry(this)"><span class="industry-emoji">✈️</span><span class="industry-name">Travel</span></button>
            <button class="industry-card" data-industry="Entertainment" onclick="selectIndustry(this)"><span class="industry-emoji">🎬</span><span class="industry-name">Entertainment</span></button>
            <button class="industry-card other-card" data-industry="Other" onclick="selectIndustryOther(this)"><span class="industry-emoji">✨</span><span class="industry-name">Other</span></button>
        </div>
        <div class="custom-input-row hidden" id="customIndustryRow">
            <input type="text" class="field-input custom-industry-input" id="customIndustryInput" placeholder="Enter your industry...">
            <button class="btn-primary" onclick="confirmCustomIndustry()">Continue →</button>
        </div>
    </div>

    <!-- Step 2: Sub-niche -->
    <div class="quiz-step hidden" id="quizStep2">
        <div class="quiz-header">
            <button class="quiz-back" onclick="goToStep(1)">← Back</button>
            <h2 class="quiz-title">What's your specific area?</h2>
            <p class="quiz-subtitle">Select a sub-niche within <span class="text-amber-400 font-bold" id="selectedIndustryLabel"></span></p>
        </div>
        <div class="niche-loading hidden" id="nicheLoading2">
            <div class="ai-spinner"></div>
            <p>AI is analyzing your industry...</p>
        </div>
        <div class="niche-grid" id="subNicheGrid"></div>
        <div class="custom-input-row mt-4" id="customSubNicheRow">
            <input type="text" class="field-input" id="customSubNicheInput" placeholder="Or type your own sub-niche...">
            <button class="btn-primary" onclick="confirmCustomSubNiche()">Continue →</button>
        </div>
    </div>

    <!-- Step 3: Micro-niche -->
    <div class="quiz-step hidden" id="quizStep3">
        <div class="quiz-header">
            <button class="quiz-back" onclick="goToStep(2)">← Back</button>
            <h2 class="quiz-title">Choose your micro-niche</h2>
            <p class="quiz-subtitle">The ultra-specific niche that will crush on Facebook ads</p>
            <div class="niche-breadcrumb">
                <span id="breadcrumb1"></span> → <span id="breadcrumb2"></span> → <span class="text-amber-400">?</span>
            </div>
        </div>
        <div class="niche-loading hidden" id="nicheLoading3">
            <div class="ai-spinner"></div>
            <p>AI is finding killer micro-niches...</p>
        </div>
        <div class="niche-grid" id="microNicheGrid"></div>
        <div class="custom-input-row mt-4" id="customMicroNicheRow">
            <input type="text" class="field-input" id="customMicroNicheInput" placeholder="Or type your own micro-niche...">
            <button class="btn-primary" onclick="confirmCustomMicroNiche()">Lock it in →</button>
        </div>
    </div>

    <!-- Quiz Complete -->
    <div class="quiz-step hidden" id="quizComplete">
        <div class="quiz-complete-card">
            <div class="complete-icon">🎯</div>
            <h2 class="quiz-title">Niche Locked In!</h2>
            <div class="niche-path">
                <span class="niche-path-item" id="finalIndustry"></span>
                <span class="niche-path-arrow">→</span>
                <span class="niche-path-item" id="finalSubNiche"></span>
                <span class="niche-path-arrow">→</span>
                <span class="niche-path-item highlight" id="finalMicroNiche"></span>
            </div>
            <div class="quiz-actions">
                <button class="btn-generate-campaigns" onclick="generateParallelCampaigns()">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    Generate 10 Parallel Campaigns
                </button>
                <button class="btn-secondary" onclick="skipToManual()">Build Manually Instead</button>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- PARALLEL CAMPAIGNS SECTION -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<section class="campaigns-section hidden" id="campaignsSection">
    <div class="campaigns-header">
        <div>
            <h2 class="campaigns-title">🚀 10 Parallel Campaigns</h2>
            <p class="campaigns-subtitle">AI-generated sibling niches for <span class="text-amber-400" id="campaignsNicheLabel"></span></p>
        </div>
        <div class="campaigns-actions">
            <button class="btn-generate-all" onclick="generateAllImages()" id="generateAllBtn">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                Generate All Images
            </button>
            <button class="btn-primary" onclick="saveCampaignSet()">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
                Save Campaigns
            </button>
            <button class="btn-primary" onclick="exportSelectedCampaigns()">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                Export CSV
            </button>
            <button class="btn-secondary" onclick="toggleGalleryView()">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
                <span id="galleryToggleLabel">Gallery View</span>
            </button>
        </div>
    </div>

    <div class="generation-loading hidden" id="generationLoading">
        <div class="gen-loader"><div class="gen-loader-ring"></div><div class="gen-loader-ring"></div><div class="gen-loader-ring"></div></div>
        <h3>Generating 10 parallel campaigns...</h3>
        <p class="text-gray-500">AI is crafting unique ad angles for your niche</p>
    </div>

    <div class="image-progress hidden" id="imageProgress">
        <div class="progress-bar-container"><div class="progress-bar-fill" id="progressBarFill"></div></div>
        <p class="progress-text" id="progressText">Generating images: 0/0</p>
    </div>

    <div class="campaign-cards-grid" id="campaignCardsGrid"></div>
    <div class="gallery-view hidden" id="galleryView"></div>

    <div class="csv-preview-section hidden" id="csvPreviewSection">
        <div class="csv-preview-header">
            <h3>📊 CSV Export Preview</h3>
            <div style="display:flex;align-items:center;gap:12px;">
                <span style="font-size:14px;color:var(--text-secondary);" id="csvExportRowCount"></span>
                <button class="btn-primary" id="csvExportDownloadBtn" onclick="downloadExportCSV()">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    Download CSV
                </button>
            </div>
        </div>
        <div class="csv-export-table-wrap" id="csvExportTableWrap"></div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════ -->
<!-- MANUAL CAMPAIGN BUILDER -->
<!-- ═══════════════════════════════════════════════════════════════════════ -->
<div class="manual-builder hidden" id="manualBuilder">
    <main class="main-layout">
        <div class="form-column" id="formColumn">
            <section class="form-card" id="campaignSection">
                <div class="card-header" onclick="toggleSection('campaign')">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <div class="section-icon campaign-icon"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/></svg></div>
                        <h2 class="card-title">Campaign</h2>
                    </div>
                    <svg class="chevron w-5 h-5" id="chevron-campaign" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:20px;height:20px;color:#888;transition:transform 0.3s;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </div>
                <div class="card-body" id="body-campaign">
                    <div class="field-grid">
                        <div class="field-group col-span-2"><label class="field-label">Campaign Name <span class="req">*</span></label><input type="text" class="field-input" data-field="campaign_name" placeholder="e.g. Summer Sale 2025" oninput="updatePreview()"></div>
                        <div class="field-group"><label class="field-label">Objective <span class="req">*</span></label><select class="field-input" data-field="campaign_objective" onchange="updatePreview()"><option value="OUTCOME_TRAFFIC">Traffic</option><option value="OUTCOME_SALES">Sales</option><option value="OUTCOME_LEADS">Leads</option><option value="OUTCOME_ENGAGEMENT">Engagement</option><option value="OUTCOME_AWARENESS">Awareness</option></select></div>
                        <div class="field-group"><label class="field-label">Status</label><select class="field-input" data-field="campaign_status"><option value="PAUSED">Paused</option><option value="ACTIVE">Active</option></select></div>
                    </div>
                </div>
            </section>
            <section class="form-card" id="adsetSection">
                <div class="card-header" onclick="toggleSection('adset')">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <div class="section-icon adset-icon"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
                        <h2 class="card-title">Ad Set</h2>
                    </div>
                    <svg class="chevron w-5 h-5" id="chevron-adset" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:20px;height:20px;color:#888;transition:transform 0.3s;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </div>
                <div class="card-body" id="body-adset">
                    <div class="field-grid">
                        <div class="field-group col-span-2"><label class="field-label">Ad Set Name <span class="req">*</span></label><input type="text" class="field-input" data-field="adset_name" placeholder="e.g. US 25-45 Interest Targeting" oninput="updatePreview()"></div>
                        <div class="field-group"><label class="field-label">Status</label><select class="field-input" data-field="adset_status"><option value="PAUSED">Paused</option><option value="ACTIVE">Active</option></select></div>
                        <div class="field-group"><label class="field-label">Daily Budget</label><input type="number" class="field-input" data-field="daily_budget" placeholder="e.g. 20.00" step="0.01"></div>
                    </div>
                    <div class="sub-section" style="margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden;">
                        <div class="sub-header" onclick="toggleSubSection('targeting')" style="display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;">
                            <span style="font-size:13px;font-weight:600;color:var(--blue);">🎯 Targeting</span>
                        </div>
                        <div class="sub-body" id="body-targeting" style="padding:14px;border-top:1px solid var(--border);">
                            <div class="field-grid">
                                <div class="field-group"><label class="field-label">Age Min</label><input type="number" class="field-input" data-field="targeting_age_min" placeholder="18" value="18"></div>
                                <div class="field-group"><label class="field-label">Age Max</label><input type="number" class="field-input" data-field="targeting_age_max" placeholder="65" value="65"></div>
                                <div class="field-group"><label class="field-label">Gender</label><select class="field-input" data-field="targeting_genders"><option value="All">All</option><option value="Male">Male</option><option value="Female">Female</option></select></div>
                                <div class="field-group"><label class="field-label">Locations</label><input type="text" class="field-input" data-field="targeting_geo_locations" placeholder="US, CA, GB"></div>
                                <div class="field-group col-span-2"><label class="field-label">Interests</label><input type="text" class="field-input" data-field="targeting_interests" placeholder="Technology, Marketing"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <div id="adsContainer">
                <section class="form-card ad-card" data-ad-index="0">
                    <div class="card-header" onclick="toggleSection('ad-0')">
                        <div style="display:flex;align-items:center;gap:8px;">
                            <div class="section-icon ad-icon"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div>
                            <h2 class="card-title">Ad Creative <span class="ad-number">#1</span></h2>
                        </div>
                        <svg class="chevron w-5 h-5" id="chevron-ad-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:20px;height:20px;color:#888;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </div>
                    <div class="card-body" id="body-ad-0">
                        <div class="field-grid">
                            <div class="field-group col-span-2"><label class="field-label">Ad Name <span class="req">*</span></label><input type="text" class="field-input" data-field="ad_name" placeholder="e.g. Image Ad 1" oninput="updatePreview()"></div>
                            <div class="field-group"><label class="field-label">Status</label><select class="field-input" data-field="ad_status"><option value="PAUSED">Paused</option><option value="ACTIVE">Active</option></select></div>
                            <div class="field-group"><label class="field-label">CTA</label><select class="field-input" data-field="call_to_action" onchange="updatePreview()"><option value="">— None —</option><option value="LEARN_MORE">Learn More</option><option value="SHOP_NOW">Shop Now</option><option value="SIGN_UP">Sign Up</option><option value="DOWNLOAD">Download</option><option value="GET_QUOTE">Get Quote</option><option value="CONTACT_US">Contact Us</option><option value="BOOK_NOW">Book Now</option></select></div>
                            <div class="field-group col-span-2"><label class="field-label">Body Text</label><textarea class="field-input field-textarea" data-field="body" placeholder="Primary text..." rows="3" maxlength="2200" oninput="updatePreview()"></textarea></div>
                            <div class="field-group"><label class="field-label">Headline</label><input type="text" class="field-input" data-field="title" placeholder="Headline" oninput="updatePreview()"></div>
                            <div class="field-group"><label class="field-label">Description</label><input type="text" class="field-input" data-field="caption" placeholder="Description" oninput="updatePreview()"></div>
                            <div class="field-group col-span-2"><label class="field-label">Link URL</label><input type="url" class="field-input" data-field="link" placeholder="https://..." oninput="updatePreview()"></div>
                        </div>
                        <div class="ai-gen-section">
                            <div class="ai-gen-header"><span style="font-size:13px;font-weight:600;color:var(--amber);">✨ AI Image Generation</span></div>
                            <div class="ai-gen-body">
                                <div style="display:flex;gap:8px;">
                                    <input type="text" class="field-input ai-prompt-input" data-ai-prompt placeholder="Describe the ad image..." style="flex:1;">
                                    <button class="btn-generate" onclick="generateImage(this)">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                        Generate
                                    </button>
                                </div>
                                <div class="generated-images" data-generated-images></div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <button class="btn-add-ad" onclick="addAd()">
                <svg style="width:20px;height:20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                Add Another Ad
            </button>
        </div>
        <div class="preview-column" id="previewColumn">
            <div class="preview-tabs">
                <button class="preview-tab active" data-tab="preview" onclick="switchTab('preview')">Ad Preview</button>
                <button class="preview-tab" data-tab="csv" onclick="switchTab('csv')">CSV Preview</button>
            </div>
            <div class="preview-panel" id="previewPanel">
                <div class="fb-preview">
                    <div class="fb-header"><div class="fb-avatar"></div><div><div class="fb-page-name" id="previewPageName">Your Brand</div><div class="fb-sponsored">Sponsored · 🌐</div></div></div>
                    <div class="fb-body" id="previewBody">Your ad text will appear here.</div>
                    <div class="fb-image" id="previewImage"><div class="fb-image-placeholder"><svg style="width:48px;height:48px;color:#444;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div>
                    <div class="fb-link-bar"><div><div class="fb-display-link" id="previewDisplayLink">example.com</div><div class="fb-headline" id="previewHeadline">Your Headline</div><div class="fb-description" id="previewDescription">Your description</div></div><button class="fb-cta-btn" id="previewCTA">Learn More</button></div>
                </div>
            </div>
            <div class="csv-panel hidden" id="csvPanel">
                <div class="csv-empty" id="csvEmpty"><p style="color:var(--text-muted);font-size:13px;">Click <strong style="color:var(--amber);">Export CSV</strong> to generate</p></div>
                <div class="csv-content hidden" id="csvContent">
                    <div class="csv-toolbar"><span style="font-size:11px;color:var(--text-muted);" id="csvRowCount"></span><button class="btn-download" id="csvDownloadBtn" onclick="downloadCSV()">Download CSV</button></div>
                    <div class="csv-table-wrap" id="csvTableWrap"></div>
                </div>
            </div>
        </div>
    </main>
</div>

<script src="/static/js/app.js"></script>
{% endblock %}