<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>全部商品 - {{ site_branding.browser_title }}</title>
  <style>
    * { box-sizing:border-box; }
    body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; background:#f5f5f7; color:#222; }
    a { text-decoration:none; color:inherit; }

    .topbar { background:#111; color:#fff; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
    .topbar-inner { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .topbar-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .topbar-links a, .topbar-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }
    .topbar-user { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:rgba(255,255,255,.08); border-radius:999px; }
    .topbar-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#eee; }

    .page { width:1200px; max-width:calc(100vw - 48px); margin:24px auto 40px; }
    .panel { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .title { margin:0 0 8px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }

    .products-search {
      display:flex;
      gap:10px;
      margin-top:16px;
      margin-bottom:14px;
    }
    .products-search input {
      flex:1;
      height:44px;
      border:2px solid #111;
      border-radius:12px;
      padding:0 14px;
      font-size:14px;
      outline:none;
      background:#fff;
    }
    .products-search button {
      width:96px;
      border:none;
      background:#111;
      color:#fff;
      border-radius:12px;
      font-size:14px;
      cursor:pointer;
    }

    .category-bar {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .category-chip {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      background:#efefef;
      color:#222;
      font-size:14px;
    }
    .category-chip.active {
      background:#111;
      color:#fff;
    }

    .toast {
      position:fixed;
      top:86px;
      right:24px;
      min-width:160px;
      max-width:360px;
      background:#111;
      color:#fff;
      padding:12px 14px;
      border-radius:12px;
      box-shadow:0 8px 20px rgba(0,0,0,.18);
      opacity:0;
      pointer-events:none;
      transform:translateY(-8px);
      transition:all .2s ease;
      z-index:9999;
      font-size:14px;
      line-height:1.6;
    }
    .toast.show {
      opacity:1;
      transform:translateY(0);
    }

    .grid {
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:18px;
    }
    .card {
      background:#fff;
      border-radius:18px;
      box-shadow:0 2px 10px rgba(0,0,0,.05);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .card img {
      width:100%;
      aspect-ratio:1/1;
      object-fit:cover;
      display:block;
      background:#f0f0f0;
    }
    .card-body {
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1;
    }
    .name {
      font-size:18px;
      font-weight:800;
      line-height:1.5;
    }
    .meta {
      color:#666;
      font-size:13px;
      line-height:1.8;
    }
    .price {
      color:#d70018;
      font-size:24px;
      font-weight:800;
      margin-top:6px;
    }
    .btn-row {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:10px;
      font-size:14px;
      border:none;
      cursor:pointer;
    }
    .btn-dark { background:#111; color:#fff; }
    .btn-light { background:#efefef; color:#222; }

    @media (max-width:1100px) {
      .grid { grid-template-columns:repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="toast" id="cartToast"></div>

  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="topbar-links">
        <a href="/">首页</a>
        <a href="/products">全部商品</a>
        <a href="/cart">购物车</a>
        <a href="/orders">我的订单</a>
        <a href="/wallet">我的钱包</a>
        <a href="/addresses">地址管理</a>
        <a href="/account">用户主页</a>

        {% if session.get("biz_is_merchant") %}
          <a href="/merchant/dashboard">商家后台主页</a>
        {% else %}
          <a href="/merchant/apply">商家入驻申请</a>
        {% endif %}

        {% if session.get("biz_is_admin") %}
          <a href="/admin/">管理员后台主页</a>
        {% endif %}

        {% if session.get("biz_user_id") %}
          <span class="topbar-user">
            <img class="topbar-avatar" src="{{ session.get('biz_avatar_url') or '/uploads/avatars/default-avatar.png' }}" alt="头像">
            <span>你好，{{ session.get("biz_display_name") }}</span>
          </span>
          <a href="/logout">退出</a>
        {% else %}
          <a href="/firebase-login">登录</a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="page">
    <div class="panel">
      <h1 class="title">全部商品</h1>
      <div class="muted">浏览当前商城已上架的全部商品，并支持按分类筛选。</div>

      <form class="products-search" method="get" action="/search">
        <input type="hidden" name="type" value="products">
        <input type="text" name="q" placeholder="搜索商品名称、分类、店铺">
        <button type="submit">搜索</button>
      </form>

      <div class="category-bar">
        <a class="category-chip {% if not selected_category_id %}active{% endif %}" href="/products">全部</a>
        {% for c in categories %}
          <a class="category-chip {% if selected_category_id == c.category_id %}active{% endif %}" href="/products?category_id={{ c.category_id }}">{{ c.category_name }}</a>
        {% endfor %}
      </div>
    </div>

    {% if products %}
    <div class="grid">
      {% for p in products %}
      <div class="card">
        <img src="{{ p.media_url }}" alt="{{ p.product_name }}">
        <div class="card-body">
          <div class="name">{{ p.product_name }}</div>
          <div class="meta">分类：{{ p.category_name or '未分类' }}</div>
          <div class="meta">
            店铺：
            {% if p.shop_slug %}
              <a href="/shop/{{ p.shop_slug }}" style="text-decoration:underline;">{{ p.shop_name }}</a>
            {% else %}
              {{ p.shop_name or '暂无店铺' }}
            {% endif %}
          </div>
          <div class="meta">库存：{{ p.stock }}</div>
          <div class="meta">{{ p.intro }}</div>
          <div class="price">¥ {{ '%.2f'|format(p.price) }}</div>

          <div class="btn-row">
            <a class="btn btn-dark" href="/products/{{ p.product_id }}">查看详情</a>
            <form class="cart-form" method="post" action="/cart/add/{{ p.product_id }}">
              <input type="hidden" name="next" value="{{ request.full_path if request.query_string else request.path }}">
              <button class="btn btn-light" type="submit">加入购物车</button>
            </form>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="panel">
      <div class="muted">当前分类下暂无商品。</div>
    </div>
    {% endif %}
  </div>

  <script>
    const toast = document.getElementById('cartToast');

    function showToast(text) {
      if (!text) return;
      toast.textContent = text;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2200);
    }

    const qs = new URLSearchParams(location.search);
    const queryMsg = qs.get('cart_msg');
    if (queryMsg) {
      showToast(queryMsg);
    } else {
      const saved = localStorage.getItem('cart_toast');
      if (saved) {
        showToast(saved);
        localStorage.removeItem('cart_toast');
      }
    }

    document.querySelectorAll('.cart-form').forEach(form => {
      form.addEventListener('submit', function () {
        localStorage.setItem('cart_toast', '已加入购物车');
      });
    });
  </script>
</body>
</html>
