Customize Storefront for Ticket Booking

import { HttpTypes } from "@medusajs/types"

export interface TicketProductAvailability {
  date: string
  row_types: {
    row_type: string
    total_seats: number
    available_seats: number
    sold_out: boolean
  }[]
  sold_out: boolean
}

export interface TicketProduct {
  id: string
  product_id: string
  venue: {
    id: string
    name: string
    address: string
    rows: Array<{
      id: string
      row_number: string
      row_type: string
      seat_count: number
    }>
  }
  dates: string[]
}

export interface TicketProductAvailabilityData {
  ticket_product: TicketProduct
  availability: TicketProductAvailability[]
}

export interface TicketProductSeatsData {
  venue: {
    id: string
    name: string
    address: string
    rows: Array<{
      id: string
      row_number: string
      row_type: string
      seat_count: number
    }>
  }
  date: string
  seat_map: {
    row_number: string
    row_type: string
    seats: {
      number: string
      is_purchased: boolean
      variant_id: string | null
    }[]
  }[]
}

/**
 * Check if a product is a ticket product by looking for the ticket_product property
 */
export function isTicketProduct(product: HttpTypes.StoreProduct): boolean {
  return !!(product as any).ticket_product
}

export async function addToCart({
  // ...
  metadata,
}: {
  // ...
  metadata?: Record<string, any>
}) {
  // ...
}

await sdk.store.cart
  .createLineItem(
    cart.id,
    {
      // ...
      metadata,
    }
    // ...
  )

"use server"

import { sdk } from "@lib/config"
import { getAuthHeaders, getCacheOptions } from "./cookies"
import { TicketProductAvailabilityData } from "@lib/util/ticket-product"

export const getTicketProductAvailability = async (
  productId: string
): Promise<TicketProductAvailabilityData> => {
  const headers = {
    ...(await getAuthHeaders()),
  }

  const next = {
    ...(await getCacheOptions("ticket-products")),
  }

  return sdk.client
    .fetch<TicketProductAvailabilityData>(
      `/store/ticket-products/${productId}/availability`,
      {
        method: "GET",
        headers,
        next,
        cache: "no-store", // Always fetch fresh data for availability
      }
    )
    .then((data) => data)
}

import { useState, useEffect } from "react"

type TicketDateSelectionProps = {
  product: HttpTypes.StoreProduct
  onDateSelect: (date: string, nbOfTickets: number) => void
  disabled?: boolean
}

export default function TicketDateSelection({
  product,
  onDateSelect,
  disabled = false,
}: TicketDateSelectionProps) {
  const [nbOfTickets, setNbOfTickets] = useState(1)
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [availability, setAvailability] = useState<TicketProductAvailability[]>([])
  const [isLoading, setIsLoading] = useState(false)

  // Load availability data on mount
  useEffect(() => {
    const loadAvailability = async () => {
      setIsLoading(true)
      try {
        const data = await getTicketProductAvailability(product.id)
        setAvailability(data.availability)
      } catch (error) {
        toast.error("Failed to load ticket availability: " + error)
      } finally {
        setIsLoading(false)
      }
    }

    loadAvailability()
  }, [product.id])

  const getTotalAvailableSeats = (dateAvailability: TicketProductAvailability) => {
    return dateAvailability.row_types.reduce(
      (sum, rowType) => sum + rowType.available_seats, 0
    )
  }

  const getFilteredAvailability = (quantity: number) => {
    return availability.filter((avail) => getTotalAvailableSeats(avail) >= quantity)
  }

  const filteredAvailability = getFilteredAvailability(nbOfTickets)

  const dateAsStr = (date: Date) => {
    return `${
      date.getFullYear()
    }-${
      String(date.getMonth() + 1).padStart(2, "0")
    }-${String(date.getDate()).padStart(2, "0")}`
  }

  const isDateUnavailable = (date: Date) => {
    const dateString = dateAsStr(date)
    return !filteredAvailability.some((avail) => avail.date === dateString)
  }

  const handleDateChange = (date: Date | null) => {
    setSelectedDate(date)
  }

  const handlePickSeats = () => {
    if (!selectedDate) {
      toast.error("Please select a date")
      return
    }
    
    const dateString = dateAsStr(selectedDate)
    onDateSelect(dateString, nbOfTickets)
  }

  // TODO render date selector
}

