<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>{{ product.product_name }} - {{ 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 { 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; }
    .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,0.08); border-radius:999px; }
    .top-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#eee; }
    .page { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .panel { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,0.05); margin-bottom:18px; }
    .product-layout { display:grid; grid-template-columns:460px 1fr; gap:24px; }
    .cover-wrap { background:#fafafa; border-radius:18px; padding:18px; border:1px solid #ececec; }
    .cover { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; display:block; background:#f0f0f0; }
    h1 { margin:0 0 12px; font-size:34px; font-weight:800; }
    .meta-line { color:#666; font-size:15px; margin-bottom:10px; line-height:1.8; }
    .summary { margin:18px 0; color:#444; font-size:15px; line-height:1.9; background:#fafafa; border-radius:14px; padding:14px 16px; }
    .price { font-size:34px; font-weight:800; margin:18px 0 8px; }
    .stock { color:#666; font-size:15px; margin-bottom:20px; }
    .actions { display:flex; gap:12px; flex-wrap:wrap; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; background:#111; color:#fff; border:none; cursor:pointer; font-size:14px; }
    .btn-light { background:#efefef; color:#222; }
    .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; }
    .rich-content ul, .rich-content ol { padding-left:24px; }
    .toast {
      position: fixed; top: 88px; right: 24px; z-index: 9999;
      background: rgba(17,17,17,.92); color:#fff;
      padding: 12px 16px; border-radius: 12px; font-size:14px;
      box-shadow: 0 6px 24px rgba(0,0,0,.18); display:none;
    }
    @media (max-width: 900px) { .product-layout { grid-template-columns: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="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="page">
    <div class="panel product-layout">
      <div class="cover-wrap">
        <img class="cover" src="{{ product.media_url or '/uploads/products/default.png' }}" alt="{{ product.product_name }}">
      </div>

      <div>
        <h1>{{ product.product_name }}</h1>
        <div class="meta-line">店铺：{{ product.shop_name or '暂无店铺信息' }}</div>
        <div class="meta-line">分类：{{ product.category_name or '未分类' }}</div>
        <div class="summary">{{ intro_plain or '暂无商品简介。' }}</div>
        <div class="price">¥ {{ "%.2f"|format(product.price) }}</div>
        <div class="stock">库存：{{ product.stock }}</div>

        <div class="actions">
          <form class="cart-form" method="post" action="/cart/add/{{ product.product_id }}">
            <input type="hidden" name="next" value="{{ request.path }}">
            <button class="btn" type="submit">加入购物车</button>
          </form>
          <a class="btn btn-light" href="/products">返回商品列表</a>
        </div>
      </div>
    </div>

    <div class="panel">
      <h2 class="section-title">商品说明</h2>
      <div class="rich-content">
        {% if description_html %}
          {{ description_html|safe }}
        {% else %}
          <p>暂无商品说明。</p>
        {% endif %}
      </div>
    </div>
  </div>

  <script>
    function showToast(message) {
      const toast = document.getElementById('cartToast');
      if (!toast || !message) return;
      toast.textContent = message;
      toast.style.display = 'block';
      setTimeout(() => { toast.style.display = 'none'; }, 2200);
    }

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

    const qsMsg = new URLSearchParams(window.location.search).get('cart_msg');
    const localMsg = localStorage.getItem('cart_toast');
    if (qsMsg) showToast(qsMsg);
    else if (localMsg) {
      showToast(localMsg);
      localStorage.removeItem('cart_toast');
    }
  </script>
</body>
</html>
