"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Copy, SaudiRiyal } from "lucide-react";
import { useTranslations } from "next-intl";
import type { OrderData } from "@/types/booking";

interface ReservationSummaryProps {
  orderData: OrderData | null;
}

export default function ReservationSummary({
  orderData,
}: ReservationSummaryProps) {
  const t = useTranslations("ConfirmationPage");
  const tCommon = useTranslations("Common");

  const handleCopyBookingId = () => {
    if (orderData) {
      navigator.clipboard.writeText(`BK-${orderData.id}`);
    }
  };

  if (!orderData) {
    return (
      <Accordion type="single" collapsible defaultValue="item-1">
        <AccordionItem value="item-1">
          <AccordionTrigger className="text-[16px] font-bold">
            {t("reservationSummary")}
          </AccordionTrigger>
          <AccordionContent className="pt-5">
            <p className="text-[14px] text-gray-dark">
              {tCommon("noOrderDataAvailable")}
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    );
  }

  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger className="text-[16px] font-bold">
          {t("reservationSummary")}
        </AccordionTrigger>
        <AccordionContent className="pt-5 flex flex-col gap-4 w-fit">
          {/* Booking ID */}
          <div className="flex justify-between gap-20 items-center">
            <span className="text-[14px] text-gray-dark">{t("bookingId")}</span>
            <div className="flex items-center gap-2">
              <span className="text-[14px] font-medium">BK-{orderData.id}</span>
              <Copy
                className="size-4 text-gray-main cursor-pointer hover:text-vendor-secondary transition-colors"
                onClick={handleCopyBookingId}
              />
            </div>
          </div>

          {/* Confirmation Sent To */}
          <div className="flex justify-between gap-20 items-center">
            <span className="text-[14px] text-gray-dark">
              {t("confirmationSentTo")}
            </span>
            <span className="text-[14px] font-medium">{orderData.email}</span>
          </div>

          {/* Order Status */}
          <div className="flex justify-between gap-20 items-center">
            <span className="text-[14px] text-gray-dark">
              {tCommon("orderStatus")}
            </span>
            <span className="text-[14px] font-medium capitalize">
              {orderData.order_status}
            </span>
          </div>

          {/* Payment Status */}
          <div className="flex justify-between gap-20 items-center">
            <span className="text-[14px] text-gray-dark">
              {tCommon("paymentStatus")}
            </span>
            <span className="text-[14px] font-medium capitalize">
              {orderData.payment_status}
            </span>
          </div>

          {/* Event Tickets */}
          {orderData.event_tickets && orderData.event_tickets.length > 0 && (
            <>
              {orderData.event_tickets.map((ticket, index) => (
                <div
                  key={index}
                  className="flex justify-between gap-20 items-center"
                >
                  <span className="text-[14px] text-gray-dark">
                    {ticket.pivot.ticket_type_title}
                  </span>
                  <div className="flex items-center gap-4">
                    <span className="text-[14px] font-medium">
                      {t("qty")} : {ticket.pivot.quantity}
                    </span>
                    <span className="text-[14px] font-medium flex items-center gap-1">
                      {t("price")} : {ticket.pivot.quantity} X
                      <SaudiRiyal className="size-4" />
                      {ticket.pivot.price}
                    </span>
                  </div>
                </div>
              ))}
            </>
          )}

          {/* Created Date */}
          <div className="flex justify-between items-center">
            <span className="text-[14px] text-gray-dark">
              {tCommon("orderDate")}
            </span>
            <span className="text-[14px] font-medium">
              {new Date(orderData.created_at).toLocaleDateString()}
            </span>
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}