import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Briefcase, CalendarDays, Heart, MapPin } from "lucide-react";
import { listings } from "@/lib/listings";

export const metadata: Metadata = { title: "Dashboard" };

export default function DashboardPage() {
  const upcoming = listings[0];
  return (
    <div>
      <p className="text-sm font-bold uppercase tracking-[.18em] text-ember">Your dashboard</p><h1 className="mt-2 text-4xl font-bold">Good morning, Alex.</h1><p className="mt-3 text-muted-foreground">Everything for your next escape, right where you need it.</p>
      <div className="mt-9 grid gap-4 sm:grid-cols-3"><Stat icon={Briefcase} value="2" label="Upcoming trips" /><Stat icon={Heart} value="8" label="Saved stays" /><Stat icon={CalendarDays} value="14" label="Nights traveled" /></div>
      <section id="trips" className="mt-12"><div className="flex items-end justify-between"><div><p className="text-sm font-bold text-ember">COMING UP</p><h2 className="mt-1 text-2xl font-bold">Your next trip</h2></div><Link href="/listings" className="text-sm font-bold text-ember">Plan another</Link></div>
        <article className="mt-5 overflow-hidden rounded-3xl bg-white shadow-soft sm:grid sm:grid-cols-[220px_1fr]"><div className="relative min-h-48"><Image src={upcoming.image} alt={upcoming.name} fill className="object-cover" sizes="220px" /></div><div className="p-6"><p className="text-xs font-bold uppercase tracking-wider text-ember">Confirmed · Oct 18–22</p><h3 className="mt-2 text-2xl font-bold">{upcoming.name}</h3><p className="mt-2 flex items-center gap-2 text-sm text-muted-foreground"><MapPin size={16} /> {upcoming.location}</p><div className="mt-6 flex flex-wrap gap-3"><Link href={`/listings/${upcoming.id}`} className="rounded-xl bg-cocoa px-4 py-2.5 text-sm font-bold text-white">View stay</Link><button className="rounded-xl border border-border px-4 py-2.5 text-sm font-bold" type="button">Message host</button></div></div></article>
      </section>
      <section id="saved" className="mt-12"><div className="flex items-center justify-between"><h2 className="text-2xl font-bold">Saved for later</h2><Link href="/listings" className="flex items-center gap-2 text-sm font-bold text-ember">Browse all <ArrowRight size={16} /></Link></div><div className="mt-5 grid gap-4 sm:grid-cols-2">{listings.slice(1, 3).map((listing) => <Link href={`/listings/${listing.id}`} key={listing.id} className="flex gap-4 rounded-2xl bg-white p-3 shadow-soft"><Image src={listing.image} alt="" className="size-24 rounded-xl object-cover" /><div className="min-w-0 py-2"><h3 className="truncate font-bold">{listing.name}</h3><p className="mt-1 text-sm text-muted-foreground">{listing.location}</p><p className="mt-3 text-sm"><strong>${listing.price}</strong> / night</p></div></Link>)}</div></section>
    </div>
  );
}

type Icon = typeof Briefcase;
function Stat({ icon: Icon, value, label }: { icon: Icon; value: string; label: string }) {
  return <div className="rounded-2xl bg-white p-5 shadow-soft"><Icon className="text-ember" size={21} /><p className="mt-4 text-3xl font-bold">{value}</p><p className="text-sm text-muted-foreground">{label}</p></div>;
}