{% extends 'base.html' %}

{% block title %}Upgrade — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
        body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; }
       .container { max-width: 960px; margin: 0 auto; padding: 20px; }
        nav { background: #1a1a2e; color: white; }
       .card { background: white; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .btn { display: inline-block; padding: 8px 16px; background: #1a1a2e; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; }
        .btn:hover { background: #2d2d44; }
        .btn-outline { background: transparent; border: 1px solid #1a1a2e; color: #1a1a2e; }
        .btn-sm { padding: 4px 10px; font-size: 12px; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .badge { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 12px; font-size: 12px; }
        .badge-free { background: #e9ecef; color: #333; }
        .badge-starter { background: #dbeafe; color: #1e40af; }
        .badge-pro { background: #fef3c7; color: #92400e; }
        .badge-teams { background: #d1fae5; color: #065f46; }
        .badge-teams_plus { background: #ede9fe; color: #5b21b6; }
        .success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
        .error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
        .pricing { display: flex; gap: 20px; margin-top: 20px; }
        .pricing-card { flex: 1; background: white; border: 2px solid #e9ecef; border-radius: 8px; padding: 24px; text-align: center; }
        .pricing-card.current { border-color: #1a1a2e; position: relative; }
        .pricing-card.current::before { content: 'Current Plan'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: white; padding: 2px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; }
        .pricing-card.popular { border-color: #ffc107; }
        .pricing-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
        .pricing-price { font-size: 36px; font-weight: 700; margin: 16px 0; }
        .pricing-price span { font-size: 14px; color: #888; font-weight: 400; }
        .pricing-features { list-style: none; text-align: left; margin: 16px 0; }
        .pricing-features li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
        .pricing-features li:last-child { border: none; }
        .pricing-features li::before { content: '✓'; margin-right: 8px; color: #28a745; }
        .unlimited::before { content: '∞'; }
        .no-stripe { background: #fff3cd; color: #856404; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0; }
        @media (max-width: 640px) {
            .pricing { flex-direction: column; }
            .container { padding: 12px; }
            .pricing-price { font-size: 28px; }
            .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
        }
    </style>
{% endblock %}

{% block content %}
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        <div class="card">
            <h2 style="margin-bottom:8px;">Upgrade Your Plan</h2>
            <p style="color:#666; font-size:14px;">You're currently on the <strong>{{ user.tier }}</strong> tier. Upgrade for more forms and higher submission limits.</p>

            {% if not stripe_configured %}
            <div class="no-stripe">
                <p>Stripe integration is not configured yet. Check back soon!</p>
            </div>
            {% else %}
            <div class="pricing">
                {% for tier in tiers %}
                <div class="pricing-card {% if tier.is_current %}current{% endif %}">
                    <div class="pricing-name">{{ tier.name }}</div>
                    <div class="pricing-price">
                        {% if tier.price == 0 %}Free{% else %}${{ tier.price }}<span>/mo</span>{% endif %}
                    </div>
                    <ul class="pricing-features">
                        {% if tier.max_sites == 0 %}
                        <li class="unlimited">Unlimited forms</li>
                        {% else %}
                        <li>{{ tier.max_sites }} forms</li>
                        {% endif %}
                        <li>{{ tier.max_submissions }} submissions/mo</li>
                        {% if tier.key in ('teams', 'teams_plus') %}
                        {% if tier.max_members == 0 %}
                        <li class="unlimited">Unlimited members</li>
                        {% else %}
                        <li>{{ tier.max_members }} members</li>
                        {% endif %}
                        <li>Role-based access control</li>
                        <li>Team analytics</li>
                        {% if tier.key == 'teams_plus' %}
                        <li>SSO & advanced security</li>
                        {% endif %}
                        {% else %}
                        <li>Email notifications</li>
                        {% endif %}
                    </ul>
                    {% if tier.is_current %}
                        <button class="btn btn-outline" disabled>Current Plan</button>
                    {% elif tier.can_upgrade %}
                        <form method="POST" action="{{ url_for('billing.create_checkout') }}" style="margin-top:8px;">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
                            <input type="hidden" name="tier" value="{{ tier.key }}">
                            <button type="submit" class="btn">Upgrade</button>
                        </form>
                    {% else %}
                        <button class="btn btn-outline" disabled>Coming Soon</button>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}