/* global React, useReveal, AylaRouter, blogFilterTags, postHasTag, formatPostTags, NewsletterSignup */
const { useEffect, useState } = React;

function BlogPost({ setRoute, slug }) {
  useReveal();
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(100, (h.scrollTop / max) * 100) : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const Content = (window.POST_CONTENT || {})[slug];
  return (
    <div className="page">
      <div className="progress"><div className="fill" style={{ width: progress + '%' }} /></div>
      {Content
        ? <Content setRoute={setRoute} progress={progress} />
        : <p style={{ padding: '120px var(--pad)', color: 'var(--ink-2)' }}>Post not found.</p>
      }
    </div>
  );
}

window.BlogPost = BlogPost;

function BlogIndex({ setRoute }) {
  useReveal();
  const posts = window.POSTS || [];
  const filters = blogFilterTags();
  const [activeFilter, setActiveFilter] = useState('All');

  const filtered = activeFilter === 'All'
    ? posts
    : posts.filter((p) => postHasTag(p, activeFilter));

  return (
    <div className="page">
      <section className="shell blog-hero">
        <span className="eyebrow">The Ayla blog</span>
        <h1>Women's health, <span className="it">clearly explained.</span></h1>
        <p className="lede">
        In-depth blog posts on hormones, nutrition, sleep, movement, and what current research says about women's health.
        </p>
        <div className="blog-filters">
          {filters.map((c) => (
            <button
              key={c}
              type="button"
              className={'chip' + (activeFilter === c ? ' on' : '')}
              aria-pressed={activeFilter === c}
              onClick={() => setActiveFilter(c)}
            >
              {c}
            </button>
          ))}
        </div>
      </section>

      <section className="shell blog-list">
        {filtered.length === 0 ? (
          <div className="blog-empty reveal">
            <p>No posts in <span className="it">{activeFilter}</span> yet.</p>
            <p className="blog-empty-sub">
              Try another tag, or browse everything on the blog.
            </p>
            <button type="button" className="btn btn-ghost" onClick={() => setActiveFilter('All')}>
              View all posts
            </button>
          </div>
        ) : filtered.map((p, i) => {
          const flipped = i % 2 === 1;
          const postRoute = p.slug ? 'journal-post:' + p.slug : null;
          const go = postRoute
            ? (e) => { e.preventDefault(); setRoute(postRoute, { smoothScroll: true }); }
            : (e) => e.preventDefault();
          return (
            <a key={p.slug || p.title} href={postRoute ? AylaRouter.pathFor(postRoute) : '#'} onClick={go}
              className={'blog-row reveal' + (flipped ? ' flipped' : '')}
              style={{ transitionDelay: (i * .04) + 's', cursor: p.slug ? 'pointer' : 'default' }}>
              <div className={'blog-row-thumb' + (p.image ? '' : ' ph ' + (p.tone || ''))}>
                {p.image
                  ? <img src={p.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'inherit', display: 'block' }} />
                  : <span className="ph-tag">blog image</span>}
              </div>
              <div className="blog-row-body">
                <div className="blog-row-meta">
                  <span>{formatPostTags(p)}</span><span>·</span>
                  <span>{p.read}</span><span>·</span>
                  <span>{p.date}</span>
                </div>
                <h2>{p.title}</h2>
                <p>{p.dek}</p>
                {p.slug && <span className="blog-row-cta">Read the blog <span className="arr">→</span></span>}
              </div>
            </a>
          );
        })}
      </section>

      <section className="section shell">
        <NewsletterSignup variant="banner" />
      </section>
    </div>
  );
}

window.BlogIndex = BlogIndex;