{% extends "admin/layout.html" %}
{% block title %}Blog Posts – Admin{% endblock %}
{% block body %}
<div class="flex items-center justify-between mb-6">
    <div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Blog Posts{% endtrans %}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Manage all blog posts — admin-created and user submissions.{% endtrans %}</p>
    </div>
    <a class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm transition-all shadow-lg shadow-primary/20" href="{{ full_url('/admin/blogs/new') }}" data-testid="link-create-blog">
        <i class="fa fa-plus"></i> {% trans %}Create Blog{% endtrans %}
    </a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Pending User Submissions Section -->
{% set pending_blogs = blogs | selectattr('status', 'eq', 'pending_review') | list %}
{% if pending_blogs %}
<div class="mb-6 rounded-xl border-2 border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20 overflow-hidden">
    <div class="px-5 py-3 border-b border-yellow-200 dark:border-yellow-800 flex items-center gap-2">
        <i class="fa fa-bell text-yellow-500 animate-pulse"></i>
        <span class="font-bold text-yellow-800 dark:text-yellow-300">{{ pending_blogs|length }} {% trans %}Post(s) Pending Review{% endtrans %}</span>
    </div>
    <div class="divide-y divide-yellow-200 dark:divide-yellow-800">
        {% for blog in pending_blogs %}
        <div class="p-5" data-testid="card-pending-blog-{{ blog.rowid }}">
            <div class="flex flex-col sm:flex-row sm:items-start gap-4">
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <h4 class="font-bold text-gray-900 dark:text-white" data-testid="text-pending-title-{{ blog.rowid }}">{{ blog.title or 'Untitled' }}</h4>
                        <span class="px-2 py-0.5 rounded-full text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-300 font-semibold">{% trans %}User Submission{% endtrans %}</span>
                    </div>
                    {% if blog.summary %}<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2">{{ blog.summary }}</p>{% endif %}
                    <div class="text-xs text-gray-400">{% trans %}Submitted{% endtrans %} {{ blog.created_at[:10] if blog.created_at else '' }}</div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <a href="{{ full_url('/admin/blogs/' ~ blog.rowid) }}" class="px-3 py-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-medium hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-all" data-testid="btn-preview-{{ blog.rowid }}">
                            <i class="fa fa-eye mr-1"></i> {% trans %}Preview / Edit{% endtrans %}
                        </a>
                    </div>
                </div>
                <!-- Approve / Reject actions -->
                <div class="flex-shrink-0 space-y-2 min-w-[220px]">
                    <!-- Approve form -->
                    <div class="rounded-xl border border-green-200 dark:border-green-800 bg-white dark:bg-gray-900 p-3">
                        <form method="POST" action="{{ full_url('/admin/blogs/' ~ blog.rowid ~ '/approve') }}" class="space-y-2">
                            <div class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1"><i class="fa fa-check-circle text-green-500 mr-1"></i>{% trans %}Approve{% endtrans %}</div>
                            <div class="flex items-center gap-2">
                                <div class="relative flex-1">
                                    <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs">$</span>
                                    <input type="number" name="publish_fee" min="0" step="0.01" placeholder="0.00"
                                        class="w-full pl-6 pr-2 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white text-xs" data-testid="input-fee-{{ blog.rowid }}">
                                </div>
                                <span class="text-xs text-gray-400">{% trans %}fee{% endtrans %}</span>
                            </div>
                            <input type="text" name="admin_note" placeholder="{% trans %}Optional note to user...{% endtrans %}"
                                class="w-full px-2.5 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white text-xs" data-testid="input-approve-note-{{ blog.rowid }}">
                            <button type="submit" class="w-full py-2 rounded-lg bg-green-500 hover:bg-green-600 text-white text-xs font-bold transition-all" data-testid="btn-approve-{{ blog.rowid }}">
                                <i class="fa fa-check mr-1"></i>{% trans %}Approve{% endtrans %}
                            </button>
                        </form>
                    </div>
                    <!-- Reject form -->
                    <div class="rounded-xl border border-red-200 dark:border-red-800 bg-white dark:bg-gray-900 p-3">
                        <form method="POST" action="{{ full_url('/admin/blogs/' ~ blog.rowid ~ '/reject') }}" class="space-y-2">
                            <div class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1"><i class="fa fa-times-circle text-red-500 mr-1"></i>{% trans %}Reject{% endtrans %}</div>
                            <input type="text" name="admin_note" placeholder="{% trans %}Reason for rejection (required)...{% endtrans %}" required
                                class="w-full px-2.5 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white text-xs" data-testid="input-reject-note-{{ blog.rowid }}">
                            <button type="submit" class="w-full py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white text-xs font-bold transition-all" data-testid="btn-reject-{{ blog.rowid }}">
                                <i class="fa fa-times mr-1"></i>{% trans %}Reject{% endtrans %}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Pending Payment / Manual Payment Requested Section -->
{% set pay_pending_blogs = blogs | selectattr('status', 'in', ['pending_payment']) | list %}
{% set manual_pending_blogs = blogs | selectattr('payment_status', 'eq', 'pending_manual') | list %}
{% if pay_pending_blogs or manual_pending_blogs %}
<div class="mb-6 rounded-xl border border-orange-200 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/20 overflow-hidden">
    <div class="px-5 py-3 border-b border-orange-200 dark:border-orange-700 flex items-center gap-2">
        <i class="fa fa-credit-card text-orange-500"></i>
        <span class="font-bold text-orange-800 dark:text-orange-300">{{ (pay_pending_blogs|length + manual_pending_blogs|length) }} {% trans %}Post(s) Awaiting Payment{% endtrans %}</span>
    </div>
    <div class="divide-y divide-orange-100 dark:divide-orange-800">
        {% for blog in pay_pending_blogs %}
        <div class="px-5 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3" data-testid="card-pay-pending-{{ blog.rowid }}">
            <div class="min-w-0">
                <div class="font-medium text-gray-900 dark:text-white">{{ blog.title }}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    {% trans %}Fee:{% endtrans %} <strong class="text-orange-600 dark:text-orange-400">${{ '%.2f'|format(blog.publish_fee) }}</strong>
                    {% if blog.payment_status == 'pending_manual' %}
                    · <span class="text-blue-600 dark:text-blue-400 font-semibold"><i class="fa fa-clock mr-0.5"></i>{% trans %}Manual payment requested by user{% endtrans %}</span>
                    {% else %}
                    · <span class="text-gray-400">{% trans %}Awaiting online payment{% endtrans %}</span>
                    {% endif %}
                </div>
            </div>
            <div class="flex gap-2 flex-shrink-0 flex-wrap">
                <a href="{{ full_url('/admin/blogs/' ~ blog.rowid) }}" class="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">{% trans %}Edit{% endtrans %}</a>
                <button type="button" onclick="document.getElementById('mark-paid-modal-{{ blog.rowid }}').classList.remove('hidden')"
                    class="px-3 py-1.5 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-bold hover:bg-green-200 dark:hover:bg-green-900/50 transition-all" data-testid="btn-mark-paid-{{ blog.rowid }}">
                    <i class="fa fa-check mr-1"></i>{% trans %}Mark as Paid{% endtrans %}
                </button>
            </div>
        </div>
        <!-- Mark as Paid Modal -->
        <div id="mark-paid-modal-{{ blog.rowid }}" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 p-6 w-full max-w-md mx-4">
                <h3 class="font-bold text-gray-900 dark:text-white mb-1">{% trans %}Mark Blog as Manually Paid{% endtrans %}</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{% trans %}This will publish the post and record a manual payment of{% endtrans %} <strong class="text-gray-800 dark:text-gray-200">${{ '%.2f'|format(blog.publish_fee) }}</strong>.</p>
                <form method="POST" action="{{ full_url('/admin/blogs/' ~ blog.rowid ~ '/mark-paid') }}" class="space-y-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">{% trans %}Payment Method{% endtrans %}</label>
                        <select name="method" class="w-full px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-pay-method-{{ blog.rowid }}">
                            <option value="cash">{% trans %}Cash{% endtrans %}</option>
                            <option value="bank_transfer">{% trans %}Bank Transfer{% endtrans %}</option>
                            <option value="crypto">{% trans %}Cryptocurrency{% endtrans %}</option>
                            <option value="check">{% trans %}Check{% endtrans %}</option>
                            <option value="other">{% trans %}Other{% endtrans %}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1">{% trans %}Notes (optional){% endtrans %}</label>
                        <input type="text" name="notes" placeholder="{% trans %}Reference, transaction ID, etc.{% endtrans %}"
                            class="w-full px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-pay-notes-{{ blog.rowid }}">
                    </div>
                    <div class="flex gap-3 pt-2">
                        <button type="submit" class="flex-1 py-2.5 rounded-xl bg-green-500 hover:bg-green-600 text-white font-bold text-sm transition-all" data-testid="btn-confirm-mark-paid-{{ blog.rowid }}">
                            <i class="fa fa-check mr-1"></i>{% trans %}Confirm & Publish{% endtrans %}
                        </button>
                        <button type="button" onclick="document.getElementById('mark-paid-modal-{{ blog.rowid }}').classList.add('hidden')"
                            class="flex-1 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                            {% trans %}Cancel{% endtrans %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Tab-like filter -->
