"use client";

import SectionTitle from "@/components/Shared/SectionTitle/Index";
import { FaRegCircleCheck } from "react-icons/fa6";
import ReservationSummary from "./ReservationSummary/Index";
import GlobalActions from "@/components/Shared/GlobalActions/Index";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState, useMemo } from "react";
import { getOrderDetails } from "@/actions/orderActions";
import type { OrderData, SelectedTicket } from "@/types/booking";
import { usePdfPrint } from "@/hooks/usePdfPrint";

export default function ConfirmationSection() {
  const t = useTranslations("ConfirmationPage");
  const router = useRouter();
  const searchParams = useSearchParams();
  const orderUUID = searchParams.get("order_uuid");

  const [orderData, setOrderData] = useState<OrderData | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!orderUUID) {
      router.push("/");
      return;
    }

    const fetchOrderDetails = async () => {
      try {
        setIsLoading(true);
        const response = await getOrderDetails(orderUUID);
        if (response.status === 1 && response.data.order) {
          setOrderData(response.data.order);
        } else {
          // If order not found or error, we might want to stay or redirect
          console.error("Order not found or invalid response");
        }
      } catch (error) {
        console.error("Error fetching order details:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchOrderDetails();
  }, [orderUUID, router]);

  // Map order tickets to SelectedTicket format for PDF print
  const tickets: SelectedTicket[] = useMemo(() => {
    if (!orderData?.event_tickets) return [];
    return orderData.event_tickets.map((ticket) => ({
      event_ticket_id: ticket.pivot.event_ticket_id || ticket.id,
      ticket_type_id: ticket.pivot.ticket_type_id || ticket.ticket_type_id,
      ticket_type_title: ticket.pivot.ticket_type_title,
      price: ticket.pivot.price,
      quantity: ticket.pivot.quantity,
    }));
  }, [orderData]);

  const eventId = orderData ? Number(orderData.event_id) : undefined;
  const promoCode = ""; // In the API response provided by the user, there is no promo code.
  // We might want to add it to OrderData if it's available in the future.

  const { downloadReceipt, isDownloading } = usePdfPrint(
    tickets,
    eventId,
    promoCode,
  );

  const downloadTickets = () => {
    if (orderUUID) {
      router.push(`/download-tickets?order_uuid=${orderUUID}`);
    } else {
      router.push("/download-tickets");
    }
  };

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-20 gap-4">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-vendor-primary"></div>
        <p className="text-gray-600">
          {t("loadingOrderDetails") || "Loading order details..."}
        </p>
      </div>
    );
  }

  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <div className="flex items-center gap-2">
        <FaRegCircleCheck className="text-vendor-secondary w-10 h-10 sm:w-15 sm:h-15 md:w-16 md:h-16" />
        <SectionTitle title={t("title")} />
      </div>
      <p className="text-[16px] sm:text-[18px]">{t("confirmationMessage")}</p>
      <ReservationSummary orderData={orderData} />
      <GlobalActions
        continueText={t("downloadReceiptPdf")}
        cancelText={t("downloadTickets")}
        betweenButtons={false}
        onContinue={downloadReceipt}
        onCancel={downloadTickets}
        isContinueDisabled={isDownloading}
      />
    </section>
  );
}