{% extends "base.html" %}
{% block title %}{% trans %}Upgrade Your Plan – OnlineConvert{% endtrans %}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white" data-testid="heading-subscribe">{% trans %}Choose Your Plan{% endtrans %}</h1>
        <p class="mt-3 text-gray-500 dark:text-gray-400 max-w-xl mx-auto">{% trans %}Unlock more storage, faster conversions, and permanent file storage with a premium plan.{% endtrans %}</p>
    </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 %}

    <!-- Billing Period Toggle -->
    <div class="flex justify-center mb-8">
        <div class="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-xl p-1" data-testid="billing-toggle">
            <button type="button" id="toggle-monthly" onclick="setBillingPeriod(1)"
                class="px-5 py-2 rounded-lg text-sm font-semibold transition-all bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm"
                data-testid="btn-billing-monthly">
                {% trans %}Monthly{% endtrans %}
            </button>
            <button type="button" id="toggle-yearly" onclick="setBillingPeriod(12)"
                class="px-5 py-2 rounded-lg text-sm font-semibold transition-all flex items-center gap-2 text-gray-500 dark:text-gray-400"
                data-testid="btn-billing-yearly">
                {% trans %}Yearly{% endtrans %}
                <span class="px-2 py-0.5 rounded-md bg-green-500 text-white text-xs font-bold leading-none">
                    {% trans %}Save up to{% endtrans %} <span id="yearly-max-discount">20</span>%
                </span>
            </button>
        </div>
    </div>

    <!-- Plan Cards -->
    <div class="grid grid-cols-1 md:grid-cols-{{ plans|length }} gap-6">
        {% for plan in plans %}
        {% set plan_periods = plan_periods_map.get(plan.id, []) %}
        {% set yearly_period = plan_periods | selectattr('months', 'equalto', 12) | first %}
        {% set monthly_period = plan_periods | selectattr('months', 'equalto', 1) | first %}
        <div class="relative flex flex-col rounded-2xl border-2
            {% if loop.index == 2 %}border-primary dark:border-primary-light bg-white dark:bg-gray-900 shadow-xl shadow-primary/10
            {% else %}border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900{% endif %}
            p-6 shadow-lg"
            data-testid="card-plan-{{ plan.id }}"
            data-plan-id="{{ plan.id }}"
            data-monthly="{{ plan.price_monthly }}"
            data-yearly-discount="{{ yearly_period.discount_percent if yearly_period else 0 }}"
            data-monthly-period-id="{{ monthly_period.id if monthly_period else '' }}"
            data-yearly-period-id="{{ yearly_period.id if yearly_period else '' }}">
            {% if loop.index == 2 %}
            <div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
                <span class="inline-block px-3 py-1 rounded-full bg-primary text-white text-xs font-bold">{% trans %}Most Popular{% endtrans %}</span>
            </div>
            {% endif %}
            <div class="mb-5">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white" data-testid="text-plan-name-{{ plan.id }}">{{ plan.name }}</h2>
                <div class="mt-2 flex items-end gap-1">
                    <span class="text-3xl font-bold text-gray-900 dark:text-white plan-price" data-testid="text-plan-price-{{ plan.id }}"
                          data-monthly="{{ plan.price_monthly }}" data-discount="{{ yearly_period.discount_percent if yearly_period else 0 }}">
                        ${{ "%.2f"|format(plan.price_monthly) }}
                    </span>
                    <span class="text-gray-500 dark:text-gray-400 text-sm pb-0.5">{% trans %}/month{% endtrans %}</span>
                </div>
                <div class="plan-yearly-note text-xs text-green-600 dark:text-green-400 font-medium mt-1" style="display:none">
                    $<span class="plan-yearly-total"></span>{% trans pct=(yearly_period.discount_percent|int if yearly_period else 20) %}/year · Save {{ pct }}%{% endtrans %}
                </div>
                <div class="plan-monthly-note text-xs text-gray-400 dark:text-gray-500 mt-1">
                    {% trans %}Billed monthly{% endtrans %}
                </div>
            </div>
            <ul class="space-y-3 flex-1 mb-6">
                <li class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <i class="fa fa-check-circle text-green-500 flex-shrink-0"></i>
                    {% if plan.max_files_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_files_per_day }}{% endif %} {% trans %}files per day{% endtrans %}
                </li>
                <li class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <i class="fa fa-check-circle text-green-500 flex-shrink-0"></i>
                    {% if plan.max_file_size_mb == -1 %}{% trans %}Up to Unlimited per file{% endtrans %}{% else %}{% trans size=plan.max_file_size_mb|string + ' MB' %}Up to {{ size }} per file{% endtrans %}{% endif %}
                </li>
                <li class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    {% if plan.auto_delete_hours == 0 %}
                    <i class="fa fa-check-circle text-green-500 flex-shrink-0"></i>
                    {% trans %}Files never auto-deleted{% endtrans %}
                    {% else %}
                    <i class="fa fa-clock text-yellow-500 flex-shrink-0"></i>
                    {% trans h=plan.auto_delete_hours %}Files deleted after {{ h }}h{% endtrans %}
                    {% endif %}
                </li>
                <li class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <i class="fa fa-check-circle text-green-500 flex-shrink-0"></i>
                    {% trans %}No ads{% endtrans %}
                </li>
                <li class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <i class="fa fa-check-circle text-green-500 flex-shrink-0"></i>
                    {% if plan.max_conversions_stored == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_conversions_stored }}{% endif %} {% trans %}conversions in history{% endtrans %}
                </li>
            </ul>

            {% if user %}
            <a href="{{ full_url('/checkout/select/' ~ plan.id) }}"
               id="plan-btn-{{ plan.id }}"
               class="block w-full py-3 rounded-xl text-center {% if loop.index == 2 %}bg-primary hover:bg-primary/90{% else %}bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600{% endif %} text-white font-semibold text-sm transition-all"
               data-testid="btn-select-{{ plan.id }}">
                <i class="fa fa-credit-card mr-1"></i> {% trans %}Choose Plan{% endtrans %}
            </a>
            {% else %}
            <a href="{{ full_url('/register') }}?plan={{ plan.id }}"
               id="plan-btn-{{ plan.id }}"
               class="block w-full py-3 rounded-xl text-center {% if loop.index == 2 %}bg-primary hover:bg-primary/90{% else %}bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600{% endif %} text-white font-semibold text-sm transition-all"
               data-testid="btn-signup-{{ plan.id }}">
                {% trans %}Get Started{% endtrans %}
            </a>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-8">
        <i class="fa fa-lock mr-1"></i>{% trans %}Secure checkout{% endtrans %} &nbsp;·&nbsp; <i class="fa fa-rotate-left mr-1"></i>{% trans %}Cancel anytime{% endtrans %}
    </p>
