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

  function PublishPage() {
    const { me, services, items, getProvider, showToast, pushRoute } = useApp();
    const myProvider = getProvider(me.providerId);
    const myItems = items.filter(i => i.providerId === me.providerId);

    if (me.authStatus === 'none') {
      return (
        <div className="h-full overflow-y-auto no-scrollbar pb-28">
          <div className="px-5 pt-14 pb-6"
               style={{ background: 'linear-gradient(180deg, #FFE9B0 0%, #FFD58F 50%, #FFF4D6 100%)' }}>
            <div className="text-xs font-bold text-bark-700 tracking-wider mb-1">PUBLISH</div>
            <div className="font-kuaile text-2xl text-bark-900">发布服务</div>
          </div>
          <div className="flex flex-col items-center justify-center py-12 px-8">
            <MascotShiba mood="thinking" size={140}/>
            <div className="font-display text-xl text-bark-900 mt-4">需要先完成认证</div>
            <div className="text-xs text-bark-700 text-center mt-2 leading-relaxed">发布服务需要通过身份认证(宠物店营业执照 或 个人身份证),保护毛孩子和主人的安全</div>
            <button onClick={() => pushRoute('authApply')} className="bone-btn mt-6 flex items-center gap-2">
              立即认证 <Icon name="chevronRight" size={14} strokeWidth={2.5}/>
            </button>
          </div>
        </div>
      );
    }

    if (me.authStatus === 'pending') {
      return (
        <div className="h-full overflow-y-auto no-scrollbar pb-28">
          <div className="px-5 pt-14 pb-6"
               style={{ background: 'linear-gradient(180deg, #FFE9B0 0%, #FFD58F 50%, #FFF4D6 100%)' }}>
            <div className="text-xs font-bold text-bark-700 tracking-wider mb-1">PUBLISH</div>
            <div className="font-kuaile text-2xl text-bark-900">认证审核中</div>
          </div>
          <div className="flex flex-col items-center justify-center py-12 px-8">
            <div className="animate-pulse text-shiba-500">
              <Icon name="clock" size={64}/>
            </div>
            <div className="font-display text-xl text-bark-900 mt-4">资料正在审核中</div>
            <div className="text-xs text-bark-700 text-center mt-2">通常 24 小时内完成,通过后即可发布服务项目</div>
          </div>
        </div>
      );
    }

    return (
      <div className="h-full overflow-y-auto no-scrollbar pb-28">
        {/* HERO */}
        <div className="relative px-5 pt-14 pb-6 overflow-hidden"
             style={{ background: 'linear-gradient(180deg, #FFE9B0 0%, #FFD58F 50%, #FFF4D6 100%)' }}>
          <div className="absolute top-20 right-6 opacity-20">
            <Icon name="paw" size={36} className="text-bark-700"/>
          </div>

          <div className="text-xs font-bold text-bark-700 tracking-wider mb-1">PUBLISH</div>
          <div className="flex items-end justify-between">
            <div>
              <div className="font-kuaile text-2xl text-bark-900 leading-tight">我的服务</div>
              <div className="text-[11px] text-bark-700 font-bold mt-1">{me.authType} · {myProvider?.status}</div>
            </div>
            <div className="mascot-float">
              <MascotShiba mood="happy" size={64}/>
            </div>
          </div>
        </div>

        {/* 服务者主页卡 */}
        <div className="px-5 -mt-2">
          <div className="bg-white rounded-3xl border-2 border-cream-200 shadow-md p-4">
            <div className="flex items-center gap-3">
              <Avatar name={myProvider?.name} size={56} square/>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1.5 flex-wrap">
                  <div className="font-display text-base text-bark-900 truncate">{myProvider?.name}</div>
                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-leaf-400 text-white font-bold shrink-0 flex items-center gap-0.5">
                    <Icon name="check" size={9} strokeWidth={3}/>认证
                  </span>
                </div>
                <div className="text-[11px] text-bark-700 mt-0.5 flex items-center gap-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-leaf-500 animate-pulse"></span>
                  <span className="font-bold text-leaf-500">营业中</span>
                  <span className="text-bark-700">·</span>
                  <span className="flex items-center gap-0.5"><Icon name="star" size={10} filled className="text-amber-500"/>{myProvider?.rating}</span>
                </div>
              </div>
            </div>

            <div className="mt-3 flex gap-2">
              <button onClick={() => showToast('编辑主页', '进入主页编辑', 'success')}
                      className="flex-1 py-2 rounded-full bg-cream-100 text-bark-800 text-xs font-bold flex items-center justify-center gap-1">
                <Icon name="edit" size={12}/>编辑主页
              </button>
              <button onClick={() => pushRoute('providerDetail', { providerId: me.providerId })}
                      className="flex-1 py-2 rounded-full bg-bark-900 text-cream-50 text-xs font-bold flex items-center justify-center gap-1">
                <Icon name="eye" size={12}/>预览
              </button>
            </div>
          </div>
        </div>

        {/* 发布新项目按钮 */}
        <div className="px-5 mt-4">
          <button onClick={() => showToast('新建项目', '进入项目编辑页', 'success')}
                  className="w-full py-4 rounded-2xl border-2 border-dashed border-shiba-400 bg-cream-50 text-shiba-600 font-bold flex items-center justify-center gap-2 hover:bg-cream-100 transition-colors">
            <Icon name="plus" size={18} strokeWidth={3}/>发布新服务项目
          </button>
        </div>

        {/* 项目列表 */}
        <div className="px-5 mt-4">
          <div className="flex items-center justify-between mb-3">
            <div className="font-kuaile text-base text-bark-900">在售项目 ({myItems.length})</div>
            <button 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="space-y-3">
            {myItems.map((it, idx) => {
              const svc = services[it.type];
              return (
                <div key={it.id}
                     className="bg-white rounded-2xl p-3 border-2 border-cream-200 slide-up-in"
                     style={{ animationDelay: `${idx * 50}ms`, opacity: 0 }}>
                  <div className="flex gap-3">
                    <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ background: svc.bg, color: svc.color }}>
                      <ServiceIcon type={it.type} size={22} color={svc.color}/>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-1.5">
                        <div className="font-bold text-sm text-bark-900 truncate">{it.name}</div>
                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-leaf-400 text-white font-bold shrink-0">{it.status}</span>
                      </div>
                      <div className="text-[11px] text-bark-700 mt-0.5 truncate">{it.desc}</div>
                      <div className="flex items-center gap-2 text-[11px] text-bark-700 mt-1">
                        <span className="font-bold text-shiba-600">{it.price}</span>
                        <span>·</span>
                        <span className="flex items-center gap-0.5"><Icon name="eye" size={10}/>{it.views}</span>
                        <span>·</span>
                        <span className="flex items-center gap-0.5"><Icon name="heart" size={10} filled className="text-pink-cheek"/>{it.favs}</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2 mt-2 pt-2 border-t border-dashed border-cream-200">
                    <button onClick={() => showToast(`编辑「${it.name}」`, '进入项目编辑', 'success')}
                            className="flex-1 py-1.5 rounded-full bg-cream-100 text-bark-800 text-[11px] font-bold">编辑</button>
                    <button onClick={() => showToast('下架确认', '项目暂时不可见', 'warn')}
                            className="flex-1 py-1.5 rounded-full bg-cream-100 text-bark-800 text-[11px] font-bold">下架</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* 认证状态小卡 */}
        <div className="px-5 mt-5">
          <button onClick={() => pushRoute('authApply')}
                  className="w-full bg-gradient-to-r from-leaf-400 to-leaf-500 rounded-2xl p-3 text-white text-left flex items-center gap-3 shadow-md">
            <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
              <Icon name="trophy" size={20}/>
            </div>
            <div className="flex-1">
              <div className="font-bold text-sm">{me.authType}认证已通过</div>
              <div className="text-[11px] opacity-90">认证有效期至 {me.authExpire}</div>
            </div>
            <Icon name="chevronRight" size={16} strokeWidth={2.5}/>
          </button>
        </div>

        {/* 发布规范 */}
        <div className="px-5 mt-4">
          <div className="bg-cream-100 border-2 border-dashed border-shiba-400 rounded-2xl p-3">
            <div className="text-xs font-bold text-shiba-600 mb-1 flex items-center gap-1">
              <Icon name="help" size={12}/>发布规范
            </div>
            <div className="text-[11px] text-bark-800 leading-relaxed">
              图片 ≤5MB · 最多 9 张 · 内容需通过自动 + 人工审核(24h),连续被驳回 3 次进入 7 天冷却期
            </div>
          </div>
        </div>
      </div>
    );
  }

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