/* global React, ReactDOM, I18N, BLOG_ARTICLES, BlogNav, BlogFooter, ArticleCard, useAppearance */

const { useState, useMemo } = React;

const BLOG_T = {
  en: {
    eyebrow: "Insights",
    title: "Field notes from cloud, security and AI.",
    sub: "Curated dispatches from the teams we trust — plus our own write-ups from real migrations, incidents and platform builds.",
    filter_all: "All",
    filters: { Security: "Security", AI: "AI & LLMs", Cloud: "Cloud", FinOps: "FinOps", Compliance: "Compliance", Kubernetes: "Kubernetes" },
    featured: "Featured",
    latest: "Latest",
    no_results: "No articles match this filter yet.",
    auto_disclaimer: "Curated from the trusted feeds we follow, plus our own field notes. Source attribution on each article.",
  },
  es: {
    eyebrow: "Insights",
    title: "Notas de campo sobre cloud, seguridad e IA.",
    sub: "Selección de los equipos que seguimos — y nuestras propias notas tras migraciones, incidentes y construcciones de plataforma reales.",
    filter_all: "Todos",
    filters: { Security: "Seguridad", AI: "IA & LLMs", Cloud: "Cloud", FinOps: "FinOps", Compliance: "Compliance", Kubernetes: "Kubernetes" },
    featured: "Destacado",
    latest: "Recientes",
    no_results: "Aún no hay artículos para este filtro.",
    auto_disclaimer: "Selección de los feeds de confianza que seguimos, más nuestras propias notas de campo. Atribución de fuente en cada artículo.",
  },
};

const CATEGORY_MAP = {
  Security: ["Security", "CVE", "DORA", "Compliance"],
  AI: ["AI", "LLMs", "MCP"],
  Cloud: ["AWS", "Kubernetes", "Platform"],
  FinOps: ["FinOps"],
  Compliance: ["Compliance", "DORA"],
};

function BlogListPage() {
  const { theme, setTheme, lang, setLang } = useAppearance();
  const [filter, setFilter] = useState("all");
  const t = BLOG_T[lang];

  const filtered = useMemo(() => {
    if (filter === "all") return window.BLOG_ARTICLES;
    const cats = CATEGORY_MAP[filter] || [filter];
    return window.BLOG_ARTICLES.filter(a => a.tags.some(t => cats.includes(t)));
  }, [filter]);

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

  return (
    <>
      <BlogNav lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
      <main>
        <section className="blog-hero">
          <div className="hero-grid-bg" aria-hidden="true" />
          <div className="wrap blog-hero-inner">
            <span className="eyebrow">{t.eyebrow}</span>
            <h1>{t.title}</h1>
            <p className="lead">{t.sub}</p>
            <div className="blog-filters">
              <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>{t.filter_all}</button>
              {Object.keys(t.filters).map((k) => (
                <button key={k} className={filter === k ? "active" : ""} onClick={() => setFilter(k)}>{t.filters[k]}</button>
              ))}
            </div>
          </div>
        </section>

        <section className="blog-content">
          <div className="wrap">
            {featured && (
              <div className="blog-section">
                <div className="blog-section-label">
                  <span className="eyebrow">{t.featured}</span>
                </div>
                <ArticleCard a={featured} featured />
              </div>
            )}
            {rest.length > 0 && (
              <div className="blog-section">
                <div className="blog-section-label">
                  <span className="eyebrow">{t.latest}</span>
                </div>
                <div className="article-grid">
                  {rest.map((a) => <ArticleCard key={a.slug} a={a} />)}
                </div>
              </div>
            )}
            {filtered.length === 0 && <p className="section-sub">{t.no_results}</p>}
            <p className="blog-disclaimer">{t.auto_disclaimer}</p>
          </div>
        </section>
      </main>
      <BlogFooter lang={lang} />
    </>
  );
}

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