return (
  <div className="bg-ui-bg-base">
    <h3 className="txt-large text-center mb-4">Select Show Date</h3>
    {isLoading && (
      <div className="flex flex-col gap-y-4">
        <div className="h-6 bg-ui-bg-subtle rounded animate-pulse w-32 mx-auto" />
        <div className="h-10 bg-ui-bg-subtle rounded animate-pulse w-48 mx-auto" />
        <div className="h-6 bg-ui-bg-subtle rounded animate-pulse w-40 mx-auto" />
      </div>
    )}
    {!isLoading && (
      <div className="flex flex-col gap-y-4">
        {/* Number of tickets selection */}
        <div className="flex justify-center">
          <div className="flex flex-col gap-y-2">
            <Label htmlFor="nbOfTickets" className="text-ui-fg-subtle txt-compact-small">Number of Tickets</Label>
            <div className="flex items-center justify-between rounded-md">
              <IconButton
                onClick={() => setNbOfTickets(Math.max(1, nbOfTickets - 1))}
                disabled={disabled || nbOfTickets <= 1}
                variant="transparent"
              >
                <Minus />
              </IconButton>
              {nbOfTickets}
              <IconButton
                onClick={() => setNbOfTickets(Math.min(10, nbOfTickets + 1))}
                disabled={disabled || nbOfTickets >= 10}
                variant="transparent"
              >
                <Plus />
              </IconButton>
            </div>
          </div>
        </div>

        {/* Calendar */}
        <div className="flex justify-center">
          <Calendar
            onChange={handleDateChange}
            minValue={filteredAvailability.length > 0 ? 
              new Date(filteredAvailability[0].date) : undefined
            }
            maxValue={filteredAvailability.length > 0 ? 
              new Date(filteredAvailability[filteredAvailability.length - 1].date) : undefined
            }
            isDateUnavailable={isDateUnavailable}
          />
        </div>

        {/* Available dates info */}
        {filteredAvailability.length > 0 && (
          <p className="txt-small text-ui-fg-subtle text-center txt-compact-small">
            {filteredAvailability.length} show{filteredAvailability.length !== 1 ? "s" : ""} available for {nbOfTickets} ticket{nbOfTickets !== 1 ? "s" : ""}
          </p>
        )}

        {/* Pick Seats Button */}
        <Button
          onClick={handlePickSeats}
          disabled={disabled || !selectedDate || filteredAvailability.length === 0}
          variant="primary"
          className="w-full"
        >
          Pick Seats
        </Button>
      </div>
    )}
  </div>
)

import { TicketProductSeatsData } from "@lib/util/ticket-product"

export const getTicketProductSeats = async (
  productId: string,
  date: string
): Promise<TicketProductSeatsData> => {
  const headers = {
    ...(await getAuthHeaders()),
  }

  const next = {
    ...(await getCacheOptions("ticket-products")),
  }

  return sdk.client
    .fetch<TicketProductSeatsData>(
      `/store/ticket-products/${productId}/seats`,
      {
        method: "GET",
        query: {
          date,
        },
        headers,
        next,
        cache: "no-store", // Always fetch fresh data for seats
      }
    )
    .then((data) => data)
}

import { convertToLocale } from "../../../../lib/util/money"

export type SelectedSeat = {
  seatNumber: string
  rowNumber: string
  rowType: string
  variantId: string
  date: string
  venueRowId: string
}

type SeatSelectionProps = {
  seatData: TicketProductSeatsData
  selectedSeats: SelectedSeat[]
  onSeatSelect: (seat: SelectedSeat) => void
  disabled?: boolean
  product: HttpTypes.StoreProduct
  maxSeats: number
}

export default function SeatSelection({
  seatData,
  selectedSeats,
  onSeatSelect,
  disabled = false,
  product,
  maxSeats,
}: SeatSelectionProps) {
  const getSeatStatus = (rowNumber: string, seatNumber: string) => {
    const seat = seatData.seat_map
      .find((row) => row.row_number === rowNumber)
      ?.seats.find((s) => s.number === seatNumber)

    if (!seat) {return "unavailable"}

    if (seat.is_purchased) {return "purchased"}
    
    const isSelected = selectedSeats.some((s) => 
      s.seatNumber === seatNumber && s.rowNumber === rowNumber && s.date === seatData.date
    )
    
    if (isSelected) {return "selected"}
    
    return "available"
  }

  const getSeatColor = (status: string) => {
    switch (status) {
      case "purchased":
        return "bg-ui-tag-neutral-bg text-ui-tag-neutral-text cursor-not-allowed"
      case "selected":
        return "bg-ui-tag-blue-bg text-ui-tag-blue-text"
      case "available":
        return "bg-ui-tag-green-bg text-ui-tag-green-text cursor-pointer hover:bg-ui-tag-green-bg-hover"
      default:
        return "bg-ui-tag-neutral-bg text-ui-tag-neutral-text cursor-not-allowed"
    }
  }

  const formatRowType = (rowType: string) => {
    switch (rowType.toLowerCase()) {
      case "vip":
        return "VIP"
      default:
        return rowType.charAt(0).toUpperCase() + rowType.slice(1).toLowerCase()
    }
  }

  // TODO handle seat selection
}

