function DropCap({ text }) {
  const first = text.charAt(0);
  const rest = text.slice(1);
  return (
    <p className="body-para first-para">
      <span className="dropcap">{first}</span>
      {rest}
    </p>
  );
}

function Figure({ block }) {
  return (
    <figure className="post-figure">
      <Placeholder
        aspect={block.aspect}
        tone={block.tone}
        imageKey={block.r2_key}
        alt={block.caption || ""}
      />
      {block.caption && <figcaption>{block.caption}</figcaption>}
    </figure>
  );
}

function Marginalia({ text }) {
  return (
    <aside className="marginalia">
      <span className="margin-mark">※</span>
      {text}
    </aside>
  );
}

function PostView({ post, heroRef, onBack }) {
  const isLink = post.kind === "link";
  const formatDate = (d) =>
    new Date(d).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });

  const minRead = isLink ? null : Math.max(2, Math.round(
    (post.body || []).filter(b => b.kind === "p")
      .reduce((n, b) => n + b.text.split(" ").length, 0) / 220
  ));

  return (
    <article className={`post${isLink ? " is-link" : ""}`}>
      <div className="post-back-bar">
        <button className="back-button" onClick={onBack}>
          <span className="back-arrow">←</span> Back to feed
        </button>
      </div>

      <header className="post-header">
        {post.series && (
          <div className="post-series">
            <span className="series-label">Series —</span> <span className="meta-accent">{post.series}</span>
          </div>
        )}
        <h1 className="post-title">
          {isLink ? (
            <a href={post.external_url} target="_blank" rel="noopener noreferrer">
              <span className="link-mark" aria-hidden="true">↗</span>
              {post.title}
            </a>
          ) : post.title}
        </h1>
        <div className="post-meta">
          <span>{formatDate(post.date)}</span>
          {isLink && post.source_name && (
            <>
              <span className="meta-dot">·</span>
              <span className="meta-accent">{post.source_name}</span>
            </>
          )}
          {!isLink && (
            <>
              <span className="meta-dot">·</span>
              <span className="meta-accent">{minRead} min read</span>
            </>
          )}
        </div>
      </header>

      {!isLink && (
        <div className="post-hero" ref={heroRef}>
          <Placeholder
            aspect={post.aspect}
            tone={post.tone}
            imageKey={post.hero_r2_key}
            alt={post.title || ""}
          />
        </div>
      )}

      {isLink && post.quote && (
        <blockquote className="post-quote">{post.quote}</blockquote>
      )}

      <div className="post-body">
        {post.body && post.body.map((b, i) => {
          if (b.kind === "p") {
            if (!isLink && (i === 0 || (i === 1 && post.body[0].kind !== "p"))) {
              const earlier = post.body.slice(0, i).some(x => x.kind === "p");
              if (!earlier) return <DropCap key={i} text={b.text} />;
            }
            return <p key={i} className="body-para">{b.text}</p>;
          }
          if (b.kind === "figure") return <Figure key={i} block={b} />;
          if (b.kind === "margin") return <Marginalia key={i} text={b.text} />;
          return null;
        })}
      </div>

      <div className="post-footer">
        <div className="post-footer-rule" />
        <button className="back-button" onClick={onBack}>
          <span className="back-arrow">←</span> Back to feed
        </button>
      </div>
    </article>
  );
}

Object.assign(window, { PostView });