<?php
/**
 * 首页 - 图片上传和搜索
 */
require_once __DIR__ . '/../vendor/autoload.php';

use App\Config\Config;
use App\Database\Database;

$config = Config::getInstance();
$db = Database::getInstance();

// 获取统计信息
$stats = [
    'total_groups' => $db->count('tg_groups', 'is_active = 1'),
    'total_images' => $db->count('tg_images', 'is_downloaded = 1'),
    'processed_images' => $db->count('tg_images', 'is_processed = 1'),
    'total_searches' => $db->count('search_history')
];

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $config->get('SITE_NAME', 'TG图片识别平台'); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #0088cc;
            --secondary-color: #2196F3;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding-top: 2rem;
        }
        
        .main-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .card {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: none;
        }
        
        .upload-area {
            border: 3px dashed #ccc;
            border-radius: 10px;
            padding: 3rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #f8f9fa;
        }
        
        .upload-area:hover,
        .upload-area.dragover {
            border-color: var(--primary-color);
            background: #e3f2fd;
        }
        
        .upload-icon {
            font-size: 4rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 1rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }
        
        .preview-container {
            display: none;
            margin-top: 2rem;
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            border-radius: 10px;
        }
        
        .btn-search {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
            padding: 12px 40px;
            font-size: 1.1rem;
            border-radius: 25px;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        
        .spinner {
            width: 3rem;
            height: 3rem;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 标题 -->
        <div class="text-center text-white mb-4">
            <h1 class="display-4 fw-bold mb-2">
                <i class="bi bi-search"></i>
                <?php echo $config->get('SITE_NAME', 'TG图片识别平台'); ?>
            </h1>
            <p class="lead">基于AI的Telegram图片智能搜索引擎</p>
        </div>

        <!-- 主卡片 -->
        <div class="card mb-4">
            <div class="card-body p-4">
                <h5 class="card-title mb-4">
                    <i class="bi bi-cloud-upload"></i> 上传图片开始搜索
                </h5>
                
                <!-- 上传区域 -->
                <div class="upload-area" id="uploadArea">
                    <i class="bi bi-image upload-icon"></i>
                    <h5>点击或拖拽图片到这里</h5>
                    <p class="text-muted mb-0">支持 JPG、PNG、GIF、WEBP 格式，最大 10MB</p>
                    <input type="file" id="fileInput" accept="image/*" style="display: none;">
                </div>
                
                <!-- 预览区域 -->
                <div class="preview-container" id="previewContainer">
                    <div class="text-center">
                        <img id="previewImage" class="preview-image" alt="预览">
                        <div class="mt-3">
                            <button class="btn btn-danger btn-sm" id="btnRemove">
                                <i class="bi bi-trash"></i> 移除
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 搜索选项 -->
                <div class="mt-4" id="searchOptions" style="display: none;">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        系统会搜索所有 <strong>60%</strong> 以上相似的图片，您可以在结果页面调整显示范围
                    </div>
                    
                    <div class="text-center mt-4">
                        <button class="btn btn-primary btn-search btn-lg" id="btnSearch">
                            <i class="bi bi-search"></i> 开始搜索
                            <small class="d-block mt-1" style="font-size: 0.8rem;">约需 20-40 秒，请耐心等待</small>
                        </button>
                    </div>
                </div>
                
                <!-- 加载中 -->
                <div class="loading" id="loading">
                    <div class="spinner-border spinner text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-3">正在分析图片并搜索相似内容...</p>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-card">
                <div class="stat-number"><?php echo number_format($stats['total_groups']); ?></div>
                <div class="stat-label">监听群组</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo number_format($stats['total_images']); ?></div>
                <div class="stat-label">图片数量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo number_format($stats['processed_images']); ?></div>
                <div class="stat-label">已处理</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo number_format($stats['total_searches']); ?></div>
                <div class="stat-label">搜索次数</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let selectedFile = null;
        
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const previewContainer = document.getElementById('previewContainer');
        const previewImage = document.getElementById('previewImage');
        const searchOptions = document.getElementById('searchOptions');
        const loading = document.getElementById('loading');
        const btnSearch = document.getElementById('btnSearch');
        const btnRemove = document.getElementById('btnRemove');
        
        // 点击上传
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });
        
        // 文件选择
        fileInput.addEventListener('change', (e) => {
            handleFile(e.target.files[0]);
        });
        
        // 拖拽上传
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            handleFile(e.dataTransfer.files[0]);
        });
        
        // 处理文件
        function handleFile(file) {
            if (!file || !file.type.startsWith('image/')) {
                alert('请选择图片文件！');
                return;
            }
            
            if (file.size > 10 * 1024 * 1024) {
                alert('文件大小不能超过10MB！');
                return;
            }
            
            selectedFile = file;
            
            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImage.src = e.target.result;
                uploadArea.style.display = 'none';
                previewContainer.style.display = 'block';
                searchOptions.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
        
        // 移除图片
        btnRemove.addEventListener('click', () => {
            selectedFile = null;
            fileInput.value = '';
            uploadArea.style.display = 'block';
            previewContainer.style.display = 'none';
            searchOptions.style.display = 'none';
        });
        
        // 开始搜索
        btnSearch.addEventListener('click', async () => {
            if (!selectedFile) {
                alert('请先上传图片！');
                return;
            }
            
            // 显示加载
            searchOptions.style.display = 'none';
            loading.style.display = 'block';
            
            // 上传并搜索
            const formData = new FormData();
            formData.append('image', selectedFile);
            // threshold和limit由后端控制
            
            try {
                const response = await fetch('api/search.php', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 跳转到结果页面
                    window.location.href = 'results.php?search_id=' + result.search_id;
                } else {
                    alert('搜索失败: ' + result.error);
                    searchOptions.style.display = 'block';
                    loading.style.display = 'none';
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
                searchOptions.style.display = 'block';
                loading.style.display = 'none';
            }
        });
    </script>
</body>
</html>
