{% extends "Profile/show/layout.html.twig" %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .playground-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            padding: 24px;
            margin-bottom: 24px;
        }
        .playground-card h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            font-size: 1.3em;
            border-bottom: 2px solid #3b82f6;
            padding-bottom: 10px;
        }
        .subscription-badge {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9em;
        }
        .subscription-badge.active {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
        }
        .subscription-badge.inactive {
            background: #f3f4f6;
            color: #6b7280;
        }
        .tier-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.85em;
            text-transform: capitalize;
        }
        .tier-badge.basic { background: #e5e7eb; color: #374151; }
        .tier-badge.starter { background: #dbeafe; color: #1d4ed8; }
        .tier-badge.researcher { background: #fef3c7; color: #92400e; }
        .tier-badge.trial { background: #f0fdf4; color: #15803d; }
        
        .subscription-badge.trial {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
        }
        
        .trial-banner {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border: 1px solid #f59e0b;
            border-radius: 10px;
            padding: 16px 20px;
            margin: 16px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .trial-banner i {
            color: #d97706;
            font-size: 1.3em;
            margin-top: 2px;
        }
        .trial-banner-text {
            flex: 1;
        }
        .trial-banner-text strong {
            color: #92400e;
            display: block;
            margin-bottom: 4px;
        }
        .trial-banner-text span {
            color: #78350f;
            font-size: 0.9em;
        }
        
        .credits-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border-radius: 12px;
            margin: 20px 0;
        }
        .credits-number {
            font-size: 3em;
            font-weight: 700;
            color: #0369a1;
        }
        .credits-label {
            color: #64748b;
            font-size: 0.95em;
        }
        .credits-total {
            color: #94a3b8;
            font-size: 0.85em;
        }
        
        .progress-bar-container {
            background: #e5e7eb;
            border-radius: 8px;
            height: 12px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            border-radius: 8px;
            transition: width 0.3s ease;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        .info-row:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #64748b;
        }
        .info-value {
            font-weight: 600;
            color: #1f2937;
        }
        
        .usage-table {
            width: 100%;
            border-collapse: collapse;
        }
        .usage-table th, .usage-table td {
            padding: 12px;
            text-align: right;
            border-bottom: 1px solid #f3f4f6;
        }
        .usage-table th {
            background: #f9fafb;
            font-weight: 600;
            color: #374151;
        }
        .usage-table tr:hover {
            background: #f9fafb;
        }
        
        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        .btn-upgrade {
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-upgrade:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
            color: white;
            text-decoration: none;
        }
        .btn-cancel {
            background: white;
            color: #ef4444;
            border: 2px solid #ef4444;
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-cancel:hover {
            background: #fef2f2;
        }
        .btn-subscribe {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1.1em;
            text-decoration: none;
            display: inline-block;
        }
        .btn-subscribe:hover {
            color: white;
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }
        
        .no-subscription {
            text-align: center;
            padding: 40px 20px;
        }
        .no-subscription-icon {
            font-size: 4em;
            color: #d1d5db;
            margin-bottom: 20px;
        }
        .no-subscription h4 {
            color: #374151;
            margin-bottom: 10px;
        }
        .no-subscription p {
            color: #6b7280;
            margin-bottom: 24px;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }
        .feature-list li {
            padding: 8px 0;
            color: #4b5563;
        }
        .feature-list li i {
            color: #10b981;
            margin-left: 8px;
        }
    </style>
{% endblock %}

{% block page %}
    {% if app.user is not null and app.user == user %}
        {% if not user.isVerified %}
            {% include "Profile/confim_email_notification.html.twig" %}
        {% endif %}
    {% endif %}

    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            
            {% if subscription %}
                {# User has active subscription #}
                {% set isTrial = subscription.tier == 'trial' %}
                
                <div class="playground-card">
                    <h3><i class="fa fa-magic"></i> {{ 'profile.playground_subscription'|trans({}, 'FOSUserBundle') }}</h3>
                    
                    <div class="info-row">
                        <span class="info-label">{{ 'profile.status'|trans({}, 'FOSUserBundle') }}</span>
                        <span>
                            {% if isTrial %}
                                <span class="subscription-badge trial">
                                    <i class="fa fa-gift"></i> {{ 'profile.free_trial'|trans({}, 'FOSUserBundle') }}
                                </span>
                            {% else %}
                                <span class="subscription-badge active">
                                    <i class="fa fa-check-circle"></i> {{ 'profile.active'|trans({}, 'FOSUserBundle') }}
                                </span>
                            {% endif %}
                        </span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">{{ 'profile.plan'|trans({}, 'FOSUserBundle') }}</span>
                        <span class="tier-badge {{ subscription.tier }}">
                            {% if isTrial %}
                                {{ 'profile.free_trial'|trans({}, 'FOSUserBundle') }}
                            {% else %}
                                {{ subscription.tier }}
                            {% endif %}
                        </span>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">{{ isTrial ? 'profile.trial_expires'|trans({}, 'FOSUserBundle') : 'profile.valid_until'|trans({}, 'FOSUserBundle') }}</span>
                        <span class="info-value">
                            {% if subscription.subscriptionEnd %}
                                {{ subscription.subscriptionEnd|date('Y/m/d') }}
                            {% else %}
                                {{ 'profile.unlimited'|trans({}, 'FOSUserBundle') }}
                            {% endif %}
                        </span>
                    </div>
                    
                    {% if isTrial %}
                    <div class="trial-banner">
                        <i class="fa fa-info-circle"></i>
                        <div class="trial-banner-text">
                            <strong>{{ 'profile.trial_notice_title'|trans({}, 'FOSUserBundle') }}</strong>
                            <span>{{ 'profile.trial_notice_desc'|trans({}, 'FOSUserBundle') }}</span>
                        </div>
                    </div>
                    {% endif %}
                </div>
                
                {# Credits Display #}
                <div class="playground-card">
                    <h3><i class="fa fa-bolt"></i> {{ 'profile.ai_credits'|trans({}, 'FOSUserBundle') }}</h3>
                    
                    {% set remaining = subscription.monthlyCredits - subscription.usedCredits %}
                    {% set percentage = subscription.monthlyCredits > 0 ? ((remaining / subscription.monthlyCredits) * 100) : 0 %}
                    
                    <div class="credits-display">
                        <div style="text-align: center;">
                            <div class="credits-number">{{ remaining }}</div>
                            <div class="credits-label">{{ 'profile.credits_remaining'|trans({}, 'FOSUserBundle') }}</div>
                            <div class="credits-total">{{ 'profile.of_total'|trans({'%total%': subscription.monthlyCredits}, 'FOSUserBundle') }}</div>
                        </div>
                    </div>
                    
                    <div class="progress-bar-container">
                        <div class="progress-bar-fill" style="width: {{ percentage }}%"></div>
                    </div>
                    
                    <div class="info-row">
                        <span class="info-label">{{ isTrial ? 'profile.used_credits'|trans({}, 'FOSUserBundle') : 'profile.used_this_month'|trans({}, 'FOSUserBundle') }}</span>
                        <span class="info-value">{{ subscription.usedCredits }} {{ 'profile.credits'|trans({}, 'FOSUserBundle') }}</span>
                    </div>
                    
                    {% if subscription.bonusCredits > 0 %}
                    <div class="info-row">
                        <span class="info-label">{{ 'profile.bonus_credits'|trans({}, 'FOSUserBundle') }}</span>
                        <span class="info-value">{{ subscription.bonusCredits }} {{ 'profile.credits'|trans({}, 'FOSUserBundle') }}</span>
                    </div>
                    {% endif %}
                    
                    {% if not isTrial and subscription.creditsResetDate %}
                    <div class="info-row">
                        <span class="info-label">{{ 'profile.next_reset'|trans({}, 'FOSUserBundle') }}</span>
                        <span class="info-value">{{ subscription.creditsResetDate|date('Y/m/d') }}</span>
                    </div>
                    {% endif %}
                </div>
                
                {# Usage Stats #}
                {% if usageStats and usageStats|length > 0 %}
                <div class="playground-card">
                    <h3><i class="fa fa-bar-chart"></i> {{ 'profile.usage_this_month'|trans({}, 'FOSUserBundle') }}</h3>
                    
                    <table class="usage-table">
                        <thead>
                            <tr>
                                <th>{{ 'profile.action'|trans({}, 'FOSUserBundle') }}</th>
                                <th>{{ 'profile.count'|trans({}, 'FOSUserBundle') }}</th>
                                <th>{{ 'profile.tokens'|trans({}, 'FOSUserBundle') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in usageStats %}
                            <tr>
                                <td>{{ stat.action }}</td>
                                <td>{{ stat.count }}</td>
                                <td>{{ (stat.inputTokens + stat.outputTokens)|number_format }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
                
                {# Action Buttons #}
                <div class="playground-card">
                    {% if isTrial %}
                        <h3><i class="fa fa-arrow-up"></i> {{ 'profile.upgrade_to_full'|trans({}, 'FOSUserBundle') }}</h3>
                        <p style="color: #6b7280; margin-bottom: 16px;">
                            {{ 'profile.trial_upgrade_desc'|trans({}, 'FOSUserBundle') }}
                        </p>
                        <div class="action-buttons">
                            <a href="{{ path('shamra_academia_subscription') }}" class="btn-upgrade">
                                <i class="fa fa-crown"></i> {{ 'profile.upgrade_plan'|trans({}, 'FOSUserBundle') }}
                            </a>
                            <a href="{{ path('playground_index') }}" class="btn btn-primary">
                                <i class="fa fa-magic"></i> {{ 'profile.go_to_playground'|trans({}, 'FOSUserBundle') }}
                            </a>
                        </div>
                    {% else %}
                        <h3><i class="fa fa-cog"></i> {{ 'profile.manage_subscription'|trans({}, 'FOSUserBundle') }}</h3>
                        <div class="action-buttons">
                            <a href="{{ path('shamra_academia_subscription') }}" class="btn-upgrade">
                                <i class="fa fa-arrow-up"></i> {{ 'profile.upgrade_plan'|trans({}, 'FOSUserBundle') }}
                            </a>
                            <a href="{{ path('playground_index') }}" class="btn btn-primary">
                                <i class="fa fa-magic"></i> {{ 'profile.go_to_playground'|trans({}, 'FOSUserBundle') }}
                            </a>
                        </div>
                        <hr style="margin: 20px 0;">
                        <p style="color: #6b7280; font-size: 0.9em;">
                            {{ 'profile.cancel_info'|trans({}, 'FOSUserBundle') }}
                        </p>
                        <button id="cancel-playground" class="btn-cancel">
                            <i class="fa fa-times"></i> {{ 'profile.cancel_subscription'|trans({}, 'FOSUserBundle') }}
                        </button>
                    {% endif %}
                </div>
                
            {% else %}
                {# No active subscription #}
                <div class="playground-card">
                    <div class="no-subscription">
                        <div class="no-subscription-icon">
                            <i class="fa fa-magic"></i>
                        </div>
                        <h4>{{ 'profile.no_playground_subscription'|trans({}, 'FOSUserBundle') }}</h4>
                        <p>{{ 'profile.subscribe_to_playground'|trans({}, 'FOSUserBundle') }}</p>
                        
                        <ul class="feature-list">
                            <li><i class="fa fa-check"></i> {{ 'profile.feature_ai_writing'|trans({}, 'FOSUserBundle') }}</li>
                            <li><i class="fa fa-check"></i> {{ 'profile.feature_rephrase'|trans({}, 'FOSUserBundle') }}</li>
                            <li><i class="fa fa-check"></i> {{ 'profile.feature_translation'|trans({}, 'FOSUserBundle') }}</li>
                            <li><i class="fa fa-check"></i> {{ 'profile.feature_research_chat'|trans({}, 'FOSUserBundle') }}</li>
                        </ul>
                        
                        <a href="{{ path('shamra_academia_subscription') }}" class="btn-subscribe">
                            <i class="fa fa-rocket"></i> {{ 'profile.subscribe_now'|trans({}, 'FOSUserBundle') }}
                        </a>
                    </div>
                </div>
            {% endif %}
            
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var cancelButton = document.getElementById("cancel-playground");
        if (cancelButton) {
            cancelButton.addEventListener('click', function() {
                var proceed = confirm("{{ 'profile.cancel_confirm'|trans({}, 'FOSUserBundle')|e('js') }}");
                if (proceed) {
                    // TODO: Implement cancel subscription API call
                    alert("{{ 'profile.cancel_contact_support'|trans({}, 'FOSUserBundle')|e('js') }}");
                }
            });
        }
    </script>
{% endblock %}