"use client";

import { AnimatePresence, motion } from "framer-motion";
import { CreditCard, Inbox, Send } from "lucide-react";
import { useEffect, useState } from "react";
import type {
  LiveClosedSummary,
  LiveRoom,
  StatusMeta,
  TranslationFn,
} from "@/components/annaulMazad/live-rooms-table/types";
import {
  buildAnimalDisplayName,
  getWinnerDisplayPaddle,
  getWinnerName,
  isLiveRoomOwnerForCurrentUser,
} from "@/components/annaulMazad/live-rooms-table/utils";

function closedOutcomeBadgeClassKey(
  outcome: LiveClosedSummary["outcome"],
): string {
  if (outcome === "sold") return "sold";
  if (outcome === "withdrawn") return "withdrawn";
  if (outcome === "skipped") return "skipped";
  return "unsold";
}

function closedOutcomeLabel(
  outcome: LiveClosedSummary["outcome"],
  tStatus: TranslationFn,
): string {
  if (outcome === "sold") return tStatus("status.sold");
  if (outcome === "withdrawn") return tStatus("status.withdrawn");
  if (outcome === "skipped") return tStatus("status.skipped");
  return tStatus("status.unsold");
}

interface RoomsTableCardProps {
  days: number[];
  activeDay: number;
  onDaySelect: (day: number) => void;
  loadingRooms: boolean;
  rooms: LiveRoom[];
  animalType: "horse" | "camel";
  isRtl: boolean;
  t: TranslationFn;
  tStatus: TranslationFn;
  selectedRoomId: string | null;
  closedSummariesByRoomId: Record<string, LiveClosedSummary>;
  activeAuctionGroupId: string | null;
  /** Live current price for the active room (from yearly socket state). */
  activeRoomLivePrice: number | null;
  hidePriceAndWinner: boolean;
  enablePurchaseOffers: boolean;
  resolveRoomTitle: (room: LiveRoom) => string;
  resolveBackendStatus: (raw: string | null | undefined) => StatusMeta;
  statusClass: (state: string | null | undefined) => string;
  onRoomClick: (room: LiveRoom) => void;
  onBuyPaddle: (room: LiveRoom) => void;
  onSendOffer: (room: LiveRoom) => void;
  isLoggedIn?: boolean;
  onLoginClick?: () => void;
  isResultsPage?: boolean;
}

