import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
import { renderToHTMLString } from '@tiptap/static-renderer';
import { Reveal } from '../components/Reveal';
import { ButtonLink } from '../components/Button';
import { ArticleCard } from '../components/ArticleCard';
import { Newsletter } from '../components/home/Newsletter';
import { useSite } from '../api';
import { applySeo } from '../seo';
import { useEffect } from 'react';
import { ARTICLE_EXTENSIONS } from '../components/admin/ArticleEditor';
import type { Article } from '../data/site';

/** بدنه مقاله را به HTML تبدیل می‌کند — سند TipTap جدید یا پاراگراف‌های قدیمی */
function renderBody(article: Article): { html: string | null; legacy: string[] } {
  const body = article.body as unknown;
  if (Array.isArray(body)) return { html: null, legacy: body };
  if (body && typeof body === 'object' && (body as { type?: string }).type === 'doc') {
    try {
      return {
        html: renderToHTMLString({ extensions: ARTICLE_EXTENSIONS, content: body as never }),
        legacy: [],
      };
    } catch {
      return { html: null, legacy: [] };
    }
  }
  return { html: null, legacy: [] };
}

export function ArticleDetail() {
  const { slug } = useParams<{slug: string;}>();
  const { articles, brand } = useSite();
  const article = articles.find((a) => a.slug === slug);

  // عنوان تب، توضیح متا، OG و JSON-LD از خود مقاله
  useEffect(() => {
    if (!article) return;
    applySeo({
      title: `${article.title} | ${brand}`,
      description: article.excerpt,
      path: `/blog/${article.slug}`,
      image: article.image,
      type: 'article',
      jsonLd: {
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.title,
        description: article.excerpt,
        image: article.image ? new URL(article.image, window.location.origin).href : undefined,
        inLanguage: 'fa',
        author: { '@type': 'Organization', name: brand },
        publisher: { '@type': 'Organization', name: brand },
        mainEntityOfPage: new URL(`/blog/${article.slug}`, window.location.origin).href,
      },
    });
  }, [article?.id]);

  if (!article) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
        <h1 className="text-section font-bold text-ivory">این مقاله پیدا نشد</h1>
        <p className="mt-4 text-sm font-light text-ivory/60">فهرست کامل مقالات وبلاگ را ببینید.</p>
        <ButtonLink to="/blog" variant="copper" className="mt-8">
          بازگشت به وبلاگ
          <ArrowLeftIcon className="h-4 w-4" />
        </ButtonLink>
      </section>);

  }

  const { html, legacy } = renderBody(article);
  const related = articles.filter((a) => a.slug !== article.slug && a.status !== 'draft').slice(0, 3);

  return (
    <>
      <section className="relative flex h-[56vh] min-h-[400px] items-end overflow-hidden">
        <img src={article.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
        <div className="absolute inset-0 bg-ink/75" aria-hidden="true" />
        <div
          className="absolute inset-0"
          style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
          aria-hidden="true" />

        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
            <Link to="/" className="transition-colors hover:text-copper">
              صفحه اصلی
            </Link>
            <ChevronLeftIcon className="h-3.5 w-3.5" />
            <Link to="/blog" className="transition-colors hover:text-copper">
              وبلاگ
            </Link>
            <ChevronLeftIcon className="h-3.5 w-3.5" />
            <span className="text-copper">{article.category}</span>
          </nav>
          <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{article.title}</h1>
          <div className="mt-6 flex items-center gap-5 text-xs font-light text-ivory/60">
            <span>{article.date}</span>
            <span className="flex items-center gap-1.5">
              <ClockIcon className="h-3.5 w-3.5" />
              {article.read}
            </span>
          </div>
        </div>
      </section>

      <article className="bg-ink py-20 lg:py-28">
        <div className="mx-auto max-w-3xl px-6">
          <Reveal>
            <p className="border-r-2 border-copper pr-6 text-lg font-light leading-10 text-ivory/80">
              {article.excerpt}
            </p>
          </Reveal>
          {html ? (
            <Reveal delay={0.05}>
              <div
                className="article-body mt-4 text-base font-light text-ivory/70"
                dangerouslySetInnerHTML={{ __html: html }} />
            </Reveal>
          ) : (
            legacy.map((paragraph, i) =>
            <Reveal key={i} delay={0.03 * i}>
                <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
              </Reveal>
            )
          )}
        </div>
      </article>

      <section className="bg-char py-20 lg:py-28" aria-label="مقالات مرتبط">
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <h2 className="text-section font-bold text-ivory">مقالات مرتبط</h2>
          <div className="mt-6 h-px w-24 bg-copper/70" />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {related.map((item, i) =>
            <Reveal key={item.slug} delay={0.06 * i} className="h-full">
                <ArticleCard article={item} />
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <Newsletter />
    </>);

}