<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>{{ shop.shop_name }} - 店铺主页</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; align-items:center; gap:18px; 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,0.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; }
    .hero { display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; }
    .logo { width:120px; height:120px; border-radius:24px; object-fit:cover; background:#f0f0f0; border:1px solid #e9e9e9; }
    .shop-name { margin:0 0 10px; font-size:34px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:18px; }
    .stat { background:#fafafa; border-radius:16px; padding:16px; }
    .stat .label { color:#666; font-size:13px; margin-bottom:6px; }
    .stat .value { font-size:24px; font-weight:800; color:#111; }
    .section-title { margin:0 0 14px; font-size:24px; font-weight:800; }
    .rich-content { color:#2a2a2a; font-size:15px; line-height:1.95; word-break:break-word; }
    .rich-content img { max-width:100%; display:block; border-radius:14px; margin:18px 0; border:1px solid #e9e9e9; }
    .rich-content blockquote { margin:14px 0; padding:14px 16px; border-left:4px solid #111; background:#fafafa; border-radius:0 12px 12px 0; color:#555; }
    .rich-content pre { margin:14px 0; padding:14px 16px; background:#111; color:#f5f5f5; border-radius:12px; overflow:auto; font-size:13px; line-height:1.7; }
    .product-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
    .product-card { background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05); overflow:hidden; }
    .product-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f0f0f0; }
    .product-card .name { font-size:16px; font-weight:700; padding:14px 16px 8px; }
    .product-card .meta { color:#666; font-size:13px; padding:0 16px 4px; }
    .product-card .price { color:#d70018; font-size:22px; font-weight:800; padding:8px 16px 12px; }
    .product-card .btn { display:inline-block; margin:0 16px 16px; padding:10px 14px; background:#111; color:#fff; border-radius:10px; font-size:14px; }
  </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">
      <div class="hero">
        <img class="logo" src="{{ shop.logo_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ shop.shop_name }}">
        <div>
          <h1 class="shop-name">{{ shop.shop_name }}</h1>
          <div class="muted">{{ shop.intro or '这个店铺暂时还没有填写简略描述。' }}</div>
          {% if shop.contact_phone %}
            <div class="muted">联系方式：{{ shop.contact_phone }}</div>
          {% endif %}
          <div class="muted">店铺主页：/shop/{{ shop.shop_slug }}</div>
        </div>
        <div>
        </div>
      </div>

      <div class="stats">
        <div class="stat">
          <div class="label">店铺销量</div>
          <div class="value">{{ stats.sold_count }}</div>
        </div>
        <div class="stat">
          <div class="label">店铺总营业额</div>
          <div class="value">¥ {{ '%.2f'|format(stats.gross_revenue) }}</div>
        </div>
        <div class="stat">
          <div class="label">完成订单数</div>
          <div class="value">{{ stats.settled_order_count }}</div>
        </div>
        <div class="stat">
          <div class="label">在售商品数</div>
          <div class="value">{{ stats.product_count }}</div>
        </div>
      </div>
    </div>

    <div class="panel">
      <h2 class="section-title">店铺主页描述</h2>
      <div class="rich-content">
        {% if homepage_html %}
          {{ homepage_html|safe }}
        {% else %}
          <p>店铺还没有填写主页描述。</p>
        {% endif %}
      </div>
    </div>

    <div class="panel">
      <h2 class="section-title">店铺商品展示</h2>
      {% if products %}
      <div class="product-grid">
        {% for p in products %}
        <div class="product-card">
          <img src="{{ p.cover_url or '/uploads/products/default.png' }}" alt="{{ p.product_name }}">
          <div class="name">{{ p.product_name }}</div>
          <div class="meta">{{ p.category_name or '未分类' }}</div>
          <div class="meta">库存：{{ p.stock }}</div>
          <div class="price">¥ {{ '%.2f'|format(p.price) }}</div>
          <a class="btn" href="/products/{{ p.product_id }}">查看商品</a>
        </div>
        {% endfor %}
      </div>
      {% else %}
        <div class="muted">这个店铺暂时还没有在售商品。</div>
      {% endif %}
    </div>
  </div>
</body>
</html>
