{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Facebook Ad Analytics Dashboard</h1>
    
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Facebook Ads</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">View and analyze Facebook ads.</p>
                    <a href="#" class="btn btn-primary">View Ads</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">Google Ads</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Scrape and analyze Google ads.</p>
                    <a href="{{ url_for('google_ads.index') }}" class="btn btn-success">Google Ads</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">Compliance</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Generate compliance reports.</p>
                    <a href="#" class="btn btn-info">Compliance</a>
                </div>
            </div>
        </div>
    </div>

    <div class="filters mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Filter Ads</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-5">
                        <input type="text" class="form-control" name="query" placeholder="Search ads..." value="{{ query }}">
                    </div>
                    <div class="col-md-5">
                        <select class="form-select" name="sentiment">
                            <option value="">All Sentiments</option>
                            <option value="Positive" {% if sentiment_filter == "Positive" %}selected{% endif %}>Positive</option>
                            <option value="Negative" {% if sentiment_filter == "Negative" %}selected{% endif %}>Negative</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary w-100" onclick="applyFilters()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ads-list">
        {% for ad in ads.items %}
        <div class="card mb-3">
            <div class="card-body">
                <p class="card-text">{{ ad.content }}</p>
                <span class="badge {% if ad.sentiment == 'Positive' %}bg-success{% elif ad.sentiment == 'Negative' %}bg-danger{% else %}bg-secondary{% endif %}">
                    {{ ad.sentiment }}
                </span>
            </div>
        </div>
        {% endfor %}
    </div>

    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% for p in range(1, ads.pages + 1) %}
            <li class="page-item {% if p == ads.page %}active{% endif %}">
                <a class="page-link" href="?page={{ p }}&query={{ query }}&sentiment={{ sentiment_filter }}">{{ p }}</a>
            </li>
            {% endfor %}
        </ul>
    </nav>
</div>

<script>
    function applyFilters() {
        const query = document.querySelector('input[name="query"]').value;
        const sentiment = document.querySelector('select[name="sentiment"]').value;
        window.location.href = `?query=${query}&sentiment=${sentiment}`;
    }
</script>
{% endblock %}