/* ============================================================
   blog-detail.jsx — レリゴーブログ 記事詳細（?id=xxx）
   ============================================================ */

/* ============================================================
   本文の書式（情報＝info.jsx の renderInline と同じ規則をブログにも）
     **文字**      … 強調
     [文字](URL)   … 好きな文字でリンク
     https://…     … そのまま書いてもリンクになる
   ※ ![説明](URL) の画像は、行単位で先にサーバー側がブロックへ分けるので
      ここには来ない（405-blog.php の fjf_b_body_to_array）。
   ============================================================ */
const MD_INLINE = /(\[[^\]]+\]\([^)\s]+\)|\*\*[^*]+\*\*|https?:\/\/[^\s]+)/;

function renderInline(text, kp) {
  return String(text).split(MD_INLINE).map((p, i) => {
    if (!p) return null;
    const k = kp + "-" + i;
    const link = p.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
    if (link) return <a key={k} className="bd-link" href={link[2]} target="_blank" rel="noopener noreferrer">{link[1]}</a>;
    if (/^https?:\/\//.test(p)) return <a key={k} className="bd-link" href={p} target="_blank" rel="noopener noreferrer">{p}</a>;
    const em = p.match(/^\*\*([^*]+)\*\*$/);
    if (em) return <strong key={k} className="bd-em">{em[1]}</strong>;
    return p;
  });
}

const BPID = new URLSearchParams(location.search).get("id");

const bload = (k, d) => { try { return JSON.parse(localStorage.getItem(k)) ?? d; } catch (e) { return d; } };
const bsave = (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch (e) {} };

function AuthorFace({ author }) {
  const a = window.BLOG_AUTHORS[author]; const C = a.comp();
  return (
    <div className="bd-author-face pixbox" style={{ background: "var(--sky-bg)" }}>
      <div className="bdf-in" style={{ transform: `translate(-50%,-50%) scale(${a.scale * 0.56})` }}>
        {C ? <C pose="stand" /> : null}
      </div>
    </div>
  );
}

function ReadButton({ post }) {
  const cat = window.BLOG_CATS[post.cat];
  const [read, setRead] = React.useState(() => bload("rg_blog_" + post.id, { n: 1 + Math.floor(Math.random() * 25), mine: false }));
  const [pop, setPop] = React.useState(false);
  const [toast, setToast] = React.useState(false);
  const tap = () => {
    setRead((prev) => {
      const next = { n: prev.n + (prev.mine ? -1 : 1), mine: !prev.mine };
      bsave("rg_blog_" + post.id, next);
      return next;
    });
    setPop(true); setTimeout(() => setPop(false), 250);
  };
  return (
    <div className="bd-react">
      <button className={"bread-btn" + (read.mine ? " mine" : "") + (pop ? " pop" : "")} onClick={tap}>
        読んだよ！<span className="bn">{read.n}</span>
      </button>
    </div>
  );
}

function NotFound() {
  return (
    <div className="page-wrap"><div className="page-phone">
      <div className="topnav" style={{ paddingTop: 18 }}>
        <a className="backlink" href="blog.html"><span className="arr">◀</span> ブログ一覧へ</a>
      </div>
      <div style={{ padding: "60px 24px", textAlign: "center" }}>
        <div className="dot" style={{ fontSize: 18, marginBottom: 10 }}>記事が見つからない…</div>
        <div className="feat-desc">URLが正しいか確認してね。</div>
      </div>
    </div></div>
  );
}

function BlogDetail() {
  const [posts, setPosts] = React.useState(window.BLOG_POSTS || []);
  const [loaded, setLoaded] = React.useState(!(window.GardenAPI && window.GardenAPI.enabled));

  React.useEffect(() => {
    if (window.GardenAPI && window.GardenAPI.enabled && window.GardenAPI.blogPosts) {
      window.GardenAPI.blogPosts().then((sv) => {
        if (Array.isArray(sv)) setPosts(sv);
        setLoaded(true);
      });
    }
  }, []);

  if (!loaded && posts.length === 0) {
    return <div className="page-wrap"><div className="page-phone"><div style={{ padding: "60px 24px", textAlign: "center" }} className="dot">よみこみ中…</div></div></div>;
  }
  let idx = posts.findIndex((x) => x.id === BPID);
  if (idx < 0) idx = 0;          // id が無い / 不正なときは最初の記事を表示
  if (posts.length === 0) return <NotFound />;
  const post = posts[idx];
  const cat = window.BLOG_CATS[post.cat];
  const author = window.BLOG_AUTHORS[post.author] || window.BLOG_AUTHORS.panda;
  const prev = posts[idx - 1];
  const next = posts[idx + 1];

  return (
    <div className="page-wrap">
      <div className="page-phone">
        {window.HudBar ? React.createElement(window.HudBar) : null}

        <div className="topnav">
          <a className="backlink" href="blog.html"><span className="arr">◀</span> ブログ一覧へ</a>
          <span className="dot" style={{ fontSize: 12.5, color: "var(--ink-soft)", letterSpacing: ".16em" }}>POST</span>
        </div>

        <div style={{ padding: "8px 22px 0" }}>
          <div className="bd-meta">
            <span className="bcat-badge" style={{ background: cat.color }}>{cat.label}</span>
            <span className="bd-date">{post.date}</span>
          </div>
          <h1 className="bd-title">{post.title}</h1>
          {post.image && <img className="bd-cover" src={post.image} alt="" />}
          <div className="bd-author">
            <AuthorFace author={post.author} />
            <div>
              <div className="bd-author-name">{author.name}</div>
              <div className="bd-author-role">{author.role}</div>
            </div>
          </div>

          <div className="bd-body">
            {post.body.map((blk, i) => {
              if (typeof blk === "string") return <p key={i}>{renderInline(blk, "b" + i)}</p>;
              if (blk.img) return <img key={i} className="bd-inline-img" src={blk.img} alt={blk.alt || ""} />;
              return <h2 key={i}>{blk.h2}</h2>;
            })}
          </div>

          {window.SHOW_REACTIONS && <ReadButton post={post} />}

          <div className="bd-nav">
            <a className={"dot" + (prev ? "" : " disabled")} href={prev ? "blog-detail.html?id=" + prev.id : "#"}>◀ 前の記事</a>
            <a className={"dot" + (next ? "" : " disabled")} href={next ? "blog-detail.html?id=" + next.id : "#"}>次の記事 ▶</a>
          </div>
        </div>

        <div className="exit-wrap">
          <a className="exitbtn" href="blog.html"><span className="bkey">B</span> 一覧へもどる</a>
        </div>

        <div className="foot dot" style={{ textAlign: "center", padding: "16px 0 30px", fontSize: 12.5 }}>
          © 2026 405 JUST FOUND — INSERT COIN
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogDetail />);