import { sql } from '@/lib/db'
import ArticleCard from '@/components/ArticleCard'

export const dynamic = 'force-dynamic'
import TrendingSection from '@/components/TrendingSection'
import CategoryNav from '@/components/CategoryNav'

async function getRecentArticles() {
  try {
    const { rows } = await sql`
      SELECT * FROM published_articles
      ORDER BY published_at DESC
      LIMIT 20
    `
    return rows
  } catch (error) {
    console.error('Error fetching articles:', error)
    return []
  }
}

async function getTrendingArticles() {
  try {
    const { rows } = await sql`SELECT * FROM get_trending_articles(10)`
    return rows
  } catch (error) {
    console.error('Error fetching trending:', error)
    return []
  }
}

export default async function Home() {
  const [articles, trending] = await Promise.all([
    getRecentArticles(),
    getTrendingArticles()
  ])

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Hero Section */}
      <section className="mb-12 text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-4 font-burmese">
          Burmddit
        </h1>
        <p className="text-xl text-gray-600 font-burmese">
          AI သတင်းများ၊ သင်ခန်းစာများနှင့် အကြံပြုချက်များ
        </p>
        <p className="text-lg text-gray-500 mt-2">
          Daily AI News, Tutorials & Tips in Burmese
        </p>
      </section>

      {/* Category Navigation */}
      <CategoryNav />

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
        {/* Main Articles (Left 2/3) */}
        <div className="lg:col-span-2">
          <h2 className="text-2xl font-bold text-gray-900 mb-6 font-burmese">
            နောက်ဆုံးရ သတင်းများ
          </h2>
          
          {articles.length === 0 ? (
            <div className="text-center py-12 bg-white rounded-lg shadow">
              <p className="text-gray-500 font-burmese">
                သတင်းမရှိသေးပါ။ မကြာမီ ထပ်စစ်ကြည့်ပါ။
              </p>
            </div>
          ) : (
            <div className="space-y-6">
              {articles.map((article) => (
                <ArticleCard key={article.id} article={article} />
              ))}
            </div>
          )}
        </div>

        {/* Sidebar (Right 1/3) */}
        <aside className="space-y-8">
          {/* Trending Articles */}
          <TrendingSection articles={trending} />

          {/* Categories Card */}
          <div className="bg-white rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-gray-900 mb-4 font-burmese">
              အမျိုးအစားများ
            </h3>
            <ul className="space-y-2">
              <li>
                <a href="/category/ai-news" className="text-primary-600 hover:text-primary-700 font-burmese">
                  AI သတင်းများ
                </a>
              </li>
              <li>
                <a href="/category/tutorials" className="text-primary-600 hover:text-primary-700 font-burmese">
                  သင်ခန်းစာများ
                </a>
              </li>
              <li>
                <a href="/category/tips-tricks" className="text-primary-600 hover:text-primary-700 font-burmese">
                  အကြံပြုချက်များ
                </a>
              </li>
              <li>
                <a href="/category/upcoming" className="text-primary-600 hover:text-primary-700 font-burmese">
                  လာမည့်အရာများ
                </a>
              </li>
            </ul>
          </div>

          {/* About Card */}
          <div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg shadow p-6">
            <h3 className="text-lg font-bold text-gray-900 mb-3 font-burmese">
              Burmddit အကြောင်း
            </h3>
            <p className="text-gray-700 text-sm leading-relaxed font-burmese">
              Burmddit သည် AI နှင့် ပတ်သက်သော နောက်ဆုံးရ သတင်းများ၊ သင်ခန်းစာများနှင့် အကြံပြုချက်များကို မြန်မာဘာသာဖြင့် နေ့စဉ် ထုတ်ပြန်ပေးသော ပလက်ဖောင်း ဖြစ်ပါသည်။
            </p>
          </div>
        </aside>
      </div>
    </div>
  )
}