{% extends "base_app.html" %}
{% set active_page = 'campaigns' %}
{% block title %}{{ campaign.name }} — TheNicheQuiz{% endblock %}

{% block body %}
<div class="app-page">
    <div class="page-header">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
            <a href="/app/campaigns" style="color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600;">← Back</a>
        </div>
        <h1 class="page-title">{{ campaign.name }}</h1>
        <div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">
            {% if campaign.industry %}
            <span class="badge badge-amber">{{ campaign.industry }}</span>
            {% endif %}
            {% if campaign.sub_niche %}
            <span class="badge badge-purple">{{ campaign.sub_niche }}</span>
            {% endif %}
            {% if campaign.micro_niche %}
            <span class="badge badge-amber">🎯 {{ campaign.micro_niche }}</span>
            {% endif %}
        </div>
        <p class="page-subtitle" style="margin-top: 8px;">
            Created {{ campaign.created_at.strftime('%B %d, %Y at %I:%M %p') if campaign.created_at else 'N/A' }}
        </p>
    </div>

    {% if campaign.campaign_data %}
    {% set data = campaign.campaign_data if campaign.campaign_data is mapping else {} %}
    {% set camps = data.get('campaigns', []) if data.get('campaigns') else [] %}

    {% if camps %}
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;">
        {% for c in camps %}
        <div class="card">
            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
                <span style="font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: rgba(139,92,246,0.1); color: var(--purple); border: 1px solid rgba(139,92,246,0.2);">#{{ loop.index }}</span>
                <h3 style="font-size: 15px; font-weight: 700;">{{ c.get('campaign_name', 'Campaign ' ~ loop.index) }}</h3>
            </div>
            {% if c.get('micro_niche') %}
            <div style="font-size: 12px; padding: 4px 10px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15); color: var(--amber); border-radius: 6px; display: inline-block; margin-bottom: 12px; font-weight: 600;">
                {{ c.micro_niche }}
            </div>
            {% endif %}
            {% if c.get('ad_copy') %}
            <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6;">
                {{ c.ad_copy.get('body', '')[:200] }}{% if c.ad_copy.get('body', '')|length > 200 %}...{% endif %}
            </div>
            {% if c.ad_copy.get('headline') %}
            <div style="font-size: 14px; font-weight: 700; margin-bottom: 8px;">{{ c.ad_copy.headline }}</div>
            {% endif %}
            {% endif %}
            {% if c.get('targeting') %}
            <div style="font-size: 11px; color: var(--text-muted); padding: 8px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; line-height: 1.5;">
                <strong style="color: var(--text-secondary);">🎯 Targeting:</strong>
                Ages {{ c.targeting.get('age_min', '?') }}-{{ c.targeting.get('age_max', '?') }} · {{ c.targeting.get('gender', 'All') }}<br>
                <strong>Interests:</strong> {{ c.targeting.get('interests', 'N/A') }}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card">
        <div style="text-align: center; padding: 40px; color: var(--text-muted);">
            Campaign data stored as JSON. View the raw data below.
        </div>
        <pre style="background: var(--bg-input); padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 12px; color: var(--text-secondary); max-height: 400px;">{{ data | tojson(indent=2) }}</pre>
    </div>
    {% endif %}
    {% else %}
    <div class="card">
        <div class="empty-state">
            <div class="empty-icon">📄</div>
            <div class="empty-title">No campaign data</div>
            <div class="empty-desc">This campaign doesn't have detailed data stored.</div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}
