import { sql } from '@/lib/db'
export const dynamic = "force-dynamic"
import { notFound } from 'next/navigation'
import Link from 'next/link'
import Image from 'next/image'
import AdminButton from '@/components/AdminButton'

async function getArticleWithTags(slug: string) {
  try {
    const { rows } = await sql`
      SELECT 
        a.*,
        c.name as category_name,
        c.name_burmese as category_name_burmese,
        c.slug as category_slug,
        COALESCE(
          array_agg(t.name_burmese) FILTER (WHERE t.id IS NOT NULL),
          ARRAY[]::VARCHAR[]
        ) as tags_burmese,
        COALESCE(
          array_agg(t.slug) FILTER (WHERE t.id IS NOT NULL),
          ARRAY[]::VARCHAR[]
        ) as tag_slugs
      FROM articles a
      JOIN categories c ON a.category_id = c.id
      LEFT JOIN article_tags at ON a.id = at.article_id
      LEFT JOIN tags t ON at.tag_id = t.id
      WHERE a.slug = ${slug} AND a.status = 'published'
      GROUP BY a.id, c.id
    `
    
    if (rows.length === 0) return null
    
    // Increment view count
    await sql`SELECT increment_view_count(${slug})`
    
    return rows[0]
  } catch (error) {
    console.error('Error fetching article:', error)
    return null
  }
}

async function getRelatedArticles(articleId: number) {
  try {
    const { rows } = await sql`SELECT * FROM get_related_articles(${articleId}, 6)`
    return rows
  } catch (error) {
    return []
  }
}

