{% extends "base.html" %}

{% block title %}云端同步 - AI创作工作台{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto">
    <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">云端账号与提示词</h1>
            <p class="text-sm text-gray-500 mt-1">账号和共享提示词来自云端，作品与生成文件保存在本机。</p>
        </div>
        <button id="sync-button" onclick="syncPrompts()" class="px-4 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:opacity-50">
            同步提示词
        </button>
    </div>

    <section class="bg-white border border-gray-200 rounded-lg p-5 mb-5">
        <div class="text-sm text-gray-500 mb-3">连接状态</div>
        <div id="cloud-status" class="text-gray-800">正在检查...</div>
    </section>

    <section class="bg-white border border-gray-200 rounded-lg p-5">
        <div class="flex items-center justify-between mb-3">
            <div>
                <h2 class="font-semibold text-gray-900">提示词包</h2>
                <div class="text-sm text-gray-500">登录时会自动同步，也可以手动检查更新。</div>
            </div>
        </div>
        <div id="pack-list" class="divide-y divide-gray-100 text-sm text-gray-700"></div>
    </section>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function escapeHtml(value) {
        const node = document.createElement('div');
        node.textContent = value == null ? '' : String(value);
        return node.innerHTML;
    }

    function renderStatus(data) {
        const box = document.getElementById('cloud-status');
        if (!data.enabled) {
            box.innerHTML = '<span class="text-gray-600">' + escapeHtml(data.message || '本地账号模式') + '</span>';
            return;
        }
        if (!data.connected) {
            box.innerHTML = '<span class="text-red-600">连接失败：</span>' + escapeHtml(data.message || '请重新登录');
            return;
        }
        const account = data.account || {};
        box.innerHTML =
            '<div class="grid gap-2 sm:grid-cols-3">' +
            '<div><span class="text-gray-500">服务</span><div class="font-medium break-all">' + escapeHtml(data.base_url) + '</div></div>' +
            '<div><span class="text-gray-500">账号</span><div class="font-medium">' + escapeHtml(account.nickname || account.username || '-') + '</div></div>' +
            '<div><span class="text-gray-500">角色</span><div class="font-medium">' + escapeHtml(account.role || '-') + '</div></div>' +
            '</div>';
    }

    function renderPacks(packs) {
        const list = document.getElementById('pack-list');
        if (!packs || !packs.length) {
            list.innerHTML = '<div class="py-3 text-gray-500">云端暂无提示词包</div>';
            return;
        }
        list.innerHTML = packs.map(function (pack) {
            return '<div class="py-3 flex items-center justify-between gap-4">' +
                '<div><div class="font-medium text-gray-900">' + escapeHtml(pack.name) + '</div>' +
                '<div class="text-gray-500 mt-1">' + escapeHtml(pack.description || '') + '</div></div>' +
                '<div class="text-gray-500 whitespace-nowrap">v' + escapeHtml(pack.version || '-') + '</div>' +
                '</div>';
        }).join('');
    }

    async function loadCloudStatus() {
        try {
            const data = await api.get('/api/cloud/status');
            renderStatus(data);
            renderPacks(data.packs || []);
        } catch (error) {
            document.getElementById('cloud-status').innerHTML =
                '<span class="text-red-600">' + escapeHtml(error.message) + '</span>';
        }
    }

    async function syncPrompts() {
        const button = document.getElementById('sync-button');
        button.disabled = true;
        button.textContent = '同步中...';
        try {
            const result = await api.post('/api/cloud/prompts/sync', {});
            api.showToast('同步完成：新增 ' + result.inserted + '，更新 ' + result.updated, 'success');
            await loadCloudStatus();
        } catch (error) {
            api.showToast(error.message || '同步失败', 'error');
        } finally {
            button.disabled = false;
            button.textContent = '同步提示词';
        }
    }

    loadCloudStatus();
</script>
{% endblock %}