"use client";

import SectionTitle from "@/components/Shared/SectionTitle/Index";
import { useTranslations } from "next-intl";
import { TicketsGrid } from "./TicketsGrid";
import { tickets as defaultTickets } from "./data";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { getTicketsByOrderUUID } from "@/lib/apiUtils";
import type { Ticket } from "./data";
import type { ApiTicket } from "@/types/ticketApi";

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

  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchTickets = async () => {
      if (!orderUUID) {
        setTickets(defaultTickets);
        router.push("/");
        return;
      }

      setLoading(true);
      try {
        const response = await getTicketsByOrderUUID(orderUUID);

        if (response && response.data && response.data.tickets) {
          const mappedTickets: Ticket[] = response.data.tickets.map(
            (apiTicket: ApiTicket) => ({
              id: apiTicket.bar_code,
              title: apiTicket.event_title,
              ticketNumber: apiTicket.bar_code,
              bookingCode: apiTicket.booking_uuid
                .substring(0, 10)
                .toUpperCase(),
              eventTitle: apiTicket.event_title,
              location: apiTicket.event_location,
              startDate: apiTicket.event_start_date,
              endDate: apiTicket.event_end_date,
              startTime: apiTicket.event_start_time,
              endTime: apiTicket.event_end_time,
              barCode: apiTicket.bar_code,
              barcodeSrc: "/images/barcode.png",
              price: apiTicket.price,
              name: "Guest",
            }),
          );
          setTickets(mappedTickets);
        }
      } catch (error) {
        console.error("Error fetching tickets:", error);
        setError("Failed to fetch tickets. Please try again.");
      } finally {
        setLoading(false);
      }
    };

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

  const ticketsCount =
    tickets.length +
    " " +
    t("tickets").charAt(0).toUpperCase() +
    t("tickets").slice(1);

  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <div className="flex items-center gap-2">
        <SectionTitle
          title={t("title")}
          hint={ticketsCount}
          onClick={() => router.push(`/confirmation?order_uuid=${orderUUID}`)}
        />
      </div>
      <p className="text-[16px] sm:text-[18px]">{t("description")}</p>
      {loading ? (
        <div className="w-full h-40 flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      ) : error ? (
        <div className="w-full p-4 text-center text-red-500 bg-red-50 rounded-lg">
          {error}
        </div>
      ) : (
        <TicketsGrid tickets={tickets} />
      )}
    </section>
  );
}