/* ═══════════════════════════════════════════════════════════
   CircleThrice — App root, routing, shared state
═══════════════════════════════════════════════════════════ */
const { useState: useStateApp } = React;

function App() {
  const [section, setSection] = useStateApp('today');
  const [bannerOpen, setBannerOpen] = useStateApp(() => sessionStorage.getItem('ct-wn-dismissed') !== '1');
  const [toast, setToast] = useStateApp(null);

  // Library state (preserve filter across detail view)
  const [libFilter, setLibFilter] = useStateApp('Everything');
  const [libResource, setLibResource] = useStateApp(null);

  // Forums
  const [thread, setThread] = useStateApp(null);
  const [startOpen, setStartOpen] = useStateApp(false);

  // Sessions booking state
  const [booked, setBooked] = useStateApp({});

  // Blog modal
  const [blog, setBlog] = useStateApp(null);

  const fireToast = (msg) => setToast(msg);

  const dismissBanner = () => {
    setBannerOpen(false);
    sessionStorage.setItem('ct-wn-dismissed', '1');
  };

  const nav = (id) => {
    setSection(id);
    setLibResource(null);
    setThread(null);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  let body;
  if (section === 'today') {
    body = <TodaySection onOpenBlog={setBlog} onNav={nav} onToast={fireToast} />;
  } else if (section === 'calendar') {
    body = <CalendarSection />;
  } else if (section === 'planner') {
    body = <PlannerSection onToast={fireToast} />;
  } else if (section === 'library') {
    body = libResource
      ? <LibraryDetail resource={libResource} onBack={() => setLibResource(null)} onToast={fireToast} />
      : <LibrarySection filter={libFilter} setFilter={setLibFilter} onOpen={setLibResource} />;
  } else if (section === 'sessions') {
    body = <SessionsSection onToast={fireToast} booked={booked} setBooked={setBooked} />;
  } else if (section === 'grimoire') {
    body = <GrimoireSection onToast={fireToast} onNav={nav} />;
  } else if (section === 'forums') {
    body = thread
      ? <ThreadDetail thread={thread} onBack={() => setThread(null)} />
      : <ForumsSection onOpenThread={setThread} onStart={() => setStartOpen(true)} />;
  }

  return (
    <div className="app">
      <Header />
      {bannerOpen && <WhatsNew onDismiss={dismissBanner} />}

      <div className="app-body">
        <Sidebar active={section} onNav={nav} />
        <main className="content">
          <div className="content-inner">
            {body}
            <Footer />
          </div>
        </main>
      </div>

      <TabBar active={section} onNav={nav} />

      {toast && <Toast msg={toast} onDone={() => setToast(null)} />}

      {/* Blog modal */}
      {blog && (
        <Modal onClose={() => setBlog(null)}>
          <div className="modal-head">
            <div>
              <div className="card-meta">{blog.date} · {blog.author}</div>
              <h2 className="modal-title" style={{ marginTop: 10 }}>{blog.title}</h2>
            </div>
            <button className="modal-x" onClick={() => setBlog(null)} aria-label="Close">×</button>
          </div>
          <div className="modal-body">
            {blog.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </Modal>
      )}

      {/* Start discussion modal */}
      {startOpen && (
        <Modal onClose={() => setStartOpen(false)}>
          <div className="modal-head">
            <h2 className="modal-title">Start a Discussion</h2>
            <button className="modal-x" onClick={() => setStartOpen(false)} aria-label="Close">×</button>
          </div>
          <div style={{ marginTop: 8 }}>
            <div className="field">
              <label>Title</label>
              <input type="text" placeholder="What's on your mind?" />
            </div>
            <div className="field">
              <label>Topic</label>
              <input type="text" placeholder="Timing · Ritual · Business · Astrology…" />
            </div>
            <div className="field">
              <label>Message</label>
              <textarea placeholder="Open the conversation…"></textarea>
            </div>
            <button className="btn btn-primary" onClick={() => { setStartOpen(false); fireToast('Discussion posted to the circle.'); }}>
              Post Discussion
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
}

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