import { Calendar } from "lucide-react";
import { getServerSession } from "../../api/auth/[...nextauth]/auth";
import { Badge } from "@repo/shared-components";
import { JSX } from "react";
import { getPublicUser, prisma } from "@repo/db";
import { formatTimeRange } from "../../../helper/timerange";

export const Bookings: () => Promise<JSX.Element> = async () => {
	const session = await getServerSession();
	const futureBookings = await prisma.booking.findMany({
		where: {
			userId: session?.user.id,
			startTime: {
				gte: new Date(),
			},
		},
		orderBy: {
			startTime: "asc",
		},
		include: {
			User: true,
			Station: true,
		},
	});
	if (!session) return <div />;

	return (
		<div className="card-body">
			<h2 className="card-title justify-between">
				<span className="card-title">
					<Calendar className="h-4 w-4" /> Zukünftige Buchungen
				</span>
			</h2>
			<div className="flex flex-wrap gap-2">
				{futureBookings.length === 0 && (
					<span className="text-sm text-gray-500">
						Keine zukünftigen Buchungen. Du kannst dir welche im Buchungssystem erstellen.
					</span>
				)}
				{futureBookings.map((booking) => {
					return (
						<div
							key={booking.id}
							className={`alert alert-horizontal ${booking.type.startsWith("LST_") ? "alert-success" : "alert-info"} alert-soft px-3 py-2`}
						>
							<div className="flex items-center gap-3">
								<span className="badge badge-outline text-xs">
									{booking.type.startsWith("LST_")
										? "LST"
										: booking.Station?.bosCallsignShort || booking.Station?.bosCallsign}
								</span>
								<span className="text-sm font-medium">{getPublicUser(booking.User).fullName}</span>
							</div>
							<div className="flex items-center gap-2">
								<div className="text-right">
									<p className="text-xs font-medium">
										{formatTimeRange(booking, { includeDate: true })}
									</p>
								</div>
							</div>
						</div>
					);
				})}
			</div>
		</div>
	);
};