{% extends "dashboard/layout.html" %}
{% block title %}{{ _('Billing & Invoices – Dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="space-y-6">

    <!-- Page header -->
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-billing">{{ _('Billing & Invoices') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _('View your subscription details and payment history') }}</p>
    </div>

    <!-- Current plan card -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
        <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-4">{{ _('Current Plan') }}</h2>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center shadow-md
                    {% if plan and plan.price_monthly > 0 %}bg-gradient-to-br from-indigo-500 to-purple-600{% else %}bg-gradient-to-br from-gray-400 to-gray-500{% endif %}">
                    <i class="fa {% if plan and plan.price_monthly > 0 %}fa-crown{% else %}fa-user{% endif %} text-white text-lg"></i>
                </div>
                <div>
                    <div class="font-bold text-gray-900 dark:text-white text-lg">{{ plan.name if plan else _('Free Plan') }}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        {% if plan and plan.price_monthly > 0 %}
                            ${{ '%.2f'|format(plan.price_monthly) }}/{{ _('month') }}
                            {% if user.get('subscription_status') %}
                            &middot; <span class="capitalize {% if user.subscription_status == 'active' %}text-green-600 dark:text-green-400{% else %}text-amber-600 dark:text-amber-400{% endif %}">{{ user.subscription_status }}</span>
                            {% endif %}
                        {% else %}
                            {{ _('Free forever') }}
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="flex gap-3 flex-wrap">
                {% if plan and plan.price_monthly == 0 %}
                <a href="{{ full_url('/pricing') }}" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 transition-all" data-testid="btn-upgrade">
                    <i class="fa fa-arrow-up mr-1"></i>{{ _('Upgrade Plan') }}
                </a>
                {% else %}
                <a href="{{ full_url('/pricing') }}" class="px-4 py-2 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                    {{ _('Change Plan') }}
                </a>
                {% if user.get('subscription_status') not in ('cancelled', 'canceled') %}
                <form method="POST" action="{{ full_url('/dashboard/billing/cancel') }}" id="cancel-form" data-testid="form-cancel-subscription"
                      data-confirm="{{ _('Cancel your subscription?') }}&#10;&#10;• {{ _('Your subscription will not renew') }}&#10;• {{ _('You will keep access until the end of your current billing period') }}&#10;• {{ _('You can re-subscribe at any time') }}">
                    <button type="submit" class="px-4 py-2 rounded-xl border border-red-300 dark:border-red-700 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" data-testid="btn-cancel-subscription">
                        <i class="fa fa-ban mr-1"></i>{{ _('Cancel Subscription') }}
                    </button>
                </form>
                {% endif %}
                {% endif %}
            </div>
        </div>

        {% if plan and plan.price_monthly > 0 %}
        <div class="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-4 pt-5 border-t border-gray-100 dark:border-gray-800">
            {% if user.get('subscription_expires_at') %}
            <div>
                <div class="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider font-semibold">{{ _('Next Billing Date') }}</div>
                <div class="mt-1 text-sm font-semibold text-gray-800 dark:text-gray-200">{{ user.subscription_expires_at[:10] if user.subscription_expires_at else '–' }}</div>
            </div>
            {% endif %}
            <div>
                <div class="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider font-semibold">{{ _('Auto-Renew') }}</div>
                <div class="mt-1 flex items-center gap-2">
                    {% set ar = user.get('auto_renew', 1) %}
                    <span class="text-sm font-semibold {% if ar %}text-green-600 dark:text-green-400{% else %}text-gray-400 dark:text-gray-500{% endif %}">
                        {{ _('On') if ar else _('Off') }}
                    </span>
                    <form method="POST" action="{{ full_url('/dashboard/billing/toggle-auto-renew') }}">
                        <input type="hidden" name="auto_renew" value="{{ '0' if ar else '1' }}">
                        <button type="submit"
                            class="text-xs px-2 py-0.5 rounded border font-medium transition
                                {% if ar %}border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20
                                {% else %}border-green-300 dark:border-green-700 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20{% endif %}"
                            onclick="return confirm('{{ _('Are you sure you want to turn auto-renew off? Your subscription will not renew after the current period.') if ar else _('Enable auto-renew? Your subscription will renew automatically.') }}')">
                            {{ _('Turn Off') if ar else _('Turn On') }}
                        </button>
                    </form>
                </div>
            </div>
            <div>
                <div class="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider font-semibold">{{ _('Status') }}</div>
                <div class="mt-1">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold
                        {% if user.get('subscription_status') == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% elif user.get('subscription_status') == 'cancelled' %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400
                        {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
                        <i class="fa fa-circle text-[6px] mr-1.5"></i>{{ user.get('subscription_status', 'free')|capitalize }}
                    </span>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Invoice history -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
            <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">{{ _('Invoice History') }}</h2>
            <div class="flex items-center gap-3">
                <span class="text-xs text-gray-400">{{ invoices|length }} {{ _('record(s)') }}</span>
                {% if invoices %}
                <a href="{{ full_url('/dashboard/billing/download/csv') }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-400 text-xs font-semibold transition-colors"
                   data-testid="btn-download-csv">
                    <i class="fa fa-download text-[10px]"></i> {{ _('Export CSV') }}
                </a>
                {% endif %}
            </div>
        </div>

        {% if invoices %}
        <div class="overflow-x-auto">
            <table class="w-full text-sm" data-testid="table-invoices">
                <thead>
                    <tr class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-100 dark:border-gray-800">
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Date') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Description') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Amount') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">{{ _('Method') }}</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Status') }}</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Invoice') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    {% for inv in invoices %}
                    {% set inv_amount = (inv.amount / 100) if inv.source == 'stripe' else inv.amount %}
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-invoice">
                        <td class="px-6 py-4 text-gray-600 dark:text-gray-400 whitespace-nowrap">
                            {{ inv.created_at[:10] if inv.created_at else '–' }}
                        </td>
                        <td class="px-6 py-4 text-gray-800 dark:text-gray-200">
                            {{ inv.description or _('Subscription payment') }}
                        </td>
                        <td class="px-6 py-4 font-semibold text-gray-900 dark:text-white whitespace-nowrap">
                            ${{ '%.2f'|format(inv_amount) }} <span class="text-xs text-gray-400 font-normal">{{ (inv.currency or 'USD')|upper }}</span>
                        </td>
                        <td class="px-6 py-4 text-gray-500 dark:text-gray-400 text-xs hidden sm:table-cell whitespace-nowrap">
                            {% if inv.source == 'stripe' %}
                            <span class="inline-flex items-center gap-1"><i class="fa fa-credit-card text-[10px]"></i> Online</span>
                            {% else %}
                            <span class="inline-flex items-center gap-1"><i class="fa fa-money-bill text-[10px]"></i> {{ inv.get('method', 'Manual')|title }}</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold
                                {% if inv.status == 'paid' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                                {% elif inv.status == 'failed' %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400
                                {% else %}bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400{% endif %}">
                                <i class="fa fa-circle text-[6px] mr-1.5"></i>{{ (inv.status or 'unknown')|capitalize }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="inline-flex items-center gap-2">
                                <a href="{{ full_url('/dashboard/billing/invoice/' ~ inv.source ~ '/' ~ inv.id) }}" target="_blank"
                                   class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium transition-colors"
                                   data-testid="link-view-invoice">
                                    <i class="fa fa-eye text-[10px]"></i> {{ _('View') }}
                                </a>
                                <a href="{{ full_url('/dashboard/billing/invoice/' ~ inv.source ~ '/' ~ inv.id ~ '/pdf') }}"
                                   class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-400 text-xs font-semibold transition-colors"
                                   data-testid="link-download-pdf">
                                    <i class="fa fa-file-pdf text-[10px]"></i> {{ _('PDF') }}
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="px-6 py-12 text-center" data-testid="state-no-invoices">
            <div class="w-14 h-14 mx-auto rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                <i class="fa fa-receipt text-2xl text-gray-300 dark:text-gray-600"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400 font-medium">{{ _('No invoices yet') }}</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ _('Your payment history will appear here after your first subscription payment.') }}</p>
            {% if plan and plan.price_monthly == 0 %}
            <a href="{{ full_url('/pricing') }}" class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 transition-all">
                <i class="fa fa-arrow-up"></i>{{ _('Upgrade to a paid plan') }}
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>

</div>
{% endblock %}