{% extends "base.html" %}
{% set tool = "gallery" %}
{% block title %}我的图库 - 图卡卡{% endblock %}
{% block content %}
<style>
.gallery-page { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.gallery-header { margin-bottom: 32px; }
.gallery-header h1 { font-size: 28px; font-weight: 700; }
.gallery-header p { color: var(--text-secondary); margin-top: 8px; font-size: 14px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.gallery-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.gallery-item img {
    width: 100%; display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.gallery-item .info {
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
}
.gallery-item .info .meta { font-size: 12px; color: var(--text-secondary); }
.gallery-item .info .delete-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; opacity: 0.5; transition: opacity 0.15s;
}
.gallery-item .info .delete-btn:hover { opacity: 1; color: #ff4757; }
.gallery-empty {
    text-align: center; padding: 80px 20px; color: var(--text-secondary);
    grid-column: 1 / -1;
}
.gallery-empty .icon { font-size: 48px; margin-bottom: 16px; }
.gallery-loading {
    text-align: center; padding: 80px 20px; color: var(--text-secondary);
    grid-column: 1 / -1;
}
</style>

<div class="gallery-page">
    <div class="gallery-header">
        <h1>🖼️ 我的图库</h1>
        <p>保存的 AI 生成图片，刷新页面也不会丢失</p>
    </div>
    <div class="gallery-grid" id="galleryGrid">
        <div class="gallery-loading">加载中...</div>
    </div>
</div>

<script>
async function loadGallery() {
    try {
        const tk = localStorage.getItem('sewing_token') || localStorage.getItem('token') || '';
        const r = await fetch('/api/gallery/list', {
            headers: {'Authorization': 'Bearer ' + tk}
        });
        const d = await r.json();
        if (d.success) {
            renderGallery(d.images);
        } else {
            document.getElementById('galleryGrid').innerHTML = '<div class="gallery-empty"><div class="icon">😅</div><div>请先登录</div></div>';
        }
    } catch(e) {
        document.getElementById('galleryGrid').innerHTML = '<div class="gallery-empty"><div class="icon">😅</div><div>加载失败</div></div>';
    }
}

function renderGallery(images) {
    const grid = document.getElementById('galleryGrid');
    if (!images || images.length === 0) {
        grid.innerHTML = '<div class="gallery-empty"><div class="icon">📸</div><div>还没有保存的图片，快去生成吧</div></div>';
        return;
    }
    grid.innerHTML = images.map(img => {
        const date = new Date(img.created_at + 'Z').toLocaleString('zh-CN');
        const funcLabel = {'top':'上装','bottom':'下装','dress':'连衣裙','all':'上下装','':'AI成衣'};
        return `<div class="gallery-item">
            <img src="${img.url}" alt="AI成衣" loading="lazy">
            <div class="info">
                <div class="meta">
                    <div>${funcLabel[img.function_type] || img.function_type || 'AI成衣'} · ${img.resolution}</div>
                    <div style="font-size:11px;margin-top:2px;opacity:0.7">${date}</div>
                </div>
                <button class="delete-btn" onclick="deleteImage(${img.id})" title="删除">🗑️</button>
            </div>
        </div>`;
    }).join('');
}

async function deleteImage(id) {
    if (!confirm('确定要删除这张图片吗？')) return;
    try {
        const r = await fetch('/api/gallery/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + (localStorage.getItem('sewing_token')||localStorage.getItem('token')||'')},
            body: JSON.stringify({id})
        });
        const d = await r.json();
        if (d.success) {
            showToast('已删除', 'success');
            loadGallery();
        } else {
            showToast(d.error || '删除失败', 'error');
        }
    } catch(e) {
        showToast('网络错误', 'error');
    }
}

document.addEventListener('DOMContentLoaded', loadGallery);
</script>
{% endblock %}