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

  const TABS = [
    { key: 'home',     label: '首页', icon: 'home' },
    { key: 'publish',  label: '发布', icon: 'plusBig' },
    { key: 'messages', label: '消息', icon: 'message', badge: 3 },
    { key: 'me',       label: '我的', icon: 'user' },
  ];

  function AppLayout({ children, detailContent }) {
    const { activeTab, setActiveTab, toast, route, popRoute } = useApp();

    return (
      <div className="relative w-full h-full bg-cream-50 overflow-hidden flex flex-col">
        {/* 微信小程序顶栏:状态栏 + 胶囊按钮 */}
        <div className="absolute top-0 left-0 right-0 z-30 pointer-events-none">
          <div className="h-11 flex items-center justify-between px-6 text-bark-900 text-[13px] font-bold">
            <div>9:41</div>
            <div className="flex items-center gap-1">
              <span className="text-[10px]">●●●●●</span>
              <svg className="w-4 h-3" viewBox="0 0 16 12" fill="none">
                <path d="M0 4 a8 8 0 0 1 16 0" stroke="currentColor" strokeWidth="1.5"/>
                <path d="M3 7 a5 5 0 0 1 10 0" stroke="currentColor" strokeWidth="1.5"/>
                <circle cx="8" cy="10" r="1" fill="currentColor"/>
              </svg>
              <svg className="w-6 h-3" viewBox="0 0 24 12" fill="none">
                <rect x="1" y="1" width="20" height="10" rx="2" stroke="currentColor" strokeWidth="1.2"/>
                <rect x="3" y="3" width="16" height="6" rx="1" fill="currentColor"/>
                <rect x="22" y="4" width="1.5" height="4" rx="0.5" fill="currentColor"/>
              </svg>
            </div>
          </div>
        </div>

        {/* 微信胶囊按钮 */}
        <div className="absolute top-12 right-3 z-50 pointer-events-auto">
          <div className="flex items-center bg-white/80 backdrop-blur border border-bark-900/10 rounded-full overflow-hidden">
            <button className="w-9 h-7 flex items-center justify-center hover:bg-bark-900/5 text-bark-900">
              <Icon name="moreH" size={14}/>
            </button>
            <div className="w-px h-3.5 bg-bark-900/15"></div>
            <button className="w-9 h-7 flex items-center justify-center hover:bg-bark-900/5 text-bark-900">
              <Icon name="close" size={14} strokeWidth={2.5}/>
            </button>
          </div>
        </div>

        {/* 内容区 */}
        <div className="flex-1 overflow-hidden relative">
          {children}
        </div>

        {/* Toast */}
        {toast && (
          <div className="absolute top-20 left-5 right-5 z-50 slide-up-in">
            <div className="rounded-2xl p-3 shadow-2xl flex items-start gap-3 text-cream-50"
                 style={{
                   background: toast.type === 'success'
                     ? 'linear-gradient(135deg, #4FA84F, #3A8B3A)'
                     : toast.type === 'warn'
                       ? 'linear-gradient(135deg, #FF8C42, #ED6E1B)'
                       : '#3D2511'
                 }}>
              <div className="shrink-0 w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
                <Icon name={toast.type === 'success' ? 'check' : toast.type === 'warn' ? 'warn' : 'bell'} size={16} strokeWidth={2.5}/>
              </div>
              <div className="flex-1">
                <div className="font-bold text-sm">{toast.msg}</div>
                {toast.sub && <div className="text-xs opacity-80 mt-0.5">{toast.sub}</div>}
              </div>
            </div>
          </div>
        )}

        {/* 详情页栈 */}
        {route.name && detailContent && (
          <div className="absolute inset-0 z-40 bg-cream-50 slide-up-in" style={{animationDuration: '0.3s'}}>
            <button onClick={popRoute}
                    className="absolute top-12 left-3 z-50 w-8 h-8 rounded-full bg-white/90 backdrop-blur shadow flex items-center justify-center text-bark-900">
              <Icon name="chevronLeft" size={16} strokeWidth={3}/>
            </button>
            {detailContent}
          </div>
        )}

        {/* 底部 Tab Bar - 4 个普通 tab */}
        <div className="absolute bottom-0 left-0 right-0 z-30">
          <div className="bg-white border-t border-cream-200 px-2 pt-2 pb-7"
               style={{ boxShadow: '0 -8px 24px -8px rgba(93, 58, 31, 0.08)' }}>
            <div className="flex items-center justify-around">
              {TABS.map(tab => (
                <TabButton key={tab.key}
                           tab={tab}
                           isActive={activeTab === tab.key}
                           onClick={() => setActiveTab(tab.key)}
                           badge={tab.badge}/>
              ))}
            </div>
          </div>
          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 rounded-full bg-bark-900 opacity-80"></div>
        </div>
      </div>
    );
  }

  function TabButton({ tab, isActive, onClick, badge }) {
    return (
      <button onClick={onClick} className="relative flex-1 flex flex-col items-center py-1.5">
        <div className={`relative tab-bounce ${isActive ? 'active' : ''}`}>
          <div className={`w-10 h-10 flex items-center justify-center transition-all ${
            isActive ? 'text-shiba-600' : 'text-bark-700/60'
          }`}>
            <Icon name={tab.icon} size={22} strokeWidth={isActive ? 2.5 : 2} filled={isActive && tab.icon === 'home'}/>
          </div>
          {badge && !isActive && (
            <div className="absolute -top-0.5 right-1 min-w-[16px] h-4 px-1 rounded-full bg-shiba-500 text-white text-[9px] font-bold flex items-center justify-center border-2 border-white">
              {badge}
            </div>
          )}
        </div>
        <div className={`text-[10px] mt-0.5 font-bold transition-colors ${
          isActive ? 'text-shiba-600' : 'text-bark-700'
        }`}>{tab.label}</div>
      </button>
    );
  }

  window.__SHAPE__.layout = AppLayout;
})();