<?php
require __DIR__ . '/includes/config.php';
require __DIR__ . '/includes/auth.php';

// 分页和搜索参数处理
$currentPage = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$searchQuery = isset($_GET['search']) ? trim($_GET['search']) : '';
$categoryFilter = isset($_GET['category']) ? intval($_GET['category']) : 0;

// 构建查询参数
$whereClauses = ["s.is_public = 1", "s.is_approved = 1"];
$params = [];
$types = '';

if (!empty($searchQuery)) {
    $whereClauses[] = "(s.title LIKE ? OR s.content LIKE ?)";
    $params[] = "%{$searchQuery}%";
    $params[] = "%{$searchQuery}%";
    $types .= 'ss';
}

if ($categoryFilter > 0) {
    $whereClauses[] = "s.category_id = ?";
    $params[] = $categoryFilter;
    $types .= 'i';
}

$where = implode(' AND ', $whereClauses);

// 分页计算
$offset = ($currentPage - 1) * ITEMS_PER_PAGE;

// 获取SVG数据
$sql = "SELECT SQL_CALC_FOUND_ROWS 
            s.id, s.title, s.content, s.created_at,
            u.username, c.name AS category_name
        FROM ".DB_PREFIX."svgs s
        JOIN ".DB_PREFIX."users u ON s.user_id = u.id
        JOIN ".DB_PREFIX."categories c ON s.category_id = c.id
        WHERE $where
        ORDER BY s.created_at DESC
        LIMIT ? OFFSET ?";

$params[] = ITEMS_PER_PAGE;
$params[] = $offset;
$types .= 'ii';

$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$svgs = $stmt->fetchAll();

// 获取总数
$total = $pdo->query("SELECT FOUND_ROWS()")->fetchColumn();
$totalPages = ceil($total / ITEMS_PER_PAGE);

// 获取分类列表
$categories = $pdo->query("SELECT * FROM ".DB_PREFIX."categories ORDER BY name")->fetchAll();

// 获取用户收藏状态
$favorites = [];
if (is_logged_in())) {
    $stmt = $pdo->prepare("SELECT svg_id FROM ".DB_PREFIX."favorites WHERE user_id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $favorites = $stmt->fetchAll(PDO::FETCH_COLUMN);
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG素材库</title>
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <?php include __DIR__ . '/includes/header.php'; ?>

    <main class="container">
        <!-- 搜索和过滤区域 -->
        <div class="search-filter">
            <form method="GET" class="search-form">
                <input type="text" name="search" placeholder="搜索素材..." 
                       value="<?= htmlspecialchars($searchQuery) ?>">
                <select name="category">
                    <option value="0">所有分类</option>
                    <?php foreach ($categories as $cat): ?>
                    <option value="<?= $cat['id'] ?>" 
                        <?= $categoryFilter == $cat['id'] ? 'selected' : '' ?>>
                        <?= htmlspecialchars($cat['name']) ?>
                    </option>
                    <?php endforeach; ?>
                </select>
                <button type="submit">搜索</button>
            </form>
        </div>

        <!-- SVG展示区域 -->
        <div class="svg-gallery">
            <?php if (empty($svgs)): ?>
                <div class="empty-state">
                    <img src="/assets/images/empty.svg" alt="空状态" width="200">
                    <p>暂时没有公开素材，你可以成为第一个上传者！</p>
                </div>
            <?php else: ?>
                <?php foreach ($svgs as $svg): ?>
                <div class="svg-card">
                    <div class="svg-preview">
                        <?= $svg['content'] ?>
                    </div>
                    <div class="svg-info">
                        <h3><?= htmlspecialchars($svg['title']) ?></h3>
                        <div class="meta">
                            <span class="category">
                                <?= htmlspecialchars($svg['category_name']) ?>
                            </span>
                            <span class="author">
                                作者：<?= htmlspecialchars($svg['username']) ?>
                            </span>
                            <time><?= date('Y-m-d', strtotime($svg['created_at'])) ?></time>
                        </div>
                        <div class="actions">
                            <button class="copy-btn" 
                                data-clipboard-text="<?= htmlspecialchars($svg['content']) ?>">
                                复制代码
                            </button>
                            <?php if (is_logged_in()): ?>
                            <button class="favorite-btn <?= in_array($svg['id'], $favorites) ? 'active' : '' ?>" 
                                data-svg-id="<?= $svg['id'] ?>">
                                ♥ 收藏
                            </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>

        <!-- 分页导航 -->
        <?php if ($totalPages > 1): ?>
        <div class="pagination">
            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                <a href="?page=<?= $i ?>&search=<?= urlencode($searchQuery) ?>&category=<?= $categoryFilter ?>" 
                   class="<?= $i == $currentPage ? 'active' : '' ?>">
                    <?= $i ?>
                </a>
            <?php endfor; ?>
        </div>
        <?php endif; ?>
    </main>

    <?php include __DIR__ . '/includes/footer.php'; ?>

    <script src="/assets/js/main.js"></script>
    <script>
    // 复制功能
    document.querySelectorAll('.copy-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(btn.dataset.clipboardText);
                btn.textContent = '✓ 已复制';
                setTimeout(() => btn.textContent = '复制代码', 2000);
            } catch (err) {
                console.error('复制失败:', err);
            }
        });
    });

    // 收藏功能
    document.querySelectorAll('.favorite-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const svgId = btn.dataset.svgId;
            try {
                const response = await fetch(`/user/favorite.php?svg_id=${svgId}`);
                if (response.ok) {
                    btn.classList.toggle('active');
                    btn.textContent = btn.classList.contains('active') ? '♥ 已收藏' : '♡ 收藏';
                }
            } catch (err) {
                console.error('操作失败:', err);
            }
        });
    });
    </script>
</body>
</html>