/* ═══════════════════════════════════════════════════════════
   CircleThrice — sections B: Library · Sessions · Grimoire · Forums
═══════════════════════════════════════════════════════════ */
const CTb = window.CT;

/* ════════════════ LIBRARY ════════════════ */
function matchCat(r, cat) {
  if (cat === 'Everything') return true;
  if (cat === 'Free') return r.tier === 'free';
  if (cat === 'Engagement') return r.tier === 'engagement';
  if (cat === 'Courses') return r.type === 'Course';
  if (cat === 'Books') return r.type === 'Book';
  if (cat === 'Grimoires') return r.type === 'Grimoire';
  if (cat === 'Planning') return r.cat === 'Planning' || r.tier === 'planning';
  if (cat === 'Magic') return r.cat === 'Magic';
  if (cat === 'Business') return r.cat === 'Business' || r.cat === 'Risk';
  if (cat === 'Risk') return r.cat === 'Risk';
  return r.cat === cat;
}

function LibrarySection({ filter, setFilter, onOpen }) {
  const results = CTb.RESOURCES.filter(r => matchCat(r, filter));
  const count = (cat) => CTb.RESOURCES.filter(r => matchCat(r, cat)).length;

  return (
    <div className="fade-in">
      <PageHead
        glyph="p-mercury"
        kicker="Library · Resources & Courses"
        title="Find what you need"
        desc="Guides, books, grimoires, and courses — filtered by what you're working on. Your Planning membership opens everything up to the Planning tier."
      />

      <div className="filter-bar">
        {CTb.LIB_CATEGORIES.map(cat => (
          <button key={cat}
            className={'filter-pill' + (filter === cat ? ' active' : '')}
            onClick={() => setFilter(cat)}>
            {cat}<span className="fp-count">{count(cat)}</span>
          </button>
        ))}
      </div>

      {results.length === 0 ? (
        <div className="lib-empty">No resources in this category yet.</div>
      ) : (
        <div className="lib-grid">
          {results.map(r => {
            const TypeI = TYPE_ICON[r.type] || DocIcon;
            const accessible = CTb.canAccess(r.tier);
            return (
              <div key={r.id} className="card clickable accent lib-card" onClick={() => onOpen(r)}>
                <div className="lib-card-top">
                  <div>
                    <div className="card-meta" style={{ marginBottom: 7 }}>{r.cat} · {r.type}</div>
                    <div className="card-title">{r.title}</div>
                    <p className="card-desc">{r.desc}</p>
                  </div>
                  <span className="lib-type-icn"><TypeI /></span>
                </div>
                <div className="lib-card-foot">
                  <div className="lib-badges">
                    {accessible ? <TierBadge tier={r.tier} /> : <LockedBadge tier={r.tier} />}
                  </div>
                  <span className="btn-text">{accessible ? 'View →' : 'Upgrade →'}</span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function LibraryDetail({ resource, onBack, onToast }) {
  const r = resource;
  const TypeI = TYPE_ICON[r.type] || DocIcon;
  const accessible = CTb.canAccess(r.tier);

  return (
    <div className="fade-in">
      <div className="detail-back">
        <button className="btn-text" onClick={onBack}>← Back to Library</button>
      </div>

      <div className="detail-head">
        <div className="page-kicker">{r.cat} · {r.type}</div>
        <h1 className="detail-title">{r.title}</h1>
        <div className="detail-badges">
          {accessible ? <TierBadge tier={r.tier} /> : <LockedBadge tier={r.tier} />}
          <TypeBadge type={r.type} />
        </div>
      </div>

      <p className="detail-body">{r.long}</p>

      <div className="detail-meta-grid">
        <div className="dm-cell">
          <div className="dm-label">Format</div>
          <div className="dm-value"><span className="lib-type-icn" style={{ color: 'var(--blue)' }}><TypeI /></span>{r.type}</div>
        </div>
        <div className="dm-cell">
          <div className="dm-label">Access Tier</div>
          <div className="dm-value">{CTb.TIER_LABEL[r.tier]}{accessible ? ' — included' : ' — upgrade required'}</div>
        </div>
        <div className="dm-cell">
          <div className="dm-label">Creator</div>
          <div className="dm-value">{r.author}</div>
        </div>
      </div>

      {accessible ? (
        <button className="btn btn-primary" onClick={() => onToast('Opening <strong>' + r.title + '</strong>.')}>
          Access Resource
        </button>
      ) : (
        <UpgradeStrip
          tier={r.tier}
          head={'This resource is ' + CTb.TIER_LABEL[r.tier] + ' tier'}
          sub="Your Planning membership covers everything up to the Planning tier. Upgrade to open advanced Engagement material."
        />
      )}
    </div>
  );
}

/* ════════════════ SESSIONS ════════════════ */
function SessionsSection({ onToast, booked, setBooked }) {
  return (
    <div className="fade-in">
      <PageHead
        glyph="p-venus"
        kicker="Sessions · Book with Ivy"
        title="Upcoming sessions"
        desc="Consultations, workshops, and one-on-ones. Book the ones included with your tier; everything else shows the upgrade you'd need."
      />

      <div className="card-stack">
        {CTb.SESSIONS.map(s => {
          const accessible = CTb.canAccess(s.tier);
          const isBooked = booked[s.id];
          const bookable = accessible && s.status !== 'full';
          return (
            <div key={s.id} className="card accent">
              <div className="session-card">
                <div>
                  <div className="session-badges">
                    {accessible ? <TierBadge tier={s.tier} /> : <LockedBadge tier={s.tier} />}
                    <StatusBadge status={s.status} />
                  </div>
                  <div className="card-title" style={{ marginTop: 10 }}>{s.title}</div>
                  <p className="card-desc">{s.desc}</p>
                  <div className="session-when">
                    <div className="sw-item"><div className="sw-label">Date</div><div className="sw-val">{s.date}</div></div>
                    <div className="sw-item"><div className="sw-label">Time</div><div className="sw-val">{s.time}</div></div>
                    <div className="sw-item"><div className="sw-label">Duration</div><div className="sw-val">{s.dur}</div></div>
                  </div>
                </div>
                <div className="session-cta">
                  {!accessible ? (
                    <button className="btn btn-upgrade">
                      <span className="lock-glyph" style={{ width: 11, height: 11 }}><LockIcon /></span>
                      Upgrade to {CTb.TIER_LABEL[s.tier]}
                    </button>
                  ) : s.status === 'full' ? (
                    <button className="btn btn-ghost" disabled style={{ opacity: .55, cursor: 'default' }}>Session Full</button>
                  ) : isBooked ? (
                    <button className="btn btn-ghost" style={{ cursor: 'default' }}>✓ Booked</button>
                  ) : (
                    <button className="btn btn-primary" onClick={() => {
                      setBooked(b => ({ ...b, [s.id]: true }));
                      onToast('Session booked — <strong>' + s.title + '</strong>. Check your email for details.');
                    }}>Book Now</button>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ════════════════ GRIMOIRE ════════════════ */
function GrimoireSection({ onToast, onNav }) {
  const rite = CTb.RITE;
  const [open, setOpen] = useState({ 0: true });
  const [checked, setChecked] = useState({});

  return (
    <div className="fade-in">
      <PageHead
        glyph="p-moon"
        kicker="Grimoire · This Month's Ritual"
        title="The working"
        desc="A step-by-step rite for the current lunation. Gather your supplies, follow the sequence, and journal the result."
      />

      <div className="card accent rite-hero">
        <div className="card-meta">{rite.moon} · {rite.duration}</div>
        <h2 className="rite-title" style={{ marginTop: 8 }}>{rite.title}</h2>

        <div className="rite-cols">
          {/* Supplies */}
          <div>
            <div className="sec-label">Supplies</div>
            <div className="supplies-list">
              {rite.supplies.map((s, i) => (
                <button key={i} className={'supply' + (checked[i] ? ' checked' : '')}
                  onClick={() => setChecked(c => ({ ...c, [i]: !c[i] }))}>
                  <span className="supply-box"><CheckIcon /></span>
                  <span className="supply-text">
                    {s.text}{s.note && <span className="supply-opt"> — {s.note}</span>}
                  </span>
                </button>
              ))}
            </div>
            <div style={{ marginTop: 18 }}>
              <button className="btn-text" onClick={() => onToast('Opening the ritual video.')}>
                <span className="lib-type-icn" style={{ color: 'var(--blue)' }}><PlayIcon /></span> Watch the guided video
              </button>
            </div>
          </div>

          {/* Steps */}
          <div>
            <div className="sec-label">The Rite · {rite.steps.length} Steps</div>
            <div className="steps-list">
              {rite.steps.map((st, i) => (
                <div key={i} className={'step' + (open[i] ? ' open' : '')}>
                  <button className="step-head" onClick={() => setOpen(o => ({ ...o, [i]: !o[i] }))}>
                    <span className="step-num">{i + 1}</span>
                    <span className="step-titlewrap">
                      <span className="step-title">{st.title}</span>
                      <span className="step-dur" style={{ display: 'block' }}>{st.dur}</span>
                    </span>
                    <span className="step-chevron"></span>
                  </button>
                  {open[i] && <p className="step-body fade-in">{st.body}</p>}
                </div>
              ))}
            </div>

            <div style={{ marginTop: 24 }}>
              <button className="btn btn-primary" onClick={() => onToast('Downloading a printable version of this rite.')}>
                Download Printable Rite
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="block" style={{ marginTop: 30 }}>
        <div className="sec-label">This Month's Planners</div>
        <div className="mini-suite">
          {(CTb.SUITE['June 2026'] || []).map((s, i) => (
            <button key={i} className="mini-card" onClick={() => onNav('planner')}>
              <div className="mini-type">{s.type}</div>
              <div className="mini-desc">{s.desc}</div>
              <span className="mini-go">Open in Planner →</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ════════════════ FORUMS ════════════════ */
function ForumsSection({ onOpenThread, onStart }) {
  const [topic, setTopic] = useState('All');
  const threads = CTb.THREADS.filter(t => topic === 'All' || t.topic === topic);

  return (
    <div className="fade-in">
      <PageHead
        glyph="p-mars"
        kicker="Forums · Community"
        title="In discussion"
        desc="Where members compare notes on timing, ritual, and the practical work. Browse by topic or start a thread of your own."
      />

      <div className="forum-toolbar">
        <div className="topic-row">
          {CTb.TOPICS.map(t => (
            <button key={t} className={'filter-pill' + (topic === t ? ' active' : '')} onClick={() => setTopic(t)}>{t}</button>
          ))}
        </div>
        <button className="btn btn-primary" onClick={onStart}>Start Discussion</button>
      </div>

      <div>
        {threads.map(t => (
          <button key={t.id} className="thread" onClick={() => onOpenThread(t)}>
            <div>
              <div className="thread-title">{t.title}</div>
              <div className="thread-sub">
                <span>{t.author}</span>
                <span>{t.topic}</span>
                <span>{t.date}</span>
                <span>Last activity {t.last}</span>
              </div>
            </div>
            <div className="thread-stat">
              <div className="thread-replies">{t.replies}</div>
              <div className="thread-replies-l">Replies</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function ThreadDetail({ thread, onBack }) {
  return (
    <div className="fade-in">
      <div className="detail-back">
        <button className="btn-text" onClick={onBack}>← Back to Forums</button>
      </div>
      <div className="detail-head">
        <div className="page-kicker">{thread.topic} · {thread.replies} replies</div>
        <h1 className="detail-title" style={{ fontSize: 32 }}>{thread.title}</h1>
        <div className="card-meta">Started by {thread.author} · {thread.date}</div>
      </div>
      <div>
        {thread.posts.map((p, i) => (
          <div key={i} className="reply">
            <div className="reply-head">
              <span className={'reply-author' + (p.author === 'Ivy' ? ' reply-op' : '')}>{p.author}</span>
              {p.author === 'Ivy' && <span className="badge tier-planning" style={{ padding: '2px 6px' }}>Host</span>}
              <span className="reply-time">{p.time}</span>
            </div>
            <p className="reply-body">{p.body}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 24 }}>
        <div className="field">
          <label>Add a reply</label>
          <textarea placeholder="Share your thoughts with the circle…"></textarea>
        </div>
        <button className="btn btn-primary">Post Reply</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  LibrarySection, LibraryDetail, SessionsSection, GrimoireSection, ForumsSection, ThreadDetail, matchCat,
});