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

{% block admin_title %}系统信息{% endblock %}
{% block page_title %}系统与存储{% endblock %}
{% block page_subtitle %}数据库文件、备份快照、运行参数与安全配置{% endblock %}

{% block admin_content %}
<div class="space-y-6">
    <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {% for database in databases %}
        <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between">
                <div class="text-xs font-black uppercase tracking-widest text-slate-400">{{ database.name }}</div>
                <span class="h-2.5 w-2.5 rounded-full {% if database.exists and database.quick_check in ['ok', 'managed by app'] %}bg-emerald-500{% else %}bg-red-500{% endif %}"></span>
            </div>
            <div class="mt-3 text-2xl font-black text-slate-900 dark:text-white">{{ database.size_text }}</div>
            <div class="mt-1 truncate font-mono text-[10px] text-slate-400" title="{{ database.path }}">{{ database.path }}</div>
            <div class="mt-3 text-xs font-bold {% if database.quick_check in ['ok', 'managed by app'] %}text-emerald-600{% else %}text-red-600{% endif %}">{{ database.quick_check }}</div>
        </div>
        {% endfor %}
    </section>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                <div>
                    <h2 class="font-black text-slate-900 dark:text-white">回滚快照</h2>
                    <p class="text-xs text-slate-400">Pipeline 自动保留最近 3 组</p>
                </div>
                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-mono text-slate-500">{{ backup_summary.sets }} sets</span>
            </div>
            <div class="divide-y divide-slate-100 dark:divide-slate-800">
                {% for backup in backups %}
                <div class="px-5 py-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="font-black text-slate-800 dark:text-white">{{ backup.name }}</div>
                            <div class="mt-1 text-xs text-slate-400">{{ backup.created_at or 'No manifest timestamp' }}</div>
                        </div>
                        <div class="text-right">
                            <div class="font-mono text-sm font-black text-slate-700 dark:text-slate-200">{{ backup.size_text }}</div>
                            <div class="text-[10px] uppercase text-emerald-600">Verified snapshot</div>
                        </div>
                    </div>
                    <div class="mt-3 flex gap-2">
                        {% for name, item in backup.databases.items() %}
                        <span class="rounded bg-slate-100 px-2 py-1 text-[10px] font-bold uppercase text-slate-500 dark:bg-slate-800">{{ name }} · {{ item.quick_check }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% else %}
                <div class="px-5 py-12 text-center text-sm text-slate-400">暂无备份快照</div>
                {% endfor %}
            </div>
        </section>

        <aside class="space-y-6">
            <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <h2 class="font-black text-slate-900 dark:text-white">运行参数</h2>
                <dl class="mt-4 space-y-3 text-sm">
                    {% for label, value in [
                        ('Web schema', 'v' + config.web_schema_version|string),
                        ('SQLite timeout', config.sqlite_timeout|string + 's'),
                        ('Slow query', config.slow_query_threshold|string + 's'),
                        ('Max upload', '%.0f MB'|format(config.max_upload_mb)),
                        ('Visibility', config.site_visibility),
                        ('Brand', config.brand_primary)
                    ] %}
                    <div class="flex items-center justify-between"><dt class="text-slate-500">{{ label }}</dt><dd class="font-mono font-black text-slate-800 dark:text-slate-200">{{ value }}</dd></div>
                    {% endfor %}
                </dl>
                <div class="mt-4 space-y-2 border-t border-slate-100 pt-4 text-[10px] dark:border-slate-800">
                    <div><span class="font-bold uppercase text-slate-400">Data root</span><div class="mt-1 break-all font-mono text-slate-500">{{ config.data_root }}</div></div>
                    <div><span class="font-bold uppercase text-slate-400">Import dir</span><div class="mt-1 break-all font-mono text-slate-500">{{ config.import_dir }}</div></div>
                </div>
            </section>

            <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <h2 class="font-black text-slate-900 dark:text-white">安全配置</h2>
                <div class="mt-4 space-y-3">
                    {% for label, configured in [
                        ('SECRET_KEY', config.secret_key_configured),
                        ('ADMIN_TOKEN', config.admin_token_configured)
                    ] %}
                    <div class="flex items-center justify-between rounded-lg bg-slate-50 p-3 dark:bg-slate-800">
                        <span class="font-mono text-xs text-slate-600 dark:text-slate-300">{{ label }}</span>
                        <span class="rounded-full px-2 py-1 text-[10px] font-black uppercase {% if configured %}bg-emerald-100 text-emerald-700{% else %}bg-amber-100 text-amber-700{% endif %}">{{ 'configured' if configured else 'dev default' }}</span>
                    </div>
                    {% endfor %}
                </div>
                <p class="mt-4 text-xs leading-5 text-slate-400">本页只展示配置状态，不回显任何密钥或令牌。</p>
            </section>
        </aside>
    </div>
</div>
{% endblock %}