/*
  blog-list.jsx — Índice del blog (blog.html). Lista las notas publicadas
  desde Supabase (respaldo a window.POSTS), bilingüe ES/EN.
*/

function blogCardHref(post, lang) {
  return window.noteUrl ? window.noteUrl(post, lang) : ("nota.html?slug=" + encodeURIComponent(post.id) + "&lang=" + lang);
}

function PostMeta({ post, lang, T }) {
  const date = fmtDate(post.publishedAt, lang);
  const read = post.readMinutes ? post.readMinutes + " " + T.readSuffix : "";
  return (
    <div className="bpost-meta">
      {date && <span>{date}</span>}
      {date && read && <span>·</span>}
      {read && <span>{read}</span>}
    </div>
  );
}

function FeaturedCard({ post, lang, T }) {
  const cat = pickField(post, "category", lang);
  return (
    <a className="blog-feat" href={blogCardHref(post, lang)}>
      <div className="blog-feat-img" style={{ backgroundImage: post.cover ? `url(${post.cover})` : "none" }}>
        {cat && <span className="bpost-cat">{cat}</span>}
      </div>
      <div className="blog-feat-body">
        <h2 className="blog-feat-title">{pickField(post, "title", lang)}</h2>
        <p className="blog-feat-excerpt">{pickField(post, "excerpt", lang)}</p>
        <PostMeta post={post} lang={lang} T={T} />
      </div>
    </a>
  );
}

function PostCard({ post, lang, T }) {
  const cat = pickField(post, "category", lang);
  return (
    <a className="bpost-card" href={blogCardHref(post, lang)}>
      <div className="bpost-img" style={{ backgroundImage: post.cover ? `url(${post.cover})` : "none" }}>
        {cat && <span className="bpost-cat">{cat}</span>}
      </div>
      <div className="bpost-body">
        <h3 className="bpost-title">{pickField(post, "title", lang)}</h3>
        <p className="bpost-card-excerpt">{pickField(post, "excerpt", lang)}</p>
        <PostMeta post={post} lang={lang} T={T} />
      </div>
    </a>
  );
}

function BlogIndex() {
  const [lang, setLang] = React.useState(blogLang());
  const [posts, setPosts] = React.useState(null);

  React.useEffect(() => { loadBlogPosts().then(setPosts); }, []);
  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.title = (lang === "en" ? "Blog — " : "Blog — ") + BLOG_SITE.name + " · Guadalajara";
  }, [lang]);

  const T = BLOG_T[lang];

  if (posts === null) {
    return (
      <div className="inv-page blog-page">
        <InvNav active="blog.html" />
        <div className="adm-center" style={{ padding: "6rem 1rem", textAlign: "center", color: "var(--ink-3)" }}>Cargando…</div>
      </div>
    );
  }

  const featured = posts.find((p) => p.featured) || posts[0];
  const rest = posts.filter((p) => p !== featured);

  return (
    <div className="inv-page blog-page">
      <InvNav active="blog.html" />
      <div className="blog-wrap">
        <header className="blog-head">
          <div className="blog-head-top">
            <div className="eyebrow">{T.eyebrow}</div>
            <BlogLangToggle lang={lang} setLang={setLang} />
          </div>
          <h1 className="blog-h1">{T.title}</h1>
          <p className="blog-lead">{T.lead}</p>
        </header>

        {posts.length === 0 ? (
          <div className="blog-empty">{T.empty}</div>
        ) : (
          <>
            {featured && <FeaturedCard post={featured} lang={lang} T={T} />}
            {rest.length > 0 && (
              <div className="blog-list-grid">
                {rest.map((p) => <PostCard key={p.id} post={p} lang={lang} T={T} />)}
              </div>
            )}
          </>
        )}
      </div>
      <InvFooter />
      <WaFloat />
    </div>
  );
}

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