<div class="flex gap-2 mb-5 flex-wrap">
    {% for label, val in [(_('All'), 'all'), (_('Published'), 'published'), (_('Rejected'), 'rejected'), (_('Draft'), 'draft')] %}
    <a href="?filter={{ val }}" class="px-3 py-1.5 rounded-full text-xs font-semibold transition-all
        {% if (request.args.get('filter','all') == val) %}bg-primary text-white{% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700{% endif %}">
        {{ label }}
    </a>
    {% endfor %}
</div>

<!-- All Blogs List -->
{% set filter_val = request.args.get('filter', 'all') %}
{% set visible_blogs = blogs | rejectattr('status', 'eq', 'pending_review') | list %}
{% if filter_val != 'all' %}
{% set visible_blogs = visible_blogs | selectattr('status', 'eq', filter_val) | list %}
{% endif %}

<div class="space-y-3">
    {% for blog in visible_blogs %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 transition-all hover:shadow-md" data-testid="card-blog-{{ blog.rowid }}">
        <div class="flex items-center gap-4">
            {% if blog.image %}
            <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
                <img src="/static/blogs/{{ blog.image }}" alt="" class="w-full h-full object-cover">
            </div>
            {% else %}
            <div class="w-16 h-16 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-blog text-primary text-xl"></i>
            </div>
            {% endif %}
            <div class="flex-1 min-w-0">
                <div class="flex flex-wrap items-center gap-2 mb-0.5">
                    <h4 class="font-semibold text-gray-900 dark:text-white text-sm truncate">{{ blog.title or 'Untitled' }}</h4>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold
                        {% if blog.status == 'published' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% elif blog.status == 'pending_payment' %}bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400
                        {% elif blog.status == 'rejected' %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400
                        {% else %}bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400{% endif %}">
                        {{ blog.status|title|replace('_', ' ') }}
                    </span>
                    {% if blog.author_user_id %}
                    <span class="px-2 py-0.5 rounded-full text-[10px] bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">{% trans %}User Post{% endtrans %}</span>
                    {% endif %}
                </div>
                {% if blog.summary %}
                <div class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ blog.summary }}</div>
                {% endif %}
                {% if blog.status == 'published' %}
                <a href="{{ full_url('/blogs/' ~ blog.slug) }}" target="_blank" class="text-xs text-primary dark:text-primary-light hover:underline mt-0.5 inline-block">
                    <i class="fa fa-external-link-alt mr-0.5"></i>/blogs/{{ blog.slug }}
                </a>
                {% endif %}
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                <a href="{{ full_url('/admin/blogs/' ~ blog.rowid) }}" class="px-3 py-1.5 rounded-lg text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all" data-testid="btn-edit-blog-{{ blog.rowid }}">{% trans %}Edit{% endtrans %}</a>
                <a href="{{ full_url('/admin/blogs/remove/' ~ blog.rowid) }}" onclick="return confirm('Delete this blog post?')" class="px-3 py-1.5 rounded-lg text-xs font-medium bg-red-50 dark:bg-red-900/20 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="btn-delete-blog-{{ blog.rowid }}">{% trans %}Delete{% endtrans %}</a>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if not visible_blogs %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-12 text-center">
        <i class="fa fa-blog text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}No blog posts found.{% endtrans %}</p>
    </div>
    {% endif %}
</div>
{% endblock %}