{% extends "admin/base.html" %}

<!-- ============================================================
     admin/dashboard.html — 管理后台仪表盘
     显示网站统计概览和所有站点设置编辑表单。

     模板变量：
       - post_count, published_count, project_count, package_count
       - about_content: String 关于页面 Markdown 内容
       - avatar_url: String 头像 URL
       - about_brief: String 一句话简介
     ============================================================ -->

{% block title %}仪表盘 — {{ site_name }}{% endblock %}

{% block sidebar %}
{% set current_page = "dashboard" %}
{{ super() }}
{% endblock %}

{% block content %}
<div class="admin-header-bar">
    <h1 class="admin-page-title">仪表盘</h1>
</div>

<!-- 统计卡片 -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-card-number">{{ post_count }}</div>
        <div class="stat-card-label">文章总数</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-number">{{ published_count }}</div>
        <div class="stat-card-label">已发布</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-number">{{ project_count }}</div>
        <div class="stat-card-label">项目</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-number">{{ package_count }}</div>
        <div class="stat-card-label">软件包</div>
    </div>
</div>

<!-- 站点设置表单 -->
<h2 style="margin-bottom: 1rem;">站点设置</h2>
<form class="admin-form" method="POST" action="/admin/about">

    <!-- 头像 URL + 本地上传 -->
    <div class="form-group">
        <label class="form-label" for="avatar_url">头像图片</label>
        <div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem;">
            <input type="text" id="avatar_url" name="avatar_url" class="form-input"
                   value="{{ avatar_url }}"
                   placeholder="https://example.com/avatar.png" style="flex: 1;">
            <input type="file" id="avatar-upload-input" accept="image/*" style="display: none;"
                   onchange="uploadAvatar(this)">
            <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('avatar-upload-input').click()">
                本地上传
            </button>
        </div>
        <div class="upload-progress" id="avatar-progress">
            <div class="upload-progress-bar">
                <div class="upload-progress-fill" id="avatar-progress-fill"></div>
            </div>
            <div class="upload-progress-text" id="avatar-progress-text"></div>
        </div>
        <p class="form-hint">
            用于首页和关于页面的圆形头像。
            {% if avatar_url %}
            当前头像：<img id="avatar-preview" src="{{ avatar_url }}" style="width: 32px; height: 32px; border-radius: 50%; vertical-align: middle;">
            {% endif %}
        </p>
    </div>

    <script>
    function uploadAvatar(input) {
        const file = input.files[0];
        if (!file) return;

        const progressDiv = document.getElementById('avatar-progress');
        const progressFill = document.getElementById('avatar-progress-fill');
        const progressText = document.getElementById('avatar-progress-text');

        progressDiv.classList.add('active');

        const formData = new FormData();
        formData.append('file', file);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/admin/upload', true);

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                var pct = Math.round((e.loaded / e.total) * 100);
                progressFill.style.width = pct + '%';
                progressText.textContent = pct + '%';
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                if (data.url) {
                    document.getElementById('avatar_url').value = data.url;
                    var preview = document.getElementById('avatar-preview');
                    if (preview) preview.src = data.url;
                    progressFill.style.width = '100%';
                    progressText.textContent = '✅ 已上传，点击保存设置生效';
                } else {
                    alert('上传失败: ' + (data.error || '未知错误'));
                    progressDiv.classList.remove('active');
                }
            } else {
                alert('上传失败 (HTTP ' + xhr.status + ')');
                progressDiv.classList.remove('active');
            }
            input.value = '';
        };

        xhr.onerror = function() {
            alert('网络错误，上传中断');
            progressDiv.classList.remove('active');
        };

        xhr.send(formData);
    }
    </script>

    <!-- 关于我一句话 -->
    <div class="form-group">
        <label class="form-label" for="about_brief">首页「关于我」一句话</label>
        <input type="text" id="about_brief" name="about_brief" class="form-input"
               value="{{ about_brief }}"
               placeholder="例如：一个喜欢写代码的开发者">
        <p class="form-hint">显示在首页「关于我」卡片中。</p>
    </div>

    <!-- 关于页面内容 -->
    <div class="form-group">
        <label class="form-label" for="about_content">「关于」页面内容（Markdown）</label>
        <textarea id="about_content" name="content_md" class="form-textarea"
            placeholder="在这里写你的个人介绍...">{{ about_content }}</textarea>
        <p class="form-hint">支持 Markdown 语法，HTML 会被保留。</p>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">保存设置</button>
    </div>
</form>
{% endblock %}