<%- include('../partials/public-header') %>

<h1>全部产品</h1>

<div class="filter-bar">
  <form method="GET" action="/plans" class="form-row" style="margin-bottom:0">
    <label>商家
      <select name="merchant" onchange="this.form.submit()">
        <option value="">全部</option>
        <% merchants.forEach(m => { %>
        <option value="<%= m.id %>" <%= query.merchant == m.id ? 'selected' : '' %>><%= m.name %></option>
        <% }) %>
      </select>
    </label>
    <label>地区
      <select name="location" onchange="this.form.submit()">
        <option value="">全部</option>
        <% allLocations.forEach(loc => { %>
        <option value="<%= loc %>" <%= query.location === loc ? 'selected' : '' %>><%= loc %></option>
        <% }) %>
      </select>
    </label>
    <label>搜索
      <input name="q" value="<%= query.q || '' %>" placeholder="关键词...">
    </label>
    <button type="submit" class="btn btn-primary" style="align-self:end">筛选</button>
    <% if (query.merchant || query.location || query.q) { %>
    <a href="/plans" class="btn" style="align-self:end;background:#eee;color:#333">清除</a>
    <% } %>
  </form>
</div>

<div class="product-grid">
  <% products.forEach(p => { %>
  <a href="/plans/<%= p.slug || p.id %>" class="product-card">
    <div class="product-card-header">
      <span class="product-merchant"><%= p.merchant_name || '未知商家' %></span>
      <% if (p.is_featured) { %><span class="badge" style="background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-weight:600">⭐ 推荐</span><% } %>
      <% if (p.in_stock === 1) { %><span class="badge badge-on">✓ 有货</span>
      <% } else if (p.in_stock === 2) { %><span class="badge badge-off">✗ 缺货</span>
      <% } %>
    </div>
    <h3><%= p.location ? p.location + ' ' : '' %><%= p.name %></h3>
    <% if (p.spec_summary) { %><div class="product-spec"><%= p.spec_summary %></div><% } %>
    <% if (p.traffic) { %><div class="product-spec">流量：<%= p.traffic %></div><% } %>
    <div class="product-price">
      <% if (p.price) { %><strong><%= p.price %></strong><% } %>
      <% if (p.annual_price) { %><span class="muted" style="margin-left:8px"><%= p.billing_cycle || '年付' %>：<%= p.annual_price %></span><% } %>
    </div>
    <% if (p.coupon_code) { %><div class="product-coupon">🎫 优惠码: <%= p.coupon_code %></div><% } %>
  </a>
  <% }) %>
</div>

<% if (products.length === 0) { %>
<p class="muted" style="text-align:center;padding:40px 0">没有找到匹配的产品</p>
<% } %>

<p class="muted" style="text-align:center;margin-top:24px">共 <%= products.length %> 款产品</p>

<%- include('../partials/footer') %>