</div>

<script>
(function() {
    var currentMonths = 1;
    var isLoggedIn = {{ 'true' if user else 'false' }};

    window.setBillingPeriod = function(months) {
        currentMonths = months;
        var btnMonthly = document.getElementById('toggle-monthly');
        var btnYearly = document.getElementById('toggle-yearly');
        var active = ['bg-white', 'dark:bg-gray-700', 'text-gray-900', 'dark:text-white', 'shadow-sm'];
        var inactive = ['text-gray-500', 'dark:text-gray-400'];

        if (months === 1) {
            active.forEach(function(c) { btnMonthly.classList.add(c); });
            inactive.forEach(function(c) { btnMonthly.classList.remove(c); });
            inactive.forEach(function(c) { btnYearly.classList.add(c); });
            active.forEach(function(c) { btnYearly.classList.remove(c); });
        } else {
            active.forEach(function(c) { btnYearly.classList.add(c); });
            inactive.forEach(function(c) { btnYearly.classList.remove(c); });
            inactive.forEach(function(c) { btnMonthly.classList.add(c); });
            active.forEach(function(c) { btnMonthly.classList.remove(c); });
        }

        document.querySelectorAll('.plan-price').forEach(function(el) {
            var monthly = parseFloat(el.getAttribute('data-monthly')) || 0;
            var discount = parseFloat(el.getAttribute('data-discount')) || 0;
            var card = el.closest('[data-plan-id]');
            var yearlyNote = card ? card.querySelector('.plan-yearly-note') : null;
            var monthlyNote = card ? card.querySelector('.plan-monthly-note') : null;
            var totalSpan = yearlyNote ? yearlyNote.querySelector('.plan-yearly-total') : null;
            var btn = card ? card.querySelector('[id^="plan-btn-"]') : null;
            var planId = card ? card.getAttribute('data-plan-id') : null;
            var monthlyPeriodId = card ? card.getAttribute('data-monthly-period-id') : null;
            var yearlyPeriodId = card ? card.getAttribute('data-yearly-period-id') : null;

            if (months === 12 && monthly > 0) {
                var yearlyTotal = Math.round(monthly * 12 * (1 - discount / 100) * 100) / 100;
                var perMonth = Math.round(yearlyTotal / 12 * 100) / 100;
                el.textContent = '$' + perMonth.toFixed(2);
                if (totalSpan) totalSpan.textContent = yearlyTotal.toFixed(2);
                if (yearlyNote) yearlyNote.style.display = '';
                if (monthlyNote) monthlyNote.style.display = 'none';
                if (btn && planId) {
                    var periodId = yearlyPeriodId || '';
                    if (isLoggedIn) {
                        btn.href = '{{ full_url("/checkout/select/") }}' + planId + (periodId ? '?period=' + periodId : '');
                    } else {
                        btn.href = '{{ full_url("/register") }}?plan=' + planId + '&months=12';
                    }
                }
            } else {
                el.textContent = '$' + monthly.toFixed(2);
                if (yearlyNote) yearlyNote.style.display = 'none';
                if (monthlyNote) monthlyNote.style.display = '';
                if (btn && planId) {
                    var periodId = monthlyPeriodId || '';
                    if (isLoggedIn) {
                        btn.href = '{{ full_url("/checkout/select/") }}' + planId + (periodId ? '?period=' + periodId : '');
                    } else {
                        btn.href = '{{ full_url("/register") }}?plan=' + planId + '&months=1';
                    }
                }
            }
        });
    };
})();
</script>
{% endblock %}