"use client";
import { useConfirmation } from '@/_hooks/useConfirmation';
import { dateTimeFormatter, formatToLocal } from "@/_utils/timezone";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/_hooks/useLanguage";

export default function ConfirmationWrapper() {
    const { t, i18n } = useTranslation("common");
    const { booking, stripePayment } = useConfirmation();

    const language = useLanguage(booking?.language);

    return (
        <div className="mx-auto p-6 ">
            <div className='bg-white shadow rounded p-6 mb-6'>
                {booking?.status === "paid" ? (
                    <p>✅ {t("checkout.paymentSuccessful")}</p>
                ) : booking?.status === "pending" ? (
                    <p>⏳ {t("checkout.waitingForPayment")}</p>
                ) : booking?.status === "failed" ? (
                    <p>❌ {t("checkout.paymentFailed")}</p>
                ) : (
                    <p>{t("checkout.processingPayment")}</p>
                )}
            </div>
            <div className='bg-white shadow rounded p-6 mb-6'>
                <p>{t("bookingDetails.confirmationEmail")}</p>
                <p className='text-sm text-gray-400'>{t("bookingDetails.email")}: {booking?.user?.email}</p>
            </div>
            {booking && (
                <div className='bg-white shadow rounded mb-6 flex flex-col'>
                    <div className='bg-gray-50 rounded-t p-6'>
                        <p>Booking confirmation</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> {stripePayment?.status}</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>
                </div>
            )}

        </div>
    );
}