import { Suspense } from 'react'
import { unstable_cache } from 'next/cache'
import Link from 'next/link'
import { prisma } from '@/lib/prisma'
import { PropertyCard } from '@/components/property/property-card'
import { ErrorBoundary } from '@/components/error/error-boundary'
import { PropertiesGridSkeleton } from '@/components/ui/skeleton'
import { ArrowLeft, Sparkles } from 'lucide-react'

const getSettings = unstable_cache(
  async () => {
    try {
      const rows = await prisma.siteSetting.findMany({ where: { key: { in: ['featuredProperties'] } } })
      return rows[0]?.value as any || {}
    } catch { return {} }
  },
  ['featured-settings'],
  { revalidate: 3600 }
)

const getFeaturedProperties = unstable_cache(
  async () => {
    try {
      return await prisma.property.findMany({
        where: { isFeatured: true, status: 'AVAILABLE' },
        take: 8,
        orderBy: { createdAt: 'desc' },
        include: { agent: { select: { name: true, image: true } } },
      })
    } catch {
      return []
    }
  },
  ['featured-properties'],
  { revalidate: 3600, tags: ['featured-properties'] }
)

async function FeaturedPropertiesInner() {
  const properties = await getFeaturedProperties()

  if (properties.length === 0) {
    return (
      <div className="text-center py-16 text-gray-400">
        <p className="text-lg">لا توجد عقارات مميزة حالياً</p>
      </div>
    )
  }

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6">
        {properties.map(property => (
          <PropertyCard key={property.id} property={property as any} />
        ))}
      </div>
      <div className="text-center mt-12">
        <Link
          href="/properties"
          className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium transition-all duration-200 group"
        >
          عرض جميع العقارات
          <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" />
        </Link>
      </div>
    </>
  )
}

export async function FeaturedProperties() {
  const settings = await getSettings()
  return (
    <section className="py-20 sm:py-24 bg-white">
      <div className="container mx-auto px-4 sm:px-6">
        <div className="text-center mb-14">
          <div className="inline-flex items-center gap-2 bg-blue-50 text-blue-600 text-sm font-medium px-4 py-2 rounded-full mb-4">
            <Sparkles className="w-4 h-4" />
            {settings.badge || 'عقارات مختارة بعناية'}
          </div>
          <h2 className="text-3xl sm:text-4xl font-bold mb-3 text-gray-900">{settings.title || 'عقارات مميزة'}</h2>
          <p className="text-gray-500 max-w-xl mx-auto text-lg">
            {settings.subtitle || 'اختر من مجموعتنا المختارة من أفضل العقارات في المغرب'}
          </p>
        </div>

        <ErrorBoundary
          fallbackTitle="تعذّر تحميل العقارات"
          fallbackDesc="حدث خطأ أثناء جلب العقارات المميزة. تأكد من اتصال قاعدة البيانات."
        >
          <Suspense fallback={<PropertiesGridSkeleton count={8} />}>
            <FeaturedPropertiesInner />
          </Suspense>
        </ErrorBoundary>
      </div>
    </section>
  )
}