// AppShell.jsx — Navigation 2.0 with the activated-systems model.
//
// Journey: login → onboarding-in-chat (NO tab bar) → finish (Today unlocks with
// the period widget) or break out with a free message (lands in chat, Today
// stays locked until you build a personal system). Tab bar: [personal][prebuilt]
// [Today·centre][prebuilt][prebuilt]. Chat = lower-right FAB on every screen.
// "You" (top-right avatar) opens About you · Settings · Systems · Integrations.
function initialsOf(name) {
  const p = String(name || 'Eleanor Halton').trim().split(/\s+/);
  return ((p[0]?.[0] || 'E') + (p[1]?.[0] || '')).toUpperCase();
}
function shortLabel(s) { s = String(s || 'System'); return s.length > 11 ? s.slice(0, 10) + '…' : s; }

function TopBar({ initials, onSearch, onYou }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 14px 8px', background: M.canvas, flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 24, height: 24, borderRadius: 7, background: M.axis, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `500 13px/1 ${M.sans}` }}>A</div>
        <div style={{ font: `500 16px/1 ${M.sans}`, color: M.ink, letterSpacing: '-0.01em' }}>Axis</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <button onClick={onSearch} aria-label="Search" style={{ width: 38, height: 38, borderRadius: 11, background: M.surface, border: `1px solid ${M.rule}`, cursor: 'pointer', color: M.inkSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <window.MIcons.Search size={19} />
        </button>
        <window.DSYouAvatar initials={initials} onClick={onYou} />
      </div>
    </div>
  );
}

function SettingsArea({ onBack, onReset }) {
  return (
    <div style={{ background: M.canvas, minHeight: '100%' }}>
      <window.DSAreaHeader title="Settings" onBack={onBack} />
      <div style={{ padding: '8px 16px 24px' }}>
        <window.DSHubGroup title="Notifications">
          <window.DSHubToggleRow icon="bell" label="Push notifications" sublabel="Nudges, recaps, suggestions" defaultOn />
          <window.DSHubToggleRow icon="moon" label="Quiet hours" sublabel="22:00 – 07:00" defaultOn isLast />
        </window.DSHubGroup>
        <window.DSHubGroup title="Account & contact">
          <window.DSHubRow icon="user" label="Profile" sublabel="Name, monogram" />
          <window.DSHubRow icon="mail" label="Contact email" value="demo@axisx.ai" />
          <window.DSHubRow icon="scale" label="Units" value="Metric" isLast />
        </window.DSHubGroup>
        <window.DSHubGroup title="Privacy & legal">
          <window.DSHubRow icon="shield" label="Privacy & data" sublabel="Export · delete" />
          <window.DSHubRow icon="doc" label="Terms & disclaimers" isLast />
        </window.DSHubGroup>
        <DSButton full variant="ghost" onClick={onReset}>Reset demo progress</DSButton>
      </div>
    </div>
  );
}

function Explainer({ which, onClose, onBuild, onChat }) {
  const cfg = {
    today:    { title: 'Today is locked for now', body: 'Today unlocks once you finish onboarding or build your personal system. Until then, chat is the way forward.', primary: ['Build personal system', onBuild], secondary: ['Open chat', onChat] },
    personal: { title: 'Build your personal system', body: 'Your first system is built with Axis and takes the first tab slot. Tell Axis what you want to track.', primary: ['Build with Axis', onBuild], secondary: ['Maybe later', onClose] },
    prebuilt: { title: 'Locked for now', body: 'Prebuilt systems are gifted weekly through your Today recap. Keep going — the next one appears in your recap.', primary: ['Open chat', onChat], secondary: ['Got it', onClose] },
  }[which] || {};
  return (
    <window.DSBottomSheet isOpen onClose={onClose} title={cfg.title}>
      <div style={{ padding: '2px 2px 8px' }}>
        <div style={{ font: `400 14px/1.55 ${M.sans}`, color: M.inkSoft }}>{cfg.body}</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
          {cfg.secondary && <DSButton variant="secondary" onClick={cfg.secondary[1]} style={{ flex: 1 }}>{cfg.secondary[0]}</DSButton>}
          {cfg.primary && <DSButton onClick={cfg.primary[1]} style={{ flex: 1 }}>{cfg.primary[0]}</DSButton>}
        </div>
      </div>
    </window.DSBottomSheet>
  );
}

function AppShell() {
  const [phase, setPhase] = React.useState('loading');
  const [user, setUser] = React.useState(null);
  const [cur, setCur] = React.useState('today');
  const [overlay, setOverlay] = React.useState(null);
  const refresh = () => setUser(window.AxisMock.me());

  React.useEffect(() => {
    const u = window.AxisMock.me();
    if (u) { setUser(u); setPhase(u.onboarded ? 'app' : 'onboarding'); setCur(u.onboarded ? 'today' : 'chat'); }
    else setPhase('login');
  }, []);

  const name = (user && user.name) || 'Eleanor Halton';
  const onboarded = !!(user && user.onboarded);
  const personal = (user && user.personal) || null;
  const prebuilts = (user && user.prebuilts) || [];
  const todayUnlocked = onboarded || !!personal;
  const nextGift = window.MData.prebuiltGifts.find((g) => !prebuilts.some((p) => p.id === g.id)) || null;

  const frame = (child, scroll) => (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', paddingTop: 48, paddingBottom: 22, boxSizing: 'border-box', overflow: scroll ? 'auto' : 'hidden', position: 'relative' }}>{child}</div>
  );
  const openParam = (p) => setOverlay({ kind: 'param', param: p });
  const goChat = () => { setOverlay(null); setCur('chat'); };
  const goBuilder = () => setOverlay('builder');

  if (phase === 'loading') return frame(<div />);
  if (phase === 'login') return frame(<LoginScreen onAuthed={(u) => { setUser(u); setPhase(u.onboarded ? 'app' : 'onboarding'); setCur(u.onboarded ? 'today' : 'chat'); }} />, true);
  if (phase === 'onboarding') return frame(
    <OnboardingChat
      onComplete={() => { window.AxisMock.completeOnboarding(); refresh(); setPhase('app'); setCur('chat'); }}
      onEscape={() => { refresh(); setPhase('app'); setCur('chat'); }} />);

  // ── pushed overlays ──
  if (overlay === 'search') return frame(<SearchOverlay onClose={() => setOverlay(null)} onOpenParameter={openParam} onNavigate={() => { setOverlay(null); if (todayUnlocked) setCur('today'); }} />, true);
  if (overlay === 'integrations') return frame(<IntegrationsScreen onBack={() => setOverlay(null)} />, true);
  if (overlay === 'settings') return frame(<SettingsArea onBack={() => setOverlay(null)} onReset={() => { window.AxisMock.resetProgress(); refresh(); setOverlay(null); setPhase('onboarding'); setCur('chat'); }} />, true);
  if (overlay === 'systemsManage') return frame(<SystemsManageScreen onBack={() => setOverlay(null)} personal={personal} prebuilts={prebuilts}
    onBuild={() => setOverlay('builder')} onReset={() => { window.AxisMock.resetProgress(); refresh(); setOverlay(null); setPhase('onboarding'); setCur('chat'); }} />, true);
  if (overlay === 'about') return frame(<ProfileGraphScreen onOpenParameter={openParam} />, true);
  if (overlay?.kind === 'param') return frame(<ParameterDetail param={overlay.param} onBack={() => setOverlay(null)} />, true);
  if (overlay === 'builder') return frame(
    <BuilderScreen
      onBuilt={(sys) => { window.AxisMock.setPersonal(sys); refresh(); }}
      onClose={() => { setOverlay(null); setCur('sys:personal'); }} />, true);
  if (overlay === 'you') return frame(
    <window.DSYouMenu name={name} monogram={initialsOf(name)}
      memberSince={user?.isAdmin ? 'Admin · Axis team' : 'Member since March 2024'}
      onClose={() => setOverlay(null)}
      onSignOut={() => { window.AxisMock.signout(); setUser(null); setCur('today'); setPhase('login'); }}
      onArea={(a) => {
        if (a === 'about') setOverlay('about');
        else if (a === 'systems') setOverlay('systemsManage');
        else if (a === 'integrations') setOverlay('integrations');
        else setOverlay('settings');
      }} />);
  if (overlay?.kind === 'explain') return renderShell(<Explainer which={overlay.which} onClose={() => setOverlay(null)} onBuild={() => setOverlay('builder')} onChat={goChat} />);

  return renderShell(null);

  // ── main shell ──
  function renderShell(extra) {
    const G = window.DSNav2_glyphs;
    const prebuiltIcons = [G.prebuiltA, G.prebuiltB, G.prebuiltC];
    const slot = (i) => {
      const p = prebuilts[i];
      if (p) return { id: 'sys:' + p.id, label: shortLabel(p.name), icon: prebuiltIcons[i], state: cur === 'sys:' + p.id ? 'selected' : 'active' };
      return { id: 'lock:' + i, label: 'System', icon: prebuiltIcons[i], state: 'locked' };
    };
    const slots = [
      personal
        ? { id: 'sys:personal', label: shortLabel(personal.name), icon: G.personal, state: cur === 'sys:personal' ? 'selected' : 'active' }
        : { id: 'personal-empty', label: 'System', icon: G.personal, state: 'empty' },
      slot(0),
      { id: 'today', label: 'Today', state: todayUnlocked ? (cur === 'today' ? 'selected' : 'active') : 'locked' },
      slot(1),
      slot(2),
    ];
    const onSlot = (id, state, index) => {
      if (index === 2) { if (todayUnlocked) { setCur('today'); setOverlay(null); } else setOverlay({ kind: 'explain', which: 'today' }); return; }
      if (index === 0) { if (personal) { setCur('sys:personal'); setOverlay(null); } else setOverlay({ kind: 'explain', which: 'personal' }); return; }
      const p = prebuilts[index === 1 ? 0 : index === 3 ? 1 : 2];
      if (p) { setCur('sys:' + p.id); setOverlay(null); } else setOverlay({ kind: 'explain', which: 'prebuilt' });
    };

    let content;
    if (cur === 'chat') content = <ChatScreen onBack={() => setCur(todayUnlocked ? 'today' : 'chat')} />;
    else if (cur === 'today' && todayUnlocked) content = (
      <TodayHome name={name.split(' ')[0]} onboarded={onboarded} personal={personal} prebuilts={prebuilts} nextGift={nextGift}
        onClaimGift={(g) => { window.AxisMock.activatePrebuilt({ id: g.id, name: g.name, face: g.face }); refresh(); }}
        onBuildPersonal={goBuilder} onOpenSystem={(sid) => setCur('sys:' + sid)} onOpenChat={goChat} />
    );
    else if (cur === 'sys:personal' && personal) content = <SystemView system={{ ...personal, kind: 'personal' }} onOpenChat={goChat} />;
    else if (cur.startsWith('sys:')) {
      const p = prebuilts.find((x) => 'sys:' + x.id === cur);
      content = p ? <SystemView system={{ ...p, kind: 'prebuilt' }} onOpenChat={goChat} /> : <TodayHome name={name.split(' ')[0]} onboarded={onboarded} personal={personal} prebuilts={prebuilts} nextGift={nextGift} onClaimGift={() => {}} onBuildPersonal={goBuilder} onOpenSystem={() => {}} onOpenChat={goChat} />;
    } else {
      // not unlocked and not chat → fall back to chat surface
      content = <ChatScreen onBack={() => setCur('chat')} />;
    }

    return frame(
      <React.Fragment>
        <TopBar initials={initialsOf(name)} onSearch={() => setOverlay('search')} onYou={() => setOverlay('you')} />
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>{content}</div>
        {cur !== 'chat' && <window.DSChatFab onClick={goChat} bottom={86} right={16} />}
        <window.DSTabBarNav2 slots={slots} onSlot={onSlot} />
        {extra}
      </React.Fragment>);
  }
}
window.AppShell = AppShell;