/* global React, marked */
const { useState, useEffect, useRef } = React;

function useReveal() {
  const ioRef = useRef(null);
  if (!ioRef.current && typeof IntersectionObserver !== "undefined") {
    ioRef.current = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) { e.target.dataset.rv = "1"; ioRef.current.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
  }
  React.useLayoutEffect(() => {
    document.querySelectorAll(".reveal:not([data-rv])").forEach((el) => {
      if (ioRef.current) ioRef.current.observe(el);
      else el.dataset.rv = "1";
    });
  });
}

const LANGUAGE_LABELS = {
  'en': '🇺🇸 English',
  'es': '🇦🇷 Español'
};

const LANGUAGE_CODES = {
  'en': 'en',
  'es': 'es'
};

function parseFrontmatter(content) {
  const match = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
  if (!match) return { meta: {}, content };

  const metaStr = match[1];
  const body = match[2];
  const meta = {};

  metaStr.split('\n').forEach(line => {
    const [key, ...valueParts] = line.split(':');
    if (key && valueParts.length > 0) {
      let value = valueParts.join(':').trim();
      if (value.startsWith('"') && value.endsWith('"')) {
        value = value.slice(1, -1);
      }
      // Parse tags (comma-separated)
      if (key.trim() === 'tags' && value) {
        meta[key.trim()] = value.split(',').map(t => t.trim());
      } else {
        meta[key.trim()] = value;
      }
    }
  });

  return { meta, content: body };
}

function BlogPost({ slug, onBack }) {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useReveal();

  useEffect(() => {
    fetch(`/blog/posts/${slug}.md`)
      .then(r => {
        if (!r.ok) throw new Error('Post not found');
        return r.text();
      })
      .then(content => {
        const { meta, content: body } = parseFrontmatter(content);
        const html = marked.parse(body);
        setPost({ ...meta, html, slug });
        setLoading(false);
      })
      .catch(err => {
        console.error('Error loading post:', err);
        setError(err.message);
        setLoading(false);
      });
  }, [slug]);

  useEffect(() => {
    if (post && post.language) {
      // Add hreflang meta tags for SEO
      // Remove old hreflang tags first
      document.querySelectorAll('link[rel="alternate"][hreflang]').forEach(el => el.remove());

      // Add current language link
      const langLink = document.createElement('link');
      langLink.rel = 'alternate';
      langLink.hreflang = LANGUAGE_CODES[post.language];
      langLink.href = `${window.location.origin}${window.location.pathname}#${slug}`;
      document.head.appendChild(langLink);

      // Add x-default for future translated versions
      const defaultLink = document.createElement('link');
      defaultLink.rel = 'alternate';
      defaultLink.hreflang = 'x-default';
      defaultLink.href = `${window.location.origin}${window.location.pathname}#${slug}`;
      document.head.appendChild(defaultLink);
    }
  }, [post, slug]);

  if (loading) {
    return (
      <div className="wrap" style={{ minHeight: '60vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p>Loading post...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="wrap" style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
        <p style={{ color: 'var(--ash)' }}>Post not found: {slug}</p>
        <button className="btn btn-primary" onClick={onBack}>← Back to blog</button>
      </div>
    );
  }

  if (!post) return null;

  return (
    <article className="blog-post-view">
      <div className="wrap">
        <button className="back-link" onClick={onBack}>
          ← Blog
        </button>

        <header className="post-header reveal">
          <div className="post-meta-top">
            {post.date && (
              <time dateTime={post.date}>
                {new Date(post.date).toLocaleDateString('en-US', {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                })}
              </time>
            )}
            {post.author && <span className="post-author">by {post.author}</span>}
            {post.language && (
              <span className="post-language" title={`Language: ${LANGUAGE_LABELS[post.language]}`}>
                {LANGUAGE_LABELS[post.language]}
              </span>
            )}
          </div>
          <h1 className="post-title-large">{post.title}</h1>
          {post.excerpt && <p className="post-excerpt-large" style={{ color: 'var(--fog)' }}>{post.excerpt}</p>}

          {(post.tags || post.language) && (
            <div className="post-metadata">
              {post.tags && post.tags.length > 0 && (
                <div className="metadata-item">
                  <span className="metadata-label">Tags:</span>
                  <div className="metadata-tags">
                    {post.tags.map(tag => (
                      <span key={tag} className="post-tag">{tag}</span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}
        </header>

        <div className="post-content" dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </article>
  );
}

window.BlogPost = BlogPost;