<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竞对新品</title>
    <link rel="stylesheet" href="tailwind.min.css">
    <link href="font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #f59e0b;
            --light-bg: #f9fafb;
            --dark-text: #1f2937;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
        }
        
        /* 表格美化 */
        #products-list {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 16px rgba(0,0,0,0.07);
            background: #fff;
            width: 100%;
            border-collapse: separate;
        }
        
        #products-list th, #products-list td {
            vertical-align: middle;
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        #products-list th {
            background-color: #f3f4f6;
            font-weight: 600;
            color: #4b5563;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }
        
        #products-list tr:hover {
            background-color: #f9fafb;
            transition: background-color 0.2s ease;
        }
        
        #products-list img {
            border-radius: 6px;
            border: 1px solid #eee;
            background: #fafafa;
            width: 56px;
            height: 56px;
            object-fit: contain;
            margin: 0 auto;
            display: block;
            transition: transform 0.2s ease;
        }
        
        #products-list img:hover {
            transform: scale(1.05);
        }
        
        #products-list td {
            font-size: 0.9375rem;
        }
        
        #products-list .product-name {
            font-weight: 600;
            color: #111827;
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .rating-stars i {
            margin-right: 2px;
        }
        
        .rating-stars i.fa-star,
        .rating-stars i.fa-star-half-o {
            color: var(--secondary);
        }
        
        .rating-stars i.fa-star-o {
            color: #e5e7eb;
        }
        
        .product-link {
            color: var(--primary);
            font-weight: 500;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
        }
        
        .product-link:hover {
            color: var(--secondary);
            text-decoration: underline;
        }
        
        .product-link i {
            margin-left: 4px;
            font-size: 0.8em;
        }
        
        /* 分页按钮美化 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .pagination button {
            border: 1px solid #e5e7eb;
            margin: 0 4px;
            min-width: 40px;
            height: 40px;
            border-radius: 6px;
            font-weight: 500;
            background-color: white;
            color: var(--dark-text);
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .pagination button:hover:not(:disabled) {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .pagination .active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-info {
            display: flex;
            align-items: center;
            margin: 0 12px;
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        /* 品牌筛选下拉菜单 */
        .brand-filter {
            position: relative;
            display: inline-block;
        }
        
        .brand-filter-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 100;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 8px;
            display: none;
        }
        
        .brand-filter-menu.show {
            display: block;
        }
        
        .brand-option {
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        .brand-option:hover {
            background-color: #f3f4f6;
        }
        
        .brand-option.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 空状态美化 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 0;
            text-align: center;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #e5e7eb;
            margin-bottom: 1.5rem;
        }
        
        .empty-state h3 {
            font-size: 1.25rem;
            color: #6b7280;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        
        .empty-state p {
            color: #9ca3af;
            max-width: 400px;
            margin: 0 auto;
        }
        
        /* 加载动画 */
        .loading-spinner {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            border: 3px solid rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 响应式表格 */
        @media (max-width: 900px) {
            #products-list, #products-list thead, #products-list tbody, 
            #products-list th, #products-list td, #products-list tr {
                display: block;
            }
            
            #products-list thead {
                display: none;
            }
            
            #products-list tr {
                margin-bottom: 1rem;
                border-radius: 10px;
                box-shadow: 0 1px 6px rgba(0,0,0,0.06);
                border: none;
                background: #fff;
                padding: 1rem;
                position: relative;
            }
            
            #products-list td {
                padding: 0.5rem 0;
                border: none;
                position: relative;
                padding-left: 50%;
                text-align: right;
            }
            
            #products-list td:before {
                content: attr(data-label);
                font-weight: 600;
                color: #6b7280;
                display: block;
                position: absolute;
                left: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.8125rem;
                text-align: left;
            }
            
            #products-list td img {
                margin-left: auto;
            }
            
            .pagination {
                flex-wrap: wrap;
            }
            
            .page-info {
                width: 100%;
                justify-content: center;
                margin: 0.5rem 0;
            }
        }
        
        /* 小屏幕优化 */
        @media (max-width: 640px) {
            #products-list td {
                padding-left: 40%;
            }
            
            .pagination button {
                min-width: 36px;
                height: 36px;
                font-size: 0.875rem;
                margin: 0 2px;
            }
        }
        
        #ai-analysis-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1em 0;
        }
        #ai-analysis-content th, #ai-analysis-content td {
            border: 1px solid #e5e7eb;
            padding: 6px 8px;
            text-align: left;
            word-break: break-all;
        }
        #ai-analysis-content th {
            background: #f3f4f6;
        }
        #ai-analysis-content {
            word-break: break-all;
            overflow-x: auto;
        }
        
        /* AI分析弹窗优化 */
        #ai-analysis-modal .close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 20;
        }
        #ai-analysis-modal .modal-content {
            max-height: 70vh;
            overflow-y: auto;
            position: relative;
            padding-top: 56px;
        }
        
        #ai-analysis-content p:empty,
        #ai-analysis-content p:not(:has(text)) {
            margin: 0;
            padding: 0;
            height: 0;
            min-height: 0;
        }
        
        #ai-analysis-content p {
            margin-top: 0.3em;
            margin-bottom: 0.3em;
        }
        #ai-analysis-content h1,
        #ai-analysis-content h2,
        #ai-analysis-content h3,
        #ai-analysis-content h4,
        #ai-analysis-content h5,
        #ai-analysis-content h6 {
            margin-top: 0.8em;
            margin-bottom: 0.4em;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">竞对新品</h1>
            <p class="text-gray-600">每天更新获取竟对分析，自动进行AI分析生成分析结果，查看详情请开梯子</p>
            <button id="ai-analysis-btn" class="ml-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">查看分析结果</button>
        </div>
        <div id="ai-analysis-modal" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg p-0 max-w-3xl min-w-[400px] w-full relative">
                <button id="close-ai-analysis" class="close-btn absolute top-3 right-3 text-gray-500 hover:text-red-500 text-3xl font-bold z-10 focus:outline-none focus:ring-2 focus:ring-red-400" style="width: 48px; height: 48px; background: rgba(255,255,255,0.95); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.10); border: none; display: flex; align-items: center; justify-content: center; transition: background 0.2s;">×</button>
                <div class="p-6 pt-2 modal-content">
                  <h2 class="text-xl font-bold mb-4 text-center">分析结果</h2>
                  <div id="ai-analysis-content" class="text-gray-800 text-base whitespace-pre-line min-h-[20px] max-h-[70vh] overflow-y-auto overflow-x-auto p-2" style="word-break: break-all;">加载中...</div>
                  <div class="text-xs text-gray-400 mt-2 text-center">按ESC键、点击空白处或右上角关闭</div>
                </div>
            </div>
        </div>

        <!-- 加载状态 -->
        <div id="loadingState" class="hidden flex flex-col items-center justify-center py-16">
            <div class="loading-spinner mb-4"></div>
            <p class="text-gray-600">正在加载数据...</p>
        </div>

        <!-- 产品列表 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
            <table id="products-list" class="w-full">
                <thead>
                    <tr>
                        <th class="text-left">序号</th>
                        <th class="text-left">图片</th>
                        <th class="text-left">
                            <div class="brand-filter">
                                <span class="cursor-pointer hover:text-primary transition-colors flex items-center">
                                    品牌 <i class="fa fa-caret-down ml-1 text-sm"></i>
                                </span>
                                <div class="brand-filter-menu">
                                    <div class="brand-option active" data-brand="">所有品牌</div>
                                    <!-- 品牌选项将通过JS动态添加 -->
                                </div>
                            </div>
                        </th>
                        <th class="text-left">产品名称</th>
                        <th class="text-right">价格</th>
                        <th class="text-right">评分</th>
                        <th class="text-right">上架时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 产品数据将通过JS动态添加 -->
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <button id="first-page" disabled>
                <i class="fa fa-angle-double-left"></i>
            </button>
            <button id="prev-page" disabled>
                <i class="fa fa-angle-left"></i>
            </button>
            <div class="page-info" id="page-info"></div>
            <button id="next-page">
                <i class="fa fa-angle-right"></i>
            </button>
            <button id="last-page">
                <i class="fa fa-angle-double-right"></i>
            </button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-blue-900 border-t py-6 mt-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <!-- 左侧内容 -->
                </div>
                <div class="flex space-x-4">
                    <p class="text-sm text-gray-300">&copy; 2025 竞对系统.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="app.js"></script>
    <script src="marked/marked.min.js"></script>
</body>
</html>