(function () {
  const { Icon, Avatar, PetIcon, useApp } = window.__SHAPE__;

  function MePage() {
    const { me, favProviders, favItems, providers, showToast, pushRoute, setActiveTab } = useApp();

    return (
      <div className="h-full overflow-y-auto no-scrollbar pb-28">
        {/* HERO + 用户卡 */}
        <div className="relative px-5 pt-14 pb-24 overflow-hidden"
             style={{ background: 'linear-gradient(180deg, #FF8C42 0%, #FFB877 60%, #FFE9B0 100%)' }}>
          <div className="absolute top-16 right-20 opacity-20">
            <Icon name="paw" size={36} className="text-white"/>
          </div>
          <div className="absolute bottom-20 left-6 opacity-20">
            <Icon name="sparkle" size={28} className="text-white"/>
          </div>

          {/* 用户行 */}
          <div className="flex items-center gap-3 mt-2">
            <div className="relative shrink-0">
              <Avatar name={me.name} size={64} className="border-4 border-white shadow-xl"/>
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <div className="font-display text-xl text-white truncate">{me.name}</div>
                <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400 text-bark-900 font-bold shrink-0">V3</span>
              </div>
              <div className="text-[11px] text-white/90 font-bold mt-0.5 truncate flex items-center gap-1">
                <Icon name="phone" size={11}/>{me.phone}
              </div>
              <div className="text-[11px] text-white/90 font-bold mt-0.5 truncate flex items-center gap-1">
                <Icon name="location" size={11}/>{me.location}
              </div>
            </div>
            <button onClick={() => showToast('编辑资料', '进入个人设置', 'success')}
                    className="w-8 h-8 rounded-full bg-white/30 backdrop-blur flex items-center justify-center text-white shrink-0">
              <Icon name="edit" size={14}/>
            </button>
          </div>
        </div>

        {/* 双身份卡 */}
        <div className="px-5 -mt-16 relative z-10">
          <div className="bg-white rounded-3xl border-2 border-cream-200 shadow-2xl p-4">
            <div className="flex items-center justify-between mb-3">
              <div className="text-xs font-bold text-bark-700 tracking-wider">我的身份</div>
              <span className="text-[10px] text-leaf-500 font-bold flex items-center gap-0.5">
                <Icon name="check" size={11} strokeWidth={3}/>双身份已开通
              </span>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <button onClick={() => showToast('宠主中心', `${me.pets.length}只毛孩子`, 'success')}
                      className="text-left bg-cream-50 rounded-2xl p-3 border border-cream-200 hover:bg-cream-100 transition-colors">
                <div className="flex items-center gap-2 mb-2">
                  <div className="w-8 h-8 rounded-lg bg-shiba-500 flex items-center justify-center text-white shadow">
                    <Icon name="home" size={16} strokeWidth={2.5}/>
                  </div>
                  <div className="font-bold text-xs text-bark-900">宠主</div>
                </div>
                <div className="text-[11px] text-bark-700">{me.pets.length} 只毛孩子</div>
              </button>
              <button onClick={() => setActiveTab('publish')}
                      className="text-left bg-cream-50 rounded-2xl p-3 border border-cream-200 hover:bg-cream-100 transition-colors">
                <div className="flex items-center gap-2 mb-2">
                  <div className="w-8 h-8 rounded-lg bg-leaf-500 flex items-center justify-center text-white shadow">
                    <Icon name="shield" size={16} strokeWidth={2.5}/>
                  </div>
                  <div className="font-bold text-xs text-bark-900">服务者</div>
                </div>
                <div className="text-[11px] text-bark-700 flex items-center gap-0.5">
                  已认证 · <Icon name="star" size={10} filled className="text-amber-500"/>{me.stats.orders}
                </div>
              </button>
            </div>
          </div>
        </div>

        {/* 4 个快捷宫格 */}
        <div className="px-5 mt-3">
          <div className="bg-white rounded-3xl border-2 border-cream-200 p-2 grid grid-cols-4">
            <button onClick={() => showToast('我的收藏', `${favProviders.length}位·${favItems.length}个`, 'success')}
                    className="flex flex-col items-center py-3 rounded-2xl hover:bg-cream-50 transition-colors text-pink-cheek">
              <Icon name="heart" size={22} filled/>
              <div className="text-[11px] font-bold text-bark-900 mt-1">收藏</div>
              <div className="text-[10px] text-bark-700 font-bold">{favProviders.length + favItems.length}</div>
            </button>
            <button onClick={() => showToast('浏览历史', '近 7 日 42 个', 'success')}
                    className="flex flex-col items-center py-3 rounded-2xl hover:bg-cream-50 transition-colors text-bark-700">
              <Icon name="eye" size={22}/>
              <div className="text-[11px] font-bold text-bark-900 mt-1">历史</div>
              <div className="text-[10px] text-bark-700 font-bold">42</div>
            </button>
            <button onClick={() => showToast('我的评价', '已发出 8 条', 'success')}
                    className="flex flex-col items-center py-3 rounded-2xl hover:bg-cream-50 transition-colors text-amber-500">
              <Icon name="star" size={22} filled/>
              <div className="text-[11px] font-bold text-bark-900 mt-1">评价</div>
              <div className="text-[10px] text-bark-700 font-bold">8</div>
            </button>
            <button onClick={() => pushRoute('authApply')}
                    className="flex flex-col items-center py-3 rounded-2xl hover:bg-cream-50 transition-colors text-leaf-500">
              <Icon name="trophy" size={22}/>
              <div className="text-[11px] font-bold text-bark-900 mt-1">认证</div>
              <div className="text-[10px] text-leaf-500 font-bold">已通过</div>
            </button>
          </div>
        </div>

        {/* 我的毛孩子 */}
        <div className="px-5 mt-5">
          <div className="flex items-center justify-between mb-3">
            <div className="font-kuaile text-lg text-bark-900">我的毛孩子</div>
            <button onClick={() => showToast('添加宠物', '完善宠物信息', 'success')}
                    className="px-3 py-1.5 rounded-full bg-shiba-500 text-white text-xs font-bold shadow flex items-center gap-1">
              <Icon name="plus" size={12} strokeWidth={3}/>添加
            </button>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {me.pets.map((pet, i) => (
              <div key={i} className="lift-card bg-white rounded-3xl p-3 border-2 border-cream-200 text-center">
                <div className="flex justify-center mb-1">
                  <PetIcon type={pet.type} size={56}/>
                </div>
                <div className="font-display text-base text-bark-900">{pet.name}</div>
                <div className="text-[11px] text-bark-700 font-bold">{pet.breed}</div>
                <div className="text-[10px] text-bark-700 mt-0.5">{pet.age}</div>
                <div className="mt-1.5 inline-block px-2 py-0.5 rounded-full bg-cream-100 text-[10px] font-bold text-bark-700">{pet.tag}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 关注的服务者 */}
        {favProviders.length > 0 && (
          <div className="px-5 mt-5">
            <div className="flex items-center justify-between mb-3">
              <div className="font-kuaile text-lg text-bark-900">关注的服务者</div>
              <button onClick={() => showToast('查看全部', `${favProviders.length} 位`, 'success')}
                      className="text-xs font-bold text-shiba-600 flex items-center gap-0.5">
                全部<Icon name="chevronRight" size={11} strokeWidth={2.5}/>
              </button>
            </div>
            <div className="flex gap-2 overflow-x-auto no-scrollbar -mx-1 px-1 pb-2">
              {favProviders.map(pid => {
                const p = providers.find(x => x.id === pid);
                if (!p) return null;
                return (
                  <button key={pid} onClick={() => pushRoute('providerDetail', { providerId: pid })}
                          className="shrink-0 bg-white rounded-2xl p-3 border-2 border-cream-200 w-28 lift-card text-center">
                    <div className="flex justify-center mb-1">
                      <Avatar name={p.name} size={44} square/>
                    </div>
                    <div className="text-xs font-bold text-bark-900 truncate">{p.name}</div>
                    <div className="text-[10px] text-amber-500 font-bold mt-0.5 flex items-center justify-center gap-0.5">
                      <Icon name="star" size={9} filled/>{p.rating}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* 设置入口 */}
        <div className="px-5 mt-5">
          <div className="font-kuaile text-lg text-bark-900 mb-3">设置</div>
          <div className="bg-white rounded-3xl border-2 border-cream-200 overflow-hidden">
            {[
              { i: 'lock',     l: '账号与安全', s: '微信已登录 · 手机已绑定', c: '#FFE9B0', tc: 'text-shiba-600' },
              { i: 'bell',     l: '消息通知',   s: '私信 / 通知 / 系统消息',  c: '#D6F0FB', tc: 'text-sky-600' },
              { i: 'shield',   l: '隐私协议',   s: '用户协议 · 隐私政策',     c: '#EBDDF6', tc: 'text-purple-600' },
              { i: 'help',     l: '帮助与客服', s: '橘橘客服 7×24 在线',      c: '#D8F0D8', tc: 'text-leaf-500' },
              { i: 'trash',    l: '账号注销',   s: '软删除 · 数据保留',       c: '#F0E5D5', tc: 'text-bark-700' },
            ].map((item, i) => (
              <button key={i} onClick={() => showToast(item.l, item.s, item.l === '账号注销' ? 'warn' : 'success')}
                      className={`w-full flex items-center gap-3 px-4 py-3 text-left ${i !== 0 ? 'border-t border-cream-200' : ''} hover:bg-cream-50 transition-colors`}>
                <div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${item.tc}`} style={{ background: item.c }}>
                  <Icon name={item.i} size={16}/>
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-bold text-bark-900 truncate">{item.l}</div>
                  <div className="text-[11px] text-bark-700 mt-0.5 truncate">{item.s}</div>
                </div>
                <span className="text-bark-700 shrink-0"><Icon name="chevronRight" size={14} strokeWidth={2.5}/></span>
              </button>
            ))}
          </div>
        </div>

        <div className="text-center mt-5">
          <div className="text-[10px] text-bark-700 font-bold opacity-50">PawPaw 信息平台 v2.4</div>
        </div>
      </div>
    );
  }

  window.__SHAPE__.pages = window.__SHAPE__.pages || {};
  window.__SHAPE__.pages.MePage = MePage;
})();