// Main app shell — mobile (iPhone) version

function BottomNav({ active, onChange }) {
  const tabs = [
    { id: 'home',    label: 'Today',    icon: 'home'    },
    { id: 'budget',  label: 'Budget',   icon: 'wallet'  },
    { id: 'guests',  label: 'Guests',   icon: 'users'   },
    { id: 'seating', label: 'Seating',  icon: 'rings'   },
    { id: 'cal',     label: 'Calendar', icon: 'calendar'},
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 40,
      paddingBottom: 30, paddingTop: 8,
      background: 'linear-gradient(180deg, rgba(250,246,236,0) 0%, rgba(250,246,236,0.85) 30%, rgba(250,246,236,1) 70%)',
    }}>
      <div style={{
        margin: '0 14px',
        background: 'rgba(255,253,247,0.92)',
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: `0.5px solid ${W.line}`,
        borderRadius: 28,
        padding: '6px 6px',
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        boxShadow: '0 8px 24px -8px rgba(60,40,20,0.12), 0 2px 6px rgba(60,40,20,0.04)',
      }}>
        {tabs.map(t => {
          const isActive = active === t.id;
          return (
            <button key={t.id} onClick={() => onChange(t.id)} style={{
              flex: 1, padding: '8px 2px 6px',
              background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            }}>
              <div style={{
                width: 36, height: 26, borderRadius: 999,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: isActive ? W.ink : 'transparent',
                transition: 'background 200ms ease',
              }}>
                <Icon
                  name={t.icon}
                  size={16}
                  color={isActive ? W.bg : W.muted}
                  strokeWidth={isActive ? 1.7 : 1.5}
                />
              </div>
              <div style={{
                fontFamily: FONT_UI, fontSize: 9, fontWeight: 600,
                letterSpacing: 0.3,
                color: isActive ? W.ink : W.muted,
              }}>{t.label}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function PhoneStatusBarOverlay() {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
      pointerEvents: 'none',
    }}>
      <IOSStatusBar dark={false}/>
    </div>
  );
}

function MobileApp() {
  const [tab, setTab] = React.useState('home');
  const [overlay, setOverlay] = React.useState(null); // 'dayof' | 'vendors' | 'settings' | null
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [tab, overlay]);

  const goto = (target) => {
    if (target === 'dayof' || target === 'vendors' || target === 'settings') setOverlay(target);
    else { setOverlay(null); setTab(target); }
  };

  let body;
  if (overlay === 'dayof')        body = <DayOfScreen onBack={() => setOverlay(null)}/>;
  else if (overlay === 'vendors') body = <VendorsScreen onBack={() => setOverlay(null)}/>;
  else if (overlay === 'settings') body = <SettingsScreen onBack={() => setOverlay(null)}/>;
  else if (tab === 'home')        body = <Dashboard onNav={goto}/>;
  else if (tab === 'budget')      body = <BudgetScreen/>;
  else if (tab === 'guests')      body = <GuestsScreen/>;
  else if (tab === 'seating')     body = <SeatingScreen/>;
  else                            body = <CalendarScreen/>;

  return (
    <IOSDevice>
      <div ref={scrollRef} style={{
        height: '100%', overflowY: 'auto', overflowX: 'hidden',
        position: 'relative',
      }}>
        {body}
        <div style={{ height: 110 }}/>
      </div>
      <PhoneStatusBarOverlay/>
      {!overlay && <BottomNav active={tab} onChange={setTab}/>}
    </IOSDevice>
  );
}

Object.assign(window, { MobileApp, PhoneStatusBarOverlay });

// Inject shared animations once.
if (typeof document !== 'undefined' && !document.getElementById('wos-anim')) {
  const s = document.createElement('style');
  s.id = 'wos-anim';
  s.textContent = `
    @keyframes wos-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.55; transform: scale(0.85); }
    }
  `;
  document.head.appendChild(s);
}