// components/PostPage.jsx — generic article renderer driven by window.POST
// Title/excerpt/category/date/readTime come from the dictionary (per language).
// TOC, body HTML, FAQ and related list still come from window.POST (PT-only
// for now). When the active language isn't PT we show a small notice.
const PostPage = () => {
  const post = window.POST;
  const lang = (typeof window !== 'undefined' && window.MAI_LANG) || 'pt';
  const dictPost = (window.MEMBER_I18N && window.MEMBER_I18N[lang] && window.MEMBER_I18N[lang].blog && window.MEMBER_I18N[lang].blog.posts && window.MEMBER_I18N[lang].blog.posts[post.slug]) || {};
  const title = dictPost.title || post.title;
  const dek = post.dek;
  const category = dictPost.category || post.category;
  const date = dictPost.date || post.date;
  const readTime = dictPost.readTime || post.readTime;

  const [activeId, setActiveId] = React.useState(post.toc[0]?.id);

  React.useEffect(() => {
    const headings = post.toc.map(h => document.getElementById(h.id)).filter(Boolean);
    const obs = new IntersectionObserver(entries => {
      const visible = entries.filter(e => e.isIntersecting)
        .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible[0]) setActiveId(visible[0].target.id);
    }, { rootMargin: "-20% 0px -70% 0px" });
    headings.forEach(h => obs.observe(h));
    return () => obs.disconnect();
  }, []);

  return (
    <main className="post-page">
      <section className="post-hero">
        <div className="container">
          <nav className="post-breadcrumb">
            <a href="../blog.html">{t('blog.post.breadcrumb_blog')}</a>
            <span className="sep">/</span>
            <a href={"../blog.html"}>{category}</a>
          </nav>
          <span className="post-cat">{category}</span>
          <h1 className="post-title">{title}</h1>
          <p className="post-dek">{dek}</p>
          <div className="post-author-row">
            {post.author.avatar ? (
              <img className="post-avatar post-avatar-img" src={post.author.avatar} alt={post.author.name} />
            ) : (
              <div className="post-avatar">{post.author.initials}</div>
            )}
            <div>
              <div className="post-author-name">{post.author.name}</div>
              <div className="post-author-role">{post.author.role}</div>
            </div>
            <div className="post-author-meta">
              <span>{date}</span>
              <span className="dot" />
              <span>{readTime} {t('blog.read_time_suffix')}</span>
            </div>
          </div>
          <div className="post-cover">
            <img src={post.cover} alt="" />
          </div>
        </div>
      </section>

      {lang !== 'pt' && (
        <section>
          <div className="container">
            <p className="post-pt-only-notice mono" style={{margin:'0 0 12px', padding:'12px 16px', border:'1px solid rgba(255,255,255,0.1)', borderRadius:'8px', color:'rgba(255,255,255,0.6)', fontSize:'12px', letterSpacing:'0.05em'}}>
              {t('blog.post.body_pt_only')}
            </p>
          </div>
        </section>
      )}

      <section>
        <div className="container post-layout">
          <aside className="post-toc">
            <div className="post-toc-head">{t('blog.post.toc_head')}</div>
            <ol>
              {post.toc.map((tocItem, i) => (
                <li key={tocItem.id}>
                  <a href={"#" + tocItem.id} className={activeId === tocItem.id ? "is-active" : ""}>
                    <span className="num">{String(i+1).padStart(2, "0")}</span>
                    <span>{tocItem.label}</span>
                  </a>
                </li>
              ))}
            </ol>
          </aside>
          <article className="post-content" dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
        </div>
      </section>

      {post.faq && post.faq.length > 0 && (
        <section className="post-faq-section">
          <div className="container">
            <h2>{t('blog.post.faq_title')}</h2>
            {post.faq.map((f, i) => (
              <div className="post-faq-item" key={i}>
                <div className="post-faq-q">{f.q}</div>
                <div className="post-faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {post.author && (
        <section className="post-author-bio">
          <div className="container">
            <div className="post-author-bio-card">
              {post.author.avatar ? (
                <img className="post-bio-avatar" src={post.author.avatar} alt={post.author.name} />
              ) : (
                <div className="post-bio-avatar post-bio-avatar-initials">{post.author.initials}</div>
              )}
              <div className="post-bio-body">
                <div className="post-bio-label mono">{t('blog.post.bio_label')}</div>
                <h3 className="post-bio-name">{post.author.name}</h3>
                <p className="post-bio-role">{post.author.role}</p>
                <p className="post-bio-copy">
                  {t('blog.post.bio_copy_a')} <a href="mailto:suporte@memberai.pro">suporte@memberai.pro</a>.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {post.related && post.related.length > 0 && (
        <section className="post-related">
          <div className="container">
            <h2>{t('blog.post.related_title')}</h2>
            <div className="post-related-grid">
              {post.related.map(r => {
                const rDict = (window.MEMBER_I18N && window.MEMBER_I18N[lang] && window.MEMBER_I18N[lang].blog && window.MEMBER_I18N[lang].blog.posts && window.MEMBER_I18N[lang].blog.posts[r.slug]) || {};
                return (
                  <a key={r.slug} className="blog-card" href={r.slug + ".html"}>
                    <div className="blog-card-cover">
                      <img src={r.cover} alt="" loading="lazy" />
                    </div>
                    <div className="blog-card-body">
                      <div className="blog-card-cat">{rDict.category || r.category}</div>
                      <h3>{rDict.title || r.title}</h3>
                      <div className="blog-card-meta">
                        <span>{rDict.readTime || r.readTime}</span>
                      </div>
                    </div>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      )}
    </main>
  );
};