// blog-sections.jsx — 틴트라이프 · 블로그. Uses BLOG (blog-data).
const { useState, useEffect } = React;

/* inline **bold** within a string */
function blogInline(s) {
  return s.split("**").map((p, i) =>
    i % 2 === 1 ? <strong key={i}>{p}</strong> : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

/* renders one article body (array of blocks) */
function BlogBody({ body }) {
  return body.map((b, i) => {
    if (b.t === "h") return <h3 key={i} className="bl-art-h">{b.x}</h3>;
    if (b.t === "ul") return (
      <ul key={i} className="bl-art-ul">
        {b.items.map((it, j) => <li key={j}>{blogInline(it)}</li>)}
      </ul>
    );
    return <p key={i} className="bl-art-p">{blogInline(b.x)}</p>;
  });
}

/* ---------- Article reader overlay ---------- */
function BlogReader({ post, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  return (
    <div className="bl-reader" role="dialog" aria-modal="true" onClick={onClose}>
      <article className="bl-reader-card" onClick={(e) => e.stopPropagation()}>
        <button className="bl-reader-x" onClick={onClose} aria-label="닫기">✕</button>
        <div className="bl-reader-hero" style={{ backgroundImage: `url(${post.img})` }}></div>
        <div className="bl-reader-body">
          <span className="bl-tag">{post.tag}</span>
          <h1 className="bl-art-title">{post.title}</h1>
          <div className="bl-art-meta">
            <span>{post.date}</span><span className="bl-dot"></span><span>읽는 데 {post.read}</span>
          </div>
          <div className="bl-art-content"><BlogBody body={post.body} /></div>
          <div className="bl-art-foot">
            <a className="bl-art-cta" href={BLOG.cta.href} target="_blank" rel="noreferrer">
              {BLOG.cta.btn}
              <svg width="18" height="9" viewBox="0 0 18 9" fill="none" aria-hidden="true"><path d="M0 4.5h16M16 4.5l-3.6-3.5M16 4.5l-3.6 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
            <button className="bl-art-back" onClick={onClose}>목록으로 돌아가기</button>
          </div>
        </div>
      </article>
    </div>
  );
}

/* ---------- Post card ---------- */
function BlogCard({ post, onOpen, featured }) {
  const handleClick = () => {
    if (post.naver_url) {
      window.open(post.naver_url, "_blank", "noreferrer");
    } else {
      onOpen(post);
    }
  };
  return (
    <article className={"bl-card" + (featured ? " bl-card--feat" : "")} onClick={handleClick} style={{ cursor: "pointer" }}>
      <div className="bl-card-media">
        <img src={post.img} alt={post.title} loading="lazy" referrerPolicy="no-referrer" />
        <span className="bl-tag bl-tag--onimg">{post.tag}</span>
      </div>
      <div className="bl-card-body">
        <h3 className="bl-card-title">{post.title}</h3>
        <p className="bl-card-excerpt">{post.excerpt}</p>
        <div className="bl-card-meta">
          <span>{post.date}</span><span className="bl-dot"></span><span>{post.read}</span>
          <span className="bl-card-more">{post.naver_url ? "네이버에서 보기 →" : "읽기 →"}</span>
        </div>
      </div>
    </article>
  );
}

/* ---------- Page ---------- */
const PER_PAGE = 9;

function Blog() {
  const [cat, setCat] = useState("all");
  const [open, setOpen] = useState(null);
  const [allPosts, setAllPosts] = useState(BLOG.posts);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetch("/api/posts")
      .then((r) => r.ok ? r.json() : null)
      .then((data) => { if (Array.isArray(data) && data.length > 0) setAllPosts(data); })
      .catch(() => {});
  }, []);

  const changeCat = (id) => { setCat(id); setPage(1); };

  const filtered = cat === "all" ? allPosts : allPosts.filter((p) => p.cat === cat);
  const totalPages = Math.ceil(filtered.length / PER_PAGE);
  const pagePosts = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);

  const feat = page === 1 ? pagePosts[0] : null;
  const rest = page === 1 ? pagePosts.slice(1) : pagePosts;

  const goPage = (n) => {
    setPage(n);
    document.querySelector(".bl-main")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <React.Fragment>
      <section className="bl-main" data-screen-label="blog-list">
        <div className="tl-wrap">
          <header className="bl-head">
            <p className="bl-kicker">{BLOG.intro.kicker}</p>
            <h1 className="bl-title">{BLOG.intro.title}</h1>
            <p className="bl-sub">{BLOG.intro.sub}</p>
          </header>

          <div className="bl-cats" role="tablist">
            {BLOG.cats.map((c) => (
              <button key={c.id} role="tab" aria-selected={cat === c.id}
                className={"bl-cat" + (cat === c.id ? " is-active" : "")}
                onClick={() => changeCat(c.id)}>{c.label}</button>
            ))}
          </div>

          {pagePosts.length === 0 ? (
            <p className="bl-empty">해당 카테고리의 글이 아직 없습니다.</p>
          ) : (
            <React.Fragment>
              {feat && <BlogCard post={feat} onOpen={setOpen} featured />}
              {rest.length > 0 && (
                <div className="bl-grid">
                  {rest.map((p) => <BlogCard key={p.id} post={p} onOpen={setOpen} />)}
                </div>
              )}
            </React.Fragment>
          )}

          {totalPages > 1 && (
            <nav className="bl-pager" aria-label="페이지 이동">
              <button className="bl-pager-btn bl-pager-btn--arrow" onClick={() => goPage(page - 1)} disabled={page === 1} aria-label="이전">‹</button>
              {Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
                <button key={n} className={"bl-pager-btn" + (n === page ? " is-active" : "")} onClick={() => goPage(n)} aria-current={n === page ? "page" : undefined}>{n}</button>
              ))}
              <button className="bl-pager-btn bl-pager-btn--arrow" onClick={() => goPage(page + 1)} disabled={page === totalPages} aria-label="다음">›</button>
            </nav>
          )}
        </div>
      </section>

      {open && <BlogReader post={open} onClose={() => setOpen(null)} />}
    </React.Fragment>
  );
}

window.Blog = Blog;