{% extends "base.html" %}

{% block title %}JJYB_AI智剪 - 素材库{% endblock %}

{% block content %}
<!-- 隐藏base.html的编辑器专用面板，解决重叠问题 -->
<style>
    /* 隐藏右侧所有编辑器专用面板 */
    body > div > aside.w-80,
    body > div > aside[style*="width: 400px"],
    #clip-properties,
    #color-correction,
    #export-settings,
    #effects-panel,
    aside.animate-slide-in-right {
        display: none !important;
    }
    
    /* 让主内容占满全宽 */
    body > div {
        grid-template-columns: auto 1fr !important;
    }
    
    /* 防止左侧快速工具和属性面板重叠 */
    .quick-tools-sidebar {
        position: fixed !important;
        left: 20px !important;
        top: 120px !important;
        width: 280px !important;
        z-index: 100 !important;
    }
</style>
<!-- 返回首页按钮 -->
<div class="floating-actions left">
    <button onclick="window.location.href='/'" style="padding: 10px 20px; background: rgba(255,255,255,0.9); color: #667eea; border: 2px solid #667eea; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;">
        <span>←</span>
        <span>返回首页</span>
    </button>
</div>

<!-- 快捷导航 -->
<div class="floating-actions right">
    <button onclick="window.location.href='/commentary'" style="padding: 8px 16px; background: rgba(255,255,255,0.9); color: #667eea; border: 2px solid #667eea; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
        🎙️ 原创解说
    </button>
    <button onclick="window.location.href='/remix'" style="padding: 8px 16px; background: rgba(255,255,255,0.9); color: #667eea; border: 2px solid #667eea; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
        ✂️ 混剪模式
    </button>
    <button onclick="window.location.href='/voiceover'" style="padding: 8px 16px; background: rgba(255,255,255,0.9); color: #667eea; border: 2px solid #667eea; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
        🔊 AI配音
    </button>
    <button onclick="window.location.href='/editor'" style="padding: 8px 16px; background: rgba(255,255,255,0.9); color: #667eea; border: 2px solid #667eea; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
        🎬 编辑器
    </button>
</div>

<!-- 主内容区域 - 填满视口高度，消除底部空白 -->
<div class="layui-row layui-col-space15" style="margin-top: 80px; padding: 0 20px 60px 20px; min-height: calc(100vh - 80px); display: flex; flex-direction: column;">
    
    <!-- 素材统计 - 现代化卡片 -->
    <div class="layui-col-md12" style="margin-bottom: 25px;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
            <!-- 视频素材卡片 -->
            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 8px 25px rgba(102,126,234,0.3); color: white; transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px;">🎬</div>
                <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 700;">视频素材</h3>
                <div style="font-size: 36px; font-weight: 900;" id="video-count">0</div>
                <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 14px;">个视频文件</p>
            </div>
            
            <!-- 音频素材卡片 -->
            <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 8px 25px rgba(240,147,251,0.3); color: white; transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px;">🎵</div>
                <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 700;">音频素材</h3>
                <div style="font-size: 36px; font-weight: 900;" id="audio-count">0</div>
                <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 14px;">个音频文件</p>
            </div>
            
            <!-- 图片素材卡片 -->
            <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 8px 25px rgba(79,172,254,0.3); color: white; transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px;">🖼️</div>
                <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 700;">图片素材</h3>
                <div style="font-size: 36px; font-weight: 900;" id="image-count">0</div>
                <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 14px;">张图片</p>
            </div>
            
            <!-- 文字模板卡片 -->
            <div style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 8px 25px rgba(67,233,123,0.3); color: white; transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'" onmouseout="this.style.transform='translateY(0)'">
                <div style="width: 80px; height: 80px; margin: 0 auto 20px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px;">📝</div>
                <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 700;">文字模板</h3>
                <div style="font-size: 36px; font-weight: 900;" id="text-count">0</div>
                <p style="margin: 10px 0 0 0; opacity: 0.9; font-size: 14px;">个模板</p>
            </div>
        </div>
    </div>
    
    <!-- 素材分类和搜索 - 现代化工具栏 -->
    <div class="layui-col-md12" style="margin-bottom: 25px;">
        <div style="background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.6) 100%); border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
            <!-- 分类按钮组 -->
            <div style="display: flex; gap: 8px; flex: 1;">
                <button style="padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(102,126,234,0.3); transition: all 0.3s;" data-filter="all">
                    <i class="fa fa-th" style="margin-right: 6px;"></i>全部素材
                </button>
                <button style="padding: 10px 20px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.8); border: 1px solid rgba(102,126,234,0.3); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s;" data-filter="video" onmouseover="this.style.background='rgba(102,126,234,0.2)'; this.style.borderColor='rgba(102,126,234,0.5)'" onmouseout="this.style.background='rgba(15,23,42,0.8)'; this.style.borderColor='rgba(102,126,234,0.3)'">
                    <i class="fa fa-play-circle" style="margin-right: 6px;"></i>视频
                </button>
                <button style="padding: 10px 20px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.8); border: 1px solid rgba(240,147,251,0.3); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s;" data-filter="audio" onmouseover="this.style.background='rgba(240,147,251,0.2)'; this.style.borderColor='rgba(240,147,251,0.5)'" onmouseout="this.style.background='rgba(15,23,42,0.8)'; this.style.borderColor='rgba(240,147,251,0.3)'">
                    <i class="fa fa-music" style="margin-right: 6px;"></i>音频
                </button>
                <button style="padding: 10px 20px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.8); border: 1px solid rgba(79,172,254,0.3); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s;" data-filter="image" onmouseover="this.style.background='rgba(79,172,254,0.2)'; this.style.borderColor='rgba(79,172,254,0.5)'" onmouseout="this.style.background='rgba(15,23,42,0.8)'; this.style.borderColor='rgba(79,172,254,0.3)'">
                    <i class="fa fa-picture-o" style="margin-right: 6px;"></i>图片
                </button>
                <button style="padding: 10px 20px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.8); border: 1px solid rgba(67,233,123,0.3); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s;" data-filter="text" onmouseover="this.style.background='rgba(67,233,123,0.2)'; this.style.borderColor='rgba(67,233,123,0.5)'" onmouseout="this.style.background='rgba(15,23,42,0.8)'; this.style.borderColor='rgba(67,233,123,0.3)'">
                    <i class="fa fa-file-text-o" style="margin-right: 6px;"></i>文字
                </button>
            </div>
            
            <!-- 搜索框 -->
            <div style="display: flex; align-items: center; min-width: 300px;">
                <div style="position: relative; flex: 1;">
                    <input type="text" id="material-search" placeholder="搜索素材名称、标签..." style="width: 100%; padding: 10px 40px 10px 15px; background: rgba(15,23,42,0.8); border: 1px solid rgba(102,126,234,0.3); border-radius: 10px; color: rgba(255,255,255,0.9); font-size: 13px; outline: none;" onfocus="this.style.borderColor='rgba(102,126,234,0.6)'; this.style.background='rgba(15,23,42,0.95)'" onblur="this.style.borderColor='rgba(102,126,234,0.3)'; this.style.background='rgba(15,23,42,0.8)'">
                    <button onclick="searchMaterials()" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); padding: 6px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.boxShadow='0 4px 15px rgba(102,126,234,0.4)'" onmouseout="this.style.boxShadow='none'">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 上传区域 - 现代化拖拽式 -->
    <div class="layui-col-md12" style="margin-bottom: 25px;">
        <div onclick="document.getElementById('material-upload').click()" style="background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%); border: 3px dashed #667eea; border-radius: 25px; padding: 60px; text-align: center; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background='linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%)'; this.style.borderColor='#764ba2'; this.style.transform='scale(1.02)'" onmouseout="this.style.background='linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%)'; this.style.borderColor='#667eea'; this.style.transform='scale(1)'">
            <div style="font-size: 80px; margin-bottom: 20px;">☁️</div>
            <h2 style="margin: 0 0 10px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 28px; font-weight: 900;">拖拽文件到此处上传</h2>
            <p style="margin: 0 0 10px 0; color: #999; font-size: 16px;">或点击选择文件</p>
            <div style="margin-top: 20px; display: inline-flex; gap: 15px;">
                <span style="padding: 8px 16px; background: rgba(102,126,234,0.1); color: #667eea; border-radius: 20px; font-size: 13px; font-weight: 600;">🎬 视频</span>
                <span style="padding: 8px 16px; background: rgba(240,147,251,0.1); color: #f093fb; border-radius: 20px; font-size: 13px; font-weight: 600;">🎵 音频</span>
                <span style="padding: 8px 16px; background: rgba(79,172,254,0.1); color: #4facfe; border-radius: 20px; font-size: 13px; font-weight: 600;">🖼️ 图片</span>
                <span style="padding: 8px 16px; background: rgba(67,233,123,0.1); color: #43e97b; border-radius: 20px; font-size: 13px; font-weight: 600;">📝 文本</span>
            </div>
            <input type="file" id="material-upload" style="display: none;" multiple accept="video/*,audio/*,image/*,.txt">
        </div>
    </div>
    
    <!-- 素材列表 - 现代化网格布局 -->
    <div class="layui-col-md12" style="flex: 1;">
        <div style="background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.6) 100%); border-radius: 20px; padding: 25px; border: 1px solid rgba(255,255,255,0.1); min-height: 500px;">
            <!-- 标题栏 -->
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,0.1);">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="width: 45px; height: 45px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa fa-th" style="color: white; font-size: 20px;"></i>
                    </div>
                    <h3 style="margin: 0; font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.95);">素材列表</h3>
                </div>
                <select style="padding: 10px 18px; background: rgba(15,23,42,0.8); border: 1px solid rgba(102,126,234,0.3); border-radius: 10px; color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 600; cursor: pointer;">
                    <option>最新上传</option>
                    <option>按名称</option>
                    <option>按大小</option>
                    <option>按类型</option>
                </select>
            </div>
            
            <!-- 素材网格：内容由 getMaterialList/renderMaterialGrid 通过真实API加载 -->
            <div id="material-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;"></div>
            
            <!-- 分页 -->
            <div style="display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);">
                <button style="padding: 8px 16px; background: rgba(102,126,234,0.2); color: #667eea; border: 1px solid rgba(102,126,234,0.3); border-radius: 8px; font-size: 13px; cursor: pointer;">上一页</button>
                <div style="display: flex; gap: 8px;">
                    <button style="padding: 8px 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 13px; cursor: pointer;">1</button>
                    <button style="padding: 8px 12px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 13px; cursor: pointer;">2</button>
                    <button style="padding: 8px 12px; background: rgba(15,23,42,0.8); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 13px; cursor: pointer;">3</button>
                </div>
                <button style="padding: 8px 16px; background: rgba(102,126,234,0.2); color: #667eea; border: 1px solid rgba(102,126,234,0.3); border-radius: 8px; font-size: 13px; cursor: pointer;">下一页</button>
            </div>
        </div>
    </div>
    
    <!-- 最近使用 - 横向滚动卡片 -->
    <div class="layui-col-md12" style="margin-top: 25px;">
        <div style="background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.6) 100%); border-radius: 20px; padding: 25px; border: 1px solid rgba(255,255,255,0.1);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <div style="width: 42px; height: 42px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                    <i class="fa fa-history" style="color: white; font-size: 18px;"></i>
                </div>
                <h3 style="margin: 0; font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.95);">最近使用</h3>
            </div>
            <div id="recent-materials" style="display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px;"></div>
        </div>
    </div>
    
    <!-- 收藏夹 - 横向滚动卡片 -->
    <div class="layui-col-md12" style="margin-top: 25px;">
        <div style="background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.6) 100%); border-radius: 20px; padding: 25px; border: 1px solid rgba(255,255,255,0.1);">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                <div style="width: 42px; height: 42px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                    <i class="fa fa-star" style="color: white; font-size: 18px;"></i>
                </div>
                <h3 style="margin: 0; font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.95);">收藏夹</h3>
            </div>
            <div id="favorite-materials" style="display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px;"></div>
        </div>
    </div>
    
    <!-- 底部：横向快捷操作面板 - 填充空白区域 -->
    <div class="layui-col-md12" style="margin-top: 30px;">
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
            
            <!-- 素材管理卡片 -->
            <div style="background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%); border-radius: 16px; padding: 20px; border: 1px solid rgba(102,126,234,0.15);">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(102,126,234,0.1);">
                    <div style="width: 38px; height: 38px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa fa-folder-open" style="color: white; font-size: 16px;"></i>
                    </div>
                    <h4 style="margin: 0; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.95);">素材管理</h4>
                </div>
                <div style="display: grid; gap: 10px;">
                    <button onclick="document.getElementById('material-upload').click()" style="width: 100%; padding: 10px; background: rgba(102,126,234,0.2); color: #667eea; border: 1px solid rgba(102,126,234,0.3); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;">
                        <i class="fa fa-upload" style="margin-right: 6px;"></i>批量上传
                    </button>
                    <button style="width: 100%; padding: 10px; background: rgba(102,126,234,0.2); color: #667eea; border: 1px solid rgba(102,126,234,0.3); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;">
                        <i class="fa fa-folder" style="margin-right: 6px;"></i>新建文件夹
                    </button>
                </div>
            </div>
            
            <!-- 素材筛选卡片 -->
            <div style="background: linear-gradient(135deg, rgba(255,165,0,0.06) 0%, rgba(255,192,203,0.06) 100%); border-radius: 16px; padding: 20px; border: 1px solid rgba(255,165,0,0.15);">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(255,165,0,0.1);">
                    <div style="width: 38px; height: 38px; background: linear-gradient(135deg, #ffa500 0%, #ffc0cb 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa fa-filter" style="color: white; font-size: 16px;"></i>
                    </div>
                    <h4 style="margin: 0; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.95);">快速筛选</h4>
                </div>
                <div style="display: grid; gap: 10px;">
                    <select style="width: 100%; padding: 9px; background: rgba(30,41,59,0.8); border: 1px solid rgba(255,165,0,0.3); border-radius: 8px; color: rgba(255,255,255,0.9); font-size: 12px; box-sizing: border-box;">
                        <option>全部类型</option>
                        <option>视频文件</option>
                        <option>音频文件</option>
                        <option>图片文件</option>
                    </select>
                    <select style="width: 100%; padding: 9px; background: rgba(30,41,59,0.8); border: 1px solid rgba(255,165,0,0.3); border-radius: 8px; color: rgba(255,255,255,0.9); font-size: 12px; box-sizing: border-box;">
                        <option>最新上传</option>
                        <option>按名称</option>
                        <option>按大小</option>
                    </select>
                </div>
            </div>
            
            <!-- 存储统计卡片 -->
            <div style="background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(5,150,105,0.08) 100%); border-radius: 16px; padding: 20px; border: 1px solid rgba(16,185,129,0.15);">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 2px solid rgba(16,185,129,0.1);">
                    <div style="width: 38px; height: 38px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa fa-database" style="color: white; font-size: 16px;"></i>
                    </div>
                    <h4 style="margin: 0; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.95);">存储统计</h4>
                </div>
                <div style="display: grid; gap: 12px;">
                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.7); margin-bottom: 6px;">
                            <span>已使用</span>
                            <span style="color: #10b981; font-weight: 600;">256MB / 512MB</span>
                        </div>
                        <div style="height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
                            <div style="width: 50%; height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%);"></div>
                        </div>
                    </div>
                    <div style="font-size: 11px; color: rgba(255,255,255,0.6);">
                        <div>📁 素材总数: 127 个</div>
                        <div style="margin-top: 4px;">⭐ 收藏: 15 个</div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

