// pages/Blog.jsx — listado de todos los artículos con filtro y buscador
const PAGE_SIZE = 10;

function BlogPage({ articles, loading, onOpenArticle, density, search, onSearch }) {
  const [category, setCategory] = React.useState('Todos');
  const [page, setPage] = React.useState(1);

  const filtered = articles.filter((a) => {
    if (category !== 'Todos' && a.category !== category) return false;
    if (search) {
      const q = search.toLowerCase();
      if (!a.title.toLowerCase().includes(q) && !a.excerpt.toLowerCase().includes(q)) return false;
    }
    return true;
  });

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const safePage = Math.min(page, totalPages);
  const paginated = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);

  // Resetear a página 1 cuando cambian filtros
  React.useEffect(() => { setPage(1); }, [category, search]);

  const goTo = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // Generar array de páginas con elipsis: [1, …, 4, 5, 6, …, 12]
  const pageNumbers = () => {
    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
    const pages = new Set([1, totalPages, safePage, safePage - 1, safePage + 1].filter(p => p >= 1 && p <= totalPages));
    return [...pages].sort((a, b) => a - b);
  };

  return (
    <>
      <section className="im-page-head">
        <span className="im-eyebrow">Blog</span>
        <h1 className="im-h1">Todos los artículos</h1>
        <p className="im-lead" style={{ maxWidth: 640 }}>Notas de campo, casos de éxito, comparativas de herramientas y lo que voy aprendiendo montando IA y automatizaciones.</p>
      </section>

      <section className="im-section">
        <div className="im-blog-controls">
          <div className="im-chips">
            {window.CATEGORIES.map((c) =>
              <button
                key={c}
                className={`im-chip ${category === c ? 'is-active' : ''}`}
                onClick={() => setCategory(c)}>
                {c}
              </button>
            )}
          </div>
          <div className="im-blog-search">
            <SearchIcon />
            <input
              type="text"
              placeholder="Buscar en el blog…"
              value={search}
              onChange={(e) => onSearch(e.target.value)} />
          </div>
        </div>

        <div className="im-blog-count">
          {filtered.length} {filtered.length === 1 ? 'artículo' : 'artículos'}
          {search && <span> que coinciden con "<strong>{search}</strong>"</span>}
          {category !== 'Todos' && <span> en <strong>{category}</strong></span>}
          {totalPages > 1 && <span className="im-blog-count-page"> · Página {safePage} de {totalPages}</span>}
        </div>

        {loading ?
          <div className="im-empty"><p>Cargando artículos…</p></div> :
          filtered.length === 0 ?
          <div className="im-empty">
            <p>{articles.length === 0 ? 'Aún no hay artículos publicados.' : 'Nada por aquí. Prueba a quitar el filtro o cambiar la búsqueda.'}</p>
          </div> :
          <div className={`im-grid im-grid-${density}`}>
            {paginated.map((a) =>
              <ArticleCard key={a.id} article={a} onOpen={onOpenArticle} density={density} />
            )}
          </div>
        }

        {totalPages > 1 && !loading && (
          <nav className="im-pagination" aria-label="Paginación">
            <button
              className="im-pagination-btn"
              onClick={() => goTo(safePage - 1)}
              disabled={safePage === 1}
              aria-label="Página anterior">
              ← Anterior
            </button>

            <div className="im-pagination-pages">
              {pageNumbers().reduce((acc, p, i, arr) => {
                if (i > 0 && p - arr[i - 1] > 1) {
                  acc.push(<span key={`ellipsis-${p}`} className="im-pagination-ellipsis">…</span>);
                }
                acc.push(
                  <button
                    key={p}
                    className={`im-pagination-page ${p === safePage ? 'is-active' : ''}`}
                    onClick={() => goTo(p)}
                    aria-current={p === safePage ? 'page' : undefined}>
                    {p}
                  </button>
                );
                return acc;
              }, [])}
            </div>

            <button
              className="im-pagination-btn"
              onClick={() => goTo(safePage + 1)}
              disabled={safePage === totalPages}
              aria-label="Página siguiente">
              Siguiente →
            </button>
          </nav>
        )}
      </section>

      <ContactForm />
    </>
  );
}

window.BlogPage = BlogPage;