export default async function ImprovedArticlePage({ params }: { params: { slug: string } }) {
  const article = await getArticleWithTags(params.slug)
  
  if (!article) {
    notFound()
  }
  
  const relatedArticles = await getRelatedArticles(article.id)
  const publishedDate = new Date(article.published_at).toLocaleDateString('my-MM', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })

  return (
    <div className="min-h-screen bg-white">
      {/* Hero Cover Image */}
      {article.featured_image && (
        <div className="relative h-[70vh] w-full overflow-hidden">
          <Image
            src={article.featured_image}
            alt={article.title_burmese}
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
          
          <div className="absolute inset-0 flex items-end">
            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 w-full">
              {/* Category */}
              <Link
                href={`/category/${article.category_slug}`}
                className="inline-block mb-4 px-4 py-2 bg-primary rounded-full text-white font-semibold text-sm hover:bg-primary-dark transition-colors"
              >
                {article.category_name_burmese}
              </Link>
              
              {/* Title */}
              <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 font-burmese leading-tight">
                {article.title_burmese}
              </h1>
              
              {/* Meta */}
              <div className="flex flex-wrap items-center gap-4 text-white/90">
                <span className="font-burmese">{publishedDate}</span>
                <span>•</span>
                <span className="font-burmese">{article.reading_time} မိနစ်</span>
                <span>•</span>
                <span>{article.view_count} views</span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Article Content */}
      <article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Tags */}
        {article.tags_burmese && article.tags_burmese.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-8 pb-8 border-b">
            {article.tags_burmese.map((tag: string, idx: number) => (
              <Link
                key={idx}
                href={`/tag/${article.tag_slugs[idx]}`}
                className="tag tag-burmese"
              >
                #{tag}
              </Link>
            ))}
          </div>
        )}

        {/* Article Body */}
        <div className="article-content">
          <div dangerouslySetInnerHTML={{ __html: formatContent(article.content_burmese) }} />
          
          {/* Additional Images Gallery */}
          {article.images && article.images.length > 1 && (
            <div className="my-12">
              <h3 className="text-2xl font-bold mb-6 font-burmese">ဓာတ်ပုံများ</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {article.images.slice(1).map((img: string, idx: number) => (
                  <div key={idx} className="relative h-56 rounded-xl overflow-hidden image-zoom">
                    <Image
                      src={img}
                      alt={`${article.title_burmese} - ${idx + 2}`}
                      fill
                      className="object-cover"
                    />
                  </div>
                ))}
              </div>
            </div>
          )}
          
          {/* Videos */}
          {article.videos && article.videos.length > 0 && (
            <div className="my-12">
              <h3 className="text-2xl font-bold mb-6 font-burmese">ဗီဒီယိုများ</h3>
              <div className="space-y-6">
                {article.videos.map((video: string, idx: number) => (
                  <div key={idx} className="relative aspect-video rounded-xl overflow-hidden bg-gray-900 shadow-xl">
                    {renderVideo(video)}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Source Attribution */}
        {article.source_articles && article.source_articles.length > 0 && (
          <div className="mt-16 p-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl shadow-lg">
            <h3 className="text-2xl font-bold text-gray-900 mb-4 font-burmese flex items-center">
              <svg className="w-7 h-7 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              မူရင်းသတင်းရင်းမြစ်များ
            </h3>
            <p className="text-sm text-gray-700 mb-6 font-burmese leading-relaxed">
              ဤဆောင်းပါးကို အောက်ပါမူရင်းသတင်းများမှ စုစည်း၍ မြန်မာဘာသာသို့ ပြန်ဆိုထားခြင်း ဖြစ်ပါသည်။ အားလုံးသော အကြွေးအရ မူရင်းစာရေးသူများနှင့် ထုတ်ပြန်သူများကို သက်ဆိုင်ပါသည်။
            </p>
            <div className="space-y-4">
              {article.source_articles.map((source: any, index: number) => (
                <div key={index} className="bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                  <div className="flex items-start gap-4">
                    <span className="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">
                      {index + 1}
                    </span>
                    <div className="flex-1 min-w-0">
                      <a 
                        href={source.url} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-primary hover:text-primary-dark font-medium break-words hover:underline"
                      >
                        {source.title}
                      </a>
                      {source.author && source.author !== 'Unknown' && (
                        <p className="text-sm text-gray-600 mt-2">
                          <span className="font-burmese font-semibold">စာရေးသူ:</span> {source.author}
                        </p>
                      )}
                    </div>
                    <a
                      href={source.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex-shrink-0 text-primary hover:text-primary-dark"
                      title="Open source"
                    >
                      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                      </svg>
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Share Section */}
        <div className="mt-12 py-8 border-y border-gray-200">
          <div className="flex items-center justify-between">
            <p className="font-burmese text-gray-700 font-semibold">မျှဝေပါ:</p>
            <div className="flex gap-3">
              <button className="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors">
                Facebook
              </button>
              <button className="px-4 py-2 bg-sky-500 text-white rounded-full hover:bg-sky-600 transition-colors">
                Twitter
              </button>
              <button className="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition-colors">
                WhatsApp
              </button>
            </div>
          </div>
        </div>
      </article>

      {/* Related Articles */}
      {relatedArticles.length > 0 && (
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 bg-gray-50">
          <h2 className="text-3xl font-bold text-gray-900 mb-10 font-burmese">
            ဆက်စပ်ဆောင်းပါးများ
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {relatedArticles.map((related: any) => (
              <Link
                key={related.id}
                href={`/article/${related.slug}`}
                className="card card-hover"
              >
                {related.featured_image && (
                  <div className="relative h-48 w-full image-zoom">
                    <Image
                      src={related.featured_image}
                      alt={related.title_burmese}
                      fill
                      className="object-cover"
                    />
                  </div>
                )}
                <div className="p-6">
                  <h3 className="font-bold text-gray-900 font-burmese line-clamp-2 hover:text-primary transition-colors text-lg mb-3">
                    {related.title_burmese}
                  </h3>
                  <p className="text-sm text-gray-600 font-burmese line-clamp-2">
                    {related.excerpt_burmese}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        </section>
      )}

      {/* Admin Button (hidden, press Alt+Shift+A to show) */}
      <AdminButton articleId={article.id} articleTitle={article.title_burmese} />
    </div>
  )
}

function formatContent(content: string): string {
  let formatted = content
    .replace(/\n\n/g, '</p><p>')
    .replace(/## (.*?)\n/g, '<h2>$1</h2>')
    .replace(/### (.*?)\n/g, '<h3>$1</h3>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
  
  return `<p>${formatted}</p>`
}

function renderVideo(videoUrl: string) {
  let videoId = null
  
  if (videoUrl.includes('youtube.com/watch')) {
    const match = videoUrl.match(/v=([^&]+)/)
    videoId = match ? match[1] : null
  } else if (videoUrl.includes('youtu.be/')) {
    const match = videoUrl.match(/youtu\.be\/([^?]+)/)
    videoId = match ? match[1] : null
  } else if (videoUrl.includes('youtube.com/embed/')) {
    const match = videoUrl.match(/embed\/([^?]+)/)
    videoId = match ? match[1] : null
  }
  
  if (videoId) {
    return (
      <iframe
        src={`https://www.youtube.com/embed/${videoId}`}
        className="w-full h-full"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    )
  }
  
  return (
    <iframe
      src={videoUrl}
      className="w-full h-full"
      allowFullScreen
    />
  )
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const article = await getArticleWithTags(params.slug)
  
  if (!article) {
    return {
      title: 'Article Not Found',
    }
  }
  
  return {
    title: `${article.title_burmese} - Burmddit`,
    description: article.excerpt_burmese,
    openGraph: {
      title: article.title_burmese,
      description: article.excerpt_burmese,
      images: article.featured_image ? [article.featured_image] : [],
    },
  }
}