const handleSeatClick = (rowNumber: string, seatNumber: string, rowType: string) => {
  if (disabled) {return}

  const seat = seatData.seat_map
    .find((row) => row.row_number === rowNumber)
    ?.seats.find((s) => s.number === seatNumber)

  if (!seat || seat.is_purchased || !seat.variant_id) {return}

  // Check if seat is already selected
  const isAlreadySelected = selectedSeats.some(
    (selectedSeat) => selectedSeat.seatNumber === seatNumber && selectedSeat.rowNumber === rowNumber
  )

  if (isAlreadySelected) {
    // Unselect the seat
    onSeatSelect({
      seatNumber,
      rowNumber,
      rowType,
      variantId: seat.variant_id,
      date: seatData.date,
      venueRowId: seatData.venue.rows.find((row) => row.row_number === rowNumber)?.id as string,
    })
    return
  }

  // Check if we've reached the maximum number of seats
  if (selectedSeats.length >= maxSeats) {
    return
  }

  // Select the seat
  onSeatSelect({
    seatNumber,
    rowNumber,
    rowType,
    variantId: seat.variant_id,
    date: seatData.date,
    venueRowId: seatData.venue.rows.find((row) => row.row_number === rowNumber)?.id as string,
  })
}

// TODO render seat chart

return (
  <TooltipProvider>
    <div className="flex flex-col gap-y-4">
      {/* Theater Layout */}
      <div className="bg-gradient-to-b from-ui-bg-subtle to-ui-bg-subtle rounded-lg p-4 shadow-elevation-card-rest overflow-y-auto max-h-[500px]">
        {/* Stage Area */}
        <div className="text-center mb-6">
          <div className="bg-gradient-to-b from-ui-fg-base to-ui-fg-base text-white px-8 py-4 rounded-lg shadow-xl relative">
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent rounded-lg"></div>
            <div className="relative">
              <div className="txt-large-plus mb-1">STAGE</div>
              <div className="txt-small text-ui-alpha-250">Performance Area</div>
            </div>
          </div>
        </div>

        {/* Seating Area */}
        <div>
          <div className="space-y-4">
            {seatData.seat_map.map((row, index) => (
              <div key={row.row_number} className="flex items-baseline justify-center gap-x-3">
                {/* Row label */}
                <div className="txt-small text-ui-fg-subtle">
                  {row.row_number}
                </div>

                {/* Seats */}
                <div className="flex gap-x-1 gap-y-1 flex-wrap justify-center">
                  {row.seats.map((seat) => {
                    const status = getSeatStatus(row.row_number, seat.number)
                    const variant = product.variants?.find((v) => v.id === seat.variant_id)
                    const seatPrice = variant?.calculated_price?.calculated_amount || 0
                    const currencyCode = variant?.calculated_price?.currency_code || "USD"
                    
                    const tooltipContent = status === "purchased" 
                      ? "Sold" 
                      : status === "selected"
                      ? "Selected"
                      : seatPrice > 0
                      ? `Seat ${seat.number} - ${formatRowType(row.row_type)} - ${convertToLocale({
                          amount: seatPrice,
                          currency_code: currencyCode,
                          minimumFractionDigits: 0,
                        })}`
                      : `Seat ${seat.number} - ${formatRowType(row.row_type)}`

                    return (
                      <Tooltip key={seat.number} content={tooltipContent} className="z-[76]">
                        <button
                          onClick={() => handleSeatClick(row.row_number, seat.number, row.row_type)}
                          disabled={disabled || status === "purchased" || status === "unavailable" || (status === "available" && selectedSeats.length >= maxSeats)}
                          className={`
                            w-8 h-8 rounded-sm txt-xsmall transition-all duration-200 flex items-center justify-center
                            ${getSeatColor(status)}
                            ${status === "purchased" ? "cursor-not-allowed" : "cursor-pointer"}
                            ${(status === "available" && selectedSeats.length >= maxSeats) || status === "purchased" ? "opacity-50 cursor-not-allowed" : ""}
                            ${status === "available" ? "shadow-sm" : ""}
                            ${status === "selected" ? "border border-ui-border-interactive" : ""}
                          `}
                        >
                          {seat.number}
                        </button>
                      </Tooltip>
                    )
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Legend */}
      <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 txt-small">
        <div className="flex items-center gap-x-2">
          <div className="w-5 h-5 bg-ui-tag-green-bg rounded"></div>
          <span className="txt-small-plus">Available</span>
        </div>
        <div className="flex items-center gap-x-2">
          <div className="w-5 h-5 bg-ui-tag-blue-bg rounded"></div>
          <span className="txt-small-plus">Selected</span>
        </div>
        <div className="flex items-center gap-x-2">
          <div className="w-5 h-5 bg-ui-tag-neutral-bg rounded"></div>
          <span className="txt-small-plus">Sold</span>
        </div>
      </div>
    </div>
  </TooltipProvider>
)

import Modal from "../../../common/components/modal"

type SeatSelectionModalProps = {
  product: HttpTypes.StoreProduct
  selectedDate: string
  selectedQuantity: number
  isOpen: boolean
  onClose: () => void
  disabled?: boolean
}

export default function SeatSelectionModal({
  product,
  selectedDate,
  selectedQuantity,
  isOpen,
  onClose,
  disabled = false,
}: SeatSelectionModalProps) {
  const [selectedSeats, setSelectedSeats] = useState<SelectedSeat[]>([])
  const [seatData, setSeatData] = useState<TicketProductSeatsData | null>(null)
  const [isAddingToCart, setIsAddingToCart] = useState(false)
  
  const countryCode = useParams().countryCode as string
  const router = useRouter()

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

  const totalPrice = useMemo(() => {
    return selectedSeats.reduce((total, seat) => {
      const variant = product.variants?.find((v) => v.id === seat.variantId)
      return total + (variant?.calculated_price?.calculated_amount || 0)
    }, 0)
  }, [selectedSeats, product.variants])

  // Load seat data when modal opens
  useEffect(() => {
    if (!isOpen || !selectedDate) {
      return
    }
    setSelectedSeats([])
    setSeatData(null)

    const loadSeatData = async () => {
      try {
        const data = await getTicketProductSeats(product.id, selectedDate)
        setSeatData(data)
      } catch (error) {
        toast.error("Failed to load seat data: " + error)
      }
    }

    loadSeatData()
  }, [isOpen, selectedDate, product.id])

  // TODO handle seat selection and cart addition
}

const handleSeatSelect = (seat: SelectedSeat) => {
  setSelectedSeats((prev) => {
    const existingIndex = prev.findIndex(
      (s) => s.seatNumber === seat.seatNumber && s.rowNumber === seat.rowNumber
    )
    
    if (existingIndex >= 0) {
      // Remove seat if already selected
      return prev.filter((_, index) => index !== existingIndex)
    } else {
      // Add seat if not selected and under limit
      if (prev.length < selectedQuantity) {
        return [...prev, seat]
      }
      return prev
    }
  })
}

const handleAddToCart = async () => {
  if (selectedSeats.length === 0) {
    toast.error("Please select at least one seat")
    return
  }

  if (selectedSeats.length !== selectedQuantity) {
    toast.error(`Please select exactly ${selectedQuantity} seat${selectedQuantity !== 1 ? "s" : ""}`)
    return
  }

  setIsAddingToCart(true)
  try {
    // Add each seat as a separate cart item
    for (const seat of selectedSeats) {
      await addToCart({
        variantId: seat.variantId,
        quantity: 1,
        countryCode,
        metadata: {
          seat_number: seat.seatNumber,
          row_number: seat.rowNumber,
          show_date: seat.date,
          venue_row_id: seat.venueRowId,
        },
      })
    }

    toast.success(`Added ${selectedSeats.length} ticket${selectedSeats.length !== 1 ? "s" : ""} to cart`)
    
    // Redirect to checkout
    router.push(`/${countryCode}/checkout?step=address`)
  } catch (error) {
    toast.error("Failed to add tickets to cart: " + error)
  } finally {
    setIsAddingToCart(false)
  }
}

// TODO render modal with seat selection