import { getRoomDetails } from '@/action'
import RoomImagSlider from '@/components/manual/RoomImagSlider'
import Link from 'next/link'
import React from 'react'

async function Page({ params }: { params: { _id: string } }) {
  const { room } = await getRoomDetails(params?._id)

  return (
    <div className="mt-10 room-detail-page min-h-screen flex flex-col lg:flex-row mx-auto max-w-screen-xl bg-gray-50 shadow-lg rounded-lg overflow-hidden">
      {/* Sidebar Section */}
      <aside className="sidebar w-full lg:w-2/5 text-gray-800 bg-white  p-2 md:p-6 lg:p-8 flex flex-col justify-between h-fit gap-4 shadow-md">
        {/* Image Slider */}
        <div className="mb-0">
          <RoomImagSlider images={room?.images} />
        </div>

        {/* Room Info */}
        <div>
          <h2 className="text-4xl font-bold mb-6 tracking-wide text-brand">
            {room.roomType}
          </h2>
          <p className="text-lg mb-4 font-light">
            Starting from{' '}
            <span className="text-3xl font-semibold">NPR {room.price}</span> per
            night
          </p>
          <p
            className={`text-lg font-semibold mb-8 ${room.status === 'online' ? 'text-green-400' : 'text-red-400'}`}
          >
            {room.status === 'online' ? 'Available' : 'Offline'}
          </p>

          {/* Booking Button */}
          {room.status === 'online' && (
            <Link href={`/rooms/${room?._id}/booking`}>
              <p className="block w-full text-center px-6 py-3 bg-gradient-to-r from-green-500 to-green-700 rounded-full font-semibold hover:from-green-600 hover:to-green-800 transition duration-300 shadow-md">
                Book Now
              </p>
            </Link>
          )}
        </div>
      </aside>

      {/* Main Content Section */}
      <main className="content flex-1 p-2 md:p-6 lg:p-10 bg-white rounded-lg shadow-md">
        {/* Room Details Section */}
        <section className="room-details grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
          {/* Description */}
          <div className="description col-span-2">
            <h3 className="text-2xl font-bold text-gray-800 mb-4 uppercase">
              Room Description
            </h3>
            <p className="text-gray-700 leading-relaxed text-justify font-lora">
              {room.description}
            </p>
          </div>
        </section>

        {/* Capacity, Amenities, and Pricing Section */}
        <section className="capacity-pricing grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Capacity */}
          <div className="capacity bg-gray-100 p-6 rounded-lg shadow-sm">
            <h3 className="text-2xl font-bold text-gray-800 mb-4 uppercase">
              Capacity
            </h3>
            <div className="space-y-2 text-gray-700">
              <p>
                <strong className="text-gray-800">Adults:</strong>{' '}
                {room.capacity.adults}
              </p>
              <p>
                <strong className="text-gray-800">Children:</strong>{' '}
                {room.capacity.children}
              </p>
            </div>
          </div>

          {/* Amenities */}
          <div className="amenities bg-gray-100 p-6 rounded-lg shadow-sm">
            <h3 className="text-2xl font-bold text-gray-800 mb-4 uppercase">
              Amenities
            </h3>
            <ul className="space-y-2 list-disc list-inside">
              {room.amenities?.map((amenity: any) => (
                <li key={amenity._key} className="text-gray-700">
                  <strong className="font-semibold text-gray-800">
                    {amenity.category}:
                  </strong>{' '}
                  {amenity.amenitiesList.join(', ')}
                </li>
              ))}
            </ul>
          </div>
        </section>
      </main>
    </div>
  )
}

export default Page