// tgp-app.jsx v2 — App shell + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#007AFF",
  "bgTone": "system",
  "cardRadius": 20,
  "fontScale": 1
}/*EDITMODE-END*/;

const TweaksPanel = ({ tweaks, onChange, onClose }) => (
  <div style={{
    position:'absolute', bottom:110, right:16,
    background:'#fff', borderRadius:22, padding:20,
    boxShadow:'0 8px 40px rgba(0,0,0,0.18)', zIndex:300, width:230,
    border:'1px solid rgba(60,60,67,0.1)',
  }}>
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:18 }}>
      <span style={{ fontSize:15, fontWeight:700, color:'#020100', fontFamily:'Inter,system-ui,sans-serif', letterSpacing:'-0.3px' }}>Tweaks</span>
      <button onClick={onClose} style={{ border:'none', background:'rgba(116,116,128,0.12)', width:28, height:28, borderRadius:'50%', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}><Ico.X size={13} /></button>
    </div>

    <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:8 }}>Accent kleur</MetaLabel>
    <div style={{ display:'flex', gap:8, marginBottom:18 }}>
      {[['#007AFF','iOS blauw'],['#FF4D1A','Oranje'],['#7C3AED','Paars'],['#020100','Zwart']].map(([c,l])=>(
        <button key={c} onClick={()=>onChange({accentColor:c})} style={{ width:30,height:30,borderRadius:'50%',background:c,border:tweaks.accentColor===c?'3px solid #020100':'2px solid transparent',cursor:'pointer',boxShadow:tweaks.accentColor===c?'0 0 0 2px #fff inset':'none' }} title={l} />
      ))}
    </div>

    <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:8 }}>Achtergrond</MetaLabel>
    <div style={{ display:'flex', gap:6, marginBottom:18 }}>
      {[['system','#F2F2F7','System'],['warm','#FAF8F5','Warm'],['white','#FFFFFF','Wit']].map(([key,bg,label])=>(
        <button key={key} onClick={()=>onChange({bgTone:key})} style={{ flex:1, height:32, borderRadius:10, border:tweaks.bgTone===key?'2px solid #020100':'1.5px solid rgba(116,116,128,0.2)', background:bg, cursor:'pointer', fontSize:10, color:tweaks.bgTone===key?'#020100':'#8E8E93', fontFamily:'Inter,system-ui,sans-serif', fontWeight:tweaks.bgTone===key?700:400 }}>{label}</button>
      ))}
    </div>

    <MetaLabel style={{ textTransform:'uppercase', letterSpacing:'0.06em', display:'block', marginBottom:8 }}>Tekstgrootte</MetaLabel>
    <div style={{ display:'flex', gap:6 }}>
      {[[0.9,'Klein'],[1,'Normaal'],[1.1,'Groot']].map(([s,l])=>(
        <button key={l} onClick={()=>onChange({fontScale:s})} style={{ flex:1, padding:'8px 0', borderRadius:10, border:'none', background:tweaks.fontScale===s?'#020100':'rgba(116,116,128,0.1)', color:tweaks.fontScale===s?'#fff':'#8E8E93', fontSize:11, cursor:'pointer', fontFamily:'Inter,system-ui,sans-serif', fontWeight:tweaks.fontScale===s?700:400 }}>{l}</button>
      ))}
    </div>
  </div>
);

