const BlogDetail = ({ slug, lang = 'en', onNavigate, onCTA, blogs }) => {
  const [stickyVisible, setStickyVisible] = React.useState(false);

  // DB data takes priority; fallback to static mock when DB returns nothing
  const posts = (blogs && blogs.length > 0) ? blogs : (window.BLOG_POSTS || []);
  const post    = posts.find(p => p.slug === slug);
  const related = posts.filter(p => p.slug !== slug).slice(0, 3);

  React.useEffect(() => {
    if (!post) return;
    document.title = `${i18(post.title, lang)} — Blan`;
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.content = i18(post.excerpt, lang);
    window.scrollTo(0, 0);
  }, [slug, lang]);

  // Show sticky CTA after scrolling past the cover image (~500px)
  React.useEffect(() => {
    const onScroll = () => setStickyVisible(window.scrollY > 500);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const LOCALE_MAP = { fr: 'fr-FR', dar: 'ar-MA', ar: 'ar-SA', en: 'en-US' };
  const fmt = (iso) => new Date(iso).toLocaleDateString(
    LOCALE_MAP[lang] || 'en-US',
    { year: 'numeric', month: 'long', day: 'numeric' }
  );

  if (!post) {
    return (
      <div className="ag-bd__notfound ag-section">
        <h2>{t('blog.notFound', lang)}</h2>
        <p>{t('blog.notFoundDesc', lang)}</p>
        <button className="ag-btn ag-btn--dark" onClick={() => onNavigate('/blog')}>{t('blog.backToAll', lang)}</button>
      </div>
    );
  }

  return (
    <div className="ag-bd">

      {/* Back nav */}
      <div className="ag-bd__topnav">
        <button className="ag-bd__back-btn" onClick={() => onNavigate('/blog')}>
          ← {t('blog.back', lang)}
        </button>
      </div>

      {/* Header */}
      <header className="ag-bd__header">
        <div className="ag-bd__header-inner">
          <span className="ag-bl__cat">{post.category}</span>
          <h1 className="ag-bd__title">{i18(post.title, lang)}</h1>
          <div className="ag-bl__meta ag-bd__meta">
            <span>{fmt(post.created_at)}</span>
            <span className="ag-bl__dot">·</span>
            <span>{post.reading_time} {t('blog.readTime', lang)}</span>
          </div>
        </div>
      </header>

      {/* Cover */}
      <div className="ag-bd__cover">
        <img
          src={post.cover_url || post.cover}
          alt={i18(post.title, lang)}
          onError={e => { e.target.src = 'assets/hero-bg.jpg'; }}
        />
      </div>

      {/* Content */}
      <div className="ag-bd__body">
        <div
          className="ag-bd__content"
          dangerouslySetInnerHTML={{ __html: i18(post.content, lang) }}
        />
      </div>

      {/* CTA block */}
      <section className="ag-bd__cta">
        <div className="ag-bd__cta-inner">
          <h2 className="ag-bd__cta-title">
            {t('blog.ctaTitle', lang)}
          </h2>
          <p className="ag-bd__cta-sub">
            {t('blog.ctaSub', lang)}
          </p>
          <button className="ag-btn ag-btn--accent" onClick={onCTA}>
            {t('blog.ctaBtn', lang)}
          </button>
        </div>
      </section>

      {/* Related */}
      {related.length > 0 && (
        <section className="ag-bd__related ag-section">
          <h2 className="ag-bd__related-title">
            {t('blog.related', lang)}
          </h2>
          <div className="ag-bl__grid ag-bd__related-grid">
            {related.map(p => (
              <article
                key={p.id}
                className="ag-bl__card"
                onClick={() => { onNavigate(`/blog/${p.slug}`); }}
                role="button"
                tabIndex={0}
                onKeyPress={e => e.key === 'Enter' && onNavigate(`/blog/${p.slug}`)}
              >
                <div className="ag-bl__card-img">
                  <img
                    src={p.cover_url || p.cover}
                    alt={i18(p.title, lang)}
                    onError={e => { e.target.src = 'assets/hero-bg.jpg'; }}
                  />
                </div>
                <div className="ag-bl__card-body">
                  <span className="ag-bl__cat">{p.category}</span>
                  <h3 className="ag-bl__card-title">{i18(p.title, lang)}</h3>
                  <p className="ag-bl__card-excerpt">{i18(p.excerpt, lang)}</p>
                  <div className="ag-bl__meta">
                    <span>{p.reading_time} min</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </section>
      )}

      {/* Back */}
      <div className="ag-bd__back">
        <button className="ag-bd__back-btn" onClick={() => onNavigate('/blog')}>
          ← {t('blog.back', lang)}
        </button>
      </div>

      {/* Sticky CTA */}
      <div className={`ag-bd__sticky${stickyVisible ? ' is-visible' : ''}`} aria-hidden={!stickyVisible}>
        <span className="ag-bd__sticky-label">
          {t('blog.stickyLabel', lang)}
        </span>
        <button className="ag-btn ag-btn--dark ag-bd__sticky-btn" onClick={onCTA}>
          {t('blog.ctaBtn', lang)}
        </button>
      </div>

    </div>
  );
};

window.BlogDetail = BlogDetail;