var BlogFeed = function (props) {
  var navigate = props.navigate;
  var activeTag = props.tag || null;

  var _posts = React.useState([]);
  var posts = _posts[0], setPosts = _posts[1];

  var _tags = React.useState([]);
  var tags = _tags[0], setTags = _tags[1];

  var _page = React.useState(1);
  var page = _page[0], setPage = _page[1];

  var _totalPages = React.useState(1);
  var totalPages = _totalPages[0], setTotalPages = _totalPages[1];

  var _loading = React.useState(true);
  var loading = _loading[0], setLoading = _loading[1];

  var ghost = window.IBA_GHOST;
  var PER_PAGE = 15;

  React.useEffect(function () {
    if (!ghost) return;
    ghost.getTags().then(function (data) {
      var filtered = (data.tags || []).filter(function (t) { return t.slug !== 'log'; });
      setTags(filtered);
    });
  }, []);

  React.useEffect(function () {
    if (!ghost) return;
    setLoading(true);
    var opts = { page: page, limit: PER_PAGE };
    if (activeTag) opts.tag = activeTag;

    ghost.getPosts(opts).then(function (data) {
      setPosts(data.posts || []);
      setTotalPages(data.meta && data.meta.pagination ? data.meta.pagination.pages : 1);
      setLoading(false);
    }).catch(function () {
      setLoading(false);
    });
  }, [page, activeTag]);

  var handleTag = function (slug) {
    return function (e) {
      e.preventDefault();
      setPage(1);
      if (slug) {
        navigate('tag/' + slug);
      } else {
        navigate('blog');
      }
    };
  };

  var tagLabel = activeTag
    ? (tags.find(function (t) { return t.slug === activeTag; }) || {}).name || activeTag
    : null;

  return (
    <div className="ib-feed-section" style={{ maxWidth: '1280px', margin: '0 auto', padding: '48px 28px 32px' }}>
      <div className="ib-feed-header">
        <h2 className="ib-feed-title">
          {activeTag ? '// TAG: ' + tagLabel : '// FIELD NOTES'}
        </h2>
        <div className="ib-feed-tabs">
          <a href="/blog" className={'ib-feed-tab' + (!activeTag ? ' active' : '')} onClick={handleTag(null)}>ALL</a>
          {tags.map(function (t) {
            return (
              <a key={t.id} href={'/tag/' + t.slug}
                className={'ib-feed-tab' + (activeTag === t.slug ? ' active' : '')}
                onClick={handleTag(t.slug)}>
                {t.name.toUpperCase()}
              </a>
            );
          })}
        </div>
      </div>

      <div className="ib-post-head">
        <span className="ib-post-idx">IDX</span>
        <span className="ib-post-date">DATE</span>
        <span className="ib-post-tag">TAG</span>
        <span className="ib-post-title">TITLE</span>
        <span className="ib-post-author">AUTHOR</span>
      </div>

      {loading ? (
        <div style={{ padding: '40px 0', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)' }}>
          <span style={{ color: 'var(--amber-dim)' }}>$</span> loading...
        </div>
      ) : posts.length === 0 ? (
        <div style={{ padding: '40px 0', textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)' }}>
          <span style={{ color: 'var(--amber-dim)' }}>$</span> no posts found
        </div>
      ) : (
        posts.map(function (post, i) {
          return <window.PostCard key={post.id} post={post} index={(page - 1) * PER_PAGE + i} navigate={navigate} />;
        })
      )}

      {totalPages > 1 && (
        <div className="ib-pagination">
          {page > 1 && (
            <a href="#" className="ib-pagination-link" onClick={function (e) { e.preventDefault(); setPage(page - 1); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
              ← PREV
            </a>
          )}
          <span className="ib-pagination-info">
            PAGE {page} OF {totalPages}
          </span>
          {page < totalPages && (
            <a href="#" className="ib-pagination-link" onClick={function (e) { e.preventDefault(); setPage(page + 1); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
              NEXT →
            </a>
          )}
        </div>
      )}

      <window.Subscribe />
    </div>
  );
};

window.BlogFeed = BlogFeed;