{% extends "admin/base_site.html" %}
{% load static i18n %}

{% block extrastyle %}
{{ block.super }}
<style>
.token-container { padding: 20px; max-width: 900px; margin: 0 auto; }
.token-section { background: #fff; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 20px; overflow: hidden; }
.token-section h2 { background: #417690; color: white; padding: 12px 15px; margin: 0; font-size: 16px; }
.token-content { padding: 15px; }
.token-box { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 13px; word-break: break-all; margin: 10px 0; position: relative; }
.token-box .copy-btn { position: absolute; top: 10px; right: 10px; background: #417690; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.token-box .copy-btn:hover { background: #205067; }
.token-info { background: #f8f9fa; padding: 15px; border-radius: 4px; margin: 15px 0; border-left: 4px solid #28a745; }
.token-info h4 { margin: 0 0 10px 0; color: #417690; }
.token-warning { background: #fff3cd; border: 1px solid #ffc107; padding: 15px; border-radius: 4px; margin: 15px 0; border-left: 4px solid #ffc107; }
.token-warning h4 { margin: 0 0 10px 0; color: #856404; }
.token-warning ul { margin: 0; padding-left: 20px; }
.token-warning li { margin-bottom: 5px; }
.generate-btn { background: #28a745; color: white; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.generate-btn:hover { background: #218838; }
.table-styled { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table-styled th, .table-styled td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
.table-styled th { background: #f5f5f5; font-weight: bold; }
.table-styled tr:hover { background: #fafafa; }
.status-active { color: #28a745; font-weight: bold; }
.status-expired { color: #dc3545; font-weight: bold; }
.back-link { margin-bottom: 20px; }
.back-link a { color: #417690; text-decoration: none; }
.back-link a:hover { text-decoration: underline; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.info-item { background: #f8f9fa; padding: 12px; border-radius: 4px; }
.info-item label { display: block; color: #666; font-size: 12px; margin-bottom: 3px; }
.info-item value { font-weight: bold; color: #333; }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> &rsaquo;
    <a href="{% url 'admin:api_help' %}">API 使用帮助</a> &rsaquo;
    获取访问令牌
</div>
{% endblock %}

{% block content %}
<div class="token-container">
    <div class="back-link">
        <a href="{% url 'admin:api_help' %}">← 返回 API 文档</a>
    </div>

    <h1 style="color: #417690; margin-bottom: 20px;">🔑 JWT 令牌管理</h1>

    <!-- User Info -->
    <div class="token-section">
        <h2>👤 当前用户</h2>
        <div class="token-content">
            <div class="info-grid">
                <div class="info-item">
                    <label>用户名</label>
                    <value>{{ user.username }}</value>
                </div>
                <div class="info-item">
                    <label>邮箱</label>
                    <value>{{ user.email|default:"未设置" }}</value>
                </div>
                <div class="info-item">
                    <label>超级管理员</label>
                    <value>{% if user.is_superuser %}是{% else %}否{% endif %}</value>
                </div>
                <div class="info-item">
                    <label>用户状态</label>
                    <value>{% if user.is_active %}活跃{% else %}已禁用{% endif %}</value>
                </div>
            </div>
        </div>
    </div>

    <!-- Generate Token -->
    <div class="token-section">
        <h2>✨ 生成新令牌</h2>
        <div class="token-content">
            <p>生成一个新的访问令牌。生成前请查看下方的安全提示。</p>
            <form method="post">
                {% csrf_token %}
                <button type="submit" class="generate-btn">🔑 生成访问令牌</button>
            </form>

            {% if access_token %}
            <div class="token-info">
                <h4>✅ 令牌生成成功</h4>
                <p><strong>访问令牌 (Access Token)</strong> - 有效期: {{ access_lifetime }}</p>
                <div class="token-box">
                    <button class="copy-btn" onclick="copyToken('access-token')">📋 复制</button>
                    <span id="access-token">{{ access_token }}</span>
                </div>
            </div>

            <div class="token-info">
                <p><strong>刷新令牌 (Refresh Token)</strong> - 有效期: {{ refresh_lifetime }}</p>
                <div class="token-box">
                    <button class="copy-btn" onclick="copyToken('refresh-token')">📋 复制</button>
                    <span id="refresh-token">{{ refresh_token }}</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Security Warning -->
    <div class="token-warning">
        <h4>⚠️ 安全提示</h4>
        <ul>
            <li><strong>妥善保管</strong> - 令牌相当于您的登录凭证，请勿分享给他人</li>
            <li><strong>定期更换</strong> - 建议定期生成新令牌，过期后使用 Refresh Token 续期</li>
            <li><strong>立即轮换</strong> - 如果令牌泄露，请立即重新生成令牌以作废旧值（旧令牌会随访问令牌过期自动失效）</li>
        </ul>
    </div>

    <!-- Token List -->
    <div class="token-section">
        <h2>📋 我的令牌</h2>
        <div class="token-content">
            {% if active_tokens %}
            <table class="table-styled">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>创建时间</th>
                        <th>过期时间</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for token in active_tokens %}
                    <tr>
                        <td>{{ token.id }}</td>
                        <td>{{ token.created_at }}</td>
                        <td>{{ token.expires_at }}</td>
                        <td>
                            {% if token.is_expired %}
                                <span class="status-expired">已过期</span>
                            {% else %}
                                <span class="status-active">有效</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: #666; text-align: center; padding: 20px;">
                暂无令牌记录。点击上方按钮生成您的第一个令牌。
            </p>
            {% endif %}
        </div>
    </div>

    <!-- Quick Help -->
    <div class="token-section">
        <h2>💡 快速帮助</h2>
        <div class="token-content">
            <p><strong>Access Token 过期后怎么办？</strong></p>
            <p>使用 Refresh Token 获取新令牌，无需重新登录：</p>
            <div class="token-box" style="margin-top: 10px;">
curl -X POST "https://www.smallapplianceshub.com/api/auth/token/refresh/" \
  -H "Content-Type: application/json" \
  -d '{"refresh": "YOUR_REFRESH_TOKEN"}'</div>

            <p style="margin-top: 15px;"><strong>更多 API 使用方法，请查阅</strong>
            <a href="{% url 'admin:api_help' %}">API 使用帮助</a>。</p>
        </div>
    </div>
</div>

<script>
function copyToken(elementId) {
    const token = document.getElementById(elementId).textContent;
    navigator.clipboard.writeText(token).then(() => {
        alert('令牌已复制到剪贴板！');
    }).catch(err => {
        const textArea = document.createElement('textarea');
        textArea.value = token;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('令牌已复制到剪贴板！');
    });
}
</script>
{% endblock %}