// Main app component — wires it all together

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "agendaLayout": "list",
  "feedLayout": "list",
  "accentHue": "amber",
  "cornerRadius": "rounded"
}/*EDITMODE-END*/;

const App = () => {
  const [signed, setSigned] = React.useState(() => localStorage.getItem('ft.signed') === '1');
  const [tab, setTab] = React.useState(() => localStorage.getItem('ft.tab') || 'home');
  // view: overlay screens that stack on top of the active tab
  //  { kind: 'event' | 'post' | 'full-agenda' | 'edit-profile' | 'create-post'
  //         | 'user-profile' | 'chat' | 'notifications' | 'quiz-play', data }
  const [view, setView] = React.useState(null);
  const [subscribed, setSubscribed] = React.useState(new Set(['e1', 'e2', 'e8']));
  const [posts, setPosts] = React.useState(POSTS);
  const [user, setUser] = React.useState(CURRENT_USER);
  const [toast, setToast] = React.useState('');
  const [settings, setSettings] = React.useState(() => {
    try { return { ...DEFAULTS, ...JSON.parse(localStorage.getItem('ft.settings') || '{}') }; }
    catch { return DEFAULTS; }
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(() => { localStorage.setItem('ft.tab', tab); }, [tab]);
  React.useEffect(() => { localStorage.setItem('ft.settings', JSON.stringify(settings)); }, [settings]);

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

  const setSetting = (key, val) => {
    const next = { ...settings, [key]: val };
    setSettings(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  };

  const toggleSub = (id) => {
    setSubscribed(prev => {
      const next = new Set(prev);
      if (next.has(id)) { next.delete(id); showToast('Inscrição cancelada'); }
      else { next.add(id); showToast('Inscrito no evento'); }
      return next;
    });
  };

  const likePost = (id) => {
    setPosts(prev => prev.map(p => p.id === id ? { ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1) } : p));
  };

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(''), 1800);
  };

  const onSignIn = () => { localStorage.setItem('ft.signed', '1'); setSigned(true); };
  const onSignOut = () => { localStorage.removeItem('ft.signed'); setSigned(false); };

  const onOpenEvent = (ev) => setView({ kind: 'event', data: ev });
  const onOpenEventById = (id) => {
    const ev = EVENTS.find(e => e.id === id);
    if (ev) setView({ kind: 'event', data: ev });
  };
  const onOpenPost = () => {};
  const onOpenUser = (handle) => {
    if (handle === user.handle) { setTab('profile'); setView(null); return; }
    setView({ kind: 'user-profile', data: handle });
  };
  const onCreatePost = (data) => {
    const newPost = {
      id: 'p' + Date.now(),
      user: { name: user.name, handle: user.handle, avatar: user.avatar, color: user.color },
      time: 'agora', image: data.image, imageLabel: 'foto',
      likes: 0, liked: false,
    };
    setPosts([newPost, ...posts]);
    setView(null);
    setTab('feed');
    showToast('Publicado no mural');
  };

  if (!signed) return <Phone><AuthScreen onDone={onSignIn} /></Phone>;

  // --- content by view / tab ---
  let content;
  if (view?.kind === 'event') {
    content = <EventDetailScreen event={view.data} subscribed={subscribed} onToggle={toggleSub}
      onBack={() => setView(null)} />;
  } else if (view?.kind === 'full-agenda') {
    content = <FullAgendaScreen subscribed={subscribed} onToggle={toggleSub}
      onOpen={(ev) => setView({ kind: 'event', data: ev })} onBack={() => setView(null)} />;
  } else if (view?.kind === 'edit-profile') {
    content = <EditProfileScreen user={user} onBack={() => setView(null)}
      onSave={(u) => { setUser(u); setView(null); showToast('Perfil atualizado'); }} />;
  } else if (view?.kind === 'create-post') {
    content = <CreatePostScreen onBack={() => setView(null)} onPost={onCreatePost} />;
  } else if (view?.kind === 'user-profile') {
    content = <UserProfileScreen handle={view.data}
      onBack={() => setView(null)}
      onOpenPost={onOpenPost} />;
  } else if (view?.kind === 'notifications') {
    content = <NotificationsScreen
      onBack={() => setView(null)}
      onOpenEvent={onOpenEventById}
      onOpenQuiz={() => setView({ kind: 'quiz-play', data: QUIZZES[0] })} />;
  } else if (view?.kind === 'quiz-play') {
    content = <QuizScreen quiz={view.data} onClose={() => setView(null)} />;
  } else {
    if (tab === 'home') {
      content = <HomeScreen user={user} events={EVENTS} subscribed={subscribed}
        onOpenEvent={onOpenEvent}
        onAgenda={() => setTab('agenda')}
        onQuiz={() => setTab('quiz')}
        onIbmec={() => setTab('ibmec')}
        onIdomed={() => setTab('idomed')}
        onProfile={() => setTab('profile')}
        onNotifications={() => setView({ kind: 'notifications' })} />;
    } else if (tab === 'profile') {
      content = <ProfileScreen user={user} subscribed={subscribed}
        onEdit={() => setView({ kind: 'edit-profile' })}
        onSettings={onSignOut}
        onBack={() => setTab('home')}
        onOpen={onOpenPost} />;
    } else if (tab === 'feed') {
      content = <FeedScreen layout={settings.feedLayout} posts={posts} onLike={likePost}
        onOpen={onOpenPost} onOpenUser={onOpenUser}
        onCreate={() => setView({ kind: 'create-post' })}
        onNotifications={() => setView({ kind: 'notifications' })} />;
    } else if (tab === 'agenda') {
      content = <AgendaScreen layout={settings.agendaLayout} subscribed={subscribed}
        onToggle={toggleSub} onOpen={onOpenEvent} onFull={() => setView({ kind: 'full-agenda' })} />;
    } else if (tab === 'quiz') {
      content = <QuizListScreen onPlay={(q) => setView({ kind: 'quiz-play', data: q })} />;
    } else if (tab === 'ibmec') {
      content = <IbmecScreen onBack={() => setTab('home')} />;
    } else if (tab === 'idomed') {
      content = <IdomedScreen onBack={() => setTab('home')} />;
    }
  }

  const tabBarVisible = !view;
  const fabVisible = !view && tab === 'feed';

  return (
    <>
      <Phone>
        {content}
        {fabVisible && <FabCreate onClick={() => setView({ kind: 'create-post' })} />}
        {tabBarVisible && <TabBar active={tab} onChange={setTab} />}
        <Toast message={toast} visible={!!toast} />
      </Phone>

      {tweaksOpen && (
        <div className="tweaks">
          <h4>Agenda</h4>
          <div className="tw-row">
            {['timeline', 'cards', 'list'].map(l => (
              <button key={l} className={settings.agendaLayout === l ? 'on' : ''} onClick={() => setSetting('agendaLayout', l)}>
                {l === 'timeline' ? 'Linha do tempo' : l === 'cards' ? 'Cartões' : 'Lista'}
              </button>
            ))}
          </div>
          <h4>Mural (feed)</h4>
          <div className="tw-row">
            {['list', 'grid', 'compact'].map(l => (
              <button key={l} className={settings.feedLayout === l ? 'on' : ''} onClick={() => setSetting('feedLayout', l)}>
                {l === 'list' ? 'Cheio' : l === 'grid' ? 'Grade' : 'Compacto'}
              </button>
            ))}
          </div>
          <h4>Atalhos</h4>
          <div className="tw-row">
            <button onClick={() => setView({ kind: 'quiz-play', data: QUIZZES[0] })}>Abrir quiz ao vivo</button>
          </div>
          <div className="tw-row">
            <button onClick={() => {
              localStorage.removeItem('ft.quiz.result');
              localStorage.removeItem('ft.quiz.deadline');
              setView(null); setTab('quiz');
            }}>Resetar estado do quiz</button>
          </div>
          <div className="tw-row">
            <button onClick={() => setView({ kind: 'notifications' })}>Abrir notificações</button>
          </div>
          <div className="tw-row">
            <button onClick={onSignOut}>Sair / voltar ao login</button>
          </div>
          <div className="tw-row">
            <button onClick={() => { localStorage.clear(); location.reload(); }}>Reset completo</button>
          </div>
        </div>
      )}
    </>
  );
};

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