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

  function HomePage() {
    const { services, serviceKeys, providers, banners, hotKeywords, favProviders, toggleFavProvider, pushRoute, showToast, mascotMood } = useApp();
    const [bannerIdx, setBannerIdx] = useState(0);
    const [sort, setSort] = useState('smart');
    const [distFilter, setDistFilter] = useState('all');

    useEffect(() => {
      const t = setInterval(() => setBannerIdx(i => (i + 1) % banners.length), 3500);
      return () => clearInterval(t);
    }, [banners.length]);

    const filtered = providers.filter(p => {
      if (distFilter === '1km')  return parseFloat(p.distance) <= 1;
      if (distFilter === '3km')  return parseFloat(p.distance) <= 3;
      if (distFilter === '5km')  return parseFloat(p.distance) <= 5;
      return true;
    });

    const sorted = [...filtered].sort((a, b) => {
      if (sort === 'distance') return parseFloat(a.distance) - parseFloat(b.distance);
      if (sort === 'rating')   return b.rating - a.rating;
      if (sort === 'latest')   return b.served - a.served;
      const sa = (1 / parseFloat(a.distance)) * 30 + a.rating * 25 + (a.served / 100) * 20;
      const sb = (1 / parseFloat(b.distance)) * 30 + b.rating * 25 + (b.served / 100) * 20;
      return sb - sa;
    });

    const listWithAds = [];
    sorted.forEach((p, i) => {
      listWithAds.push({ type: 'provider', data: p });
      if ((i + 1) % 3 === 0 && i < sorted.length - 1) {
        listWithAds.push({ type: 'ad', data: { id: `ad-${i}`, idx: i } });
      }
    });

    const BANNER_ICONS = { b1: 'tag', b2: 'shield', b3: 'gift' };

    return (
      <div className="h-full overflow-y-auto no-scrollbar pb-28">
        {/* HERO 顶栏 */}
        <div className="relative px-5 pt-14 pb-5 overflow-hidden"
             style={{ background: 'linear-gradient(180deg, #FFE9B0 0%, #FFD58F 50%, #FFF4D6 100%)' }}>
          <div className="absolute top-12 right-24 w-12 h-12 rounded-full bg-yellow-300 opacity-50" style={{ filter: 'blur(4px)' }}></div>
          <div className="absolute top-20 left-8 w-16 h-8 rounded-full bg-white opacity-50" style={{ filter: 'blur(6px)' }}></div>

          {/* 位置 */}
          <div className="relative flex items-center justify-between mb-3">
            <button className="flex items-center gap-1 text-sm font-bold text-bark-900">
              <Icon name="location" size={14} className="text-shiba-500"/>
              上海·黄浦区
              <Icon name="chevronRight" size={12} strokeWidth={2.5}/>
            </button>
          </div>

          {/* 搜索框 */}
          <div className="relative bg-white rounded-full p-1.5 pl-4 flex items-center shadow-lg border-2 border-white mb-4">
            <Icon name="search" size={16} className="text-bark-700 shrink-0" strokeWidth={2.5}/>
            <input className="flex-1 mx-2 outline-none bg-transparent text-sm font-bold text-bark-800 placeholder:text-bark-700/50 min-w-0"
                   placeholder="搜服务者 / 服务项目 / 区域"
                   readOnly
                   onClick={() => showToast('搜索结果页', '已进入搜索建议', 'success')}/>
            <button className="bone-btn !py-1.5 !px-4 text-xs">搜索</button>
          </div>

          {/* 热门搜索词 */}
          <div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar -mx-1 px-1">
            <span className="text-[10px] font-bold text-shiba-600 shrink-0 flex items-center gap-0.5">
              <Icon name="fire" size={11} className="text-shiba-500"/>热搜
            </span>
            {hotKeywords.map(k => (
              <button key={k} className="shrink-0 px-2.5 py-1 rounded-full bg-white/70 backdrop-blur text-[11px] text-bark-800 font-bold border border-cream-200">
                {k}
              </button>
            ))}
          </div>
        </div>

        {/* Banner 轮播 */}
        <div className="px-5 mt-4">
          <div className="relative rounded-3xl overflow-hidden h-24 shadow-md" style={{ background: banners[bannerIdx].bg }}>
            <div className="absolute inset-0 flex items-center justify-between px-5 text-white">
              <div>
                <div className="text-[10px] font-bold opacity-90 tracking-wider mb-1">SPONSORED</div>
                <div className="font-display text-xl leading-tight">{banners[bannerIdx].title}</div>
                <div className="text-xs opacity-90 mt-0.5">{banners[bannerIdx].sub}</div>
              </div>
              <div className="opacity-90">
                <Icon name={BANNER_ICONS[banners[bannerIdx].id] || 'sparkle'} size={48} className="text-white"/>
              </div>
            </div>
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1">
              {banners.map((_, i) => (
                <div key={i} className={`h-1 rounded-full transition-all ${i === bannerIdx ? 'w-4 bg-white' : 'w-1 bg-white/50'}`}></div>
              ))}
            </div>
          </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>
            <span className="text-xs text-bark-700 font-bold">总分类</span>
          </div>
          <div className="grid grid-cols-4 gap-2">
            {serviceKeys.map(key => {
              const svc = services[key];
              const count = providers.filter(p => p.services.includes(key)).length;
              return (
                <button key={key}
                        onClick={() => showToast(`筛选「${svc.label}」`, `${count} 位服务者`, 'success')}
                        className="flex flex-col items-center py-2 rounded-2xl bg-white border-2 border-cream-200 lift-card">
                  <div className="w-11 h-11 rounded-2xl flex items-center justify-center mb-1" style={{ background: svc.bg }}>
                    <ServiceIcon type={key} size={22} color={svc.color}/>
                  </div>
                  <div className="text-[11px] font-bold text-bark-900">{svc.label}</div>
                  <div className="text-[9px] text-bark-700 font-bold opacity-70">{count}位</div>
                </button>
              );
            })}
          </div>
        </div>

        {/* 橘橘 IP + 提示 */}
        <div className="px-5 mt-4">
          <div className="relative bg-gradient-to-r from-cream-100 to-cream-200 rounded-3xl p-3 pr-4 flex items-center gap-3 overflow-hidden">
            <div className="absolute -bottom-2 -right-2 opacity-10">
              <Icon name="paw" size={56} className="text-bark-700"/>
            </div>
            <div className="mascot-float shrink-0">
              <MascotShiba mood={mascotMood} size={56}/>
            </div>
            <div className="relative flex-1 min-w-0">
              <div className="text-[10px] font-bold text-bark-700">PAWPAW 信息平台 · 不抽佣</div>
              <div className="text-sm font-bold text-bark-900 leading-snug">本平台不撮合交易,只做信息发布。所有沟通和约定请直接与服务者协商</div>
            </div>
          </div>
        </div>

        {/* 推荐标题 + 筛选 */}
        <div className="px-5 mt-5">
          <div className="flex items-end justify-between mb-3">
            <div>
              <div className="font-kuaile text-lg text-bark-900">为你推荐</div>
              <div className="text-[10px] text-bark-700 font-bold">综合距离 / 评分 / 浏览量 / 收藏量</div>
            </div>
          </div>

          <div className="flex items-center gap-2 mb-3 overflow-x-auto no-scrollbar -mx-1 px-1">
            <div className="flex gap-1 bg-cream-100 rounded-full p-1 shrink-0">
              {[
                { k: 'all', l: '全部' },
                { k: '1km', l: '1km' },
                { k: '3km', l: '3km' },
                { k: '5km', l: '5km' },
              ].map(d => (
                <button key={d.k} onClick={() => setDistFilter(d.k)}
                        className={`px-2.5 py-1 rounded-full text-[10px] font-bold transition-all ${
                          distFilter === d.k ? 'bg-white text-shiba-600 shadow' : 'text-bark-700'
                        }`}>
                  {d.l}
                </button>
              ))}
            </div>
            <div className="flex gap-1 bg-cream-100 rounded-full p-1 shrink-0 ml-auto">
              {[
                { k: 'smart',    l: '综合' },
                { k: 'distance', l: '距离' },
                { k: 'rating',   l: '评分' },
                { k: 'latest',   l: '最新' },
              ].map(s => (
                <button key={s.k} onClick={() => setSort(s.k)}
                        className={`px-2.5 py-1 rounded-full text-[10px] font-bold transition-all ${
                          sort === s.k ? 'bg-white text-shiba-600 shadow' : 'text-bark-700'
                        }`}>
                  {s.l}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* 推荐服务列表 */}
        <div className="px-5 space-y-3">
          {listWithAds.map((item, idx) => {
            if (item.type === 'ad') {
              return (
                <div key={item.data.id} className="relative rounded-3xl p-4 overflow-hidden border-2 border-dashed border-shiba-300 slide-up-in"
                     style={{ animationDelay: `${idx * 40}ms`, opacity: 0, background: 'linear-gradient(135deg, #FFE0C2 0%, #FFDCE4 100%)' }}>
                  <div className="absolute top-2 right-2 text-[9px] font-bold bg-white/70 backdrop-blur rounded px-1.5 py-0.5 text-bark-700">广告</div>
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow text-shiba-500">
                      <Icon name="gift" size={22}/>
                    </div>
                    <div className="flex-1">
                      <div className="font-bold text-sm text-bark-900">皇家猫粮 BC2 巨划算</div>
                      <div className="text-[11px] text-bark-700 mt-0.5">买2袋立省 ¥40 · 全国包邮</div>
                    </div>
                    <button className="px-3 py-1.5 rounded-full bg-shiba-500 text-white text-[11px] font-bold">去看看</button>
                  </div>
                </div>
              );
            }
            const p = item.data;
            const saved = favProviders.includes(p.id);
            return (
              <div key={p.id}
                   onClick={() => pushRoute('providerDetail', { providerId: p.id })}
                   className="lift-card relative bg-white rounded-3xl p-4 border-2 border-cream-200 slide-up-in cursor-pointer"
                   style={{ animationDelay: `${idx * 40}ms`, opacity: 0 }}>
                <div className="flex gap-3">
                  <div className="shrink-0 relative">
                    <Avatar name={p.name} size={48} square/>
                    {p.online && (
                      <div className="absolute -bottom-0.5 -right-0.5">
                        <OnlineDot online size={10}/>
                      </div>
                    )}
                  </div>

                  <div className="flex-1 min-w-0">
                    <div className="flex items-baseline gap-1.5 flex-wrap">
                      <div className="font-bold text-sm text-bark-900 truncate">{p.name}</div>
                      {p.authStatus === 'verified' && (
                        <span className="text-[10px] px-1 rounded bg-leaf-400 text-white font-bold flex items-center gap-0.5">
                          <Icon name="check" size={9} strokeWidth={3}/>认证
                        </span>
                      )}
                      {p.featured && <span className="text-[10px] px-1 rounded bg-shiba-500 text-white font-bold">优选</span>}
                    </div>
                    <div className="text-[11px] text-bark-700 mt-0.5">{p.tag}</div>
                    <div className="flex items-center gap-2 text-[11px] mt-0.5">
                      <span className="font-bold text-amber-500 flex items-center gap-0.5">
                        <Icon name="star" size={10} filled/>{p.rating}
                      </span>
                      <span className="text-bark-700">{p.reviews}评价</span>
                      <span className="text-bark-700">·</span>
                      <span className="font-bold text-leaf-500">{p.distance}</span>
                    </div>
                  </div>

                  <button onClick={(e) => { e.stopPropagation(); toggleFavProvider(p.id); }}
                          className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
                            saved ? 'text-pink-cheek' : 'text-bark-700/40'
                          }`}>
                    <Icon name="heart" size={18} filled={saved} strokeWidth={2.2}/>
                  </button>
                </div>

                <div className="mt-3 flex flex-wrap gap-1.5">
                  {p.services.map(sKey => {
                    const svc = services[sKey];
                    return (
                      <div key={sKey} className="service-chip" style={{ background: svc.bg, color: svc.color }}>
                        <ServiceIcon type={sKey} size={11} color={svc.color}/>
                        <span>{svc.label}</span>
                      </div>
                    );
                  })}
                </div>

                <div className="mt-3 text-xs text-bark-800 leading-snug bg-cream-50 rounded-2xl px-3 py-2 border-l-4 border-shiba-400">
                  "{p.intro}"
                </div>
              </div>
            );
          })}

          <div className="text-center py-4">
            <div className="text-xs text-bark-700 font-bold opacity-60">— 已经到底啦 —</div>
          </div>
        </div>
      </div>
    );
  }

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