<?php
header('Content-Type:text/html;
charset=utf-8');
require_once __DIR__ . '/config/database.php';

$keyword = trim($_GET['keyword'] ?? '');
$category = trim($_GET['category'] ?? '');

$sql = 'SELECT * FROM products WHERE status = 1';
$params = [];

if ($keyword !== '') {
    $sql .= ' AND (name LIKE ? OR brand LIKE ? OR model LIKE ?)';

    $like = '%' . $keyword . '%';

    $params[] = $like;
    $params[] = $like;
    $params[] = $like;
}

if ($category !== '') {
    $sql .= ' AND category = ?';
    $params[] = $category;
}

$sql .= ' ORDER BY id DESC';

$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$products = $stmt->fetchAll();

$categories = [
    'CPU',
    '显卡',
    '内存',
    '硬盘',
    '主板',
    '电源',
    '机箱',
    '显示器',
    '键盘鼠标',
    '其他'
];
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>硬件市场 - 乔雅电脑</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: #334155;
      font-family: "Microsoft YaHei", Arial, sans-serif;
      background: #f8fafc;
    }

    .container {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    header {
      padding: 24px 0;
      color: #fff;
      background: #0f172a;
    }

    header h1 {
      margin: 0;
    }

    nav {
      margin-top: 12px;
    }

    nav a {
      margin-right: 20px;
      color: #bfdbfe;
    }

    .search {
      display: flex;
      gap: 10px;
      margin: 30px 0;
    }

    .search input,
    .search select {
      padding: 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #fff;
    }

    .search input {
      flex: 1;
    }

    .search button {
      padding: 12px 20px;
      border: 0;
      border-radius: 6px;
      color: #fff;
      background: #2563eb;
      cursor: pointer;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding-bottom: 60px;
    }

    .card {
      overflow: hidden;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 5px 18px rgba(0, 0, 0, .05);
    }

    .card > img,
    .placeholder {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .placeholder {
      display: grid;
      place-items: center;
      font-size: 70px;
      background: #dbeafe;
    }

    .info {
      padding: 18px;
    }

    .category {
      color: #2563eb;
      font-size: 13px;
    }

    .info h2 {
      min-height: 54px;
      margin: 8px 0;
      color: #0f172a;
      font-size: 18px;
    }

    .info p {
      margin: 7px 0;
      color: #64748b;
      font-size: 14px;
    }

    .price {
      display: block;
      margin: 14px 0;
      color: #f97316;
      font-size: 22px;
      font-weight: bold;
    }

    .detail {
      display: block;
      padding: 10px;
      border-radius: 6px;
      color: #fff;
      background: #2563eb;
      text-align: center;
    }

    @media (max-width: 900px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .search {
        flex-direction: column;
      }

      .grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="container">
      <h1>乔雅电脑硬件市场</h1>

      <nav>
        <a href="index.html">返回首页</a>
        <a href="login.php">管理员登录</a>
      </nav>
    </div>
  </header>

  <main class="container">
    <form class="search" method="get">
      <input
        type="text"
        name="keyword"
        placeholder="搜索商品名称、品牌或型号"
        value="<?= htmlspecialchars($keyword, ENT_QUOTES, 'UTF-8') ?>"
      >

      <select name="category">
        <option value="">全部分类</option>

        <?php foreach ($categories as $item): ?>
          <option
            value="<?= htmlspecialchars($item, ENT_QUOTES, 'UTF-8') ?>"
            <?= $category === $item ? 'selected' : '' ?>
          >
            <?= htmlspecialchars($item, ENT_QUOTES, 'UTF-8') ?>
          </option>
        <?php endforeach; ?>
      </select>

      <button type="submit">搜索</button>
    </form>

    <div class="grid">
      <?php if (!$products): ?>
        <p>暂时没有找到商品。</p>
      <?php endif; ?>

      <?php foreach ($products as $product): ?>
        <article class="card">
          <?php if (!empty($product['image'])): ?>
            <img
              src="<?= htmlspecialchars($product['image'], ENT_QUOTES, 'UTF-8') ?>"
              alt="<?= htmlspecialchars($product['name'], ENT_QUOTES, 'UTF-8') ?>"
            >
          <?php else: ?>
            <div class="placeholder">🖥️</div>
          <?php endif; ?>

          <div class="info">
            <span class="category">
              <?= htmlspecialchars($product['category'], ENT_QUOTES, 'UTF-8') ?>
            </span>

            <h2>
              <?= htmlspecialchars($product['name'], ENT_QUOTES, 'UTF-8') ?>
            </h2>

            <p>
              品牌：
              <?= htmlspecialchars($product['brand'], ENT_QUOTES, 'UTF-8') ?>
            </p>

            <p>
              型号：
              <?= htmlspecialchars($product['model'], ENT_QUOTES, 'UTF-8') ?>
            </p>

            <span class="price">
              ¥<?= number_format($product['price'], 2) ?>
            </span>

            <p>
              库存：<?= (int)$product['stock'] ?> 件
            </p>

            <a
              class="detail"
              href="product.php?id=<?= (int)$product['id'] ?>"
            >
              查看详情
            </a>
          </div>
        </article>
      <?php endforeach; ?>
    </div>
  </main>
</body>
</html>