{% extends "admin/layout.html" %}
{% block title %}Edit User #{{ user.id }} – Admin{% endblock %}

{% block body %}
<div class="flex items-center gap-3 mb-6">
    <a href="{{ full_url('/admin/users') }}" class="inline-flex items-center gap-2 text-sm text-primary dark:text-primary-light hover:underline">
        <i class="fa fa-arrow-left"></i> {% trans %}Back to Users{% endtrans %}
    </a>
    <span class="text-gray-300 dark:text-gray-600">/</span>
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Edit User{% endtrans %} #{{ user.id }}</h1>
</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 %}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Left: Edit Form -->
    <div class="lg:col-span-2 space-y-5">
        <form method="POST" action="{{ full_url('/admin/users/' ~ user.id ~ '/edit') }}" class="space-y-5">
            <!-- Account Info -->
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
                    <i class="fa fa-user text-indigo-500"></i> {% trans %}Account Information{% endtrans %}
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Username{% endtrans %} <span class="text-red-500">*</span></label>
                        <input type="text" name="username" value="{{ user.username or '' }}" required
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none transition-all"
                            data-testid="input-username">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Email{% endtrans %} <span class="text-red-500">*</span></label>
                        <input type="email" name="email" value="{{ user.email or '' }}" required
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none transition-all"
                            data-testid="input-email">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Country{% endtrans %}</label>
                        <input type="text" name="country" autocomplete="country-name"
                            value="{{ user.get('country', '') }}"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none transition-all"
                            placeholder="Country"
                            data-testid="input-country">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}New Password{% endtrans %} <span class="text-gray-400 font-normal">{% trans %}(leave blank to keep current){% endtrans %}</span></label>
                        <input type="password" name="new_password" placeholder="{% trans %}Enter new password to change...{% endtrans %}"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none transition-all"
                            data-testid="input-password">
                    </div>
                </div>
            </div>

            <!-- Subscription Settings -->
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
                    <i class="fa fa-crown text-yellow-500"></i> {% trans %}Subscription &amp; Plan{% endtrans %}
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Plan{% endtrans %}</label>
                        <select name="plan_id"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                            data-testid="select-plan">
                            {% for p in plans %}
                            <option value="{{ p.id }}" {% if p.id == user.plan_id %}selected{% endif %}>
                                {{ p.name }}{% if p.price_monthly > 0 %} (${{ '%.2f'|format(p.price_monthly) }}/mo){% else %} (Free){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Subscription Status{% endtrans %}</label>
                        <select name="subscription_status"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                            data-testid="select-subscription-status">
                            {% for s in ['free', 'active', 'cancelled', 'expired', 'pending'] %}
                            <option value="{{ s }}" {% if user.subscription_status == s %}selected{% endif %}>{{ s|title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Subscription Expires At{% endtrans %}</label>
                        <input type="date" name="subscription_expires_at"
                            value="{{ user.subscription_expires_at[:10] if user.subscription_expires_at else '' }}"
                            class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                            data-testid="input-sub-expires">
                        <p class="text-xs text-gray-400 mt-1">{% trans %}Leave blank for no expiry date.{% endtrans %}</p>
                    </div>
                </div>
            </div>

            <!-- Account Security & Status -->
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
                <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
                    <i class="fa fa-shield-halved text-green-500"></i> {% trans %}Account Flags{% endtrans %}
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="flex items-center gap-3 p-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="label-is-active">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" value="1" {% if user.is_active %}checked{% endif %}
                            class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                            data-testid="check-is-active">
                        <div>
                            <div class="text-sm font-medium text-gray-800 dark:text-gray-200">{% trans %}Account Active{% endtrans %}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Uncheck to suspend this user.{% endtrans %}</div>
                        </div>
                    </label>
                    <label class="flex items-center gap-3 p-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="label-totp">
                        <input type="hidden" name="totp_enabled" value="0">
                        <input type="checkbox" name="totp_enabled" value="1" {% if user.user_totp_enabled %}checked{% endif %}
                            class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                            data-testid="check-totp">
                        <div>
                            <div class="text-sm font-medium text-gray-800 dark:text-gray-200">{% trans %}2FA Enabled{% endtrans %}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Uncheck to reset / disable 2FA.{% endtrans %}</div>
                        </div>
                    </label>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold text-sm shadow-lg shadow-primary/20 transition-all" data-testid="btn-save-user">
                    <i class="fa fa-save mr-1.5"></i>{% trans %}Save Changes{% endtrans %}
                </button>
                <a href="{{ full_url('/admin/users') }}" class="px-5 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {% trans %}Cancel{% endtrans %}
                </a>
            </div>
        </form>
    </div>

    <!-- Right: User Stats & Activity -->
    <div class="space-y-5">
        <!-- Stats -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">{% trans %}User Stats{% endtrans %}</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Uploads{% endtrans %}</span><strong class="text-gray-900 dark:text-white">{{ file_count }}</strong></div>
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Conversions{% endtrans %}</span><strong class="text-gray-900 dark:text-white">{{ conv_count }}</strong></div>
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Plan{% endtrans %}</span><strong class="text-gray-900 dark:text-white">{{ user.plan_name or 'Free' }}</strong></div>
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Status{% endtrans %}</span>
                    <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold
                        {% if user.subscription_status == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% elif user.subscription_status == 'expired' %}bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400
                        {% elif user.subscription_status == 'cancelled' %}bg-red-100 dark:bg-red-900/30 text-red-600
                        {% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400{% endif %}">
                        {{ user.subscription_status|title if user.subscription_status else 'Free' }}
                    </span>
                </div>
                {% if user.created_at %}
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Joined{% endtrans %}</span><span>{{ user.created_at[:10] }}</span></div>
                {% endif %}
                <div class="flex justify-between items-center text-gray-600 dark:text-gray-400">
                    <span>{% trans %}Email Verified{% endtrans %}</span>
                    {% if user.email_verified %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"><i class="fa fa-check"></i> {% trans %}Yes{% endtrans %}</span>
                    {% else %}
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"><i class="fa fa-xmark"></i> {% trans %}No{% endtrans %}</span>
                    {% endif %}
                </div>
                {% if user.referral_code %}
                <div class="flex justify-between text-gray-600 dark:text-gray-400"><span>{% trans %}Referral Code{% endtrans %}</span><code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">{{ user.referral_code }}</code></div>
                {% endif %}
            </div>
        </div>

        <!-- Recent Conversions -->
        {% if recent_convs %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">{% trans %}Recent Conversions{% endtrans %}</h3>
            <div class="space-y-2">
                {% for c in recent_convs %}
                <div class="flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-800 last:border-0">
                    <div>
                        <div class="text-xs font-medium text-gray-800 dark:text-gray-200 truncate max-w-[140px]" title="{{ c.file_name }}">{{ c.file_name or 'Unnamed' }}</div>
                        <div class="text-xs text-gray-400">{{ c.input_format or '?' }} → {{ c.output_format or '?' }}</div>
                    </div>
                    <span class="text-xs px-1.5 py-0.5 rounded
                        {% if c.status == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                        {% elif c.status in ['pending','queued'] %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                        {% elif c.status == 'cancelled' %}bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400
                        {% elif c.status == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 line-through
                        {% else %}bg-gray-100 dark:bg-gray-700 text-gray-500{% endif %}">{{ c.status }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Recent Manual Payments -->
        {% if payments %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">{% trans %}Payment History{% endtrans %}</h3>
            <div class="space-y-2">
                {% for p in payments %}
                <div class="flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-800 last:border-0">
                    <div>
                        <div class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ p.currency }} {{ '%.2f'|format(p.amount) }}</div>
                        <div class="text-xs text-gray-400">{{ p.method|title }} · {{ p.plan_name or '–' }}</div>
                    </div>
                    <span class="text-xs text-gray-400">{% if p.recorded_at %}{{ p.recorded_at[:10] }}{% endif %}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Admin Actions -->
        {% if not user.email_verified %}
        <div class="rounded-xl border border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20 p-5">
            <h3 class="text-sm font-bold text-yellow-700 dark:text-yellow-400 mb-2 flex items-center gap-2"><i class="fa fa-envelope-circle-check"></i> {% trans %}Email Verification{% endtrans %}</h3>
            <p class="text-xs text-yellow-700 dark:text-yellow-400 mb-3">{% trans %}This user's email is not verified. You can manually mark it as verified.{% endtrans %}</p>
            <form method="POST" action="{{ full_url('/admin/users/' ~ user.id ~ '/verify-email') }}" data-confirm="Mark email as verified for {{ user.username }}?&#10;&#10;• Their email will be marked verified without them clicking a link&#10;• They will gain full account access if email verification is required">
                <button type="submit" class="w-full px-4 py-2 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-bold transition-all" data-testid="btn-verify-email">
                    <i class="fa fa-check mr-1.5"></i>{% trans %}Mark Email as Verified{% endtrans %}
                </button>
            </form>
        </div>
        {% endif %}

        <!-- Reset 2FA -->
        {% if user.user_totp_enabled or user.user_totp_secret %}
        <div class="rounded-xl border border-yellow-200 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/20 p-5">
            <h3 class="text-sm font-bold text-yellow-700 dark:text-yellow-400 mb-2 flex items-center gap-2"><i class="fa fa-shield-halved"></i> {% trans %}Reset 2FA{% endtrans %}</h3>
            <p class="text-xs text-yellow-700 dark:text-yellow-400 mb-3">{% trans %}Clears this user's authenticator secret so they can set 2FA up again fresh.{% endtrans %}</p>
            <form method="POST" action="{{ full_url('/admin/users/' ~ user.id ~ '/reset-2fa') }}" data-confirm="Reset 2FA for {{ user.username }}?&#10;&#10;• Their current authenticator codes will immediately stop working&#10;• They will be prompted to set up 2FA again on next login">
                <button type="submit" class="w-full px-4 py-2 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-bold transition-all" data-testid="btn-reset-2fa">
                    <i class="fa fa-rotate-left mr-1.5"></i>{% trans %}Reset 2FA{% endtrans %}
                </button>
            </form>
        </div>
        {% endif %}

        <!-- Danger Zone -->
        <div class="rounded-xl border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900/20 p-5">
            <h3 class="text-sm font-bold text-red-700 dark:text-red-400 mb-3 flex items-center gap-2"><i class="fa fa-triangle-exclamation"></i> {% trans %}Danger Zone{% endtrans %}</h3>
            <p class="text-xs text-red-600 dark:text-red-400 mb-3">{% trans %}Permanently deletes this user and all their data. This cannot be undone.{% endtrans %}</p>
            <form method="POST" action="{{ full_url('/admin/users/' ~ user.id ~ '/delete') }}" data-confirm="Permanently delete user {{ user.username }}?&#10;&#10;• All their files, conversions, and uploads&#10;• All shared links (those links will stop working)&#10;• All team memberships and access grants&#10;• Their sessions, API keys, and account settings&#10;• Payment and billing history">
                <button type="submit" class="w-full px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-bold transition-all" data-testid="btn-delete-user">
                    <i class="fa fa-trash mr-1.5"></i>{% trans %}Delete This User{% endtrans %}
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}