{% extends "base.html" %}

{% block title %}Reviews - {{ business.name }}{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ url_for('main.business_detail', business_id=business.id) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300">← Back to {{ business.name }}</a>
</div>

<h1 class="text-3xl font-bold text-[var(--text-primary)] mb-6">Reviews for {{ business.name }}</h1>

<!-- Filters -->
<div class="bg-[var(--bg-surface)] rounded-lg shadow-md border border-[var(--border)] p-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-sm text-[var(--text-muted)] mb-1">Source</label>
            <select name="source" id="filterSource" class="border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] rounded px-3 py-2">
                <option value="">All Sources</option>
                <option value="trustpilot" {{ 'selected' if request.args.get('source') == 'trustpilot' }}>TrustPilot</option>
                <option value="bbb" {{ 'selected' if request.args.get('source') == 'bbb' }}>BBB</option>
            </select>
        </div>
        <div>
            <label class="block text-sm text-[var(--text-muted)] mb-1">Sentiment</label>
            <select name="sentiment" id="filterSentiment" class="border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] rounded px-3 py-2">
                <option value="">All Sentiments</option>
                <option value="positive" {{ 'selected' if request.args.get('sentiment') == 'positive' }}>Positive</option>
                <option value="neutral" {{ 'selected' if request.args.get('sentiment') == 'neutral' }}>Neutral</option>
                <option value="negative" {{ 'selected' if request.args.get('sentiment') == 'negative' }}>Negative</option>
            </select>
        </div>
        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Filter</button>
        <button type="button" onclick="exportCSV()" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 flex items-center gap-2">
            <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>
    </form>
</div>

<script>
function exportCSV() {
    const source = document.getElementById('filterSource').value;
    const sentiment = document.getElementById('filterSentiment').value;
    let url = '/business/{{ business.id }}/export';
    const params = [];
    if (source) params.push('source=' + encodeURIComponent(source));
    if (sentiment) params.push('sentiment=' + encodeURIComponent(sentiment));
    if (params.length > 0) url += '?' + params.join('&');
    window.location.href = url;
}
</script>

<!-- Reviews List -->
<div class="space-y-4">
    {% for r in reviews %}
    <div class="bg-[var(--bg-surface)] rounded-lg shadow-md border border-[var(--border)] p-6">
        <div class="flex justify-between items-start mb-3">
            <div class="flex items-center space-x-3">
                <span class="font-semibold text-[var(--text-primary)]">{{ r.author_name or 'Anonymous' }}</span>
                <span class="text-yellow-500 text-lg">{{ '★' * (r.rating|int) }}{{ '☆' * (5 - r.rating|int) if r.rating else '' }}</span>
                <span class="px-2 py-1 text-sm rounded {% if r.sentiment_label == 'positive' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400{% elif r.sentiment_label == 'negative' %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400{% else %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400{% endif %}">
                    {{ r.sentiment_label or 'neutral' }} ({{ "%.2f"|format(r.sentiment_score) if r.sentiment_score else '0.00' }})
                </span>
            </div>
            {% if r.review_url %}
            <a href="{{ r.review_url }}" target="_blank" rel="noopener noreferrer"
               class="px-2 py-1 bg-[var(--bg-muted)] text-[var(--text-muted)] rounded text-sm hover:bg-[var(--border)] hover:text-[var(--text-secondary)] transition inline-flex items-center gap-1">
                {{ r.source }}
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
            </a>
            {% else %}
            <span class="px-2 py-1 bg-[var(--bg-muted)] text-[var(--text-muted)] rounded text-sm">{{ r.source }}</span>
            {% endif %}
        </div>
        <p class="text-[var(--text-secondary)] leading-relaxed">{{ r.text or 'No review text' }}</p>
        <p class="text-sm text-[var(--text-muted)] mt-3">{{ r.review_date or r.scraped_at.strftime('%Y-%m-%d') }}</p>
    </div>
    {% else %}
    <div class="bg-[var(--bg-surface)] rounded-lg shadow-md border border-[var(--border)] p-8 text-center">
        <p class="text-[var(--text-muted)]">No reviews found matching your filters.</p>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<div class="flex justify-center space-x-2 mt-6">
    {% for p in range(1, total_pages + 1) %}
    <a href="?page={{ p }}&source={{ request.args.get('source', '') }}&sentiment={{ request.args.get('sentiment', '') }}"
       class="px-3 py-1 rounded {{ 'bg-indigo-600 text-white' if p == page else 'bg-[var(--bg-muted)] text-[var(--text-secondary)] hover:bg-[var(--border)]' }}">
        {{ p }}
    </a>
    {% endfor %}
</div>
{% endif %}
{% endblock %}