import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
import { Reveal } from '../components/Reveal';
import { ButtonLink } from '../components/Button';
import { ArticleCard } from '../components/ArticleCard';
import { Newsletter } from '../components/home/Newsletter';
import { ARTICLES } from '../data/site';

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

  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 related = ARTICLES.filter((a) => a.slug !== article.slug).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>
          {article.body.map((paragraph, i) =>
          <Reveal key={paragraph} 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 />
    </>);

}