// BeHueman v2 — App shell + router

// 8 core nav items per IA spec (section 2.1)
const APP_NAV = [
  { id:'myhue',        label:'MyHue',        icon:'Dashboard',  group:'core' },
  { id:'community',    label:'Community',    icon:'Community',  group:'core' },
  { id:'wisdom',       label:'Wisdom',       icon:'Education',  group:'content', roles:['autor','partner'] },
  { id:'practices',    label:'Practices',    icon:'Calendar',   group:'content', roles:['autor','partner'] },
  { id:'joy',          label:'Joy',          icon:'Fun',        group:'core' },
  { id:'circles',      label:'Circles',      icon:'Users',      group:'core',    ff:'FF2' },
  { id:'goods-market', label:'Goods Market', icon:'Briefcase',  group:'content', ff:'FF3', roles:['autor','partner'] },
  { id:'create',       label:'Create',       icon:'Sparkle',    group:'content', roles:['autor','partner'] },
  // Personal (always visible)
  { id:'profile',      label:'Mój profil',   icon:'User',       group:'me' },
  { id:'settings',     label:'Ustawienia',   icon:'Settings',   group:'me' },
];

// ---- Sidebar ----
function Sidebar({ phase, setPhase, role, setRole, route, setRoute, partnerCtx }) {
  const [devOpen, setDevOpen] = useState(false);
  const order = { FF1:1, FF2:2, FF3:3, GL:4 };

  const visible = APP_NAV.filter(n => {
    if (n.ff && order[phase] < order[n.ff]) return false;
    if (n.roles && !n.roles.includes(role)) return false;
    return true;
  });

  const groupDefs = [
    { id:'core',    label:'Platforma' },
    { id:'content', label:'Treści' },
    // 'me' group removed from sidebar — accessible via topbar profile chip
  ];

  return (
    <aside className="sidebar">
      <div className="logo-mark">be<span className="hue">hue</span>man</div>
      <div className="logo-sub">odcień, którym jesteś</div>

      {/* Dev controls (prototype-only) */}
      <div className="dev-controls">
        <button className="dev-controls-toggle" onClick={() => setDevOpen(o => !o)}>
          <I name="Settings" size={11}/>
          <span style={{flex:1, textAlign:'left'}}>Dev Controls</span>
          <I name="Chevron" size={10} style={{transform: devOpen ? 'rotate(90deg)' : 'none', transition:'transform 150ms'}}/>
        </button>
        {devOpen && (
          <div className="dev-controls-body">
            <div className="dev-label">Faza</div>
            <div className="phase-switch">
              {['FF1','FF2','FF3','GL'].map(p => (
                <button key={p} className={phase===p?'on':''} onClick={() => setPhase(p)}>{p}</button>
              ))}
            </div>
            <div className="dev-label">Rola użytkownika</div>
            <div className="role-switch-options" style={{display:'flex', gap:4}}>
              {[['member','Memb'],['autor','Autor'],['partner','Part']].map(([k,l]) => (
                <button key={k} className={role===k?'on':''} onClick={() => setRole(k)} style={{flex:1, border:'none', background:'transparent', padding:'4px 4px', borderRadius:'var(--r-1)', fontSize:10, fontWeight:600, color:'var(--ink-3)', cursor:'pointer'}}>
                  {l}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Partner context indicator */}
      {partnerCtx && (
        <div style={{
          background:'color-mix(in oklab, var(--hue-amber) 18%, var(--bg-elev))',
          border:'1px solid color-mix(in oklab, var(--hue-amber) 40%, var(--line))',
          borderRadius:'var(--r-2)',
          padding:'8px 10px',
          marginBottom:8,
          fontSize:12,
        }}>
          <div style={{fontSize:10, textTransform:'uppercase', letterSpacing:'.06em', color:'var(--ink-3)', fontWeight:700, marginBottom:2}}>Kontekst aktywny</div>
          <div style={{fontWeight:600}}>{partnerCtx}</div>
        </div>
      )}

      {/* Nav items grouped */}
      {groupDefs.map(g => {
        const items = visible.filter(n => n.group === g.id);
        if (!items.length) return null;
        return (
          <Fragment key={g.id}>
            <div className="nav-group-label">{g.label}</div>
            {items.map(n => (
              <button
                key={n.id}
                className={`nav-item ${route===n.id?'active':''}`}
                onClick={() => setRoute(n.id)}
              >
                <span className="nav-icon"><I name={n.icon} size={17} sw={1.7}/></span>
                <span>{n.label}</span>
                {n.ff && order[phase] >= order[n.ff] - 0 ? null : n.ff ? <span className="ff-pill">{n.ff}</span> : null}
              </button>
            ))}
          </Fragment>
        );
      })}

      <div className="sidebar-foot" style={{paddingTop:4}}/>

    </aside>
  );
}

// ---- Topbar ----
function Topbar({ phase, role, onPost, onDropAFind, onOpenSearch, setRoute, partnerCtx, setPartnerCtx }) {
  const [s, setApp] = window.__app.use();
  const [ctxOpen, setCtxOpen] = useState(false);
  const order = { FF1:1, FF2:2, FF3:3, GL:4 };
  const chatEnabled = order[phase] >= 3;
  const unreadNotif = window.__notifData.unread();
  const unreadChat = chatEnabled ? window.__chatData.totalUnread() : 0;
  const isPartner = role === 'partner';

  // Close ctx dropdown on outside click
  useEffect(() => {
    if (!ctxOpen) return;
    const close = () => setCtxOpen(false);
    setTimeout(() => window.addEventListener('click', close, { once:true }), 0);
  }, [ctxOpen]);

  return (
    <div className="topbar">
      {/* Search */}
      <button
        className="search"
        onClick={onOpenSearch}
        style={{
          cursor:'pointer', textAlign:'left', border:'1px solid var(--line)',
          borderRadius:'var(--r-pill)', background:'var(--bg-elev)',
          padding:'9px 14px 9px 38px', position:'relative',
          color:'var(--ink-3)', fontSize:13, fontFamily:'inherit',
          display:'flex', alignItems:'center', gap:12, flex:'1', maxWidth:480,
        }}
      >
        <span style={{position:'absolute', left:14}}><I name="Search" size={16}/></span>
        <span style={{flex:1}}>Szukaj autorów, postów, polecajek…</span>
        <span style={{display:'flex', gap:4}}>
          <span className="kbd">⌘</span><span className="kbd">K</span>
        </span>
      </button>

      {/* Two create CTAs */}
      <div className="topbar-actions">
        <button className="btn btn-ghost" onClick={onPost} title="Napisz Post">
          <I name="Pencil" size={14}/> Post
        </button>
        <button className="btn btn-drop" onClick={onDropAFind} title="Polecaj zasób z internetu">
          <I name="Link" size={14}/> Drop-a-Find
        </button>
      </div>

      <div className="topbar-right">
        <ThemeToggle/>

        {/* Library icon */}
        <button className="icon-btn topbar-bell" title="Twoja Biblioteka" onClick={() => setRoute('library')}>
          <I name="Bookmark" size={16}/>
        </button>

        {/* Notifications */}
        <button
          className="icon-btn topbar-bell" title="Powiadomienia"
          onClick={e => { e.stopPropagation(); setApp({ notifOpen: !s.notifOpen }); }}
        >
          <I name="Bell" size={16}/>
          {unreadNotif > 0 && <span className="topbar-badge">{unreadNotif > 9 ? '9+' : unreadNotif}</span>}
        </button>

        {/* Chat (FF3+) */}
        {chatEnabled && (
          <button className="icon-btn topbar-bell" title="Wiadomości"
                  onClick={() => setApp({ chatList: !s.chatList })}>
            <I name="Send" size={16}/>
            {unreadChat > 0 && <span className="topbar-badge">{unreadChat}</span>}
          </button>
        )}

        {/* Profile chip — opens dropdown for all roles */}
        <div style={{position:'relative'}}>
          <button className="user-ctx-btn" onClick={e => { e.stopPropagation(); setCtxOpen(o => !o); }}>
            <div style={{position:'relative'}}>
              <Avatar author="me" size={28}/>
              {isPartner && partnerCtx && <span className="partner-ctx-badge">F</span>}
            </div>
            <div style={{textAlign:'left', lineHeight:1.2}}>
              <div style={{fontSize:12.5, fontWeight:600, color:'var(--ink-1)'}}>
                {isPartner && partnerCtx ? partnerCtx.slice(0, 20) : 'Anna Hueman'}
              </div>
              <div style={{fontSize:11, color:'var(--ink-3)'}}>@anna.h · {role}</div>
            </div>
            <I name="ChevronDown" size={12}/>
          </button>

          {ctxOpen && (
            <div className="ctx-dropdown" onClick={e => e.stopPropagation()}>

              {/* Partner context switcher (partner role only) */}
              {isPartner && <>
                <div style={{padding:'10px 14px 4px', fontSize:10.5, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--ink-4)', fontWeight:700}}>
                  Kontekst
                </div>
                <div className={`ctx-dropdown-item ${!partnerCtx?'active':''}`} onClick={() => { setPartnerCtx(null); }}>
                  <Avatar author="me" size={26}/>
                  <div>
                    <div style={{fontWeight:600, fontSize:13}}>Anna Hueman</div>
                    <div className="muted" style={{fontSize:11}}>Profil osobisty</div>
                  </div>
                  {!partnerCtx && <I name="Check" size={13} style={{marginLeft:'auto', color:'var(--hue-sage)'}}/>}
                </div>
                {['Studio Wellness Sp. z o.o.'].map(company => (
                  <div key={company} className={`ctx-dropdown-item ${partnerCtx===company?'active':''}`}
                       onClick={() => { setPartnerCtx(company); window.__app.pushToast('ok', `Kontekst: ${company}`, 'Teraz tworzysz treści jako ta firma.'); }}>
                    <div style={{width:26, height:26, borderRadius:6, background:'var(--hue-sage)', display:'grid', placeItems:'center', fontSize:10, fontWeight:800, color:'white', flexShrink:0}}>SW</div>
                    <div>
                      <div style={{fontWeight:600, fontSize:13}}>{company}</div>
                      <div className="muted" style={{fontSize:11}}>Partner · Pro</div>
                    </div>
                    {partnerCtx === company && <I name="Check" size={13} style={{marginLeft:'auto', color:'var(--hue-sage)'}}/>}
                  </div>
                ))}
                <div className="ctx-dropdown-divider"/>
              </>}

              {/* Account actions — all roles */}
              <div style={{padding:'8px 14px 4px', fontSize:10.5, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--ink-4)', fontWeight:700}}>
                Konto
              </div>
              <div className="ctx-dropdown-item" onClick={() => { setCtxOpen(false); setRoute('profile'); }}>
                <I name="User" size={15}/>
                <div>
                  <div style={{fontWeight:600, fontSize:13}}>Mój profil</div>
                  <div className="muted" style={{fontSize:11}}>Posty, polecajki, biblioteki</div>
                </div>
              </div>
              <div className="ctx-dropdown-item" onClick={() => { setCtxOpen(false); setRoute('settings'); }}>
                <I name="Settings" size={15}/>
                <div>
                  <div style={{fontWeight:600, fontSize:13}}>Ustawienia</div>
                  <div className="muted" style={{fontSize:11}}>Prywatność, powiadomienia, konto</div>
                </div>
              </div>
              <div className="ctx-dropdown-divider"/>
              <div className="ctx-dropdown-item" style={{color:'#94463F'}}
                   onClick={() => { setCtxOpen(false); window.__app.pushToast('warn', 'Wylogowywanie…', 'Za chwilę zostaniesz przekierowany.'); setTimeout(() => setRoute('landing'), 1200); }}>
                <I name="ArrowLeft" size={15}/>
                <div style={{fontWeight:600, fontSize:13}}>Wyloguj się</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ---- App ----
function App() {
  const [phase, setPhase] = useState('FF1');
  const [role, setRole] = useState('autor');
  const [route, setRoute] = useState('landing');
  const [showPost, setShowPost] = useState(false);
  const [showDrop, setShowDrop] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [partnerCtx, setPartnerCtx] = useState(null);

  // Expose setRoute globally (for DashboardConfig link)
  window.__setRoute = setRoute;

  useSearchHotkey(() => setSearchOpen(true));

  // Register global openDetail handler
  useEffect(() => {
    window.openDetail = (kind, item) => {
      if (kind === 'event')     { window.__activeEvent = item;   setRoute('event-detail'); }
      else if (kind === 'course')    { window.__activeTile = item;    setRoute('course-detail'); }
      else if (kind === 'author')    { window.__activeAuthor = (item && item.id) || item; window.__authorBack = route; setRoute('author-profile'); }
      else if (kind === 'challenge') { window.__activeChallenge = item; setRoute('challenge-detail'); }
      else if (kind === 'product')   { window.__activeProduct = item;   setRoute('product-landing'); }
      else if (kind === 'reader')    { window.__activeReader = item;    setRoute('reader'); }
    };
  });

  // Auto-redirect when phase/role changes to invalid route
  useEffect(() => {
    const cur = APP_NAV.find(n => n.id === route);
    if (!cur) return;
    const order = { FF1:1, FF2:2, FF3:3, GL:4 };
    if (cur.ff && order[phase] < order[cur.ff]) setRoute('myhue');
    if (cur.roles && !cur.roles.includes(role)) setRoute('myhue');
  }, [phase, role]);

  // Simulate chat toast (FF3+)
  useEffect(() => {
    const order = { FF1:1, FF2:2, FF3:3, GL:4 };
    if (order[phase] < 3) return;
    const t = setTimeout(() => {
      if (Math.random() > 0.4) return;
      window.__app.pushToast('chat', 'Hanna Wójcik', 'Wpadasz na czwartkowe live?');
    }, 8000);
    return () => clearTimeout(t);
  }, [phase]);

  // ---- Landing + Onboarding (full-screen, no sidebar) ----
  if (route === 'landing') {
    return (
      <>
        <LandingScreens.Landing
          onLogin={() => setRoute('onboarding')}
          onRegister={() => setRoute('onboarding')}
        />
        <GlobalOverlays phase={phase}/>
      </>
    );
  }

  if (route === 'onboarding') {
    return (
      <>
        <FF2Screens.Onboarding onDone={() => setRoute('myhue')}/>
        <GlobalOverlays phase={phase}/>
      </>
    );
  }

  // ---- Main app layout ----
  let screen = null;
  const order = { FF1:1, FF2:2, FF3:3, GL:4 };

  switch (route) {
    case 'myhue':         screen = <FF1.Dashboard phase={phase} role={role} onNav={setRoute}/>; break;
    case 'community':     screen = <FF1.Community phase={phase} role={role} onOpenComposer={() => setShowPost(true)} onDropAFind={() => setShowDrop(true)} onNav={setRoute}/>; break;
    case 'wisdom':        screen = <FF1.Wisdom phase={phase}/>; break;
    case 'practices':     screen = <FF1.Practices phase={phase}/>; break;
    case 'joy':           screen = <FF1.Joy phase={phase}/>; break;
    case 'library':       screen = <FF1.Library phase={phase}/>; break;
    case 'circles':       screen = order[phase] >= 2 ? <GLScreens.PaidGroups phase={phase} onOpenGroup={g => { window.__activeGroup = g; setRoute('group-detail'); }}/> : <FF1.Dashboard phase={phase} role={role} onNav={setRoute}/>; break;
    case 'goods-market':  screen = order[phase] >= 3 ? <FF3Screens.Market phase={phase}/> : <FF1.Dashboard phase={phase} role={role} onNav={setRoute}/>; break;
    case 'create':        screen = <FF2Screens.AuthorPanel phase={phase}/>; break;
    case 'profile':       screen = <Detail2Screens.AuthorProfile authorId={null} isMe={true} isAuthor={role==='autor'||role==='partner'} onBack={() => setRoute('myhue')}/>; break;
    case 'author-profile':screen = <Detail2Screens.AuthorProfile authorId={window.__activeAuthor||'hannaw'} isAuthor={true} onBack={() => setRoute(window.__authorBack||'community')}/>; break;
    case 'settings':      screen = <FF1.Settings phase={phase}/>; break;
    case 'event-detail':  screen = <DetailScreens.EventDetail event={window.__activeEvent} onBack={() => setRoute('practices')}/>; break;
    case 'course-detail': screen = <DetailScreens.CourseDetail tile={window.__activeTile} onBack={() => setRoute('wisdom')}/>; break;
    case 'challenge-detail': screen = <Detail6Screens.ChallengeDetail challenge={window.__activeChallenge} onBack={() => setRoute('joy')}/>; break;
    case 'product-landing': screen = <Detail6Screens.ProductLanding product={window.__activeProduct} onBack={() => setRoute('wisdom')}/>; break;
    case 'reader':        screen = <Detail6Screens.Reader item={window.__activeReader} onBack={() => setRoute('wisdom')}/>; break;
    case 'group-detail':  screen = <Detail5Screens.GroupRich phase={phase} group={window.__activeGroup} onBack={() => setRoute('circles')}/>; break;
    case 'groups':        screen = <FF2Screens.Groups phase={phase}/>; break;
    case 'authors':       screen = <FF2Screens.AuthorsCatalog phase={phase}/>; break;
    case 'events':        screen = <FF2Screens.Events phase={phase}/>; break;
    case 'author-panel':  screen = <FF2Screens.AuthorPanel phase={phase}/>; break;
    case 'partner-panel': screen = <FF2Screens.PartnerPanel phase={phase}/>; break;
    case 'browser-plugin':screen = <FF2Screens.BrowserPlugin phase={phase}/>; break;
    case 'dashboard-cfg': screen = <FF2Screens.DashboardConfig phase={phase}/>; break;
    case 'shortmoments':  screen = <FF3Screens.ShortMoments phase={phase}/>; break;
    case 'challenges':    screen = <FF3Screens.Challenges phase={phase}/>; break;
    case 'market':        screen = <FF3Screens.Market phase={phase}/>; break;
    case 'subscription':  screen = <GLScreens.Subscription phase={phase}/>; break;
    case 'paid-groups':   screen = <GLScreens.PaidGroups phase={phase} onOpenGroup={g => { window.__activeGroup = g; setRoute('group-detail'); }}/>; break;
    case 'author-earnings': screen = <GLScreens.AuthorEarnings phase={phase}/>; break;
    case 'stripe-onboard': screen = <GLScreens.StripeOnboarding phase={phase}/>; break;
    default:              screen = <FF1.Dashboard phase={phase} role={role} onNav={setRoute}/>;
  }

  const skelKind =
    ['wisdom','joy','market','authors','events','challenges','shortmoments','paid-groups','practices','circles','goods-market'].includes(route) ? 'tiles' :
    ['event-detail','course-detail','challenge-detail','product-landing','group-detail','author-profile','reader'].includes(route) ? 'detail' :
    'feed';

  return (
    <div className="app">
      <Sidebar
        phase={phase} setPhase={setPhase}
        role={role}   setRole={setRole}
        route={route} setRoute={setRoute}
        partnerCtx={partnerCtx}
      />
      <div className="main">
        <Topbar
          phase={phase} role={role}
          onPost={() => setShowPost(true)}
          onDropAFind={() => setShowDrop(true)}
          onOpenSearch={() => setSearchOpen(true)}
          setRoute={setRoute}
          partnerCtx={partnerCtx}
          setPartnerCtx={setPartnerCtx}
        />
        <RouteFader key={route} route={route} skelKind={skelKind}>
          {screen}
        </RouteFader>
      </div>

      {/* Post composer */}
      {showPost && (
        <FF2Screens.PostComposer role={role} onClose={() => setShowPost(false)}/>
      )}

      {/* Drop-a-Find composer */}
      {showDrop && (
        <FF2Screens.DropAFindComposer role={role} onClose={() => setShowDrop(false)}/>
      )}

      {/* Search overlay */}
      {searchOpen && (
        <SearchOverlay
          onClose={() => setSearchOpen(false)}
          onNavigate={act => { if (act.type === 'route') setRoute(act.route); }}
        />
      )}

      <GlobalOverlays phase={phase}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);