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

    .container { margin:24px auto 40px; }
    .panel { background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05); padding:24px; margin-bottom:18px; }
    .title { margin:0 0 12px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }

    .search-bar { display:flex; gap:10px; margin-bottom:18px; }
    .search-bar input {
      flex:1; height:46px; border:2px solid #111; border-radius:12px; padding:0 14px; font-size:15px; outline:none;
    }
    .search-bar button {
      width:104px; border:none; background:#111; color:#fff; border-radius:12px; font-size:15px; cursor:pointer;
    }

    .tabs { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
    .tab {
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px; border-radius:999px; background:#efefef; color:#222; font-size:14px;
    }
    .tab.active { background:#111; color:#fff; }

    .result-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; }
    .card-body { padding:16px; }
    .thumb { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f0f0f0; }
    .shop-logo { width:72px; height:72px; border-radius:18px; object-fit:cover; background:#f0f0f0; border:1px solid #e9e9e9; }
    .avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; background:#f0f0f0; border:1px solid #e9e9e9; }
    .name { font-size:18px; font-weight:800; margin-bottom:8px; }
    .meta { color:#666; font-size:13px; line-height:1.8; margin-bottom:4px; }
    .price { color:#d70018; font-size:22px; font-weight:800; margin-top:8px; }
    .btn { display:inline-block; margin-top:12px; padding:10px 14px; background:#111; color:#fff; border-radius:10px; font-size:14px; }
    .tag {
      display:inline-block; padding:4px 8px; border-radius:999px; background:#f3f4f6; color:#444; font-size:12px; margin-bottom:8px;
    }

    @media (max-width:1100px) {
      .result-grid { grid-template-columns:repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="top-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="top-user">
            <img class="top-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="container">
    <div class="panel">
      <h1 class="title">搜索</h1>
      <form class="search-bar" method="get" action="/search">
        <input type="text" name="q" value="{{ q }}" placeholder="搜索商品、店铺、用户">
        <button type="submit">搜索</button>
      </form>

      <div class="tabs">
        <a class="tab {% if search_type == 'products' %}active{% endif %}" href="/search?q={{ q|urlencode }}&type=products">商品 {{ counts.products }}</a>
        <a class="tab {% if search_type == 'shops' %}active{% endif %}" href="/search?q={{ q|urlencode }}&type=shops">店铺 {{ counts.shops }}</a>
        <a class="tab {% if search_type == 'users' %}active{% endif %}" href="/search?q={{ q|urlencode }}&type=users">用户 {{ counts.users }}</a>
      </div>

      {% if not q %}
        <div class="muted">输入关键词后，可在商品、店铺、用户三种类型中切换查看结果。</div>
      {% elif search_type == 'products' %}
        {% if products %}
        <div class="result-grid">
          {% for p in products %}
          <div class="card">
            <img class="thumb" 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.intro }}</div>
              <div class="price">¥ {{ '%.2f'|format(p.price) }}</div>
              <a class="btn" href="/products/{{ p.product_id }}">查看商品</a>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
          <div class="muted">没有找到相关商品。</div>
        {% endif %}
      {% elif search_type == 'shops' %}
        {% if shops %}
        <div class="result-grid">
          {% for s in shops %}
          <div class="card">
            <div class="card-body">
              <div style="display:flex; align-items:center; gap:14px; margin-bottom:14px;">
                <img class="shop-logo" src="{{ s.logo_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ s.shop_name }}">
                <div style="min-width:0;">
                  <div class="name" style="margin-bottom:4px;">{{ s.shop_name }}</div>
                  <div class="meta">销量：{{ s.sold_count }}　营收：¥ {{ '%.2f'|format(s.gross_revenue) }}</div>
                </div>
              </div>
              <div class="meta">{{ s.intro }}</div>
              <a class="btn" href="/shop/{{ s.shop_slug }}">进入店铺主页</a>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
          <div class="muted">没有找到相关店铺。</div>
        {% endif %}
      {% else %}
        {% if users %}
        <div class="result-grid">
          {% for u in users %}
          <div class="card">
            <div class="card-body">
              <div style="display:flex; align-items:center; gap:14px; margin-bottom:14px;">
                <img class="avatar" src="{{ u.avatar_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ u.display_name }}">
                <div>
                  {% if u.is_merchant %}
                    <div class="tag">商家用户</div>
                  {% else %}
                    <div class="tag">普通用户</div>
                  {% endif %}
                  <div class="name" style="margin-bottom:0;">{{ u.display_name }}</div>
                </div>
              </div>

              {% if u.is_merchant and u.shop_slug %}
                <div class="meta">关联店铺：{{ u.shop_name }}</div>
                <a class="btn" href="/shop/{{ u.shop_slug }}">进入店铺主页</a>
              {% else %}
                <div class="meta">当前没有公开主页</div>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
          <div class="muted">没有找到相关用户。</div>
        {% endif %}
      {% endif %}
    </div>
  </div>
</body>
</html>