const App = () => {
  const [page,      setPage]      = React.useState(()=>localStorage.getItem('tgp_page')||'feed');
  const [selectedProject, setSelectedProject] = React.useState(null);
  const [selectedCommunity, setSelectedCommunity] = React.useState(null);
  const [sheet,     setSheet]     = React.useState(null);
  const [menuOpen,  setMenuOpen]  = React.useState(false);
  const [profileOpen, setProfileOpen] = React.useState(false);
  const [chatOpen,    setChatOpen]    = React.useState(false);
  const [searchOpen,  setSearchOpen]  = React.useState(false);
  const [tweaksOpen,setTweaksOpen]= React.useState(false);
  const [tweaks,    setTweaks]    = React.useState(()=>{
    try { return JSON.parse(localStorage.getItem('tgp_tweaks'))||TWEAK_DEFAULTS; } catch { return TWEAK_DEFAULTS; }
  });
  const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= 500);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth <= 500);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  const scrollRef = React.useRef(null);

  const bgColors = { system:'#F2F2F7', warm:'#FAF8F5', white:'#FFFFFF' };
  const bg = bgColors[tweaks.bgTone]||'#F2F2F7';

  const navigate = (p) => {
    setPage(p); setMenuOpen(false);
    if (p !== 'projectDetail' && p !== 'communityDetail') localStorage.setItem('tgp_page',p);
    if(scrollRef.current) scrollRef.current.scrollTop=0;
  };

  const handleTweak = (delta) => {
    const next={...tweaks,...delta};
    setTweaks(next);
    localStorage.setItem('tgp_tweaks',JSON.stringify(next));
    window.parent.postMessage({type:'__edit_mode_set_keys',edits:next},'*');
  };

  React.useEffect(()=>{
    const h=(e)=>{
      if(e.data?.type==='__activate_edit_mode')   setTweaksOpen(true);
      if(e.data?.type==='__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message',h);
    window.parent.postMessage({type:'__edit_mode_available'},'*');
    return ()=>window.removeEventListener('message',h);
  },[]);

  const isCDetail = page==='communityDetail' && selectedCommunity;
  const isPDetail = page==='projectDetail' && selectedProject;

  const titles = { feed:'The Greater Plan', personal:'Personal Plan', projects:'Project Plan', community:'Community Plan' };
  const subs   = { feed:'Vind hier je inspiratie', personal:'Jouw taken en groei', projects:'Jouw samenwerkingen', community:'Vind en bouw communities' };

  return (
    <div style={isMobile ? {
      position:'relative', width:'100vw', height:'100dvh',
      maxWidth:'100vw',
      background:'#fff', borderRadius:0,
      boxShadow:'none',
      overflow:'hidden', display:'flex', flexDirection:'column',
      fontSize:`${tweaks.fontScale}em`,
    } : {
      position:'relative', width:390, height:844,
      background:'#fff', borderRadius:44,
      boxShadow:'0 30px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
      overflow:'hidden', display:'flex', flexDirection:'column',
      fontSize:`${tweaks.fontScale}em`,
    }}>
      {/* Inject CSS vars */}
      <style>{`
        :root { --accent: ${tweaks.accentColor}; --bg: ${bg}; }
        #tgp-scroll { background: ${bg}; }
      `}</style>

      {/* Main scroll area — PageHeader scrolls with content so the title frees up space on scroll */}
      {isCDetail ? (
        <div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column', background:bg }}>
          <CommunityDetailPage community={selectedCommunity} onBack={()=>navigate('community')} />
        </div>
      ) : isPDetail ? (
        <div style={{ flex:1, overflow:'hidden', display:'flex', flexDirection:'column', background:bg }}>
          <ProjectDetailPage project={selectedProject} onBack={()=>navigate('projects')} />
        </div>
      ) : (
        <div id="tgp-scroll" ref={scrollRef} style={{ flex:1, overflowY:'auto', scrollbarWidth:'none', WebkitOverflowScrolling:'touch' }}>
          <PageHeader
            title={titles[page]||'The Greater Plan'}
            sub={subs[page]||''}
            onProfileOpen={()=>setProfileOpen(true)}
            onChat={()=>setChatOpen(true)}
            onSearch={()=>setSearchOpen(true)}
          />
          {page==='feed'      && <FeedPage onSheet={setSheet} />}
          {page==='personal'  && <PersonalPage />}
          {page==='projects'  && <ProjectsPage onDetail={(p)=>{ setSelectedProject(p); navigate('projectDetail'); }} />}
          {page==='community' && <CommunityPage onDetail={(c)=>{ setSelectedCommunity(c); navigate('communityDetail'); }} />}
        </div>
      )}

      {/* Bottom nav */}
      <BottomNav page={page} onPageChange={navigate} menuOpen={menuOpen} onMenuToggle={()=>setMenuOpen(m=>!m)} />

      {/* Bottom sheet */}
      {sheet && <BottomSheet type={sheet} onClose={()=>setSheet(null)} />}

      {/* Menu dismiss overlay */}
      {menuOpen && <div onClick={()=>setMenuOpen(false)} style={{ position:'absolute', inset:0, zIndex:40 }} />}

      {/* Profile overlay */}
      <ProfilePage isOpen={profileOpen} onClose={()=>setProfileOpen(false)} />

      {/* Chat overlay */}
      <ChatPage isOpen={chatOpen} onClose={()=>setChatOpen(false)} />

      {/* Search overlay */}
      <SearchPage isOpen={searchOpen} onClose={()=>setSearchOpen(false)} />

      {/* Tweaks panel */}
      {tweaksOpen && <TweaksPanel tweaks={tweaks} onChange={handleTweak} onClose={()=>setTweaksOpen(false)} />}
    </div>
  );
};

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