import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { SITE_DATA } from '@/data/site-data';
import { ArrowLeft, Calendar, Clock, UserPen } from 'lucide-react';

interface Props {
  params: Promise<{ slug: string }>;
}

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const article = SITE_DATA.articles.find(a => a.slug === slug);

  if (!article) {
    return {
      title: 'Yazı Bulunamadı | Baybars Bilim'
    };
  }

  return {
    title: `${article.title} | Baybars Bilim`,
    description: article.excerpt,
    alternates: {
      canonical: `/yazilar/${article.slug}`
    },
    openGraph: {
      title: article.title,
      description: article.excerpt,
      type: 'article',
      publishedTime: article.date,
      authors: ['https://baybarsbilim.com.tr'],
      tags: article.tags
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.excerpt
    }
  };
}

export default async function BlogPostPage({ params }: Props) {
  const { slug } = await params;
  const article = SITE_DATA.articles.find(a => a.slug === slug);

  if (!article) {
    notFound();
  }

  const articleJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: article.title,
    description: article.excerpt,
    datePublished: article.date,
    author: {
      '@type': 'Person',
      name: 'Baybars Bilim',
      url: 'https://baybarsbilim.com.tr'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Baybars Bilim',
      logo: {
        '@type': 'ImageObject',
        url: 'https://baybarsbilim.com.tr/favicon.svg'
      }
    },
    keywords: article.tags.join(', ')
  };

  const paragraphs = article.content.split('\n\n');

  return (
    <main className="relative z-10 py-16">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
      />

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Back Link */}
        <div className="mb-8">
          <Link
            href="/yazilar"
            className="inline-flex items-center gap-2 text-xs font-mono text-cyan-400 hover:text-cyan-300 transition-colors"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            <span>Tüm Yazılara Dön</span>
          </Link>
        </div>

        {/* Article Header */}
        <header className="space-y-6 pb-8 border-b border-slate-800">
          <div className="flex flex-wrap items-center gap-4 text-xs font-mono text-slate-400">
            <span className="flex items-center gap-1.5 text-cyan-400">
              <Calendar className="w-3.5 h-3.5" /> {article.date}
            </span>
            <span>•</span>
            <span className="flex items-center gap-1.5">
              <Clock className="w-3.5 h-3.5" /> {article.readTime}
            </span>
            <span>•</span>
            <span className="flex items-center gap-1.5">
              <UserPen className="w-3.5 h-3.5" /> Baybars Bilim
            </span>
          </div>

          <h1 className="text-3xl sm:text-5xl font-extrabold text-white leading-tight">
            {article.title}
          </h1>

          <p className="text-lg text-slate-300 leading-relaxed italic border-l-4 border-cyan-500 pl-4 py-1">
            {article.excerpt}
          </p>

          <div className="flex flex-wrap gap-2 pt-2">
            {article.tags.map(t => (
              <span
                key={t}
                className="text-xs font-mono px-3 py-1 rounded-full bg-slate-800/80 border border-slate-700/60 text-cyan-400"
              >
                #{t}
              </span>
            ))}
          </div>
        </header>

        {/* Article Body */}
        <article className="py-10 text-slate-300 leading-relaxed text-base space-y-6">
          {paragraphs.map((p, idx) => {
            if (p.startsWith('### ')) {
              return (
                <h3 key={idx} className="text-2xl font-bold text-white pt-6 pb-2 border-b border-slate-800/60 font-mono">
                  {p.replace('### ', '')}
                </h3>
              );
            }
            if (p.startsWith('## ')) {
              return (
                <h2 key={idx} className="text-3xl font-extrabold text-white pt-8 pb-3 border-b border-slate-800 font-mono">
                  {p.replace('## ', '')}
                </h2>
              );
            }
            return (
              <p key={idx} className="text-slate-300 text-base leading-relaxed">
                {p}
              </p>
            );
          })}
        </article>

        {/* Author Bio Box */}
        <div className="mt-12 p-8 rounded-2xl glass-card border border-slate-800 flex flex-col sm:flex-row items-center sm:items-start gap-6">
          <div className="w-16 h-16 rounded-2xl bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center font-mono font-bold text-xl text-cyan-400 shrink-0">
            BB
          </div>
          <div className="space-y-2 text-center sm:text-left">
            <h3 className="text-lg font-bold text-white">{SITE_DATA.personal.name}</h3>
            <p className="text-xs font-mono text-cyan-400">{SITE_DATA.personal.title}</p>
            <p className="text-slate-400 text-xs leading-relaxed max-w-xl">
              {SITE_DATA.personal.shortBio}
            </p>
          </div>
        </div>

      </div>
    </main>
  );
}