// ArticleView.jsx — vista de lectura de un artículo
function ArticleView({ article, onBack, onOpen, related }) {
  React.useEffect(() => { window.scrollTo(0, 0); }, [article?.id]);
  const [copied, setCopied] = React.useState(false);

  const copyLink = () => {
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  if (!article) return null;

  return (
    <>
      <article className="im-article">
        <button onClick={onBack} className="im-article-back">← Volver al blog</button>

        <header className="im-article-head">
          <span className="im-eyebrow">{article.category} · {article.readTime}</span>
          <h1 className="im-article-title">{article.title}</h1>
          <div className="im-article-byline">
            <div className="im-avatar">IM</div>
            <div>
              <div className="im-article-author">Isa Muñoz</div>
              <div className="im-article-date">{article.date}</div>
            </div>
            <button className="im-article-share" onClick={copyLink}>
              {copied ? '✓ Enlace copiado' : 'Compartir →'}
            </button>
          </div>
        </header>

        {article.coverUrl && (
          <div className="im-article-cover">
            <img src={article.coverUrl} alt={article.title} loading="lazy" />
          </div>
        )}

        {article.client && (
          <aside className="im-article-fact">
            <div><span className="im-fact-lbl">Cliente</span><span className="im-fact-val">{article.client}</span></div>
            <div><span className="im-fact-lbl">Sector</span><span className="im-fact-val">{article.sector}</span></div>
            <div><span className="im-fact-lbl">Stack</span><span className="im-fact-val">{article.stack?.join(' · ')}</span></div>
          </aside>
        )}

        {article.excerpt && <p className="im-lead">{article.excerpt}</p>}

        <EditorJSRenderer data={article.body} />
      </article>

      {related && related.length > 0 && (
        <section className="im-related">
          <div className="im-related-head">
            <h2 className="im-h2">Sigue leyendo</h2>
          </div>
          <div className="im-related-grid">
            {related.slice(0, 3).map((a) => (
              <ArticleCard key={a.id} article={a} onOpen={onOpen} density="compact" />
            ))}
          </div>
        </section>
      )}
    </>
  );
}

window.ArticleView = ArticleView;