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

/* Mini Nav (mêmes liens que NewsNav, refactorable plus tard) */
const ArticleNav = () => {
  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">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">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>
    </>
  );
};

/* Sidebar — sommaire auto avec scroll-spy + partage social + CTA audit */
const ArticleSidebar = ({ toc, slug, title }) => {
  const [activeId, setActiveId] = useState(toc[0]?.id || null);

  /* Scroll-spy : observe les h2/h3 dans le contenu et active l'item du TOC */
  useEffect(() => {
    if (!toc || toc.length === 0) return;
    const headings = toc
      .map((t) => document.getElementById(t.id))
      .filter(Boolean);
    if (headings.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter((e) => e.isIntersecting);
        if (visible.length > 0) {
          /* Pick the topmost visible heading */
          const top = visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
          setActiveId(top.target.id);
        }
      },
      { rootMargin: '-80px 0px -70% 0px', threshold: 0 }
    );
    headings.forEach((h) => observer.observe(h));
    return () => observer.disconnect();
  }, [toc]);

  const url = typeof window !== 'undefined' ? `https://boommaker.io/blog/${slug}` : '';
  const shareLinkedIn = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
  const shareX = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`;

  const copyLink = async () => {
    try {
      if (navigator.share) {
        await navigator.share({ title, url });
      } else {
        await navigator.clipboard.writeText(url);
        alert('Lien copié.');
      }
    } catch (e) {
      /* user cancelled share, no-op */
    }
  };

  return (
    <aside className="article-sidebar">
      {toc && toc.length > 0 && (
        <div className="article-toc">
          <h4>Sommaire</h4>
          <ul>
            {toc.map((t) => (
              <li key={t.id} className={`toc-l${t.level} ${activeId === t.id ? 'active' : ''}`}>
                <a href={`#${t.id}`} onClick={(e) => {
                  e.preventDefault();
                  document.getElementById(t.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }}>{t.text}</a>
              </li>
            ))}
          </ul>
        </div>
      )}

      <div className="article-share">
        <h4>Partager</h4>
        <div className="article-share-row">
          <a href={shareLinkedIn} target="_blank" rel="noopener noreferrer" aria-label="Partager sur LinkedIn">in</a>
          <a href={shareX} target="_blank" rel="noopener noreferrer" aria-label="Partager sur X">X</a>
          <button onClick={copyLink} aria-label="Copier le lien">⎘</button>
        </div>
      </div>

      <div className="article-sidebar-cta">
        <h4>Plutôt qu'un article&nbsp;?</h4>
        <p>30 min · gratuit · qualifie ton workflow</p>
        <a href="/audit-gratuit" className="btn btn-glow">Réserver mon audit <ArrowUpRight size={14} /></a>
      </div>
    </aside>
  );
};

/* Bloc auteur en fin d'article (si auteur lié dans Contentful) */
const AuthorBlock = ({ author }) => {
  if (!author) return null;
  return (
    <div className="article-author-block">
      {author.picture && (
        <img className="article-author-pic" src={`${author.picture}?w=160&q=80&fm=webp&fit=fill&f=face`} alt={author.name} />
      )}
      <div className="article-author-body">
        <div className="article-author-name">
          {author.name}{author.title && <span className="article-author-title"> · {author.title}</span>}
        </div>
        {author.description && <p>{author.description}</p>}
      </div>
    </div>
  );
};

