{% extends "base.html" %}

{% block title %}本地图床管理 - LandPPT{% endblock %}

{% block content %}
<div style="text-align: center; margin-bottom: 40px;">
    <h2 style="color: #111; margin-bottom: 12px; letter-spacing: -0.01em;">本地图床管理</h2>
    <p style="font-size: 1.1em; color: #7f8c8d;">
        管理和浏览您的本地图片库
    </p>
</div>

<!-- 操作工具栏 -->
<div class="toolbar" style="margin-bottom: 30px;">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
        <div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
            <!-- 分类筛选 -->
            <select id="category-filter">
                <option value="all">全部分类</option>
                <option value="ai_generated">AI生成</option>
                <option value="web_search">网络搜索</option>
                <option value="local_storage">本地上传</option>
            </select>
            
            <!-- 搜索框 -->
            <div style="position: relative;">
                <input type="text" id="search-input" placeholder="搜索图片..." 
                       style="padding: 10px 40px 10px 15px; border: 2px solid #e9ecef; border-radius: 8px; width: 250px;">
                <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #7f8c8d;"><i class="fas fa-search"></i></span>
            </div>
            
            <!-- 排序选项 -->
            <select id="sort-option">
                <option value="created_desc">最新创建</option>
                <option value="created_asc">最早创建</option>
                <option value="accessed_desc">最近访问</option>
                <option value="size_desc">文件大小↓</option>
                <option value="size_asc">文件大小↑</option>
            </select>
        </div>
        
        <div style="display: flex; gap: 10px; align-items: center;">
            <!-- 上传按钮 -->
        <button class="btn btn-primary" id="upload-trigger">
            上传图片
        </button>

        <!-- 批量操作 -->
        <button class="btn btn-secondary" id="batch-mode-btn">
            批量选择
        </button>

        <!-- 刷新按钮 -->
        <button class="btn btn-outline" id="refresh-btn">
            刷新
        </button>
        </div>
    </div>
</div>

<!-- 批量操作工具栏 -->
<div id="batch-toolbar" class="batch-toolbar" style="display: none; margin-bottom: 20px;">
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
        <div>
            <span id="selected-count">0</span> 张图片已选择
        </div>
        <div style="display: flex; gap: 10px;">
            <button class="btn btn-secondary" data-action="select-all">全选</button>
            <button class="btn btn-outline" data-action="clear-selection">清除选择</button>
            <button class="btn btn-danger" data-action="batch-delete">删除选中</button>
            <button class="btn btn-success" data-action="batch-download">下载选中</button>
            <button class="btn btn-danger" id="clear-all-btn" style="margin-left: 20px; border: 1px solid #dc3545;">清空图床</button>
        </div>
    </div>
</div>

<!-- 图片网格 -->
<div id="image-grid" class="image-grid">
    <div class="loading-placeholder" style="text-align: center; padding: 60px; color: #7f8c8d;">
        <div style="font-size: 3em; margin-bottom: 20px;">⏳</div>
        <p>正在加载图片库...</p>
    </div>
</div>

<!-- 分页控件 -->
<div id="pagination" class="pagination" style="display: none; margin-top: 30px; text-align: center;">
    <!-- 分页按钮将通过JavaScript动态生成 -->
</div>

