"use client";

import { useCallback, useState } from "react";
import AuctionClient, {
  type AuctionClosedOverlayData,
} from "@/(pages)/autionClient/AuctionClient";
import WinnerOverlay from "@/components/yearly/WinnerOverlay";

type AuctionClientCustomProps = {
  item: any;
  locale: string;
  jsonLd?: Record<string, unknown>;
};

export default function AuctionClientCustom({
  item,
  locale,
  jsonLd,
}: AuctionClientCustomProps) {
  const isRtl = (locale || "").toLowerCase().startsWith("ar");
  const [winnerOverlayOpen, setWinnerOverlayOpen] = useState(false);
  const [winnerData, setWinnerData] = useState<
    (AuctionClosedOverlayData & { label?: string }) | null
  >(null);

  const handleAuctionClosed = useCallback(
    (data: AuctionClosedOverlayData) => {
      setWinnerData({
        ...data,
        label:
          (typeof item?.title === "string" && item.title.trim()) ||
          (typeof item?.unique_id === "string" && item.unique_id.trim()) ||
          undefined,
      });
      setWinnerOverlayOpen(true);
    },
    [item?.title, item?.unique_id],
  );

  const handleWinnerOverlayClose = useCallback(() => {
    setWinnerOverlayOpen(false);
    setWinnerData(null);
  }, []);

  return (
    <>
      {jsonLd ? (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      ) : null}
      <div dir={isRtl ? "rtl" : "ltr"} className="bg-[#FBF9F6] min-h-screen">
        <AuctionClient item={item} onAuctionClosed={handleAuctionClosed} />
      </div>
      <WinnerOverlay
        open={winnerOverlayOpen}
        winnerName={winnerData?.winnerName || null}
        winnerPaddleUniqueId={winnerData?.winnerPaddleUniqueId || null}
        winnerPaddleNumber={winnerData?.winnerPaddleNumber || null}
        finalPrice={winnerData?.finalPrice || 0}
        reason={winnerData?.reason || ""}
        label={winnerData?.label}
        onClose={handleWinnerOverlayClose}
      />
    </>
  );
}