import Link from 'next/link';
import { notFound } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import Header from '../../../components/Header.jsx';
import Footer from '../../../components/Footer.jsx';
import Reveal from '../../../components/Reveal.jsx';
import { serverApi } from '../../../lib/serverApi.js';
import { ORGANIZATION_ID } from '../../../lib/schema.js';

function formatDate(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
}

export async function generateMetadata({ params }) {
  const post = await serverApi.getBlogPost(params.slug);
  if (!post) return { title: 'Статья не найдена' };
  return {
    title: post.title,
    description: post.excerpt || undefined,
    alternates: { canonical: `/blog/${params.slug}` },
  };
}

export default async function BlogPostPage({ params }) {
  const post = await serverApi.getBlogPost(params.slug);
  if (!post) notFound();

  const articleSchema = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    ...(post.excerpt ? { description: post.excerpt } : {}),
    ...(post.published_at ? { datePublished: post.published_at } : {}),
    author: { '@id': ORGANIZATION_ID },
  };

  return (
    <div>
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }} />

      <Header />
      <article className="max-w-2xl mx-auto px-5 sm:px-8 py-20 min-h-[60vh]">
        <Link href="/blog" className="text-sm text-emerald-500 font-medium inline-flex items-center gap-1 mb-8">
          <ArrowLeft className="h-3.5 w-3.5" /> Ко всем статьям
        </Link>

        <Reveal>
          <p className="text-xs text-slate-400 dark:text-slate-500 mb-2 font-mono">{formatDate(post.published_at)}</p>
          <h1 className="text-3xl font-bold mb-6 font-display">{post.title}</h1>
          <div
            className="prose prose-slate dark:prose-invert max-w-none prose-a:text-emerald-500"
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: post.content || '' }}
          />
        </Reveal>
      </article>
      <Footer />
    </div>
  );
}