import { mockDb } from '@/lib/mockDb'
import { Link } from '@/i18n/routing'
import { notFound } from 'next/navigation'
import { Calendar, Tag, ArrowLeft } from 'lucide-react'
import ListingCard from '@/components/ListingCard'
import { renderMarkdownToHtml } from '@/lib/markdown'
import Image from 'next/image'
import type { Metadata } from 'next'

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale, slug } = await params
  const post = await mockDb.getBlogPostBySlug(slug)
  if (!post) return {}

  const title = locale === 'en' ? post.titleEn : locale === 'ru' ? post.titleRu : post.titleTr
  const content = locale === 'en' ? post.contentEn : locale === 'ru' ? post.contentRu : post.contentTr
  const description = content.substring(0, 150)
  const fullTitle = `${title} — Marmaris Local`

  return {
    title: fullTitle,
    description,
    openGraph: {
      title: fullTitle,
      description,
      type: 'article',
      ...(post.coverImage ? { images: [{ url: post.coverImage }] } : {}),
    },
    twitter: {
      card: 'summary_large_image',
      title: fullTitle,
      description,
    },
  }
}

export default async function BlogPostDetailPage({ params }: Props) {
  const { locale, slug } = await params
  const post = await mockDb.getBlogPostBySlug(slug)

  if (!post || post.deletedAt) {
    notFound()
  }

  const title = locale === 'en' ? post.titleEn : locale === 'ru' ? post.titleRu : post.titleTr
  const content = locale === 'en' ? post.contentEn : locale === 'ru' ? post.contentRu : post.contentTr
  const htmlContent = renderMarkdownToHtml(content)

  // Fetch associated listings
  const relatedListings: any[] = []
  if (post.relatedListingIds && post.relatedListingIds.length > 0) {
    for (const listingId of post.relatedListingIds) {
      const listing = await mockDb.getListingById(listingId)
      if (listing) {
        relatedListings.push(listing)
      }
    }
  }

  // schema.org Structured Data
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    'headline': title,
    'image': post.coverImage || 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200&auto=format&fit=crop&q=80',
    'datePublished': post.publishedAt || post.createdAt,
    'dateModified': post.updatedAt,
    'author': {
      '@type': 'Organization',
      'name': 'Marmaris Local',
      'url': 'https://marmarislocal.com'
    },
    'publisher': {
      '@type': 'Organization',
      'name': 'Marmaris Local',
      'logo': {
        '@type': 'ImageObject',
        'url': 'https://marmarislocal.com/logo.png'
      }
    },
    'description': content.substring(0, 150)
  }

  return (
    <>
      {/* Schema.org Article Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <div className="bg-stone min-h-screen py-10 px-4 sm:px-6 lg:px-8 font-sans">
        <div className="max-w-3xl mx-auto space-y-8">
          
          {/* Back Link */}
          <Link
            href="/blog"
            className="inline-flex items-center gap-1.5 px-4 py-2 border border-pine/10 rounded-xl text-xs font-mono font-bold text-pine hover:bg-paper transition"
          >
            <ArrowLeft className="w-3.5 h-3.5" />
            GERİ DÖN
          </Link>

          {/* Article Box */}
          <article className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm">
            {post.coverImage && (
              <div className="h-[350px] relative overflow-hidden bg-stone border-b border-pine/5">
                <Image
                  src={post.coverImage}
                  alt={title}
                  fill
                  sizes="(max-width: 768px) 100vw, 768px"
                  className="object-cover"
                  priority
                />
              </div>
            )}

            <div className="p-6 sm:p-10 space-y-6">
              
              {/* Meta */}
              <div className="flex flex-wrap items-center gap-4 text-xs text-shutter font-mono border-b border-dashed border-pine/8 pb-4">
                <span className="flex items-center gap-1.5">
                  <Calendar className="w-4 h-4" />
                  {post.publishedAt ? new Date(post.publishedAt).toLocaleDateString(locale === 'tr' ? 'tr-TR' : locale === 'ru' ? 'ru-RU' : 'en-US') : ''}
                </span>

                {post.tags.map((tag) => (
                  <span key={tag} className="flex items-center gap-1 bg-stone/50 px-2 py-0.5 rounded-md border border-pine/5">
                    <Tag className="w-3.5 h-3.5" />
                    {tag}
                  </span>
                ))}
              </div>

              {/* Title */}
              <h1 className="text-2xl sm:text-3xl font-heading font-extrabold text-pine lowercase leading-tight">
                {title}
              </h1>

              {/* Markdown Content */}
              <div 
                className="markdown-content space-y-4"
                dangerouslySetInnerHTML={{ __html: htmlContent }}
              />

            </div>
          </article>

          {/* Related Listings Section (Internal Linking) */}
          {relatedListings.length > 0 && (
            <div className="space-y-6 pt-6">
              <h3 className="text-xl font-heading font-extrabold text-pine lowercase border-b border-dashed border-pine/8 pb-3">
                yazıda geçen mekanlar
              </h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {relatedListings.map((listing) => (
                  <ListingCard key={listing.id} listing={listing} />
                ))}
              </div>
            </div>
          )}

        </div>
      </div>
    </>
  )
}