<!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; align-items:center; gap:18px; 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; display:block; }
    .container { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .hero, .card { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .hero h1 { margin:0 0 10px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .grid { display:grid; grid-template-columns:340px 1fr; gap:18px; }
    .avatar-box { text-align:center; }
    .avatar-preview { width:180px; height:180px; margin:0 auto 16px; border-radius:50%; object-fit:cover; background:#eee; display:block; border:4px solid #f5f5f5; }
    .field { margin-bottom:14px; text-align:left; }
    .field label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; }
    .field input[type="text"] { width:100%; height:44px; padding:0 12px; border:1px solid #ddd; border-radius:10px; font-size:15px; outline:none; }
    .field input[type="file"] { width:100%; font-size:14px; }
    .hint { margin-top:6px; color:#666; font-size:13px; line-height:1.7; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#111; color:#fff; font-size:14px; border:none; cursor:pointer; }
    .btn-light { background:#efefef; color:#222; }
    .msg { margin-bottom:14px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.7; }
    .ok { background:#f2fff4; color:#157a28; border:1px solid #c9f0d0; }
    .err { background:#fff3f3; color:#c40000; border:1px solid #ffd0d0; }
    .quick-links { display:flex; gap:12px; flex-wrap:wrap; }
    .info p { margin:8px 0; line-height:1.8; }
    .tips { margin-top:16px; background:#fafafa; border-radius:12px; padding:14px; font-size:14px; color:#666; line-height:1.8; text-align:left; }
    @media (max-width: 900px) { .grid { grid-template-columns: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="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>
        <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>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="hero">
      <h1>用户主页</h1>
      <div class="muted">在这里维护昵称、头像和账号资料，也可以快速进入商家和管理员模块。</div>
    </div>

    {% if message %}
      <div class="msg ok">{{ message }}</div>
    {% endif %}
    {% if error %}
      <div class="msg err">{{ error }}</div>
    {% endif %}

    <div class="grid">
      <div class="card avatar-box">
        <img id="avatarPreview" class="avatar-preview" src="{{ profile.avatar_url if profile.avatar_url else '/uploads/avatars/default-avatar.png' }}" alt="头像">
        <form method="post" enctype="multipart/form-data">
          <input type="hidden" name="action" value="upload_avatar">
          <div class="field">
            <label>上传头像</label>
            <input id="avatarInput" type="file" name="avatar" accept=".png,.jpg,.jpeg" required>
            <div class="hint">选择图片后会先在本页预览，再上传到服务器。</div>
          </div>
          <button class="btn" type="submit">上传头像</button>
        </form>
        <div class="tips">
          仅支持 png / jpg / jpeg，文件大小不超过 2MB。<br>
          服务器会校验扩展名与真实图片内容，再保存为安全头像文件。
        </div>
      </div>

      <div>
        <div class="card">
          <h2 style="margin-top:0; font-size:24px; font-weight:800;">快捷入口</h2>
          <div class="quick-links">
            {% if is_merchant %}
              <a class="btn" href="/merchant/dashboard">商家后台主页</a>
              <a class="btn btn-light" href="/merchant/products">商品管理</a>
            {% else %}
              <a class="btn" href="/merchant/apply">商家入驻申请</a>
            {% endif %}

            {% if is_admin %}
              <a class="btn btn-light" href="/admin/">管理员后台主页</a>
            {% endif %}
          </div>
        </div>

        <div class="card">
          <h2 style="margin-top:0; font-size:24px; font-weight:800;">昵称修改</h2>
          <form method="post">
            <input type="hidden" name="action" value="update_nickname">
            <div class="field">
              <label>昵称</label>
              <input type="text" name="nickname" value="{{ profile.nickname or profile.username }}" maxlength="20" placeholder="2-20 位中文、英文、数字或下划线" required>
              <div class="hint">允许中文、英文、数字、下划线；不允许危险字符。</div>
            </div>
            <button class="btn" type="submit">保存昵称</button>
          </form>
        </div>

        <div class="card info">
          <h2 style="margin-top:0; font-size:24px; font-weight:800;">账号信息</h2>
          <p><strong>用户 ID：</strong>{{ profile.user_id }}</p>
          <p><strong>用户名：</strong>{{ profile.username }}</p>
          <p><strong>邮箱：</strong>{{ profile.email or '暂无' }}</p>
          <p><strong>昵称：</strong>{{ profile.nickname or '未设置' }}</p>
          <p><strong>状态：</strong>{% if profile.status == 1 %}正常{% else %}不可用{% endif %}</p>
          <p><strong>注册时间：</strong>{{ profile.created_at }}</p>
        </div>
      </div>
    </div>
  </div>

  <script>
    const avatarInput = document.getElementById("avatarInput");
    const avatarPreview = document.getElementById("avatarPreview");
    if (avatarInput && avatarPreview) {
      avatarInput.addEventListener("change", function () {
        const file = this.files && this.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function (e) { avatarPreview.src = e.target.result; };
        reader.readAsDataURL(file);
      });
    }
  </script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const maxBytes = 2 * 1024 * 1024;

  document.querySelectorAll("form").forEach(function (form) {
    const fileInput = form.querySelector('input[type="file"][name="avatar"]');
    if (!fileInput) return;

    form.addEventListener("submit", function (e) {
      const file = fileInput.files && fileInput.files[0];
      if (!file) return;

      if (file.size > maxBytes) {
        e.preventDefault();
        alert("头像文件过大，当前限制为 2 MB。");
        fileInput.value = "";
      }
    });
  });
});
</script>

</body>
</html>
