const { useState: useStateFeed } = React;

function SeriesTag({ name, onOpenSeries }) {
  if (onOpenSeries) {
    return (
      <button
        type="button"
        className="feed-series-tag feed-series-tag-link"
        onClick={(e) => { e.stopPropagation(); onOpenSeries(name); }}
      >
        {name}
      </button>
    );
  }
  return <span className="feed-series-tag">{name}</span>;
}

function FeedItem({ post, onOpen, itemRef, sideRight, onOpenSeries }) {
  const hasTitle = !!post.title;
  const hasCaption = !!post.caption;
  const hasMeta = hasTitle || hasCaption || post.series;

  const dateLabel = new Date(post.date).toLocaleDateString("en-US", {
    day: "2-digit", month: "short", year: "numeric",
  }).toUpperCase();

  return (
    <article className={`feed-item ${sideRight ? "is-side-right" : "is-side-left"}`}>
      <div
        className="feed-image-wrap"
        onClick={() => onOpen(post)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === "Enter") onOpen(post); }}
      >
        <div className="feed-image-inner" ref={itemRef}>
          <Placeholder
            aspect={post.aspect}
            tone={post.tone}
            imageKey={post.hero_r2_key}
            alt={post.title || post.caption || ""}
          />
        </div>
      </div>

      {hasMeta && (
        <div className="feed-meta">
          <div className="feed-eyebrow">
            <span className="feed-date">{dateLabel}</span>
            {post.series && (
              <>
                <span className="eyebrow-dot">·</span>
                <SeriesTag name={post.series} onOpenSeries={onOpenSeries} />
              </>
            )}
          </div>

          <div className="feed-rule" />

          {hasTitle && (
            <h2 className="feed-title">
              {post.long ? (
                <button
                  type="button"
                  className="feed-title-link"
                  onClick={() => onOpen(post)}
                >
                  {post.title}
                </button>
              ) : (
                post.title
              )}
            </h2>
          )}

          {hasCaption && (
            <p className="feed-caption">{post.caption}</p>
          )}

          {post.long && (
            <button
              className="read-link"
              onClick={() => onOpen(post)}
              aria-label="Read full post"
            >
              Continue reading <span className="read-arrow">→</span>
            </button>
          )}
        </div>
      )}
    </article>
  );
}

function LinkFeedItem({ post, onOpen, onOpenSeries }) {
  const dateLabel = new Date(post.date).toLocaleDateString("en-US", {
    day: "2-digit", month: "short", year: "numeric",
  }).toUpperCase();
  const hasBody = Array.isArray(post.body) && post.body.some((b) => b.kind === "p" && b.text);
  return (
    <article className="feed-item is-link">
      <div className="feed-meta">
        <div className="feed-eyebrow">
          <span className="feed-date">{dateLabel}</span>
          {post.series && (
            <>
              <span className="eyebrow-dot">·</span>
              <SeriesTag name={post.series} onOpenSeries={onOpenSeries} />
            </>
          )}
        </div>
        <div className="feed-rule" />
        <h2 className="feed-title">
          <a
            href={post.external_url}
            target="_blank"
            rel="noopener noreferrer"
          >
            <span className="link-mark" aria-hidden="true">↗</span>
            {post.title}
          </a>
        </h2>
        {post.source_name && (
          <div className="feed-link-source">by {post.source_name}</div>
        )}
        {post.quote && (
          <blockquote className="feed-link-quote">{post.quote}</blockquote>
        )}
        {hasBody && (
          <div className="feed-link-body">
            {post.body.map((b, i) =>
              b.kind === "p" && b.text ? <p key={i}>{b.text}</p> : null
            )}
          </div>
        )}
        {post.long && (
          <button
            className="read-link"
            onClick={() => onOpen(post)}
            aria-label="Permalink"
          >
            Permalink <span className="read-arrow">→</span>
          </button>
        )}
      </div>
    </article>
  );
}

function MonthHeader({ label }) {
  return (
    <div className="month-header">
      <span className="month-rule" />
      <span className="month-label">{label}</span>
      <span className="month-rule" />
    </div>
  );
}

function groupByMonth(posts) {
  const groups = [];
  let current = null;
  const fmt = (dateStr) => {
    const d = new Date(dateStr);
    return d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
  };
  for (const p of posts) {
    const label = fmt(p.date);
    if (!current || current.label !== label) {
      current = { label, posts: [] };
      groups.push(current);
    }
    current.posts.push(p);
  }
  return groups;
}

function Feed({ onOpen, refs, seriesFilter, onClearFilter, onOpenSeries }) {
  const allPosts = window.POSTS || [];
  const posts = seriesFilter
    ? allPosts.filter((p) => p.series === seriesFilter)
    : allPosts;
  const groups = groupByMonth(posts);
  let imageIndex = 0;
  return (
    <div className="feed">
      {seriesFilter && (
        <div className="feed-filter">
          <span className="feed-filter-label">Series</span>
          <span className="feed-filter-name">{seriesFilter}</span>
          <button
            type="button"
            className="feed-filter-clear"
            onClick={onClearFilter}
          >
            Show all ×
          </button>
        </div>
      )}
      {groups.map((g) => (
        <section key={g.label} className="month-group">
          <MonthHeader label={g.label} />
          {g.posts.map((p) => {
            if (p.kind === "link") {
              return <LinkFeedItem key={p.id} post={p} onOpen={onOpen} onOpenSeries={onOpenSeries} />;
            }
            const sideRight = imageIndex % 2 === 1;
            imageIndex++;
            return (
              <FeedItem
                key={p.id}
                post={p}
                sideRight={sideRight}
                onOpen={onOpen}
                onOpenSeries={onOpenSeries}
                itemRef={(el) => { if (refs) refs.current[p.id] = el; }}
              />
            );
          })}
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { Feed });