// === News page app ===
const { useState, useMemo, useEffect } = React;
const { Logo, ArrowUpRight, useReveal, ThemeToggle, FooterMin } = window.BMShared;

// Mini Nav for the News page (links back to landing)
const NewsNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/#process">Process</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/#prix">Tarifs</a>
          <a href="/news" className="active" style={{ color: 'var(--cyan)' }}>News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/#process">Process</a>
        <a href="/partners">Partenaires</a>
        <a href="/#prix">Tarifs</a>
        <a href="/news" className="active">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

const NewsHero = ({ count }) =>
  <section className="news-hero">
    <div className="container">
      <span className="eyebrow"><span className="pulse" /> Mis à jour · {count} articles</span>
      <h1>Du terrain au workflow.<br /><em>Tout ce qu'on a appris en automatisant</em></h1>
      <p className="lead">Guides, comparatifs et retours de mission sur l'automatisation no-code, les agents IA et la prospection B2B. Pour TPE qui veulent vraiment passer à l'échelle.</p>
    </div>
  </section>;

const Filters = ({ active, setActive, counts, query, setQuery }) => {
  const cats = window.BM_CATEGORIES;
  return (
    <div className="news-filters">
      <div className="container">
        <div className="news-filters-row">
          <div className="news-filters-inner">
            {cats.map(c =>
              <button
                key={c}
                className={`news-pill ${active === c ? 'active' : ''}`}
                onClick={() => setActive(c)}>
                {c}<span className="count">{counts[c] || 0}</span>
              </button>
            )}
          </div>
          <div className="news-search">
            <svg className="news-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
            </svg>
            <input
              type="search"
              placeholder="Chercher un article…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              aria-label="Recherche"
            />
            {query && (
              <button className="news-search-clear" onClick={() => setQuery('')} aria-label="Effacer">×</button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const Pagination = ({ page, totalPages, setPage }) => {
  if (totalPages <= 1) return null;
  /* Build page numbers with ellipsis if many pages */
  const nums = [];
  for (let i = 1; i <= totalPages; i++) nums.push(i);

  return (
    <nav className="news-pagination" aria-label="Pagination">
      <button
        className="news-page-btn"
        disabled={page === 1}
        onClick={() => setPage(page - 1)}
        aria-label="Page précédente"
      >← Préc.</button>
      <div className="news-page-numbers">
        {nums.map((n) => (
          <button
            key={n}
            className={`news-page-num ${n === page ? 'active' : ''}`}
            onClick={() => setPage(n)}
            aria-label={`Page ${n}`}
            aria-current={n === page ? 'page' : undefined}
          >{n}</button>
        ))}
      </div>
      <button
        className="news-page-btn"
        disabled={page === totalPages}
        onClick={() => setPage(page + 1)}
        aria-label="Page suivante"
      >Suiv. →</button>
    </nav>
  );
};

const Featured = ({ post }) => {
  if (!post) return null;
  return (
    <section className="news-featured-section">
      <div className="container">
        <a href={`/blog/${post.slug}`} className="news-featured reveal">
          <div className="news-featured-thumb">
            <span className="news-featured-thumb-tag">★ À la une</span>
            <span className="news-featured-thumb-stamp">{post.cat}</span>
          </div>
          <div className="news-featured-body">
            <div className="news-featured-meta">
              {post.date}<span className="dot">·</span>{post.read} de lecture<span className="dot">·</span>{post.cat}
            </div>
            <h2>{post.title}</h2>
            <p className="news-featured-desc">{post.desc}</p>
            <span className="news-featured-cta">Lire l'article <ArrowUpRight size={14} /></span>
          </div>
        </a>
      </div>
    </section>
  );
};

const NewsCard = ({ post }) =>
  <a href={`/blog/${post.slug}`} className="news-card">
    <div className={`news-card-thumb ${post.grad}`}
         style={post.image ? { backgroundImage: `url("${post.image}?w=800&q=75&fm=webp")`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundColor: 'var(--surface)' } : undefined}>
      <span className="news-card-cat">{post.cat}</span>
    </div>
    <div className="news-card-body">
      <div className="news-card-meta">
        {post.date}<span className="dot">·</span>{post.read}
      </div>
      <h4>{post.title}</h4>
      <p className="news-card-desc">{post.desc}</p>
      <span className="news-card-read">Lire <ArrowUpRight size={12} /></span>
    </div>
  </a>;

const Newsletter = () => {
  const [email, setEmail] = useState('');
  const [website, setWebsite] = useState('');
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'loading') return;
    setStatus('loading');
    setError('');
    try {
      const r = await fetch('/api/newsletter', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, source: 'news', website }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || 'Inscription impossible.');
      setStatus('success');
      setEmail('');
    } catch (err) {
      setStatus('error');
      setError(err.message || 'Inscription impossible.');
    }
  };

  return (
    <div className="container">
      <div className="news-newsletter reveal">
        <div>
          <div className="news-newsletter-eyebrow">▶ Newsletter mensuelle</div>
          <h3>Reçois <em>le journal</em> dans ta boîte.</h3>
          <p>Une fois par mois. Les workflows que je déploie chez mes clients, les outils que je teste, les chiffres réels. Aucun pitch, aucun spam.</p>
        </div>
        {status === 'success' ? (
          <div className="news-newsletter-form">
            <p style={{ color: 'var(--accent)', fontWeight: 600, margin: 0 }}>✓ Inscription confirmée. À bientôt dans ta boîte.</p>
          </div>
        ) : (
          <form className="news-newsletter-form" onSubmit={submit} noValidate>
            <div className="row">
              <input
                type="email"
                required
                placeholder="ton@email.fr"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={status === 'loading'}
              />
              <input
                type="text"
                name="website"
                value={website}
                onChange={(e) => setWebsite(e.target.value)}
                tabIndex="-1"
                autoComplete="off"
                aria-hidden="true"
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
              />
              <button type="submit" disabled={status === 'loading'}>
                {status === 'loading' ? '…' : "S'abonner →"}
              </button>
            </div>
            {status === 'error'
              ? <span className="hint" style={{ color: '#ff6b6b' }}>{error}</span>
              : <span className="hint">Désinscription en 1 clic. Pas de spam.</span>}
          </form>
        )}
      </div>
    </div>
  );
};

const NewsCta = () =>
  <section className="news-cta">
    <div className="container">
      <h3>Plutôt qu'un article, <em>un audit ?</em></h3>
      <p>30 minutes. Gratuit. On regarde ton workflow et on te dit ce qui peut être automatisé.</p>
      <div className="btn-row">
        <a href="/audit-gratuit" className="btn btn-glow">Réserver mon audit <ArrowUpRight /></a>
        <a href="/" className="btn btn-ghost">← Retour au site</a>
      </div>
    </div>
  </section>;

const PER_PAGE = 12;

/* Debounce hook pour le champ recherche (300ms) */
const useDebounce = (value, delay = 300) => {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return debounced;
};

const NewsApp = () => {
  const [active, setActive] = useState('Tous');
  const [query, setQuery] = useState('');
  const [page, setPage] = useState(1);
  const debouncedQuery = useDebounce(query, 300);
  useReveal();

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

  const counts = useMemo(() => {
    const c = { 'Tous': posts.length };
    posts.forEach(p => { c[p.cat] = (c[p.cat] || 0) + 1; });
    return c;
  }, []);

  /* Reset page quand le filtre ou la recherche change */
  useEffect(() => { setPage(1); }, [active, debouncedQuery]);

  /* Filtrage cumulé : catégorie active + recherche texte */
  const q = debouncedQuery.trim().toLowerCase();
  let pool = active === 'Tous' ? rest : posts.filter(p => p.cat === active);
  if (q) {
    pool = pool.filter(p =>
      (p.title || '').toLowerCase().includes(q) ||
      (p.desc || '').toLowerCase().includes(q) ||
      (p.cat || '').toLowerCase().includes(q)
    );
  }

  /* Le featured n'apparaît dans son bloc dédié que si "Tous" + pas de recherche */
  const showFeatured = active === 'Tous' && !q;

  /* Pagination */
  const totalPages = Math.max(1, Math.ceil(pool.length / PER_PAGE));
  const safePage = Math.min(page, totalPages);
  const pageStart = (safePage - 1) * PER_PAGE;
  const pagePosts = pool.slice(pageStart, pageStart + PER_PAGE);

  return (
    <div className="news-page">
      <NewsNav />
      <NewsHero count={posts.length} />
      <Filters
        active={active}
        setActive={setActive}
        counts={counts}
        query={query}
        setQuery={setQuery}
      />
      {showFeatured && <Featured post={featured} />}

      <section className="news-grid-section">
        <div className="container">
          <div className="news-grid-head">
            <h3>{q ? `Résultats pour "${query}"` : (active === 'Tous' ? 'Tous les articles' : active)}</h3>
            <span className="count">{pool.length} article{pool.length > 1 ? 's' : ''}</span>
          </div>
          {pool.length === 0
            ? <div className="news-empty">{q ? `Aucun article ne correspond à "${query}".` : 'Aucun article dans cette catégorie pour le moment.'}</div>
            : <>
                <div className="news-grid">
                  {pagePosts.map((p) => <NewsCard key={p.slug} post={p} />)}
                </div>
                <Pagination page={safePage} totalPages={totalPages} setPage={setPage} />
              </>
          }
        </div>
      </section>

      <Newsletter />
      <NewsCta />

      <FooterMin />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<NewsApp />);