import type { Metadata } from "next";
import { ArrowLeft, Bath, BedDouble, Check, Users } from "lucide-react";
import { notFound } from "next/navigation";
import { Reveal, SiteFooter, SiteNav } from "../../components";
import { getRoomByCode } from "@/lib/rooms";

export const dynamic = "force-dynamic";

type RoomPageProps = { params: Promise<{ code: string }> };

export async function generateMetadata({ params }: RoomPageProps): Promise<Metadata> {
  const { code } = await params;
  const room = await getRoomByCode(decodeURIComponent(code));
  if (!room || !room.isActive) return { title: "Room Not Found" };
  return {
    title: room.title,
    description: room.description,
    alternates: { canonical: `/rooms/${encodeURIComponent(room.id)}` },
    openGraph: { images: [room.image] },
  };
}

export default async function RoomDetailPage({ params }: RoomPageProps) {
  const { code } = await params;
  const room = await getRoomByCode(decodeURIComponent(code));
  if (!room || !room.isActive) notFound();

  return (
    <>
      <Reveal />
      <SiteNav />
      <main className="room-detail-page">
        <section className="section room-detail-section">
          <div className="container">
            <a className="room-back-link" href="/rooms"><ArrowLeft size={17} /> All Rooms</a>
            <div className="room-detail-heading reveal">
              <div>
                <p className="eyebrow">{room.type}</p>
                <h1>{room.title}</h1>
              </div>
              <div className="room-detail-rate">
                <span>{room.status}</span>
                <strong>NPR {room.price.toLocaleString()}</strong>
                <small>per night</small>
              </div>
            </div>

            <div className={`room-detail-gallery reveal ${room.galleryImages.length ? "has-gallery" : ""}`}>
              <figure className="room-main-image"><img src={room.image} alt={`${room.title} main view`} /></figure>
              {room.galleryImages.length ? <div className="room-extra-images">
                {room.galleryImages.map((image, index) => (
                  <figure key={`${image}-${index}`}><img src={image} alt={`${room.title} view ${index + 2}`} /></figure>
                ))}
              </div> : null}
            </div>

            <div className="room-detail-content">
              <article className="room-detail-copy reveal">
                <h2>About this room</h2>
                <p>{room.description}</p>
                <div className="room-detail-stats">
                  <span><Users size={19} /><strong>{room.guests}</strong> Guests</span>
                  <span><BedDouble size={19} /><strong>{room.beds}</strong></span>
                  <span><Bath size={19} /><strong>{room.baths}</strong> Bath</span>
                </div>
                <h2>Room amenities</h2>
                <div className="room-detail-amenities">
                  {room.amenities.map((amenity) => <span key={amenity}><Check size={17} /> {amenity}</span>)}
                </div>
              </article>
              <aside className="room-booking-panel reveal">
                <p>Ready for a peaceful stay?</p>
                <strong>NPR {room.price.toLocaleString()} <small>/ night</small></strong>
                {[
                  "Available",
                  "Few Left",
                ].includes(room.status) ? <a href={`/booking?room=${encodeURIComponent(room.id)}`}>Reserve This Room</a> : <span>Currently unavailable</span>}
              </aside>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}