import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/routing'
import Image from 'next/image'
import { Users, Square, Info } from 'lucide-react'
import { db } from '@/lib/db'
import openinaryLoader from '@/lib/openinary-loader'

export default async function RoomsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  
  const tNav = await getTranslations('nav')
  const tRooms = await getTranslations('rooms')

  const dbRooms = await db.room.findMany({
    where: { available: true },
    orderBy: { createdAt: 'asc' }
  })

  // Size helper mapping based on room type
  const getRoomSize = (type: string) => {
    if (type === 'STUDIO_1_0') return '25m²'
    if (type === 'SUITE_1_1') return '45m²'
    return '20m²'
  }

  return (
    <div className="flex-1 bg-gray-50 py-12 pt-32">
      <div className="container mx-auto px-4">
        <div className="mb-10 text-center max-w-2xl mx-auto">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">{tRooms('title')}</h1>
          <p className="text-gray-600 text-lg">
            {tRooms('description')}
          </p>
        </div>

        <div className="space-y-12 max-w-5xl mx-auto">
          {dbRooms.map((room) => {
            const name = locale === 'tr' ? room.nameTr : locale === 'de' ? room.nameDe : room.nameEn
            const description = locale === 'tr' ? room.descriptionTr : locale === 'de' ? room.descriptionDe : room.descriptionEn
            const image = room.imageUrl || 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80'
            const isExternal = image.startsWith('http') && !image.includes('media.ayris.tech')
            
            return (
              <div key={room.id} className="bg-white rounded-2xl overflow-hidden border shadow-sm flex flex-col md:flex-row group">
                <div className="relative w-full md:w-2/5 h-64 md:h-auto bg-gray-100">
                  {isExternal ? (
                    <img 
                      src={image}
                      alt={name}
                      className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
                    />
                  ) : (
                    <Image 
                      src={image}
                      alt={name}
                      fill
                      loader={openinaryLoader}
                      sizes="(max-width: 768px) 100vw, 40vw"
                      className="object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                  )}
                </div>
                <div className="p-6 md:p-8 flex-1 flex flex-col">
                  <div className="flex justify-between items-start mb-4">
                    <h2 className="text-2xl font-bold text-gray-900">{name}</h2>
                  </div>
                  
                  <p className="text-gray-600 mb-6 flex-1 line-clamp-3">
                    {description}
                  </p>

                  <div className="flex flex-wrap gap-4 mb-8">
                    <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
                      <Users className="w-4 h-4 text-[#2FB6C4]" />
                      <span>{room.capacity} {tRooms('capacity')}</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
                      <Square className="w-4 h-4 text-[#2FB6C4]" />
                      <span>{getRoomSize(room.type)}</span>
                    </div>
                    <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
                      <Info className="w-4 h-4 text-[#2FB6C4]" />
                      <span>{room.amenities.length} {tRooms('amenities')}</span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between mt-auto border-t pt-6">
                    <div className="text-sm text-gray-500">
                      <span className="font-bold text-gray-900 text-lg">
                        {room.price ? `${room.price}₺` : tRooms('ask_price')}
                      </span> {room.price ? '' : tRooms('per_night')}
                    </div>
                    <Link 
                      href={`/dairelerimiz/${room.slug}`} 
                      className="px-6 py-2.5 bg-[#2FB6C4] hover:bg-[#2597a3] text-white rounded-md font-medium transition-colors duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] focus-visible:ring-offset-2"
                    >
                      {tRooms('details_btn')}
                    </Link>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}