<!-- 上传模态框 -->
<div id="upload-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>上传图片</h3>
            <button class="close-btn" id="upload-close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <div class="upload-area" id="upload-area"
                 data-drop-zone="true">
                <div class="upload-content">
                    <div style="font-size: 3em; margin-bottom: 15px; color: #3498db;"><i class="fas fa-folder-open"></i></div>
                    <p style="margin-bottom: 15px;">拖拽图片到此处或点击选择文件</p>
                    <input type="file" id="file-input" multiple accept="image/*" style="display: none;">
                    <button class="btn btn-primary" id="file-trigger">选择文件</button>
                </div>
            </div>

            <!-- 图片信息输入区域 -->
            <div id="image-info-section" style="display: none; margin-top: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9;">
                <h4 style="margin-bottom: 15px; color: #2c3e50;">图片信息</h4>

                <div style="margin-bottom: 15px;">
                    <label for="image-title" style="display: block; margin-bottom: 5px; font-weight: bold;">标题：</label>
                    <input type="text" id="image-title" placeholder="请输入图片标题（可选）"
                           style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>

                <div style="margin-bottom: 15px;">
                    <label for="image-description" style="display: block; margin-bottom: 5px; font-weight: bold;">描述：</label>
                    <textarea id="image-description" placeholder="请输入图片描述，有助于AI搜索匹配（推荐填写）"
                              rows="3" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; resize: vertical;"></textarea>
                </div>

                <div style="margin-bottom: 15px;">
                    <label for="image-tags" style="display: block; margin-bottom: 5px; font-weight: bold;">标签：</label>
                    <input type="text" id="image-tags" placeholder="请输入标签，用逗号分隔（如：商务,图表,数据分析）"
                           style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    <small style="color: #666; font-size: 0.9em;">标签有助于AI智能匹配，建议添加相关关键词</small>
                </div>

                <div style="margin-bottom: 15px;">
                    <label for="image-category" style="display: block; margin-bottom: 5px; font-weight: bold;">分类：</label>
                    <select id="image-category" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="business">商务</option>
                        <option value="technology">技术</option>
                        <option value="education">教育</option>
                        <option value="design">设计</option>
                        <option value="nature">自然</option>
                        <option value="people">人物</option>
                        <option value="abstract">抽象</option>
                        <option value="other">其他</option>
                    </select>
                </div>

                <div style="text-align: right;" class="upload-button-container">
                    <button class="btn btn-success" id="start-upload-btn">
                        开始上传
                    </button>
                </div>
            </div>

            <div id="upload-progress" style="display: none; margin-top: 20px;">
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill"></div>
                </div>
                <p id="upload-status">准备上传...</p>
            </div>
        </div>
    </div>
</div>

<!-- 图片详情模态框 -->
<div id="image-detail-modal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 800px;">
        <div class="modal-header">
            <h3 id="image-detail-title">图片详情</h3>
            <button class="close-btn" id="image-detail-close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <div style="display: grid; grid-template-columns: 1fr 300px; gap: 20px;">
                <div class="image-preview">
                    <img id="detail-image" style="width: 100%; height: auto; border-radius: 8px;">
                </div>
                <div class="image-info">
                    <!-- 可编辑的图片信息 -->
                    <div class="info-section">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h4>图片信息</h4>
                            <button id="edit-toggle-btn" class="btn btn-sm btn-outline">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                        </div>

                        <!-- 显示模式 -->
                        <div id="info-display-mode">
                            <div class="info-item">
                                <label>标题:</label>
                                <span id="display-title">-</span>
                            </div>
                            <div class="info-item">
                                <label>描述:</label>
                                <span id="display-description">-</span>
                            </div>
                            <div class="info-item">
                                <label>标签:</label>
                                <span id="display-tags">-</span>
                            </div>
                            <div class="info-item">
                                <label>分类:</label>
                                <span id="display-category">-</span>
                            </div>
                        </div>

                        <!-- 编辑模式 -->
                        <div id="info-edit-mode" style="display: none;">
                            <div class="edit-item">
                                <label for="edit-title">标题:</label>
                                <input type="text" id="edit-title" class="form-input" placeholder="请输入图片标题">
                            </div>
                            <div class="edit-item">
                                <label for="edit-description">描述:</label>
                                <textarea id="edit-description" class="form-textarea" rows="3" placeholder="请输入图片描述"></textarea>
                            </div>
                            <div class="edit-item">
                                <label for="edit-tags">标签:</label>
                                <input type="text" id="edit-tags" class="form-input" placeholder="用逗号分隔多个标签">
                                <small class="form-help">例如: 风景, 自然, 山水</small>
                            </div>
                            <div class="edit-item">
                                <label for="edit-category">分类:</label>
                                <select id="edit-category" class="form-select">
                                    <option value="">请选择分类</option>
                                    <option value="ai_generated">AI生成</option>
                                    <option value="web_search">网络搜索</option>
                                    <option value="local_storage">本地上传</option>
                                </select>
                            </div>
                            <div class="edit-actions">
                                <button class="btn btn-success btn-sm" id="save-image-btn">
                                    <i class="fas fa-save"></i> 保存
                                </button>
                                <button class="btn btn-secondary btn-sm" id="cancel-edit-btn">
                                    <i class="fas fa-times"></i> 取消
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="info-section">
                        <h4>文件信息</h4>
                        <div class="info-item">
                            <label>文件名:</label>
                            <span id="detail-filename">-</span>
                        </div>
                        <div class="info-item">
                            <label>大小:</label>
                            <span id="detail-size">-</span>
                        </div>
                        <div class="info-item">
                            <label>尺寸:</label>
                            <span id="detail-dimensions">-</span>
                        </div>
                        <div class="info-item">
                            <label>格式:</label>
                            <span id="detail-format">-</span>
                        </div>
                        <div class="info-item">
                            <label>来源:</label>
                            <span id="detail-source">-</span>
                        </div>
                        <div class="info-item">
                            <label>创建时间:</label>
                            <span id="detail-created">-</span>
                        </div>
                        <div class="info-item">
                            <label>访问次数:</label>
                            <span id="detail-access-count">-</span>
                        </div>
                    </div>

                    <div class="info-section">
                        <h4>操作</h4>
                        <div style="display: flex; flex-direction: column; gap: 10px;">
                            <button class="btn btn-primary" id="download-image-btn">下载图片</button>
                            <button class="btn btn-outline" id="copy-image-btn">复制链接</button>
                            <button class="btn btn-danger" id="delete-image-btn">删除图片</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script type="module" src="/static/js/pages/imageGallery.js"></script>
{% endblock %}

