// Article / detail page — renders a single post or project writeup
// inline using window.CONTENT[slug] (markdown body).

function PageArticle({ slug, kind, go }) {
  const S = window.SITE;
  const content = window.CONTENT[slug];
  const flat = kind === "project" ? S.allProjectsFlat : S.allPostsFlat;
  const meta = flat.find(p => p.slug === slug);

  const idx = flat.findIndex(p => p.slug === slug);
  const prev = idx > 0 ? flat[idx - 1] : null;
  const next = idx >= 0 && idx < flat.length - 1 ? flat[idx + 1] : null;

  const title = (content && content.title) || (meta && (meta.title || meta.name)) || "Untitled";
  const date = (content && content.date) || (meta && meta.date) || "";

  return (
    <div className="page" data-screen-label={kind === "project" ? "Project" : "Post"}>
      <section className="post-hero">
        <div className="container">
          <div className="post-hero-meta">
            <span>{kind === "project" ? "Project" : "Writing"}</span>
            {date && <span>{date}</span>}
            {content && content.readTime && <span>{content.readTime} read</span>}
            {meta && meta.group && <span>#{meta.group}</span>}
            {meta && meta.meta && <span>{meta.meta}</span>}
          </div>
          <h1>{title}</h1>
          {content && content.tags && (
            <div className="tags">
              {content.tags.map(t => (
                <span key={t} className="tech-chip">#{t}</span>
              ))}
            </div>
          )}
          {content && content.heroImage && (
            <img className="post-hero-image" src={content.heroImage} alt={title} />
          )}
        </div>
      </section>

      <div className="post-body">
        {content
          ? <window.Markdown source={content.body} />
          : (
            <div className="md">
              <p style={{fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink-2)'}}>
                <em>The full text of this {kind === "project" ? "project writeup" : "post"} is being migrated
                from the original softbuild.dev archive. Meanwhile, you can read it on the original site:</em>
              </p>
              <p>
                <a className="link" href={meta && meta.url} target="_blank" rel="noreferrer">
                  Read on softbuild.dev ↗
                </a>
              </p>
            </div>
          )
        }

        <div className="spacer-l"></div>
        <hr className="rule" />
        <div className="spacer"></div>

        <div className="flex gap-m" style={{justifyContent: 'space-between', flexWrap: 'wrap', alignItems: 'center'}}>
          <button className="btn ghost" onClick={() => go(kind === "project" ? "projects" : "blog")}>
            <span className="arrow" style={{transform: 'rotate(180deg)', display: 'inline-block'}}>→</span>
            &nbsp; All {kind === "project" ? "projects" : "writing"}
          </button>
          <a className="btn" href={window.SITE.links.linkedin} target="_blank" rel="noreferrer">
            Discuss on LinkedIn <span className="arrow">↗</span>
          </a>
        </div>
      </div>

      {(prev || next) && (
        <div className="container wide" style={{padding: '0 var(--gutter)'}}>
          <div className="post-prev-next">
            {prev ? (
              <div className="left" onClick={() => go((kind === "project" ? "project:" : "post:") + prev.slug)}>
                <span className="eyebrow">← Previous {kind === "project" ? "project" : "post"}</span>
                <div className="nav-title">{prev.title || prev.name}</div>
              </div>
            ) : <div className="left"></div>}
            {next ? (
              <div className="right" onClick={() => go((kind === "project" ? "project:" : "post:") + next.slug)}>
                <span className="eyebrow">Next {kind === "project" ? "project" : "post"} →</span>
                <div className="nav-title">{next.title || next.name}</div>
              </div>
            ) : <div className="right"></div>}
          </div>
        </div>
      )}

      <div className="spacer-l"></div>
    </div>
  );
}

window.PageArticle = PageArticle;