"use client";

import { useState, useEffect, useMemo } from "react";
import { Card, CardBody, Button } from "@heroui/react";
import { useLocale, useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useMyYearlyAuctionGroups } from "@/lib/clientQueries";
import { useYearlyAuctionSocket } from "@/lib/socket/useYearlyAuctionSocket";
import { useSession } from "@/auth/session-provider";
import { useAppToast } from "@/app/[lang]/providers";
import { playStartGroupAuctionSound } from "@/lib/utils/soundPlayer";
import { getYearlySocket } from "@/lib/socket/yearlySocketClient";
import type {
  AuctionGroupStartedPayload,
  AuctionGroupClosedPayload,
} from "@/lib/socket/yearlyTypes";
import AtayaLoader from "@/components/loaders/AtayaLoader";

function formatDateTime(value: string | null, locale: string = "ar-EG") {
  if (!value) return "—";
  try {
    // date-only: 2026-01-17
    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
      const d = new Date(`${value}T00:00:00`);
      if (Number.isNaN(d.getTime())) return value;
      return d.toLocaleDateString(locale, {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
    }

    const normalized = value.replace(" ", "T");
    const d = new Date(normalized);
    if (Number.isNaN(d.getTime())) return value;
    return d.toLocaleString(locale, {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return value ?? "—";
  }
}

// Hook to track active auction groups via socket
function useActiveAuctionGroupsTracker(
  groupAuctionIds: string[],
  token?: string,
) {
  const [activeAuctionGroups, setActiveAuctionGroups] = useState<
    Map<string, string>
  >(new Map());

  useEffect(() => {
    if (groupAuctionIds.length === 0 || !token) return;

    const socket = getYearlySocket(token);

    // Join all group auction rooms to listen for started events
    const joinedRooms = new Set<string>();
    groupAuctionIds.forEach((gid) => {
      if (!joinedRooms.has(gid)) {
        socket.emit("group_auction:join", { groupAuctionId: gid });
        joinedRooms.add(gid);
        console.log(`🏛️ Joined group_auction room: ${gid}`);
      }
    });

    const handleStarted = (payload: AuctionGroupStartedPayload) => {
      playStartGroupAuctionSound();
      console.log("🎬 auction_group:started in table:", payload);
      // Only track if it's one of our group auctions
      if (groupAuctionIds.includes(payload.groupAuctionId)) {
        setActiveAuctionGroups((prev) => {
          const next = new Map(prev);
          next.set(payload.auctionGroupId, "active");
          return next;
        });
      }
    };

    const handleClosed = (payload: AuctionGroupClosedPayload) => {
      console.log("🏁 auction_group:closed in table:", payload);
      setActiveAuctionGroups((prev) => {
        const next = new Map(prev);
        next.set(payload.auctionGroupId, "closed");
        return next;
      });
    };

    socket.on("auction_group:started", handleStarted);
    socket.on("auction_group:closed", handleClosed);

    // Connect if not already connected
    if (!socket.connected) {
      socket.connect();
    }

    return () => {
      socket.off("auction_group:started", handleStarted);
      socket.off("auction_group:closed", handleClosed);

      // Leave all rooms on cleanup
      groupAuctionIds.forEach((gid) => {
        socket.emit("group_auction:leave", { groupAuctionId: gid });
      });
    };
  }, [groupAuctionIds.join(","), token]);

  return activeAuctionGroups;
}

// Component for owner actions in table row
function OwnerActionsCell({
  item,
  auctionGroupId,
  groupAuctionId,
  lang,
  router,
  isActive,
}: {
  item: any;
  auctionGroupId: string;
  groupAuctionId: string | null;
  lang: string;
  router: any;
  isActive: boolean;
}) {
  const session = useSession();
  const toast = useAppToast();
  const tToast = useTranslations("TOAST");
  const token = session?.access_token;
  const [isEnteringMarket, setIsEnteringMarket] = useState(false);
  const [isWithdrawing, setIsWithdrawing] = useState(false);

  const marketEntryPrice = item.market_entry_price;

  // Socket connection for owner actions
  const { enterMarket, withdrawAuctionGroup } = useYearlyAuctionSocket({
    auctionGroupId: auctionGroupId,
    groupAuctionId: groupAuctionId || "",
    token,
    onError: (payload) => {
      toast.error(payload.message || tToast("connection_error"));
      setIsEnteringMarket(false);
      setIsWithdrawing(false);
    },
  });

  const handleEnterMarket = async () => {
    if (!isActive) {
      toast.error(tToast("auction_inactive"));
      return;
    }
    if (!marketEntryPrice) {
      toast.error(tToast("market_entry_unavailable"));
      return;
    }
    setIsEnteringMarket(true);
    enterMarket(auctionGroupId);
    toast.info(tToast("entering_market"));
    setTimeout(() => setIsEnteringMarket(false), 2000);
  };

  const handleWithdraw = async () => {
    if (!isActive) {
      toast.error(tToast("auction_inactive"));
      return;
    }
    if (!confirm("هل أنت متأكد من سحب المزاد؟ سيتم إغلاقه فوراً.")) {
      return;
    }
    setIsWithdrawing(true);
    withdrawAuctionGroup(auctionGroupId);
    toast.info(tToast("withdrawing_auction"));
    setTimeout(() => setIsWithdrawing(false), 2000);
  };

  return (
    <div className="flex items-center justify-center gap-2">
      <Button
        size="sm"
        variant="flat"
        color="primary"
        onPress={() => {
          if (!auctionGroupId) {
            console.error("Missing auctionGroupId for item:", item);
            return;
          }
          router.push(
            `/${lang}/dashboard/my-yearly-auctions/${auctionGroupId}/live`,
          );
        }}
        isDisabled={!auctionGroupId}
        isIconOnly
        aria-label="عرض التحكم المباشر"
      >
        👁️
      </Button>
      {isActive && (
        <>
          <Button
            size="sm"
            variant="solid"
            color="primary"
            onPress={handleEnterMarket}
            isDisabled={!marketEntryPrice || isEnteringMarket}
            isLoading={isEnteringMarket}
          >
            إدخال السوق
          </Button>
          <Button
            size="sm"
            variant="bordered"
            color="danger"
            onPress={handleWithdraw}
            isDisabled={isWithdrawing}
            isLoading={isWithdrawing}
          >
            سحب المزاد
          </Button>
        </>
      )}
    </div>
  );
}

export default function MyYearlyAuctionGroupsTable() {
  const tDash = useTranslations("DASHBOARD");
  const lang = useLocale();
  const router = useRouter();
  const session = useSession();
  const token = session?.access_token;

  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useMyYearlyAuctionGroups();

  const allItems = data?.pages.flatMap((p) => p.data) ?? [];

  // Get unique group auction IDs
  const uniqueGroupAuctionIds = useMemo(() => {
    const ids = new Set<string>();
    allItems.forEach((item: any) => {
      const gid =
        item.group_auction_id || item.groupAuctionId || item.group_auction?.id;
      if (gid) ids.add(gid);
    });
    return Array.from(ids);
  }, [allItems]);

  // Track active auction groups via socket
  const activeAuctionGroups = useActiveAuctionGroupsTracker(
    uniqueGroupAuctionIds,
    token,
  );

  // Merge socket status with item status
  const itemsWithStatus = useMemo(() => {
    return allItems.map((item: any) => {
      const auctionGroupId = item.id || item.auction_group_id;
      const socketStatus = activeAuctionGroups.get(auctionGroupId);

      // Use socket status if available, otherwise use item status
      const finalStatus = socketStatus || item.status || "upcoming";

      return {
        ...item,
        status: finalStatus,
        auctionGroupId,
      };
    });
  }, [allItems, activeAuctionGroups]);

  if (isLoading) {
    return <AtayaLoader />;
  }

  if (error) {
    return (
      <Card className="border rounded-2xl shadow-soft">
        <CardBody>
          <div className="text-center p-8">
            <div className="text-red-500 text-6xl mb-4">⚠️</div>
            <h3 className="text-lg font-bold text-red-600 mb-2">
              {tDash("AUCTIONS.error_loading")}
            </h3>
            <p className="text-gray-600 mb-4">{error.message}</p>
            <Button
              variant="solid"
              color="primary"
              onPress={() => window.location.reload()}
            >
              {tDash("DASHBOARD.AUCTIONS.retry")}
            </Button>
          </div>
        </CardBody>
      </Card>
    );
  }

  const activeCount = itemsWithStatus.filter(
    (item: any) => item.status === "active",
  ).length;

  return (
    <Card className="border rounded-2xl shadow-soft">
      <CardBody>
        <div className="flex items-center justify-between mb-4">
          <div>
            <h2 className="text-xl font-extrabold text-primary">
              {tDash("mazayadaty")}
            </h2>
            <div className="text-sm text-slate-500">
              {itemsWithStatus.length} مزاد سنوي ({activeCount} نشط)
            </div>
          </div>
        </div>

        {itemsWithStatus.length === 0 ? (
          <div className="text-center p-8">
            <div className="text-gray-400 text-6xl mb-4">🎪</div>
            <h3 className="text-lg font-bold text-gray-600 mb-2">
              لا توجد مزادات
            </h3>
            <p className="text-gray-500">
              لم يتم العثور على أي مزادات سنوية مملوكة لك
            </p>
          </div>
        ) : (
          <>
            <div className="overflow-auto">
              <table className="w-full text-sm border rounded-2xl overflow-hidden">
                <thead>
                  <tr className="text-center bg-slate-50">
                    <th className="p-3 border">#</th>
                    <th className="p-3 border">العنوان</th>
                    <th className="p-3 border">التسمية</th>
                    <th className="p-3 border">اليوم</th>
                    <th className="p-3 border">المجموعة</th>
                    <th className="p-3 border">السعر الابتدائي</th>
                    <th className="p-3 border">سعر دخول السوق</th>
                    <th className="p-3 border">الحالة</th>
                    <th className="p-3 border">إجراء</th>
                  </tr>
                </thead>
                <tbody>
                  {itemsWithStatus.map((item: any, index: number) => {
                    const auctionGroupId =
                      item.auctionGroupId || item.id || item.auction_group_id;
                    const groupAuctionId =
                      item.group_auction_id ||
                      item.groupAuctionId ||
                      item.group_auction?.id;
                    const isActive = item.status === "active";
                    const isSkipped = item.status === "skipped";

                    return (
                      <tr
                        key={item.id || auctionGroupId}
                        className={`border-b hover:bg-slate-50 ${
                          isActive ? "bg-green-50" : ""
                        }`}
                      >
                        <td className="p-3 border text-center">{index + 1}</td>
                        <td className="p-3 border text-start max-w-xs">
                          <div className="font-medium text-gray-900">
                            {item.title || item.name || `مزاد ${index + 1}`}
                          </div>
                          {item.unique_id && (
                            <div className="text-gray-500 text-xs mt-1">
                              المعرف: {item.unique_id}
                            </div>
                          )}
                        </td>
                        <td className="p-3 border text-center">
                          {item.label || item.name || "—"}
                        </td>
                        <td className="p-3 border text-center">
                          {item.day_order ?? "—"}
                        </td>
                        <td className="p-3 border text-center">
                          {item.group_order ?? "—"}
                        </td>
                        <td className="p-3 border text-center">
                          {item.starting_price
                            ? `${item.starting_price.toLocaleString()} ر.س`
                            : "—"}
                        </td>
                        <td className="p-3 border text-center">
                          {item.market_entry_price
                            ? `${item.market_entry_price.toLocaleString()} ر.س`
                            : "—"}
                        </td>
                        <td className="p-3 border text-center">
                          <span
                            className={`px-2 py-1 rounded text-xs ${
                              item.status === "active"
                                ? "bg-green-100 text-green-700"
                                : isSkipped
                                  ? "bg-violet-100 text-violet-800"
                                  : item.status === "closed"
                                    ? "bg-gray-100 text-gray-700"
                                    : "bg-yellow-100 text-yellow-700"
                            }`}
                          >
                            {item.status === "active"
                              ? "نشط"
                              : isSkipped
                                ? "تم التخطي"
                                : item.status === "closed"
                                  ? "مغلق"
                                  : "قادم"}
                          </span>
                        </td>
                        <td className="p-3 border text-center">
                          <OwnerActionsCell
                            item={item}
                            auctionGroupId={auctionGroupId}
                            groupAuctionId={groupAuctionId}
                            lang={lang}
                            router={router}
                            isActive={isActive}
                          />
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {hasNextPage && (
              <div className="flex justify-center mt-4">
                <Button
                  variant="solid"
                  color="primary"
                  onPress={() => fetchNextPage()}
                  isLoading={isFetchingNextPage}
                >
                  {isFetchingNextPage
                    ? tDash("AUCTIONS.loading_more")
                    : tDash("AUCTIONS.load_more")}
                </Button>
              </div>
            )}
          </>
        )}
      </CardBody>
    </Card>
  );
}