/* ============================================================
   devlog.jsx — Devlog feed + article reading view
   Reads window.DEVLOG / DEVLOG_BY_ID (built by store.jsx).
   Exposes window.DevlogFeed, window.DevlogPost, window.DevlogSidebar.
   Loaded AFTER store.jsx + components.jsx, BEFORE app.jsx.
   ============================================================ */
const { useMemo: dM, useEffect: dE } = React;

/* ---------------- date helpers ---------------- */
function dvParse(iso) {
  if (!iso) return null;
  const [y, m, d] = String(iso).split("-").map(Number);
  if (!y) return null;
  return new Date(y, (m || 1) - 1, d || 1);
}
function dvFullDate(iso) {
  const d = dvParse(iso);
  return d ? d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }) : "Undated";
}
function dvShortDate(iso) {
  const d = dvParse(iso);
  return d ? d.toLocaleDateString("en-US", { month: "short", day: "numeric" }) : "—";
}
function dvMonthKey(iso) {
  const d = dvParse(iso);
  return d ? d.toLocaleDateString("en-US", { year: "numeric", month: "long" }) : "Undated";
}

/* ---------------- small pieces ---------------- */
function DvTags({ tags }) {
  if (!tags || !tags.length) return null;
  return (
    <div className="dv-tags">
      {tags.filter(Boolean).map((t, i) => <span className="dv-tag" key={i}>{t}</span>)}
    </div>
  );
}

function DvCover({ post, className }) {
  const Icon = I[post.iconKey] || I.book;
  if (post.cover) {
    return <div className={"dv-cover " + (className || "")}><img src={post.cover} alt="" loading="lazy" /></div>;
  }
  return (
    <div className={"dv-cover dv-cover-fallback " + (className || "")} aria-hidden="true">
      <div className="dv-cover-glyph"><Icon /></div>
    </div>
  );
}

/* ---------------- Feed (list of entries, newest first) ---------------- */
function DevlogFeed() {
  const posts = window.DEVLOG || [];
  return (
    <div className="devlog-feed">
      <header className="df-head">
        <div className="df-eyebrow">Devlog</div>
        <h1>Build notes</h1>
        <p className="df-sub">A running log of what I'm building, what broke, and what I figured out — newest first. The <a className="link" href="#/docs/introduction">docs</a> are the settled reference; this is the play-by-play.</p>
      </header>

      {posts.length === 0 ? (
        <div className="df-empty">
          <I.book />
          <div>No entries yet. Create one from the <a className="link" href="#/admin">console</a> — set the page type to <strong>Devlog</strong>.</div>
        </div>
      ) : (
        <div className="df-list">
          {posts.map((p) => (
            <a className="devlog-card" key={p.id} href={"#/devlog/" + p.id}>
              <DvCover post={p} className="dc-thumb" />
              <div className="dc-body">
                <div className="dc-meta">
                  <time className="dc-date">{dvFullDate(p.date)}</time>
                  {p.draft && <span className="dv-tag draft">Draft</span>}
                </div>
                <h2 className="dc-title">{p.title}</h2>
                {p.lede && <p className="dc-lede">{p.lede}</p>}
                <DvTags tags={p.tags} />
                <span className="dc-readmore">Read entry <I.arrowR /></span>
              </div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------------- Left panel: entries grouped by month ---------------- */
function DevlogSidebar({ activeId, open, onNavigate }) {
  const posts = window.DEVLOG || [];
  const groups = dM(() => {
    const map = new Map();
    posts.forEach((p) => {
      const k = dvMonthKey(p.date);
      if (!map.has(k)) map.set(k, []);
      map.get(k).push(p);
    });
    return Array.from(map.entries());   // already newest-first (posts are sorted)
  }, [posts]);

  return (
    <aside className={"sidebar devlog-sidebar" + (open ? " open" : "")}>
      <a className="dsb-allbtn" href="#/devlog" onClick={onNavigate}>
        <I.layers style={{ width: 15, height: 15 }} /> All entries
      </a>
      {groups.map(([month, items]) => (
        <div className="side-group" key={month}>
          <div className="dsb-month">{month}</div>
          <div className="side-items">
            {items.map((p) => (
              <a key={p.id} href={"#/devlog/" + p.id} onClick={onNavigate}
                 className={"side-link dsb-link" + (p.id === activeId ? " active" : "")}>
                <span className="dsb-day">{dvShortDate(p.date)}</span>
                <span className="sl-text">{p.title}</span>
                {p.draft && <span className="badge draft">Draft</span>}
              </a>
            ))}
          </div>
        </div>
      ))}
    </aside>
  );
}

/* ---------------- Article (reads like a doc page) ---------------- */
function DevlogPost({ post }) {
  const posts = window.DEVLOG || [];
  const idx = posts.findIndex((p) => p.id === post.id);
  const newer = posts[idx - 1];   // newer = earlier in the desc-sorted list
  const older = posts[idx + 1];

  return (
    <div className="content devlog-article">
      <div className="breadcrumb">
        <a href="#/devlog">Devlog</a><span className="sep">/</span>
        <span style={{ color: "var(--text-muted)" }}>{dvFullDate(post.date)}</span>
      </div>

      {post.cover && <DvCover post={post} className="da-cover" />}

      <div className="page-eyebrow">Devlog</div>
      <h1 className="page-title">{post.title}</h1>
      {post.lede && <p className="page-lede">{post.lede}</p>}
      <div className="meta-row">
        <span className="chip"><I.book /> {dvFullDate(post.date)}</span>
        {(post.tags || []).filter(Boolean).map((t, i) => <span className="chip" key={i}>{t}</span>)}
        {post.draft && <span className="chip">Draft</span>}
      </div>

      <div className="prose">
        <Blocks blocks={post.blocks || []} />
      </div>

      <nav className="page-nav">
        {older ? <a className="prev" href={"#/devlog/" + older.id}><span className="pn-label">← Older</span><span className="pn-title">{older.title}</span></a> : <span />}
        {newer ? <a className="next" href={"#/devlog/" + newer.id}><span className="pn-label">Newer →</span><span className="pn-title">{newer.title}</span></a> : <span />}
      </nav>
    </div>
  );
}

Object.assign(window, {
  DevlogFeed, DevlogPost, DevlogSidebar,
  dvParse, dvFullDate, dvShortDate, dvMonthKey,
});