import { redirect } from "next/navigation";
import { Separator } from "@/components/ui/separator";
import { api } from "@/server/api/client";
import { getServerAuthSession } from "@/server/auth";
import { ZDay } from "@lifetracker/shared/types/days";
import EditableDayComment from "./EditableDayComment";
import { MoodStars } from "./MoodStars";
import { format, addDays } from "date-fns";
import { ButtonWithTooltip } from "@/components/ui/button";
import { router } from "next/navigation";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
import { UTCDate, utc } from "@date-fns/utc";
export default async function DayView({
    day,
}: {
    day: ZDay;
}) {
    const session = await getServerAuthSession();
    if (!session) {
        redirect("/");
    }

    const prevDay = format(addDays(day.date, -1), "yyyy-MM-dd");
    const nextDay = format(addDays(day.date, 1), "yyyy-MM-dd");

    return (
        <div className="flex flex-col gap-3">

            <div className="flex justify-between">
                <div className="flex">
                    <Link
                        href={`/dashboard/day/${prevDay}`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowLeftSquare size={18} />
                        </div>
                    </Link>
                    <span className="text-2xl flex-1">
                        {format(day.date, "EEEE, MMMM do", { in: utc })}
                    </span>
                    <Link
                        href={`/dashboard/day/${nextDay}`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowRightSquare size={18} />
                        </div>
                    </Link>
                </div>
                <div>
                    <MoodStars
                        day={day}
                    />
                </div>
            </div>

            <Separator />

            <EditableDayComment day={day}
                className="text-xl"
            />

            <Separator />

            <ul>
                {day.hours.map((hour) => (
                    <li key={hour.time}>
                        {hour.time}: {hour.categoryName} {hour.comment}
                    </li>
                ))}
            </ul>

        </div>
    );
}