'use client';

import { Booking, StripePayment } from "@/_types/Types";
import { useState } from "react";
import ChangeRequestModal from "@/candidate/booking/[slug]/_components/ChangeRequestModal";
import { dateTimeFormatter, formatToLocal, formatFullToLocal } from "@/_utils/timezone";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/_hooks/useLanguage";

interface Props {
    booking: Booking;
    stripePayment: StripePayment | null;
}
export default function BookingDetails({ booking, stripePayment }: Props) {
    const language = useLanguage(booking?.language);
    const { t, i18n } = useTranslation("common");
    const [isOpen, setIsOpen] = useState(false);


    return (
        <div className="">
            <ChangeRequestModal isOpen={isOpen} setIsOpen={setIsOpen} booking={booking} />
            {booking && (
                <div className='bg-white shadow rounded mb-6 flex flex-col'>
                    <div className='bg-gray-50 rounded-t p-6'>
                        <p>{t("bookingDetails.yourBooking")}</p>
                        <p className='text-sm text-gray-400'>{t("bookingDetails.reference")}: {booking?.reference}</p>
                    </div>
                    <div className='grid grid-cols-2 p-6 border-b border-t border-gray-100'>
                        <div className='flex flex-col gap-2'>
                            <p className="border-b border-gray-100 mb-2">{t("bookingDetails.candidateDetails")}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.candidateName")}:</span> {booking?.user?.displayName}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.candidateEmail")}:</span> {booking?.user?.email}</p>
                        </div>
                        <div className='flex flex-col gap-2'>
                            <p className="border-b border-gray-100 mb-2">{t("bookingDetails.examDetails")}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.examName")}:</span> {booking?.exam?.title}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.examLocale")}:</span> {booking?.locale}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.examLanguage")}:</span> {language}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.examDate")}:</span> {dateTimeFormatter(booking?.booking_slot?.start_time, booking.locale, i18n.language)}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.timeSlot")}:</span> {formatToLocal(booking?.booking_slot?.start_time, booking.locale, i18n.language) + ' - ' + formatToLocal(booking?.booking_slot?.end_time, booking.locale, i18n.language)}</p>
                        </div>
                    </div>
                    <div className='flex flex-col gap-2 p-6'>
                        <p className="border-b border-gray-100 mb-2">{t("bookingDetails.paymentInformation")}</p>
                        <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.paymentStatus")}:</span> <span className="capitalize">{stripePayment?.status}</span></p>
                        <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.amountPaid")}:</span> {Number(stripePayment?.amount) / 100} {stripePayment?.currency}</p>
                        <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.paymentMethod")}:</span> {stripePayment?.paymentMethod}</p>
                        <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.paymentReference")}:</span> {stripePayment?.id}</p>
                    </div>
                    {booking.change_request && (
                        <div className='bg-yellow-50 rounded-b flex flex-col gap-2 p-6'>
                            <p className="border-b border-gray-100 mb-2">{t("bookingDetails.changeRequestDetails")}</p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.requestedChange")}:</span> <span className="capitalize">{booking.change_request.status}</span></p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.requestedChangeType")}:</span> <span className="capitalize">{booking.change_request.type}</span></p>
                            <p className='flex flex-col'><span className='text-sm text-gray-400'>{t("bookingDetails.requestedOn")}:</span> {formatFullToLocal(booking.change_request.created_at, booking.locale, i18n.language)}</p>
                        </div>
                    )}
                </div>
            )}
            {!booking.change_request && <div className="mt-4 flex justify-center gap-3">
                <button className="bg-pink-600 text-white px-4 py-2 rounded hover:bg-pink-700 cursor-pointer" onClick={() => setIsOpen(true)}>
                    {t("bookingDetails.requestChangeButton")}
                </button>
            </div>}
        </div>
    );
}