import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Bath, BedDouble, Check, ChevronLeft, Heart, Share2, Star, Users } from "lucide-react";
import { loadListing } from "@/lib/listings";

type Props = { params: Promise<{ id: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const listing = await loadListing((await params).id);
  return { title: listing?.name ?? "Stay not found", description: listing?.description };
}

export default async function ListingDetailPage({ params }: Props) {
  const listing = await loadListing((await params).id);
  if (!listing) notFound();
  return (
    <div className="mx-auto max-w-7xl px-5 py-10 sm:px-8">
      <Link href="/listings" className="inline-flex items-center gap-2 text-sm font-bold text-muted-foreground hover:text-ember"><ChevronLeft size={18} /> All stays</Link>
      <div className="mt-6 flex flex-wrap items-end justify-between gap-4"><div><h1 className="text-4xl font-bold sm:text-5xl">{listing.name}</h1><p className="mt-3 flex items-center gap-2 text-muted-foreground"><Star size={16} className="fill-ember text-ember" /><strong className="text-cocoa">{listing.rating}</strong> · {listing.reviews} reviews · {listing.location}</p></div><div className="flex gap-2"><button type="button" className="flex gap-2 rounded-xl border border-border bg-white px-4 py-2.5 text-sm font-bold"><Share2 size={17} /> Share</button><button type="button" className="flex gap-2 rounded-xl border border-border bg-white px-4 py-2.5 text-sm font-bold"><Heart size={17} /> Save</button></div></div>
      <div className="relative mt-8 aspect-[16/8] overflow-hidden rounded-3xl"><Image src={listing.image} alt={listing.name} fill priority className="object-cover" sizes="100vw" /></div>
      <div className="mt-10 grid gap-10 lg:grid-cols-[1fr_380px]">
        <div><h2 className="text-2xl font-bold">A remarkable stay in {listing.location.split(",")[0]}</h2><div className="mt-5 flex flex-wrap gap-5 border-b border-border pb-8 text-sm"><span className="flex items-center gap-2"><Users size={18} className="text-ember" /> {listing.guests} guests</span><span className="flex items-center gap-2"><BedDouble size={18} className="text-ember" /> {listing.bedrooms} bedrooms</span><span className="flex items-center gap-2"><Bath size={18} className="text-ember" /> {listing.baths} baths</span></div><p className="mt-8 max-w-3xl text-lg leading-8 text-muted-foreground">{listing.description} Every detail has been thoughtfully considered so you can slow down, settle in, and enjoy the place like a local.</p><h2 className="mt-10 text-2xl font-bold">What this place offers</h2><ul className="mt-5 grid gap-4 sm:grid-cols-2">{listing.amenities.map((amenity) => <li key={amenity} className="flex items-center gap-3"><span className="grid size-8 place-items-center rounded-full bg-ember-soft"><Check size={16} /></span>{amenity}</li>)}</ul></div>
        <aside className="h-fit rounded-3xl bg-white p-6 shadow-lift"><p><span className="text-2xl font-bold">${listing.price}</span><span className="text-muted-foreground"> / night</span></p><div className="mt-5 grid grid-cols-2 overflow-hidden rounded-xl border border-input"><label className="border-r border-input p-3 text-xs font-bold">CHECK IN<input type="date" className="mt-1 w-full font-normal text-muted-foreground outline-none" /></label><label className="p-3 text-xs font-bold">CHECK OUT<input type="date" className="mt-1 w-full font-normal text-muted-foreground outline-none" /></label><label className="col-span-2 border-t border-input p-3 text-xs font-bold">GUESTS<select className="mt-1 block w-full font-normal text-muted-foreground outline-none"><option>2 guests</option><option>4 guests</option></select></label></div><button className="mt-5 w-full rounded-xl bg-gradient-ember py-3.5 font-bold text-white shadow-ember">Reserve</button><p className="mt-3 text-center text-xs text-muted-foreground">You won’t be charged yet</p><div className="mt-6 flex justify-between border-t border-border pt-5 font-bold"><span>Total before taxes</span><span>${listing.price * 3}</span></div></aside>
      </div>
    </div>
  );
}