{% extends "settings/layout.html.twig" %}
{% trans_default_domain "Settings" %}

{% block stylesheets %}
    {{ parent() }}
    <style>
    .sub-badge {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 13px;
    }
    .sub-badge.active { background: #d1fae5; color: #059669; }
    .sub-badge.trial { background: #fef3c7; color: #d97706; }
    .sub-badge.inactive { background: #f3f4f6; color: #6b7280; }
    .sub-badge.gold { background: #fef3c7; color: #92400e; }
    .tier-label {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 12px;
        text-transform: capitalize;
    }
    .tier-label.trial { background: #fef3c7; color: #92400e; }
    .tier-label.starter { background: #dbeafe; color: #1d4ed8; }
    .tier-label.researcher { background: #ede9fe; color: #7c3aed; }
    .tier-label.professional { background: #fce7f3; color: #be185d; }
    .tier-label.institution { background: #cffafe; color: #0891b2; }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label { color: var(--text-muted); font-size: 14px; }
    .info-value { font-weight: 600; color: var(--text-color); font-size: 14px; }

    .credits-bar {
        background: #e5e7eb;
        border-radius: 8px;
        height: 10px;
        overflow: hidden;
        margin: 8px 0;
    }
    .credits-bar-fill {
        height: 100%;
        border-radius: 8px;
        background: linear-gradient(90deg, var(--primary-color), #3b82f6);
        transition: width 0.3s;
    }
    .credits-big {
        font-size: 2.2em;
        font-weight: 700;
        color: var(--primary-color);
    }
    .credits-total {
        color: var(--text-muted);
        font-size: 14px;
    }

    .usage-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    .usage-table th, .usage-table td {
        padding: 10px 12px;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
    }
    html[dir="ltr"] .usage-table th, html[dir="ltr"] .usage-table td {
        text-align: left;
    }
    .usage-table th {
        background: var(--bg-light);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 12px;
        text-transform: uppercase;
    }

    .btn-upgrade {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #8b5cf6, #6366f1);
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.3); color: white; text-decoration: none; }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-muted);
    }
    .empty-state i { font-size: 3em; margin-bottom: 12px; display: block; color: #d1d5db; }
    .empty-state p { margin-bottom: 16px; }
    </style>
{% endblock %}

{% block settings_content %}
    {# AI Playground Subscription #}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'subscription.ai_playground'|trans }}</h3>

        {% if playgroundSub %}
            {% set isTrial = playgroundSub.tier == 'trial' %}
            {% set usedCredits = playgroundSub.usedCredits %}
            {% set totalCredits = playgroundSub.monthlyCredits + playgroundSub.bonusCredits %}
            {% set remaining = totalCredits - usedCredits %}
            {% set pct = totalCredits > 0 ? ((remaining / totalCredits) * 100) : 0 %}

            <div class="info-row">
                <span class="info-label">{{ 'subscription.status'|trans }}</span>
                <span class="sub-badge {{ isTrial ? 'trial' : 'active' }}">
                    {{ isTrial ? 'subscription.trial'|trans : 'subscription.active'|trans }}
                </span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ 'subscription.plan'|trans }}</span>
                <span class="tier-label {{ playgroundSub.tier }}">{{ playgroundSub.tier|capitalize }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">{{ 'subscription.valid_until'|trans }}</span>
                <span class="info-value">
                    {% if playgroundSub.subscriptionEnd %}
                        {{ playgroundSub.subscriptionEnd|date('Y/m/d') }}
                    {% else %}
                        {{ 'subscription.unlimited'|trans }}
                    {% endif %}
                </span>
            </div>

            {# Credits display #}
            <div style="text-align: center; padding: 20px 0;">
                <span class="credits-big">{{ remaining }}</span>
                <span class="credits-total">/ {{ totalCredits }} {{ 'subscription.credits'|trans }}</span>
                <div class="credits-bar">
                    <div class="credits-bar-fill" style="width: {{ pct > 100 ? 100 : pct }}%"></div>
                </div>
            </div>

            {# Usage stats #}
            {% if usageStats and usageStats|length > 0 %}
            <h4 style="font-size: 14px; color: var(--text-muted); margin: 16px 0 8px;">{{ 'subscription.monthly_usage'|trans }}</h4>
            <table class="usage-table">
                <thead>
                    <tr>
                        <th>{{ 'subscription.action'|trans }}</th>
                        <th>{{ 'subscription.count'|trans }}</th>
                        <th>{{ 'subscription.tokens'|trans }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in usageStats %}
                    <tr>
                        <td>{{ stat.action }}</td>
                        <td>{{ stat.count }}</td>
                        <td>{{ (stat.inputTokens + stat.outputTokens)|number_format(0, '.', ',') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}

            <div style="margin-top: 20px;">
                <a href="{{ path('shamra_academia_subscription') }}" class="btn-upgrade">
                    <i class="fa fa-rocket"></i> {{ 'subscription.upgrade'|trans }}
                </a>
            </div>

        {% else %}
            <div class="empty-state">
                <i class="fa fa-magic"></i>
                <p>{{ 'subscription.no_ai_subscription'|trans }}</p>
                <a href="{{ path('shamra_academia_subscription') }}" class="btn-upgrade">
                    <i class="fa fa-rocket"></i> {{ 'subscription.get_started'|trans }}
                </a>
            </div>
        {% endif %}
    </div>

    {# Academic Subscription (legacy gold) #}
    {% if subscribed %}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'subscription.academic'|trans }}</h3>
        <div class="info-row">
            <span class="info-label">{{ 'subscription.status'|trans }}</span>
            <span class="sub-badge gold">
                <i class="fa fa-star"></i> {{ 'subscription.gold_member'|trans }}
            </span>
        </div>
        {% if endSubscribeDate %}
        <div class="info-row">
            <span class="info-label">{{ 'subscription.valid_until'|trans }}</span>
            <span class="info-value">{{ endSubscribeDate|date('Y/m/d') }}</span>
        </div>
        {% endif %}
        {% if canceled %}
        <div class="info-row">
            <span class="info-label">{{ 'subscription.status'|trans }}</span>
            <span class="sub-badge inactive">{{ 'subscription.canceled'|trans }}</span>
        </div>
        {% endif %}
    </div>
    {% endif %}
{% endblock %}