export default function RoomsTableCard({
  days,
  activeDay,
  onDaySelect,
  loadingRooms,
  rooms,
  animalType,
  isRtl,
  t,
  tStatus,
  selectedRoomId,
  closedSummariesByRoomId,
  activeAuctionGroupId,
  activeRoomLivePrice,
  hidePriceAndWinner,
  enablePurchaseOffers,
  resolveRoomTitle,
  resolveBackendStatus,
  statusClass,
  onRoomClick,
  onBuyPaddle,
  onSendOffer,
  isLoggedIn = true,
  onLoginClick,
  isResultsPage = false,
}: RoomsTableCardProps) {
  const [autoOpenOfferRoomId, setAutoOpenOfferRoomId] = useState<string | null>(
    null,
  );

  useEffect(() => {
    if (!autoOpenOfferRoomId) return;
    if (!enablePurchaseOffers || !isLoggedIn) return;

    const room = rooms.find((r) => r.id === autoOpenOfferRoomId);
    if (!room) return;

    // After buying a paddle, open the offer modal only while the user may still submit an offer.
    // Do not use `paddle_number` alone — it stays set after the offer is sent.
    if (room.can_send_offer) {
      onSendOffer(room);
      setAutoOpenOfferRoomId(null);
    }
  }, [
    autoOpenOfferRoomId,
    enablePurchaseOffers,
    isLoggedIn,
    onSendOffer,
    rooms,
  ]);

  const showHorsesList = animalType === "horse";
  const headerTitle = showHorsesList
    ? isRtl
      ? "تفاصيل الخيول"
      : "Horse details"
    : isRtl
      ? "قاعات المزاد"
      : "Auction Rooms";
  const headerDescription = showHorsesList
    ? isRtl
      ? "عرض تفاصيل كل خيل مع السعر والحالة والفائز."
      : "View each horse with price, status and winner."
    : isRtl
      ? "عرض مباشر للحالة والسعر والفائز والوصول السريع للتفاصيل."
      : "Live room status, price, winner, and quick access to details.";

  return (
    <>
      {days.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          {days.map((day) => {
            const isActive = day === activeDay;

            return (
              <button
                key={day}
                type="button"
                className={`inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-black transition ${
                  isActive
                    ? "border-[#0F5132] bg-[#0F5132] text-white shadow-[0_12px_30px_-18px_rgba(15,81,50,0.85)]"
                    : "border-slate-200 bg-white text-slate-600 hover:border-[#0F5132]/30 hover:text-[#0F5132]"
                }`}
                onClick={() => onDaySelect(day)}
              >
                {tStatus("day", { day })}
              </button>
            );
          })}
        </div>
      )}

      <div className="overflow-hidden rounded-[28px] border border-[#e3ece5] bg-[linear-gradient(180deg,#ffffff_0%,#fbfdfb_55%,#f3f8f4_100%)] shadow-[0_30px_70px_-38px_rgba(15,81,50,0.45)]">
        <div className="flex flex-col gap-4 border-b border-[#e8efe9] px-5 py-5 md:flex-row md:items-center md:justify-between">
          <div>
            <h3 className="text-base font-black text-slate-900">
              {headerTitle}
            </h3>
            <p className="mt-1 text-xs text-slate-500">{headerDescription}</p>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {days.length > 0 && (
              <span className="inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-800">
                {isRtl ? `اليوم ${activeDay}` : `Day ${activeDay}`}
              </span>
            )}
            <span className="inline-flex rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold text-slate-700">
              {showHorsesList
                ? isRtl
                  ? `${rooms.length} خيل`
                  : `${rooms.length} horses`
                : isRtl
                  ? `${rooms.length} غرفة`
                  : `${rooms.length} rooms`}
            </span>
          </div>
        </div>

        <AnimatePresence mode="wait">
          {loadingRooms ? (
            <motion.div
              key="rooms-loading"
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.2 }}
              className="px-5 py-12 text-center text-sm text-slate-500"
            >
              {tStatus("loading_rooms")}
            </motion.div>
          ) : rooms.length === 0 ? (
            <motion.div
              key={`rooms-empty-${activeDay}`}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.2 }}
              className="px-5 py-12"
            >
              <div className="mx-auto max-w-xl rounded-[24px] border border-slate-200 bg-white/80 p-8 text-center shadow-[0_20px_40px_-30px_rgba(15,23,42,0.45)]">
                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-800">
                  <Inbox size={26} />
                </div>
                <h3
                  className="mt-4 text-lg font-extrabold text-slate-800"
                  dir={isRtl ? "rtl" : "ltr"}
                >
                  {t("rooms_empty_title", {
                    entity: t(
                      `entity.${animalType === "camel" ? "camel" : "horse"}`,
                    ),
                  })}
                </h3>
                <p
                  className="mt-1 text-sm text-slate-500"
                  dir={isRtl ? "rtl" : "ltr"}
                >
                  {t("rooms_empty_description")}
                </p>
              </div>
            </motion.div>
          ) : (
            <motion.div
              key={`rooms-table-${activeDay}`}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.2 }}
              className="overflow-x-auto"
            >
              <table className="min-w-[980px] w-full text-sm">
                <thead>
                  <tr className="bg-slate-50/80 text-xs text-slate-500">
                    <th className="w-36 border-b border-slate-100 p-4 text-center font-semibold">
                      {animalType === "horse"
                        ? tStatus("rooms_table.th_number")
                        : tStatus("rooms_table.th_room_number")}
                    </th>
                    <th className="w-[420px] border-b border-slate-100 p-4 text-start font-semibold">
                      {animalType === "horse"
                        ? tStatus("rooms_table.th_name")
                        : tStatus("rooms_table.th_info")}
                    </th>
                    {!hidePriceAndWinner && (
                      <th className="w-40 border-b border-slate-100 p-4 text-center font-semibold">
                        {tStatus("rooms_table.th_last_price")}
                      </th>
                    )}
                    {!hidePriceAndWinner && (
                      <th className="w-36 border-b border-slate-100 p-4 text-center font-semibold">
                        {tStatus("rooms_table.th_winner")}
                      </th>
                    )}
                    <th className="w-28 border-b border-slate-100 p-4 text-center font-semibold">
                      {tStatus("th_status")}
                    </th>
                    <th className="w-36 border-b border-slate-100 p-4 text-center font-semibold">
                      {tStatus("th_view_details")}
                    </th>
                  </tr>
                </thead>

                <tbody className="divide-y divide-slate-100">
                  {rooms.map((room) => {
                    const roomNumber =
                      room.day_order != null && room.day_order !== ""
                        ? String(room.day_order)
                        : "1";
                    const title = resolveRoomTitle(room);
                    const statusResolved = resolveBackendStatus(room.status);
                    const isSelected = selectedRoomId === room.id;
                    const imageUrl = room.main_image?.url || "";
                    const displayName = buildAnimalDisplayName(
                      room,
                      room.animal?.name || title,
                    );
                    const breed = room.animal?.breed;
                    const fatherName = room.animal?.father_name;
                    const motherName = room.animal?.mother_name;
                    const ownerName =
                      room.owner_name ?? room.owner?.name ?? null;
                    const roomClosedSummary =
                      closedSummariesByRoomId[room.id] ??
                      Object.values(closedSummariesByRoomId).find(
                        (s) =>
                          String(s.auctionGroupId) === String(room.id),
                      );
                    const isCurrentlyLiveAuction =
                      activeAuctionGroupId != null &&
                      String(activeAuctionGroupId) === String(room.id);
                    const isClosedLiveRoom =
                      Boolean(roomClosedSummary) && !isCurrentlyLiveAuction;
                    const roomStatusKey = (
                      statusResolved.statusKey ||
                      room.status ||
                      ""
                    ).toLowerCase();
                    const isUnsoldRoom =
                      !isCurrentlyLiveAuction && roomStatusKey === "unsold";
                    const isSkippedRoom =
                      !isCurrentlyLiveAuction && roomStatusKey === "skipped";
                    const lowestOfferRaw =
                      room.info_final_bid?.lowest_offer_value;
                    const livePriceOverride =
                      isCurrentlyLiveAuction &&
                      activeRoomLivePrice != null &&
                      Number.isFinite(activeRoomLivePrice)
                        ? activeRoomLivePrice.toLocaleString()
                        : null;
                    const lastPriceToShow =
                      livePriceOverride != null
                        ? livePriceOverride
                        : isUnsoldRoom &&
                            !isSkippedRoom &&
                            lowestOfferRaw != null &&
                            String(lowestOfferRaw).trim() !== ""
                          ? String(lowestOfferRaw)
                          : (room.winning_bid?.amount ??
                            roomClosedSummary?.finalPrice ??
                            "0.00");
                    const winnerDisplayPaddleRaw = getWinnerDisplayPaddle(room);
                    const winnerDisplayPaddle =
                      roomClosedSummary?.winnerPaddleUniqueId ||
                      (roomClosedSummary?.winnerPaddleNumber
                        ? `#${roomClosedSummary.winnerPaddleNumber}`
                        : null) ||
                      winnerDisplayPaddleRaw;
                    const winnerName =
                      room.winner_user?.name ??
                      roomClosedSummary?.winnerName ??
                      getWinnerName(room);
                    const isNoWinnerClosure =
                      !isCurrentlyLiveAuction &&
                      (["withdrawn", "pulled", "unsold", "skipped"].includes(
                        (statusResolved.statusKey || "").toLowerCase(),
                      ) ||
                        (roomClosedSummary &&
                          ["withdrawn", "unsold", "skipped"].includes(
                            roomClosedSummary.outcome,
                          )));
                    const isRoomSold =
                      (statusResolved.statusKey || "").toLowerCase() ===
                        "sold" ||
                      roomClosedSummary?.outcome === "sold";
                    const hideLastPriceCamelSold =
                      animalType === "camel" && isRoomSold;
                    const showServerOfferSentChip =
                      !isCurrentlyLiveAuction &&
                      room.status === "unsold" &&
                      Boolean(room.paddle_number) &&
                      !room.can_buy_paddle &&
                      !room.can_send_offer;
                    const isCurrentUserRoomOwner =
                      isLiveRoomOwnerForCurrentUser(room);
                    return (
                      <tr
                        key={room.id}
                        className={`transition-colors hover:bg-white ${
                          isSelected ? "bg-emerald-50/70" : ""
                        }`}
                      >
                        <td className="p-4 text-center align-center">
                          {roomNumber}
                        </td>

                        <td className="p-4 align-middle">
                          <div className="flex items-center gap-3">
                            {imageUrl ? (
                              <div className="h-14 w-20 shrink-0 overflow-hidden rounded-2xl bg-slate-100">
                                <img
                                  src={imageUrl}
                                  alt={displayName}
                                  className="h-full w-full object-cover"
                                />
                              </div>
                            ) : (
                              <div className="flex h-14 w-20 shrink-0 items-center justify-center rounded-2xl bg-slate-100 text-[10px] text-slate-400">
                                {tStatus("no_image")}
                              </div>
                            )}

                            <div className="min-w-0 space-y-1">
                              {animalType === "camel" ? (
                                <>
                                  <div className="truncate text-sm font-extrabold text-slate-900">
                                    {title}
                                  </div>
                                  <div className="text-xs text-slate-400">
                                    {tStatus("rooms_table.camel_count_label")}{" "}
                                    {String(room.single_auctions_count ?? "-")}
                                  </div>
                                  {breed ? (
                                    <div className="truncate text-[11px] text-slate-500">
                                      {tStatus("breed_label")}: {String(breed)}
                                    </div>
                                  ) : null}
                                </>
                              ) : (
                                <>
                                  <div className="truncate text-sm font-extrabold text-slate-900">
                                    {title}
                                  </div>
                                  {!showHorsesList ? (
                                    <div className="text-xs text-slate-400">
                                      {isRtl ? "عدد الخيول: " : "Horses: "}
                                      {String(
                                        room.single_auctions_count ?? "-",
                                      )}
                                    </div>
                                  ) : (
                                    <div className="space-y-0.5 text-xs text-slate-600">
                                      {motherName ? (
                                        <div className="truncate">
                                          <span className="font-normal text-slate-500">
                                            {tStatus("mother_label")}:{" "}
                                          </span>
                                          <span className="font-medium text-slate-700">
                                            {motherName}
                                          </span>
                                        </div>
                                      ) : null}
                                      {fatherName ? (
                                        <div className="truncate">
                                          <span className="font-normal text-slate-500">
                                            {tStatus("father_label")}:{" "}
                                          </span>
                                          <span className="font-medium text-slate-700">
                                            {fatherName}
                                          </span>
                                        </div>
                                      ) : null}
                                      {ownerName ? (
                                        <div className="truncate">
                                          <span className="font-normal text-slate-500">
                                            {tStatus("owner_label")}:{" "}
                                          </span>
                                          <span className="font-medium text-slate-700">
                                            {ownerName}
                                          </span>
                                        </div>
                                      ) : null}
                                    </div>
                                  )}
                                </>
                              )}
                            </div>
                          </div>
                        </td>

                        {!hidePriceAndWinner && (
                          <td className="p-4 text-center align-middle">
                            {hideLastPriceCamelSold ? (
                              <span
                                className="inline-flex min-h-[1.75rem] min-w-[2rem] items-center justify-center"
                                aria-hidden
                              />
                            ) : (
                              <span className="inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-800">
                                {lastPriceToShow != null &&
                                lastPriceToShow !== ""
                                  ? lastPriceToShow
                                  : "-"}
                              </span>
                            )}
                          </td>
                        )}

                        {!hidePriceAndWinner && (
                          <td className="p-4 text-center align-middle text-slate-500">
                            {!isNoWinnerClosure &&
                            (winnerDisplayPaddle || winnerName) ? (
                              <div className="flex flex-col items-center gap-0.5 leading-tight">
                                {winnerName ? (
                                  <span className="text-sm font-semibold text-slate-700">
                                    {winnerName}
                                  </span>
                                ) : null}
                                {winnerDisplayPaddle ? (
                                  <span className="text-xs font-black text-slate-800">
                                    {winnerDisplayPaddle}
                                  </span>
                                ) : null}
                              </div>
                            ) : (
                              <div className="flex flex-col items-center gap-2">
                                {showServerOfferSentChip ? (
                                  <span className="rounded-full whitespace-nowrap border border-blue-200 bg-blue-100 px-2 py-1 text-[11px] font-bold text-blue-700">
                                    {isRtl
                                      ? `تم تقديم عرض بمضرب: ${room.paddle_number}`
                                      : `Offer sent with paddle: ${room.paddle_number}`}
                                  </span>
                                ) : (
                                  <>
                                    {enablePurchaseOffers && !isLoggedIn ? (
                                      <button
                                        type="button"
                                        className="inline-flex whitespace-nowrap items-center gap-1 rounded-full border border-primary bg-primary/10 px-3 py-1 text-xs font-semibold text-primary transition hover:bg-amber-100"
                                        onClick={onLoginClick}
                                      >
                                        {isRtl ? "تقديم عرض" : "Send Offer"}{" "}
                                      </button>
                                    ) : null}
                                    {enablePurchaseOffers &&
                                    isLoggedIn &&
                                    room.can_buy_paddle ? (
                                      <button
                                        type="button"
                                        className="inline-flex whitespace-nowrap items-center gap-1 rounded-full border border-primary bg-primary/10 px-3 py-1 text-xs font-semibold text-primary transition hover:bg-amber-100"
                                        onClick={() => {
                                          setAutoOpenOfferRoomId(room.id);
                                          onBuyPaddle(room);
                                        }}
                                      >
                                        {isRtl ? "تقديم عرض" : "Send Offer"}
                                      </button>
                                    ) : null}
                                    {enablePurchaseOffers &&
                                    isLoggedIn &&
                                    !isCurrentlyLiveAuction &&
                                    room.can_send_offer &&
                                    statusResolved.statusKey ===
                                      "unsold" ? (
                                      <button
                                        type="button"
                                        className="inline-flex whitespace-nowrap items-center gap-1 rounded-full border border-primary bg-primary/10 px-3 py-1 text-xs font-semibold text-primary transition hover:bg-amber-100"
                                        onClick={() => onSendOffer(room)}
                                      >
                                        {isRtl ? "تقديم عرض" : "Send Offer"}
                                      </button>
                                    ) : null}
                                  </>
                                )}
                                {!isCurrentlyLiveAuction &&
                                room.status === "unsold" &&
                                room.paddle_number == null &&
                                !room.can_buy_paddle &&
                                !room.can_send_offer &&
                                isLoggedIn ? (
                                  <span
                                    className={`rounded-full px-2 py-1 text-[11px] font-bold ${
                                      isCurrentUserRoomOwner
                                        ? "border border-blue-200 bg-blue-100 text-blue-700"
                                        : "border border-slate-200 bg-slate-50 text-slate-700"
                                    }`}
                                  >
                                    {isCurrentUserRoomOwner
                                      ? tStatus(
                                          "rooms_table.winner_unsold_owner_badge",
                                        )
                                      : tStatus(
                                          "rooms_table.winner_unsold_waiting_collective_auction",
                                        )}
                                  </span>
                                ) : null}
                              </div>
                            )}
                          </td>
                        )}

                        <td className="p-4 text-center align-middle">
                          <div className="flex flex-col items-center gap-2">
                            {isCurrentlyLiveAuction ? (
                              <span className="inline-flex items-center gap-1.5 rounded-full bg-red-500 px-2.5 py-1 text-xs font-bold text-white">
                                <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
                                {tStatus("status.live")}
                              </span>
                            ) : isClosedLiveRoom && roomClosedSummary ? (
                              <span
                                className={`inline-flex items-center whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-bold ${statusClass(
                                  closedOutcomeBadgeClassKey(
                                    roomClosedSummary.outcome,
                                  ),
                                )}`}
                              >
                                {closedOutcomeLabel(
                                  roomClosedSummary.outcome,
                                  tStatus,
                                )}
                              </span>
                            ) : (
                              <span
                                className={`inline-flex items-center whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-bold ${statusClass(
                                  statusResolved.statusKey || room.status,
                                )}`}
                              >
                                {statusResolved.statusLabel ||
                                  room.status ||
                                  "—"}
                              </span>
                            )}
                          </div>
                        </td>

                        <td className="p-4 text-center align-middle">
                          <div className="flex flex-wrap items-center justify-center gap-2">
                            <button
                              type="button"
                              className="rounded-full border border-emerald-100 cursor-pointer bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100"
                              onClick={() => onRoomClick(room)}
                            >
                              {tStatus("button_view")}
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  );
}