const NewsletterInline = () => {
  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: 'article', 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="article-newsletter-wrap">
      <div className="news-newsletter">
        <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.</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 ArticlePage = () => {
  useReveal();
  /* Read slug from (in order): static page injection (Phase 8 SEO), URL query param (legacy /article-detail?slug=…), or fallback to first post. */
  const slug = window.BM_ARTICLE_SLUG || new URLSearchParams(window.location.search).get('slug') || (window.BM_POSTS?.[0]?.slug);

  /* État : article complet (HTML + TOC) chargé async depuis articles/{slug}.json */
  const [article, setArticle] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!slug) {
      setError('Article introuvable.');
      return;
    }
    fetch(`/articles/${slug}.json`)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then((data) => {
        setArticle(data);
        document.title = data.title;
        /* Update meta description for share crawlers */
        const md = document.querySelector('meta[name="description"]');
        if (md && data.lead) md.setAttribute('content', data.lead);
      })
      .catch((e) => {
        console.error('Failed to load article', e);
        setError("Article introuvable.");
      });
  }, [slug]);

  /* Articles liés : 3 du même cat, fallback aux plus récents */
  const related = useMemo(() => {
    if (!article || !window.BM_POSTS) return [];
    const same = window.BM_POSTS.filter(p => p.slug !== article.slug && p.cat === article.cat).slice(0, 3);
    const fillers = window.BM_POSTS.filter(p => p.slug !== article.slug && !same.some(s => s.slug === p.slug)).slice(0, 3 - same.length);
    return [...same, ...fillers].slice(0, 3);
  }, [article]);

  if (error) {
    return (
      <div className="article-page">
        <ArticleNav />
        <div className="article-error container">
          <h1>Article introuvable</h1>
          <p>Cet article n'existe pas ou a été déplacé.</p>
          <a href="/news" className="btn btn-glow">← Tous les articles</a>
        </div>
      </div>
    );
  }

  if (!article) {
    return (
      <div className="article-page">
        <ArticleNav />
        <div className="article-loading container">
          <p className="label">Chargement…</p>
        </div>
      </div>
    );
  }

  return (
    <div className="article-page">
      <ArticleNav />

      <article className="article-hero">
        <div className="container">
          <a href="/news" className="article-back">← Tous les articles</a>
          <span className="article-cat">{article.cat}</span>
          <h1 className="article-title">{article.title}</h1>
          <div className="article-meta-row">
            <div className="article-author">
              <span className="article-author-dot">{(article.author?.name || 'J')[0]}</span>
              <span>{article.author?.name || 'Julia · Boom Maker'}</span>
            </div>
            <span>{article.date}</span>
            <span>{article.read} de lecture</span>
          </div>
          {article.image ? (
            <div className="article-cover article-cover--has-image">
              <img
                className="article-cover-img"
                src={`${article.image}?w=1280&q=85&fm=webp`}
                alt={article.title}
                loading="eager"
              />
              <span className="article-cover-stamp">{article.cat}</span>
            </div>
          ) : (
            <div className="article-cover">
              <span className="article-cover-stamp">{article.cat}</span>
            </div>
          )}
        </div>
      </article>

      <div className="article-layout container">
        <div className="article-main">
          {article.lead && <p className="article-lead">{article.lead}</p>}
          <div
            className="article-body"
            dangerouslySetInnerHTML={{ __html: article.contentHtml }}
          />
          <AuthorBlock author={article.author} />
          <NewsletterInline />
        </div>

        <ArticleSidebar toc={article.toc} slug={article.slug} title={article.title} />
      </div>

      {related.length > 0 && (
        <section className="article-related">
          <div className="container">
            <h3>À lire ensuite</h3>
            <div className="news-grid">
              {related.map(p => (
                <a href={`/blog/${p.slug}`} className="news-card" key={p.slug}>
                  <div
                    className={`news-card-thumb ${p.grad}`}
                    style={p.image ? { backgroundImage: `url("${p.image}?w=800&q=75&fm=webp")`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundColor: 'var(--surface)' } : undefined}
                  >
                    <span className="news-card-cat">{p.cat}</span>
                  </div>
                  <div className="news-card-body">
                    <div className="news-card-meta">{p.date}<span className="dot">·</span>{p.read}</div>
                    <h4>{p.title}</h4>
                    <p className="news-card-desc">{p.desc}</p>
                    <span className="news-card-read">Lire <ArrowUpRight size={12} /></span>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="article-cta-final">
        <div className="container">
          <h2>Prêt à automatiser <em className="accent">ta croissance ?</em></h2>
          <p>30 minutes pour comprendre ton ICP et te dire si c'est faisable.</p>
          <a href="/audit-gratuit" className="btn btn-glow">Réserver mon audit <ArrowUpRight /></a>
        </div>
      </section>

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

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