"use client";

import { useState, useEffect, useMemo, useRef } from "react";
import { useRouter } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import SectionTitle from "@/components/Shared/SectionTitle/Index";
import GlobalActions from "@/components/Shared/GlobalActions/Index";
import BookingEndedSection from "@/components/sections/BookingEndedPage/Index";
import FullyBookedSection from "@/components/sections/FullyBookedPage/Index";
import TicketCard from "./TicketCard";
import { useEventDetails } from "@/hooks/useEventDetails";
import { useBooking } from "@/context/BookingContext";
import type { Ticket } from "@/types/event";
import type { SelectedTicket } from "@/types/booking";

export default function GetYourTicketSection() {
  const router = useRouter();
  const t = useTranslations("TicketPage");
  const tCommon = useTranslations("Common");
  const { setSelectedTickets: setBookingTickets, setEventId } = useBooking();

  const [selectedTickets, setSelectedTickets] = useState<{
    [key: number]: { isSelected: boolean; quantity: number };
  }>({});

  const { data: eventData, isLoading, isError, error } = useEventDetails();

  // Get all tickets
  const event = eventData?.data?.event;
  const tickets = useMemo(() => event?.tickets || [], [event?.tickets]);

  // Check if all tickets have quantity === 0
  const isFullyBooked = useMemo(() => {
    if (!tickets || tickets.length === 0) return false;
    return tickets.every((ticket) => ticket.quantity === 0);
  }, [tickets]);

  // Save event ID to context when event is loaded (only once)
  useEffect(() => {
    if (event?.id) {
      setEventId(event.id);
    }
  }, [event?.id, setEventId]);

  // Convert selected tickets to booking format
  const bookingTickets = useMemo((): SelectedTicket[] => {
    return Object.entries(selectedTickets)
      .filter(([, value]) => value.isSelected)
      .map(([ticketIdStr]) => {
        const ticketId = Number(ticketIdStr);
        const ticket = tickets.find((t) => t.id === ticketId);
        if (!ticket || !ticket.ticket_type) return null;

        return {
          event_ticket_id: ticket.id,
          ticket_type_id: ticket.ticket_type.id,
          ticket_type_title: ticket.ticket_type.name,
          price: ticket.price,
          quantity: selectedTickets[ticketId].quantity,
        };
      })
      .filter((ticket): ticket is SelectedTicket => ticket !== null);
  }, [selectedTickets, tickets]);

  // Use ref to track previous bookingTickets to avoid infinite loop
  const prevBookingTicketsRef = useRef<string>("");

  // Update context only when bookingTickets actually changes
  useEffect(() => {
    const currentTicketsString = JSON.stringify(bookingTickets);
    if (prevBookingTicketsRef.current !== currentTicketsString) {
      prevBookingTicketsRef.current = currentTicketsString;
      setBookingTickets(bookingTickets);
    }
  }, [bookingTickets, setBookingTickets]);

  const handleTicketSelect = (index: number, isSelected: boolean) => {
    setSelectedTickets((prev) => ({
      ...prev,
      [index]: { isSelected, quantity: prev[index]?.quantity || 1 },
    }));
  };

  const handleQuantityChange = (ticketId: number, quantity: number) => {
    // Find the ticket to get its max quantity
    const ticket = tickets.find((t) => t.id === ticketId);
    if (!ticket) return;

    // Ensure quantity doesn't exceed the available quantity from API
    const maxQuantity = ticket.quantity;
    const validQuantity = Math.min(Math.max(1, quantity), maxQuantity);

    setSelectedTickets((prev) => ({
      ...prev,
      [ticketId]: { ...prev[ticketId], quantity: validQuantity },
    }));
  };

  const handleCancelAll = () => {
    setSelectedTickets({});
  };

  const handleContinue = () => {
    if (event?.questions && event.questions.length > 0) {
      router.push("/questions");
    } else {
      router.push("/reservation");
    }
  };

  const hasSelectedTickets = Object.values(selectedTickets).some(
    (ticket) => ticket.isSelected,
  );

  if (isLoading) {
    return (
      <section className="flex flex-col gap-5 md:gap-10">
        <SectionTitle title={t("title")} />
        <div className="px-5 py-5 md:px-10 md:py-10 bg-primary-anti_flash_white-main flex items-center justify-center min-h-[400px]">
          <p className="text-lg">{tCommon("loading")}</p>
        </div>
      </section>
    );
  }

  if (isError) {
    return (
      <section className="flex flex-col gap-5 md:gap-10">
        <SectionTitle title={t("title")} />
        <div className="px-5 py-5 md:px-10 md:py-10 bg-primary-anti_flash_white-main flex items-center justify-center min-h-[400px]">
          <p className="text-lg text-red-500">
            {error?.message || tCommon("errorLoadingEventDetails")}
          </p>
        </div>
      </section>
    );
  }

  if (event?.registration_open === 0) {
    return <BookingEndedSection />;
  }

  if (isFullyBooked) {
    return <FullyBookedSection />;
  }

  if (!event || tickets.length === 0) {
    return (
      <section className="flex flex-col gap-5 md:gap-10">
        <SectionTitle title={t("title")} />
        <div className="px-5 py-5 md:px-10 md:py-10 bg-primary-anti_flash_white-main flex items-center justify-center min-h-[400px]">
          <p className="text-lg">{tCommon("noTicketsAvailable")}</p>
        </div>
      </section>
    );
  }

  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <SectionTitle title={t("title")} />
      <div className="flex flex-col gap-10">
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-5">
          {tickets.map((ticket: Ticket) => {
            // Skip tickets without ticket_type
            if (!ticket.ticket_type) {
              return null;
            }

            // Use features if available, otherwise show message
            const hasRealFeatures = !!ticket.ticket_type.features;
            const features = ticket.ticket_type.features
              ? ticket.ticket_type.features
              : [t("noFeaturesAvailable")];

            return (
              <TicketCard
                key={ticket.id}
                title={ticket.ticket_type.name}
                price={ticket.price}
                features={features}
                hasRealFeatures={hasRealFeatures}
                isSelected={selectedTickets[ticket.id]?.isSelected || false}
                quantity={selectedTickets[ticket.id]?.quantity || 1}
                maxQuantity={ticket.quantity}
                onSelect={(isSelected) =>
                  handleTicketSelect(ticket.id, isSelected)
                }
                onQuantityChange={(quantity) =>
                  handleQuantityChange(ticket.id, quantity)
                }
              />
            );
          })}
        </div>
        <GlobalActions
          onContinue={handleContinue}
          onCancel={handleCancelAll}
          isContinueDisabled={!hasSelectedTickets}
        />
      </div>
    </section>
  );
}