"use client";

import { useEffect, useState } from "react";
import TicketSection from "@/components/sections/DownloadTicketsPage/TicketPage/Index";
import { getTicketDetailsByBarCode } from "@/lib/apiUtils";
import type { Ticket } from "@/components/sections/DownloadTicketsPage/data";
import { useParams } from "next/navigation";

export default function TicketPage() {
  const params = useParams();
  const barcode = params.barcode as string;

  const [ticket, setTicket] = useState<Ticket | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchTicketData() {
      if (!barcode) return;

      try {
        setLoading(true);
        const response = await getTicketDetailsByBarCode(barcode);

        if (response && response.data && response.data.tickets) {
          const apiTicket = response.data.tickets;
          const mappedTicket: Ticket = {
            id: String(apiTicket.event_ticket_id),
            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: apiTicket.user_name || "Guest",
          };
          setTicket(mappedTicket);
        } else {
          setError(response.message || "Ticket not found");
        }
      } catch (err) {
        console.error("Error fetching ticket:", err);
        setError("Failed to load ticket details");
      } finally {
        setLoading(false);
      }
    }

    fetchTicketData();
  }, [barcode]);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="flex flex-col items-center gap-4">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-vendor-primary"></div>
          <p className="text-gray-600">Loading ticket details...</p>
        </div>
      </div>
    );
  }

  if (error || !ticket) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <p className="text-red-600 text-lg">{error || "Ticket not found"}</p>
        </div>
      </div>
    );
  }

  return <TicketSection ticket={ticket} />;
}