"use client";
import React from "react";
import { useExamBooking } from "../../../../_hooks/useExamBooking";
import { useTranslation } from "react-i18next";

// MUI
import Typography from "@mui/material/Typography";
import { examLanguages } from "@/candidate/booking/[slug]/_components/steps/StepLanguage";
import { formatToLocal, dateTimeFormatter } from "@/_utils/timezone";

interface Props {
    exam: { title: string; price: number } | null;
    booking: ReturnType<typeof useExamBooking>;
}

const ExamPreview: React.FC<Props> = ({ exam, booking }) => {
    const { t, i18n } = useTranslation("common");

    return (
        <div className="sticky top-20 p-6 rounded-md overflow-y-auto bg-white shadow-xl">
            <Typography variant="subtitle1" sx={{ fontWeight: "bold", mb: 1 }}>
                {t("booking.examPreview.label")}
            </Typography>
            <ul className="space-y-1 text-sm flex flex-col gap-2">
                <li>
                    <strong>{t("booking.examPreview.title")}</strong> {exam?.title}
                </li>
                <li>
                    <strong>{t("booking.examPreview.price")}</strong> ${exam?.price}
                </li>
                <li>
                    <strong>{t("booking.examPreview.date")}</strong> {booking.selectedDate ? dateTimeFormatter(booking.selectedDate, booking.selectedTimezone || "UTC", i18n.language) : t("booking.examPreview.notSelected")}
                </li>
                <li>
                    <strong>{t("booking.examPreview.location")}</strong>
                    {
                        booking.uniqueLocations.find((loc: { key: string; name: string }) => loc.key === booking.selectedLocationKey)?.name ??
                        t("booking.examPreview.notSelected")
                    }
                </li>
                {booking.selectedLocationKey === "online" && booking.selectedTimezone && (
                    <li>
                        <strong>{t("booking.examPreview.timezone")}</strong>
                        {booking.selectedTimezone}
                    </li>
                )}
                <li>
                    <strong>{t("booking.examPreview.timeSlot")}</strong>
                    {booking.selectedSlotId
                        ? (() => {
                            const session = booking.filteredSessions.find(
                                (s: { id: number }) => s.id === booking.selectedSlotId
                            );
                            if (!session) return t("booking.examPreview.notSelected");
                            return booking.selectedTimezone
                                ? `${formatToLocal(session.start_time, booking.selectedTimezone)} - ${formatToLocal(session.end_time, booking.selectedTimezone)}`
                                : `${formatToLocal(session.start_time)} - ${formatToLocal(session.end_time)}`;
                        })()
                        : t("booking.examPreview.notSelected")}
                </li>
                <li>
                    <strong>{t("booking.examPreview.language")}</strong>{booking.language ? examLanguages.filter(lang => lang.code === booking.language).map(lang => lang.label).join(", ") : t("booking.examPreview.notSelected")}
                </li>
            </ul>
        </div>
    );
};

export default ExamPreview;