import { notFound } from 'next/navigation'
import Image from 'next/image'
import { prisma } from '@/lib/prisma'
import { formatPrice } from '@/lib/utils'
import { Bed, Bath, Maximize, MapPin, Building2, UserCircle2, Phone, Mail, MessageCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { PropertyVirtualTour, PropertyLocationMap } from '@/components/property/property-dynamic-sections'
import { PropertyGallery } from '@/components/property/property-gallery'

export default async function PropertyDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  let property = null;
  try {
    property = await prisma.property.findUnique({
      where: { id },
      include: {
        agent: { select: { name: true, phone: true, email: true, image: true } },
        virtualTour: true,
      }
    });
  } catch (error) {
    console.warn("Database connection failed, falling back to dummy data dummy logic.");
  }

  // If not found in DB, we'll try to find it in the dummy list if the app relies on dummy data for early properties
  let propData: any = property
  
  if (!propData) {
    if (id.length < 5) {
      // It's a dummy ID, fallback to basic UI for dummy items without DB
      propData = {
        id,
        title: 'عقار تجريبي ' + id,
        description: 'هذا العقار تجريبي غير موجود في قاعدة البيانات.',
        price: 0,
        city: 'الدار البيضاء',
        neighborhood: 'المعاريف',
        images: ['/placeholder-property.jpg'],
        bedrooms: 3,
        bathrooms: 2,
        area: 120,
        hasVirtualTour: true, // Force for demo
        agent: { name: 'وكيل عقاري' }
      }
    } else {
      notFound()
    }
  }

  // Parse scenes or provide fallback
  let scenes = []
  if (propData.virtualTour?.scenes) {
    scenes = typeof propData.virtualTour.scenes === 'string' 
      ? JSON.parse(propData.virtualTour.scenes) 
      : propData.virtualTour.scenes
  } else if (propData.hasVirtualTour) {
    scenes = [{
      id: 'demo-1',
      name: 'الصالة الرئيسية',
      panoramaUrl: propData.images[0] || '/placeholder-property.jpg', // Use first image as demo 360
      thumbnailUrl: propData.images[0] || '/placeholder-property.jpg',
      hotspots: []
    }]
  }

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      <PropertyGallery
        images={propData.images}
        title={propData.title}
        neighborhood={propData.neighborhood}
        city={propData.city}
        isFeatured={propData.isFeatured}
      />

      <div className="container mx-auto px-4 mt-8">
        <div className="flex flex-col lg:flex-row gap-8">
          
          {/* Main Content */}
          <div className="lg:w-2/3 space-y-8">
            
            {/* Quick Details */}
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-wrap gap-6 items-center justify-between">
              <div>
                <p className="text-gray-500 text-sm font-medium mb-1">السعر المطلوب</p>
                <p className="text-3xl font-bold text-blue-600">{formatPrice(propData.price)}</p>
              </div>
              <div className="flex gap-6 divide-x flex-row-reverse divide-x-reverse">
                {propData.bedrooms && (
                  <div className="flex flex-col items-center pl-6">
                    <Bed className="w-6 h-6 text-gray-400 mb-2" />
                    <span className="font-bold">{propData.bedrooms} غرف</span>
                  </div>
                )}
                {propData.bathrooms && (
                  <div className="flex flex-col items-center px-6">
                    <Bath className="w-6 h-6 text-gray-400 mb-2" />
                    <span className="font-bold">{propData.bathrooms} حمامات</span>
                  </div>
                )}
                <div className="flex flex-col items-center">
                  <Maximize className="w-6 h-6 text-gray-400 mb-2" />
                  <span className="font-bold text-left" dir="ltr">{propData.area} m²</span>
                </div>
              </div>
            </div>

            {/* Virtual Tour section */}
            {propData.hasVirtualTour && scenes.length > 0 && (
              <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
                <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
                  <span>🥽 جولة افتراضية 360°</span>
                </h2>
                <div className="w-full">
                  <PropertyVirtualTour scenes={scenes} propertyId={propData.id} />
                </div>
              </div>
            )}

            {/* Description */}
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
              <h2 className="text-2xl font-bold mb-4">وصف العقار</h2>
              <div className="text-gray-600 leading-relaxed max-w-none whitespace-pre-wrap">
                {propData.description}
              </div>
            </div>

            {/* Map Section */}
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
              <h2 className="text-2xl font-bold mb-4">الموقع على الخريطة</h2>
              <div className="rounded-xl overflow-hidden shadow-inner">
                <PropertyLocationMap property={propData} />
              </div>
              <div className="mt-3 flex items-center gap-2 text-sm text-gray-500">
                <MapPin className="w-4 h-4 text-blue-500" />
                <span>{propData.address || `${propData.neighborhood}، ${propData.city}`}</span>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:w-1/3">
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 sticky top-24">
              <h3 className="font-bold text-lg mb-4 border-b pb-3">معلومات الوكيل</h3>
              <div className="flex items-center gap-4 mb-6">
                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center overflow-hidden relative">
                  {propData.agent?.image ? (
                    <Image src={propData.agent.image} alt={propData.agent.name} fill className="object-cover" />
                  ) : (
                    <UserCircle2 className="w-10 h-10 text-gray-400" />
                  )}
                </div>
                <div>
                  <h4 className="font-bold text-lg">{propData.agent?.name || 'وكيل غير معروف'}</h4>
                  <p className="text-gray-500 text-sm">وكيل عقاري معتمد</p>
                </div>
              </div>
              
              <div className="space-y-3">
                {propData.agent?.phone && (
                  <a href={`tel:${propData.agent.phone}`}>
                    <Button className="w-full gap-2" size="lg">
                      <Phone className="w-5 h-5" />
                      {propData.agent.phone}
                    </Button>
                  </a>
                )}
                {propData.agent?.phone && (
                  <a href={`https://wa.me/${propData.agent.phone.replace(/\D/g, '')}?text=${encodeURIComponent('مرحباً، أود الاستفسار عن العقار: ' + (propData.title || ''))}`} target="_blank" rel="noopener noreferrer">
                    <Button variant="outline" className="w-full gap-2" size="lg">
                      <MessageCircle className="w-5 h-5 text-green-500" />
                      واتساب
                    </Button>
                  </a>
                )}
                <Button variant="outline" className="w-full gap-2" size="lg">
                  <Mail className="w-5 h-5" />
                  إرسال رسالة
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}