import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { Clock, Eye } from "lucide-react";

import { getArticleBySlug, getRelatedArticles, getMostRead, DEMO_ARTICLES } from "@/lib/demo-data";
import { CATEGORIES, site } from "@/config/site";
import { timeAgoAr } from "@/utils/time";
import { buildNewsArticleSchema, buildBreadcrumbSchema } from "@/lib/seo/article-schema";

import { Breadcrumbs } from "@/components/article/breadcrumbs";
import { SourceAttribution } from "@/components/article/source-attribution";
import { CoverageList } from "@/components/article/coverage-list";
import { TagList } from "@/components/article/tag-list";
import { ShareButtons } from "@/components/article/share-buttons";
import { ArticleCard } from "@/components/article/article-card";
import { ArticleListItem } from "@/components/article/article-list-item";

interface PageProps {
  params: { slug: string };
}

export function generateStaticParams() {
  return DEMO_ARTICLES.map((a) => ({ slug: a.slug }));
}

export function generateMetadata({ params }: PageProps): Metadata {
  const article = getArticleBySlug(params.slug);
  if (!article) return {};

  const url = `${site.url}/news/${article.slug}`;

  return {
    title: article.title,
    description: article.summary,
    alternates: { canonical: url },
    openGraph: {
      type: "article",
      title: article.title,
      description: article.summary,
      url,
      images: article.imageUrl ? [{ url: article.imageUrl }] : undefined,
      publishedTime: article.publishedAt,
      siteName: site.name,
    },
    twitter: {
      card: "summary_large_image",
      title: article.title,
      description: article.summary,
    },
  };
}

export default function ArticlePage({ params }: PageProps) {
  const article = getArticleBySlug(params.slug);
  if (!article) notFound();

  const categoryLabel = CATEGORIES.find((c) => c.slug === article.category)?.nameAr ?? article.category;
  const related = getRelatedArticles(article);
  const mostRead = getMostRead();
  const url = `${site.url}/news/${article.slug}`;

  return (
    <div className="mx-auto max-w-6xl px-4 py-8">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(buildNewsArticleSchema(article)) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(buildBreadcrumbSchema(article)) }}
      />

      <div className="mb-4 rounded-card border border-dashed border-ink-200 bg-ink-50 p-3 text-xs text-ink-400 dark:border-ink-800 dark:bg-ink-800/40">
        وضع التطوير: هذا المقال بيانات تجريبية. سيتم استبداله بمقالات حقيقية بعد ربط محرك الجلب والذكاء الاصطناعي.
      </div>

      <div className="grid grid-cols-1 gap-10 lg:grid-cols-[2fr_1fr]">
        <article>
          <Breadcrumbs
            items={[
              { label: "الرئيسية", href: "/" },
              { label: categoryLabel, href: `/category/${article.category}` },
              { label: article.title },
            ]}
          />

          <Link
            href={`/category/${article.category}`}
            className="mt-4 inline-block w-fit rounded bg-brand/10 px-2 py-0.5 text-xs font-medium text-brand"
          >
            {categoryLabel}
          </Link>

          <h1 className="font-display mt-3 text-2xl font-bold leading-tight sm:text-3xl">{article.title}</h1>

          <p className="mt-4 text-lg leading-relaxed text-ink-600 dark:text-ink-200">{article.summary}</p>

          <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 border-y border-ink-100 py-3 text-xs text-ink-400 dark:border-ink-800">
            <span>بقلم: فريق تحرير خبر الآن</span>
            <span className="flex items-center gap-1">
              <Clock size={12} /> {timeAgoAr(article.publishedAt)}
            </span>
            <span className="flex items-center gap-1">
              <Eye size={12} /> {article.views.toLocaleString("ar-EG")} مشاهدة
            </span>
            <span>{article.readingTimeMinutes} دقائق قراءة</span>
          </div>

          {article.imageUrl && (
            <div className="relative mt-6 aspect-video overflow-hidden rounded-card bg-ink-100 dark:bg-ink-800">
              <Image src={article.imageUrl} alt={article.title} fill className="object-cover" />
            </div>
          )}

          <div className="mt-6">
            <SourceAttribution sourceName={article.sourceName} sourceUrl={article.sourceUrl ?? "#"} />
          </div>

          <div className="mt-6">
            <ShareButtons url={url} title={article.title} />
          </div>

          <div className="mt-6">
            <TagList tags={article.tags} />
          </div>

          {article.relatedTopics.length > 0 && (
            <div className="mt-4 text-sm text-ink-400">
              مواضيع ذات صلة: {article.relatedTopics.join("، ")}
            </div>
          )}

          <div className="mt-8">
            <CoverageList coverage={article.coverage} />
          </div>

          {related.length > 0 && (
            <section className="mt-10">
              <h2 className="font-display mb-4 border-b-2 border-brand pb-2 text-xl font-bold w-fit">
                مقالات ذات صلة
              </h2>
              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
                {related.map((a) => (
                  <ArticleCard key={a.slug} article={a} />
                ))}
              </div>
            </section>
          )}
        </article>

        <aside>
          <h2 className="font-display mb-2 border-b-2 border-brand pb-2 text-lg font-bold w-fit">الأكثر قراءة</h2>
          <ul className="divide-y divide-ink-100 dark:divide-ink-800">
            {mostRead.map((a, i) => (
              <ArticleListItem key={a.slug} article={a} index={i} />
            ))}
          </ul>
        </aside>
      </div>
    </div>
  );
}