"use client";
import { cn } from "@/lib/utils";
import type { Ticket } from "./data";
import { useLocale, useTranslations } from "use-intl";
import { ClockFading, Download, Eye, MapPinIcon } from "lucide-react";
import Link from "next/link";
import { useRef } from "react";
import { downloadTicketPDF } from "@/lib/pdfUtils";

type Props = {
  ticket: Ticket;
};

import { TicketCard as SingleTicketCard } from "./TicketPage/TicketCard";

export function TicketCard({ ticket }: Props) {
  const t = useTranslations("DownloadTickets");
  const locale = useLocale();
  const isRTL = locale === "ar";
  const ticketRef = useRef<HTMLDivElement>(null);

  const handleDownloadPDF = () => {
    downloadTicketPDF(ticketRef, `ticket-${ticket.ticketNumber}.pdf`);
  };

  return (
    <>
      <div
        className={cn(
          "w-full overflow-hidden rounded-[12px] relative py-[10px] px-5 shadow-[var(--ticket-card-shadow)] space-y-[10px] bg-white",
          "before:content-[''] before:absolute before:top-1 before:bottom-1 before:w-[5px] before:bg-vendor-primary",
          isRTL
            ? "before:right-1 before:rounded-tr-[8px] before:rounded-br-[8px]"
            : "before:left-1 before:rounded-tl-[8px] before:rounded-bl-[8px]",
        )}
      >
        <div className="flex items-center justify-between gap-2 flex-wrap">
          <h3 className="text-[20px] font-bold text-vendor-primary">
            {ticket.title}
          </h3>
          <div className="flex gap-1 text-[14px]">
            <span>
              {t("ticketNumber")} #{ticket.ticketNumber}
            </span>
            <span>|</span>
            <span>{ticket.bookingCode}</span>
          </div>
        </div>
        <div className="flex gap-2 justify-between items-start">
          <div className="flex flex-col gap-[10px] text-[14px]">
            <span>{ticket.eventTitle}</span>
            <strong className="font-bold flex gap-1">
              <MapPinIcon className="w-[18px] h-[18px] text-vendor-primary shrink-0" />
              {ticket.location}
            </strong>
            <strong className="font-bold flex gap-1">
              <ClockFading className="w-[18px] h-[18px] text-vendor-primary shrink-0" />
              <span dir="auto">
                {ticket.startDate} | {ticket.startTime}
              </span>
            </strong>
          </div>
          <div className="flex flex-col gap-[10px]" data-html2canvas-ignore>
            <Link
              href={`/download-tickets/${ticket.barCode}`}
              className={cn(
                "w-9 h-9 flex items-center justify-center rounded-full cursor-pointer",
                "bg-[#919EAB14]  hover:bg-vendor-primary hover:text-white transition-colors duration-300 ease-in-out",
              )}
            >
              <Eye className="w-5 h-5" />
            </Link>
            <div
              onClick={handleDownloadPDF}
              className={cn(
                "w-9 h-9 flex items-center justify-center rounded-full cursor-pointer",
                "bg-[#919EAB14]  hover:bg-vendor-primary hover:text-white transition-colors duration-300 ease-in-out",
              )}
            >
              <Download className="w-5 h-5" />
            </div>
          </div>
        </div>
      </div>

      {/* Hidden Ticket Component for PDF Generation */}
      <div style={{ position: "absolute", left: "-9999px", top: "-9999px" }}>
        <div ref={ticketRef} className="w-[400px]">
          <SingleTicketCard {...ticket} />
        </div>
      </div>
    </>
  );
}