{% block extra_css %}
<style>
/* 图片网格样式 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.image-item {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(31, 38, 135, 0.4);
}

.image-item.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.image-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.image-info {
    padding: 15px;
}

.image-title {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.image-source {
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7em;
}

.image-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.image-actions button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.3s ease;
}

/* 批量选择复选框 */
.batch-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    z-index: 10;
}

/* 上传区域样式 */
.upload-area {
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover,
.upload-area.drag-over {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.1);
}

/* 进度条样式 */
.progress-bar {
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    width: 0%;
    transition: width 0.3s ease;
}

/* 模态框样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.modal-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #999;
}

.close-btn:hover {
    color: #333;
}

/* 信息项样式 */
.info-section {
    margin-bottom: 20px;
}

.info-section h4 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item label {
    font-weight: 600;
    color: var(--text-secondary);
}

/* 编辑表单样式 */
.edit-item {
    margin-bottom: 15px;
}

.edit-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 60px;
}

.form-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.edit-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
    border-color: #1e7e34;
}

.btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    border-color: #545b62;
}

/* 分页样式 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination button:hover {
    background: var(--primary-color);
    color: white;
}

.pagination button.active {
    background: var(--primary-color);
    color: white;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .modal {
        padding: 10px;
        align-items: flex-start;
        padding-top: 20px;
    }

    .modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 40px);
        margin: 0;
    }

    .modal-header {
        padding: 15px;
        flex-shrink: 0;
    }

    .modal-body {
        padding: 15px;
        overflow-y: auto;
    }

    /* 确保上传按钮区域在小屏幕上可见 */
    #image-info-section {
        margin-top: 15px !important;
        padding: 15px !important;
    }

    #image-info-section > div:last-child {
        position: sticky;
        bottom: 0;
        background: #f9f9f9;
        padding: 15px 0 0 0;
        margin: 15px -15px -15px -15px;
        padding-left: 15px;
        padding-right: 15px;
        border-top: 1px solid #ddd;
    }

    /* 上传进度区域优化 */
    #upload-progress {
        margin-top: 15px !important;
        position: sticky;
        bottom: 0;
        background: white;
        padding: 15px 0;
        border-top: 1px solid #eee;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .modal {
        padding: 5px;
        padding-top: 10px;
    }

    .modal-content {
        border-radius: 10px;
        max-height: calc(100vh - 20px);
    }

    .modal-header {
        padding: 10px 15px;
    }

    .modal-header h3 {
        font-size: 1.1em;
    }

    .modal-body {
        padding: 10px 15px;
    }

    .upload-area {
        padding: 20px 15px;
    }

    .upload-area p {
        font-size: 0.9em;
    }

    /* 表单元素优化 */
    #image-info-section input,
    #image-info-section textarea,
    #image-info-section select {
        font-size: 16px; /* 防止iOS缩放 */
    }

    /* 按钮优化 */
    .btn {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px; /* 触摸友好 */
    }

    #start-upload-btn {
        width: 100%;
        margin-top: 10px;
    }

    .upload-button-container {
        text-align: center !important;
    }
}

/* 确保按钮在所有设备上都可见 */
.upload-button-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* 防止模态框内容溢出 */
.modal-content * {
    box-sizing: border-box;
}

/* 优化滚动条样式 */
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>
{% endblock %}