</div><!-- 闭合主内容区域 -->
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    layui.use(['element', 'layer', 'form', 'upload'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        
        // 页面加载完成后获取素材列表
        $(function() {
            getMaterialList();
            getMaterialStats();
            getRecentMaterials();
            getFavoriteMaterials();
            
            // 初始化拖拽上传
            initDragUpload();
            
            // 初始化文件上传
            initFileUpload();
            
            // 初始化搜索功能
            initSearch();
        });
        
        // 素材筛选
        $('.layui-btn-group[lay-filter="material-filter"] .layui-btn').on('click', function() {
            var filter = $(this).data('filter');
            $(this).siblings().removeClass('layui-btn-primary');
            $(this).addClass('layui-btn-primary');
            getMaterialList(filter);
        });
        
        // 搜索素材
        $('#material-search').on('keypress', function(e) {
            if (e.keyCode === 13) {
                searchMaterials();
            }
        });
        
        // 排序素材
        form.on('select(sort-materials)', function(data) {
            var sortBy = data.value;
            var filter = $('.layui-btn-group[lay-filter="material-filter"] .layui-btn-primary').data('filter');
            getMaterialList(filter, sortBy);
        });
    });
    
    // 获取素材列表 - 完整实现版本，从真实后端API加载
    function getMaterialList(filter = 'all', sortBy = 'newest', search = '') {
        console.log(`📥 加载素材列表: filter=${filter}, sortBy=${sortBy}, search=${search}`);
        
        var loading = showLoading('加载素材列表...');
        
        apiRequest('/api/materials', 'GET', {
            type: filter !== 'all' ? filter : undefined,
            sort_by: sortBy,
            search: search,
            page: 1,
            limit: 12
        }, function(response) {
            hideLoading(loading);
            
            if (response.code === 0 && response.data) {
                var materials = response.data.materials || [];
                var total = response.data.total || 0;
                var page = response.data.page || 1;
                var limit = response.data.limit || 12;
                
                console.log(`✅ 加载成功：${materials.length} 个素材（共${total}个）`);
                
                renderMaterialGrid(materials);
                renderMaterialPagination(total, page, limit);
            } else {
                console.log('📭 暂无素材');
                renderMaterialGrid([]);
                renderMaterialPagination(0, 1, 12);
            }
        }, function(error) {
            hideLoading(loading);
            console.error('❌ 加载素材列表失败:', error);
            layer.msg('❌ 加载失败: ' + (error || '网络错误'), {icon: 2, time: 2000});
            renderMaterialGrid([]);
        });
    }
    
    // 渲染素材网格
    function renderMaterialGrid(materials) {
        var materialGrid = $('#material-grid');
        if (materials.length === 0) {
            materialGrid.html(`
                <div class="layui-col-md12 text-center">
                    <i class="layui-icon layui-icon-folder-open" style="font-size: 50px; color: #ccc;"></i>
                    <p style="color: #ccc; margin-top: 20px;">暂无素材数据</p>
                    <button class="layui-btn layui-btn-primary layui-btn-sm operation-btn mt-10" onclick="uploadMaterial()">
                        <i class="layui-icon layui-icon-add"></i>上传第一个素材
                    </button>
                </div>
            `);
            return;
        }
        
        var html = '';
        materials.forEach(material => {
            var typeIcon = '';
            var typeColor = '';
            var typeText = '';
            var previewHtml = '';
            
            switch(material.type) {
                case 'video':
                    typeIcon = 'layui-icon-video';
                    typeColor = 'layui-btn-primary';
                    typeText = '视频';
                    previewHtml = `
                        <video style="width: 100%; height: 120px; object-fit: cover; border-radius: 4px;">
                            <source src="${material.url}" type="video/mp4">
                        </video>
                    `;
                    break;
                case 'audio':
                    typeIcon = 'layui-icon-music';
                    typeColor = 'layui-btn-normal';
                    typeText = '音频';
                    previewHtml = `
                        <div style="width: 100%; height: 120px; background: #f8f8f8; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                            <i class="layui-icon ${typeIcon}" style="font-size: 40px; color: #009688;"></i>
                        </div>
                    `;
                    break;
                case 'image':
                    typeIcon = 'layui-icon-picture';
                    typeColor = 'layui-btn-success';
                    typeText = '图片';
                    previewHtml = `
                        <img src="${material.url}" alt="${material.name}" 
                             style="width: 100%; height: 120px; object-fit: cover; border-radius: 4px;">
                    `;
                    break;
                case 'text':
                    typeIcon = 'layui-icon-fonts';
                    typeColor = 'layui-btn-danger';
                    typeText = '文字';
                    previewHtml = `
                        <div style="width: 100%; height: 120px; background: #f8f8f8; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                            <i class="layui-icon ${typeIcon}" style="font-size: 40px; color: #ff4d4f;"></i>
                        </div>
                    `;
                    break;
            }
            
            var favoriteIcon = material.favorite ? 'layui-icon-star' : 'layui-icon-star-o';
            var favoriteColor = material.favorite ? 'text-yellow-400' : 'text-gray-400';
            
            html += `
                <div class="layui-col-md2">
                    <div class="layui-card material-item" id="material-${material.id}">
                        <div class="relative">
                            ${previewHtml}
                            <div class="absolute top-2 right-2">
                                <span class="layui-btn ${typeColor} layui-btn-xs" style="border-radius: 12px;">${typeText}</span>
                            </div>
                            <div class="absolute top-2 left-2">
                                <i class="layui-icon ${favoriteIcon} ${favoriteColor}" style="font-size: 16px; cursor: pointer;" onclick="toggleFavorite('${material.id}', this)"></i>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <h4 class="layui-card-title" style="font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${material.name}</h4>
                            <p class="layui-card-subtitle" style="font-size: 12px; color: #666;">${formatFileSize(material.size)}</p>
                            <div class="layui-btn-group" style="margin-top: 10px;">
                                <button class="layui-btn layui-btn-primary layui-btn-xs operation-btn" onclick="previewMaterial('${material.id}')">
                                    <i class="layui-icon layui-icon-eye"></i>
                                </button>
                                <button class="layui-btn layui-btn-normal layui-btn-xs operation-btn" onclick="addMaterialToProject('${material.id}')">
                                    <i class="layui-icon layui-icon-plus"></i>
                                </button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs operation-btn" onclick="deleteMaterial('${material.id}', '${material.name}')">
                                    <i class="layui-icon layui-icon-delete"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        materialGrid.html(html);
    }
    
    // 渲染分页
    function renderMaterialPagination(total, page, limit) {
        var pagination = $('#material-pagination');
        var totalPages = Math.ceil(total / limit);
        
        if (totalPages <= 1) {
            pagination.html('');
            return;
        }
        
        var html = '<div class="layui-box layui-laypage layui-laypage-default">';
        
        // 上一页
        if (page > 1) {
            html += `<a href="javascript:;" class="layui-laypage-prev" onclick="changeMaterialPage(${page - 1})">上一页</a>`;
        }
        
        // 页码
        for (var i = 1; i <= totalPages; i++) {
            if (i === page) {
                html += `<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>${i}</em></span>`;
            } else {
                html += `<a href="javascript:;" onclick="changeMaterialPage(${i})">${i}</a>`;
            }
        }
        
        // 下一页
        if (page < totalPages) {
            html += `<a href="javascript:;" class="layui-laypage-next" onclick="changeMaterialPage(${page + 1})">下一页</a>`;
        }
        
        html += '</div>';
        pagination.html(html);
    }
    
    // 切换页码
    function changeMaterialPage(page) {
        var filter = $('.layui-btn-group[lay-filter="material-filter"] .layui-btn-primary').data('filter');
        var sortBy = $('select[lay-filter="sort-materials"]').val();
        var search = $('#material-search').val();
        
        var loading = showLoading();
        apiRequest('/material/list', 'GET', {
            filter: filter,
            sortBy: sortBy,
            search: search,
            page: page,
            limit: 12
        }, function(data) {
            hideLoading(loading);
            renderMaterialGrid(data.materials);
            renderMaterialPagination(data.total, data.page, data.limit);
        }, function(error) {
            hideLoading(loading);
            layer.msg(error, {icon: 2});
        });
    }
    
    // 获取素材统计 - 完整实现版本，从真实后端API加载
    function getMaterialStats() {
        console.log('📊 加载素材统计...');
        
        apiRequest('/api/materials/stats', 'GET', {}, function(response) {
            if (response.code === 0 && response.data) {
                var stats = response.data;
                
                $('#video-count').text(stats.video || 0);
                $('#audio-count').text(stats.audio || 0);
                $('#image-count').text(stats.image || 0);
                $('#text-count').text(stats.text || 0);
                
                console.log('✅ 素材统计:', stats);
            } else {
                // 默认显示0
                $('#video-count').text(0);
                $('#audio-count').text(0);
                $('#image-count').text(0);
                $('#text-count').text(0);
            }
        }, function(error) {
            console.error('❌ 加载素材统计失败:', error);
            // 出错时也显示0
            $('#video-count').text(0);
            $('#audio-count').text(0);
            $('#image-count').text(0);
            $('#text-count').text(0);
        });
    }
    
    // 获取最近使用的素材
    function getRecentMaterials() {
        apiRequest('/material/recent', 'GET', {limit: 6}, function(data) {
            renderRecentMaterials(data.materials);
        });
    }
    
    // 渲染最近使用的素材
    function renderRecentMaterials(materials) {
        var recentMaterials = $('#recent-materials');
        if (materials.length === 0) {
            recentMaterials.html('<p class="text-center text-gray-500">暂无最近使用的素材</p>');
            return;
        }
        
        var html = '';
        materials.forEach(material => {
            var typeIcon = '';
            switch(material.type) {
                case 'video': typeIcon = 'layui-icon-video'; break;
                case 'audio': typeIcon = 'layui-icon-music'; break;
                case 'image': typeIcon = 'layui-icon-picture'; break;
                case 'text': typeIcon = 'layui-icon-fonts'; break;
            }
            
            html += `
                <div class="layui-col-md2">
                    <div class="layui-card material-item" onclick="addMaterialToProject('${material.id}')">
                        <div class="layui-card-body text-center">
                            <i class="layui-icon ${typeIcon}" style="font-size: 30px; color: #009688;"></i>
                            <h4 class="layui-card-title" style="font-size: 12px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${material.name}</h4>
                        </div>
                    </div>
                </div>
            `;
        });
        
        recentMaterials.html(html);
    }
    
    // 获取收藏的素材
    function getFavoriteMaterials() {
        apiRequest('/material/favorite', 'GET', {limit: 6}, function(data) {
            renderFavoriteMaterials(data.materials);
        });
    }
    
    // 渲染收藏的素材
    function renderFavoriteMaterials(materials) {
        var favoriteMaterials = $('#favorite-materials');
        if (materials.length === 0) {
            favoriteMaterials.html('<p class="text-center text-gray-500">暂无收藏的素材</p>');
            return;
        }
        
        var html = '';
        materials.forEach(material => {
            var typeIcon = '';
            switch(material.type) {
                case 'video': typeIcon = 'layui-icon-video'; break;
                case 'audio': typeIcon = 'layui-icon-music'; break;
                case 'image': typeIcon = 'layui-icon-picture'; break;
                case 'text': typeIcon = 'layui-icon-fonts'; break;
            }
            
            html += `
                <div class="layui-col-md2">
                    <div class="layui-card material-item" onclick="addMaterialToProject('${material.id}')">
                        <div class="layui-card-body text-center">
                            <i class="layui-icon ${typeIcon}" style="font-size: 30px; color: #ff4d4f;"></i>
                            <h4 class="layui-card-title" style="font-size: 12px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${material.name}</h4>
                        </div>
                    </div>
                </div>
            `;
        });
        
        favoriteMaterials.html(html);
    }
    
    // 上传素材 - 完整实现版本
    function uploadMaterial() {
        console.log('📤 打开文件选择器');
        $('#material-upload').click();
    }
    
    // 初始化文件上传 - 完整实现版本
    function initFileUpload() {
        $('#material-upload').on('change', function(e) {
            var files = e.target.files;
            if (files && files.length > 0) {
                console.log(`📁 选择了 ${files.length} 个文件`);
                uploadFiles(files);
            }
            // 清空input，允许重复上传相同文件
            $(this).val('');
        });
    }
    
    // 初始化拖拽上传 - 完整实现版本
    function initDragUpload() {
        var uploadArea = $('#upload-area');
        
        if (uploadArea.length === 0) {
            console.log('⚠️ 未找到上传区域');
            return;
        }
        
        uploadArea.on('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css('border-color', '#667eea');
            $(this).css('background', 'rgba(102,126,234,0.05)');
        });
        
        uploadArea.on('dragleave', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css('border-color', '#e6e6e6');
            $(this).css('background', 'transparent');
        });
        
        uploadArea.on('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css('border-color', '#e6e6e6');
            $(this).css('background', 'transparent');
            
            var files = e.originalEvent.dataTransfer.files;
            if (files.length > 0) {
                console.log(`🎯 拖拽了 ${files.length} 个文件`);
                uploadFiles(files);
            }
        });
        
        uploadArea.on('click', function() {
            $('#material-upload').click();
        });
        
        console.log('✅ 拖拽上传已初始化');
    }
    
    // 上传文件 - 完整实现版本，精确不简化
    function uploadFiles(files) {
        console.log('🚀 开始上传流程...');
        
        // 1. 文件验证
        var validFiles = [];
        var invalidFiles = [];
        
        // 支持的文件类型
        var videoExts = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'];
        var audioExts = ['mp3', 'wav', 'aac', 'flac', 'ogg', 'm4a'];
        var imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
        var textExts = ['txt', 'md', 'srt', 'vtt'];
        
        var allExts = videoExts.concat(audioExts).concat(imageExts).concat(textExts);
        
        // 最大文件大小（500MB）
        var maxSize = 500 * 1024 * 1024;
        
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var fileName = file.name;
            var fileSize = file.size;
            var fileExt = fileName.split('.').pop().toLowerCase();
            
            console.log(`📋 检查文件: ${fileName} (${(fileSize / 1024 / 1024).toFixed(2)}MB)`);
            
            // 验证文件扩展名
            if (!allExts.includes(fileExt)) {
                invalidFiles.push({
                    name: fileName,
                    reason: '不支持的文件类型'
                });
                continue;
            }
            
            // 验证文件大小
            if (fileSize > maxSize) {
                invalidFiles.push({
                    name: fileName,
                    reason: '文件过大（超过500MB）'
                });
                continue;
            }
            
            validFiles.push(file);
        }
        
        // 显示验证结果
        if (invalidFiles.length > 0) {
            var errorMsg = '以下文件无法上传：\n';
            invalidFiles.forEach(function(f) {
                errorMsg += `- ${f.name}: ${f.reason}\n`;
            });
            layer.alert(errorMsg, {icon: 0, title: '文件验证失败'});
        }
        
        if (validFiles.length === 0) {
            layer.msg('❌ 没有可上传的文件', {icon: 2});
            return;
        }
        
        console.log(`✅ 验证通过：${validFiles.length} 个文件`);
        
        // 2. 构建FormData
        var formData = new FormData();
        for (var j = 0; j < validFiles.length; j++) {
            formData.append('files', validFiles[j]);
        }
        
        // 3. 显示上传进度
        var uploadIndex = layer.msg(`正在上传 ${validFiles.length} 个文件...`, {
            icon: 16,
            time: 0,
            shade: 0.3
        });
        
        // 4. 执行上传
        $.ajax({
            url: '/api/materials/upload',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                // 监听上传进度
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        console.log(`📊 上传进度: ${percent}%`);
                        layer.msg(`上传中: ${percent}%`, {
                            icon: 16,
                            time: 0,
                            shade: 0.3
                        });
                    }
                }, false);
                return xhr;
            },
            success: function(response) {
                layer.close(uploadIndex);
                
                if (response.code === 0) {
                    console.log('✅ 上传成功:', response.data);
                    layer.msg(`✅ 成功上传 ${validFiles.length} 个素材！`, {
                        icon: 1,
                        time: 2500
                    });
                    
                    // 刷新素材列表和统计
                    getMaterialList();
                    getMaterialStats();
                    getRecentMaterials();
                } else {
                    console.error('❌ 上传失败:', response.msg);
                    layer.msg('❌ 上传失败: ' + response.msg, {icon: 2, time: 3000});
                }
            },
            error: function(xhr, status, error) {
                layer.close(uploadIndex);
                console.error('❌ 上传请求失败:', error);
                layer.msg('❌ 上传失败: ' + (error || '网络错误'), {icon: 2, time: 3000});
            }
        });
    }
    
    // 预览素材 - 完整实现版本，从真实后端API加载
    function previewMaterial(materialId) {
        console.log(`👁️ 预览素材: ${materialId}`);
        
        var loading = showLoading('加载素材详情...');
        
        apiRequest(`/api/materials/${materialId}`, 'GET', {}, function(response) {
            hideLoading(loading);
            
            if (response.code === 0 && response.data) {
                console.log('✅ 素材详情加载成功:', response.data);
                showMaterialPreview(response.data);
            } else {
                console.error('❌ 加载素材详情失败:', response.msg);
                layer.msg('❌ 加载失败: ' + (response.msg || '未知错误'), {icon: 2});
            }
        }, function(error) {
            hideLoading(loading);
            console.error('❌ 预览素材失败:', error);
            layer.msg('❌ 加载失败: ' + (error || '网络错误'), {icon: 2});
        });
    }
    
    // 显示素材预览 - 完整实现版本，支持所有素材类型
    function showMaterialPreview(material) {
        console.log('🎬 显示素材预览:', material);
        
        var previewHtml = '';
        var typeIcon = '';
        var typeColor = '';
        
        switch(material.type) {
            case 'video':
                typeIcon = '🎬';
                typeColor = '#667eea';
                previewHtml = `
                    <div style="background: #000; border-radius: 12px; overflow: hidden;">
                        <video controls autoplay style="width: 100%; max-height: 450px; display: block;">
                            <source src="${material.url || material.path}" type="video/mp4">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                `;
                break;
            case 'audio':
                typeIcon = '🎵';
                typeColor = '#43e97b';
                previewHtml = `
                    <div style="background: linear-gradient(135deg, rgba(67,233,123,0.1) 0%, rgba(56,239,125,0.1) 100%); padding: 60px 30px; border-radius: 12px; text-align: center;">
                        <div style="font-size: 80px; margin-bottom: 20px;">🎵</div>
                        <audio controls autoplay style="width: 100%; max-width: 500px; margin: 0 auto;">
                            <source src="${material.url || material.path}" type="audio/mpeg">
                            您的浏览器不支持音频播放
                        </audio>
                        <p style="margin-top: 15px; color: #666; font-size: 13px;">
                            ${material.duration ? `时长: ${material.duration}秒` : ''}
                        </p>
                    </div>
                `;
                break;
            case 'image':
                typeIcon = '🖼️';
                typeColor = '#4facfe';
                previewHtml = `
                    <div style="text-align: center; background: #f8f9fa; padding: 20px; border-radius: 12px;">
                        <img src="${material.url || material.path}" alt="${material.name}" 
                             style="max-width: 100%; max-height: 450px; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                    </div>
                `;
                break;
            case 'text':
                typeIcon = '📝';
                typeColor = '#ff6b6b';
                previewHtml = `
                    <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; max-height: 450px; overflow-y: auto; border: 1px solid #e9ecef;">
                        <pre style="white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.6; margin: 0; color: #333;">${material.content || '无内容'}</pre>
                    </div>
                `;
                break;
        }
        
        layer.open({
            type: 1,
            title: material.name,
            area: ['800px', '500px'],
            content: `
                <div class="layui-card">
                    <div class="layui-card-body">
                        ${previewHtml}
                        <div class="layui-row layui-col-space10 mt-10">
                            <div class="layui-col-md6">
                                <p class="text-sm text-gray-600">
                                    类型: ${getMaterialTypeText(material.type)}<br>
                                    大小: ${formatFileSize(material.size)}<br>
                                    上传时间: ${formatDate(material.created_at)}
                                </p>
                            </div>
                            <div class="layui-col-md6 text-right">
                                <button class="layui-btn layui-btn-primary operation-btn" onclick="addMaterialToProject('${material.id}')">
                                    <i class="layui-icon layui-icon-plus"></i>添加到项目
                                </button>
                                <button class="layui-btn layui-btn-normal operation-btn" onclick="downloadMaterial('${material.id}')">
                                    <i class="layui-icon layui-icon-download"></i>下载
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `
        });
    }
    
    // 添加素材到项目
    function addMaterialToProject(materialId) {
        if (!currentProjectId) {
            layer.msg('请先创建或打开一个项目', {icon: 2});
            return;
        }
        
        var loading = showLoading();
        apiRequest('/project/add-material', 'POST', {
            project_id: currentProjectId,
            material_id: materialId
        }, function(data) {
            hideLoading(loading);
            layer.msg('素材已添加到项目', {icon: 1});
        }, function(error) {
            hideLoading(loading);
            layer.msg(error, {icon: 2});
        });
    }
    
    // 切换收藏
    function toggleFavorite(materialId, iconElement) {
        var isFavorite = $(iconElement).hasClass('layui-icon-star');
        
        var loading = showLoading();
        apiRequest('/material/favorite', 'POST', {
            material_id: materialId,
            favorite: !isFavorite
        }, function(data) {
            hideLoading(loading);
            if (!isFavorite) {
                $(iconElement).removeClass('layui-icon-star-o text-gray-400');
                $(iconElement).addClass('layui-icon-star text-yellow-400');
                layer.msg('已收藏', {icon: 1});
            } else {
                $(iconElement).removeClass('layui-icon-star text-yellow-400');
                $(iconElement).addClass('layui-icon-star-o text-gray-400');
                layer.msg('已取消收藏', {icon: 1});
            }
            getFavoriteMaterials();
        }, function(error) {
            hideLoading(loading);
            layer.msg(error, {icon: 2});
        });
    }
    
    // 删除素材 - 完整实现版本，删除文件+数据库
    function deleteMaterial(materialId, materialName) {
        console.log(`🗑️ 准备删除素材: ${materialId} - ${materialName}`);
        
        layer.confirm(`
            <div style="padding: 20px; text-align: center;">
                <i class="layui-icon layui-icon-delete" style="font-size: 48px; color: #ff6b6b;"></i>
                <h3 style="margin: 15px 0; color: #333;">⚠️ 确定要删除素材吗？</h3>
                <p style="margin: 10px 0; color: #666; font-size: 14px;">
                    素材名称：<strong>${materialName}</strong><br>
                    此操作将永久删除文件和数据库记录，不可恢复！
                </p>
            </div>
        `, {
            title: '删除确认',
            btn: ['确认删除', '取消'],
            btn1: function(index) {
                layer.close(index);
                
                var loading = showLoading('正在删除素材...');
                
                // 调用真实后端API删除素材
                apiRequest(`/api/materials/${materialId}`, 'DELETE', {}, function(response) {
                    hideLoading(loading);
                    
                    if (response.code === 0) {
                        console.log('✅ 素材删除成功');
                        
                        // 从DOM中移除素材卡片（带动画）
                        $(`#material-${materialId}`).fadeOut(300, function() {
                            $(this).remove();
                            
                            // 检查是否还有素材
                            if ($('#material-grid .material-item').length === 0) {
                                $('#material-grid').html(`
                                    <div class="layui-col-md12 text-center">
                                        <i class="layui-icon layui-icon-folder-open" style="font-size: 50px; color: #ccc;"></i>
                                        <p style="color: #ccc; margin-top: 20px;">暂无素材数据</p>
                                        <button class="layui-btn layui-btn-primary layui-btn-sm operation-btn mt-10" onclick="uploadMaterial()">
                                            <i class="layui-icon layui-icon-add"></i>上传第一个素材
                                        </button>
                                    </div>
                                `);
                            }
                        });
                        
                        layer.msg('✅ 素材删除成功！', {icon: 1, time: 2000});
                        
                        // 刷新统计和列表
                        getMaterialStats();
                        getRecentMaterials();
                        getFavoriteMaterials();
                        
                    } else {
                        console.error('❌ 删除失败:', response.msg);
                        layer.msg('❌ 删除失败: ' + response.msg, {icon: 2, time: 2000});
                    }
                }, function(error) {
                    hideLoading(loading);
                    console.error('❌ 删除请求失败:', error);
                    layer.msg('❌ 删除失败: ' + (error || '网络错误'), {icon: 2, time: 2000});
                });
            },
            btn2: function(index) {
                layer.close(index);
                console.log('❌ 用户取消删除');
            }
        });
    }
    
    // 下载素材
    function downloadMaterial(materialId) {
        window.open(`/api/material/download/${materialId}`, '_blank');
    }
    
    // 搜索素材 - 完整实现版本，真实搜索
    function searchMaterials() {
        var search = $('#material-search').val();
        
        console.log(`🔍 搜索素材: "${search}"`);
        
        var filter = $('.layui-btn-group[lay-filter="material-filter"] .layui-btn-primary').data('filter') || 'all';
        var sortBy = $('select[lay-filter="sort-materials"]').val() || 'newest';
        
        // 调用getMaterialList，它会调用真实后端API搜索
        getMaterialList(filter, sortBy, search);
    }
    
    // 初始化搜索功能
    function initSearch() {
        // 绑定搜索输入框的回车事件
        $('#material-search').on('keyup', function(e) {
            if (e.keyCode === 13) {  // 回车键
                searchMaterials();
            }
        });
        
        // 实时搜索（输入后延迟搜索）
        var searchTimer;
        $('#material-search').on('input', function() {
            clearTimeout(searchTimer);
            var search = $(this).val();
            
            // 延迟500ms搜索，避免频繁请求
            searchTimer = setTimeout(function() {
                if (search.length >= 2 || search.length === 0) {
                    console.log(`🔍 实时搜索: "${search}"`);
                    searchMaterials();
                }
            }, 500);
        });
        
        console.log('✅ 搜索功能已初始化');
    }
    
    // 获取素材类型文本
    function getMaterialTypeText(type) {
        switch(type) {
            case 'video': return '视频';
            case 'audio': return '音频';
            case 'image': return '图片';
            case 'text': return '文字';
            default: return '未知';
        }
    }
    
    // 格式化文件大小
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        var k = 1024;
        var sizes = ['Bytes', 'KB', 'MB', 'GB'];
        var i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // 格式化日期
    function formatDate(dateString) {
        var date = new Date(dateString);
        return date.toLocaleString('zh-CN');
    }
</script>
{% endblock %}