"use client";

import { useEffect, useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import type { SingleAuction } from "@/actions/group-auctions";
import AnnualResultsStatsCards, {
  type AnnualResultsStatCard,
} from "@/components/annaulMazad/AnnualResultsStatsCards";
import LiveRoomsTable from "@/components/annaulMazad/LiveRoomsTable";
import { usePaymentSuccess } from "@/hooks/usePaymentSuccess";
import { useQueryClient } from "@tanstack/react-query";

function getYoutubeVideoId(raw: string | null | undefined): string | null {
  const v = (raw || "").trim();
  if (!v) return null;

  try {
    const url = new URL(v);
    const host = url.hostname.toLowerCase();
    const parts = url.pathname.split("/").filter(Boolean);

    if (host.includes("youtu.be")) {
      return parts[0] || null;
    }

    if (
      host.includes("youtube.com") ||
      host.includes("youtube-nocookie.com") ||
      host.includes("m.youtube.com")
    ) {
      if (url.searchParams.get("v")) return url.searchParams.get("v");

      if (parts[0] === "embed" && parts[1]) return parts[1];

      if ((parts[0] === "live" || parts[0] === "shorts") && parts[1]) {
        return parts[1];
      }
    }

    return null;
  } catch {
    return null;
  }
}

function buildYoutubeWatchUrl(raw: string | null | undefined): string {
  const id = getYoutubeVideoId(raw);
  return id ? `https://www.youtube.com/watch?v=${id}` : "";
}

function buildYoutubeThumbnail(raw: string | null | undefined): string {
  const id = getYoutubeVideoId(raw);
  return id ? `https://i.ytimg.com/vi/${id}/hqdefault.jpg` : "";
}

function normalizeEmbedUrl(raw: string | null | undefined) {
  const v = (raw || "").trim();
  if (!v) return "";

  if (v.includes("youtube.com/embed/")) return v;

  const shortMatch = v.match(/youtu\.be\/([A-Za-z0-9_-]{6,})/);
  if (shortMatch?.[1]) return `https://www.youtube.com/embed/${shortMatch[1]}`;

  const watchMatch = v.match(/[?&]v=([A-Za-z0-9_-]{6,})/);
  if (watchMatch?.[1]) return `https://www.youtube.com/embed/${watchMatch[1]}`;

  const pathMatch = v.match(
    /youtube\.com\/(?:live|shorts)\/([A-Za-z0-9_-]{6,})/,
  );
  if (pathMatch?.[1]) return `https://www.youtube.com/embed/${pathMatch[1]}`;

  return v;
}

function addVideoParams(rawUrl: string) {
  try {
    const url = new URL(rawUrl);

    if (!url.searchParams.has("playsinline")) {
      url.searchParams.set("playsinline", "1");
    }

    if (!url.searchParams.has("autoplay")) {
      url.searchParams.set("autoplay", "0");
    }

    return url.toString();
  } catch {
    return rawUrl;
  }
}

function resolveVideoUrlByDay(videos: any, dayNumber: number): string {
  const list = Array.isArray(videos) ? videos : [];
  const normalizedDay = String(dayNumber);

  const byDay = list.find(
    (v: any) => String(v?.position ?? "") === normalizedDay,
  );

  return (byDay?.url || "").toString().trim();
}

export default function AnnualAuctionResultsVideoTableClient({
  groupId,
  rooms,
  // initialItems = [],
  // initialNextCursor = null,
  maxDays,
  animalType,
  auctionType,
  stats,
  catalogUrl,
  videos,
  normalPaddlePrice,
  premiumPaddlePrice,
}: {
  groupId: string;
  rooms: any[];
  // initialItems?: SingleAuction[];
  // initialNextCursor?: string | null;
  maxDays: number;
  animalType: string;
  auctionType?: "public" | "private";
  stats: AnnualResultsStatCard[];
  catalogUrl?: string;
  videos?: any;
  normalPaddlePrice?: number;
  premiumPaddlePrice?: number;
}) {
  const t = useTranslations("ANNUAL_AUCTION_RESULTS");
  const queryClient = useQueryClient();
  const [activeDay, setActiveDay] = useState<number>(1);

  useEffect(() => {
    if (animalType === "horse") {
      console.log("[AnnualAuctionResults] horses data:", rooms);
    }
  }, [animalType, rooms]);

  usePaymentSuccess({
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["wallet-balances"] });
      queryClient.invalidateQueries({ queryKey: ["user-paddles"] });
    },
  });

  const rawVideoUrl = useMemo(
    () => resolveVideoUrlByDay(videos, activeDay),
    [videos, activeDay],
  );

  const normalizedVideoUrl = useMemo(() => {
    if (!rawVideoUrl) return "";
    return addVideoParams(normalizeEmbedUrl(rawVideoUrl));
  }, [rawVideoUrl]);

  const youtubeWatchUrl = useMemo(
    () => buildYoutubeWatchUrl(rawVideoUrl),
    [rawVideoUrl],
  );

  const youtubeThumbnail = useMemo(() => {
    const id = getYoutubeVideoId(rawVideoUrl);
    return id ? buildYoutubeThumbnail(rawVideoUrl) : "";
  }, [rawVideoUrl]);
  return (
    <>
      <AnnualResultsStatsCards stats={stats as any} />
      {rawVideoUrl || catalogUrl ? (
        <section className="grid grid-cols-1 lg:grid-cols-12 gap-4">
          <div className="mb-4" />

          {rawVideoUrl ? (
            <div className="lg:col-span-12">
              <div className="bg-black rounded-xl overflow-hidden relative aspect-video shadow-md">
                <div className="absolute top-3 left-3 flex items-center gap-2 z-10">
                  <span className="bg-slate-800/70 text-white text-xs px-2 py-1 rounded-full font-bold">
                    {t("video_badge")}
                  </span>
                </div>

                {normalizedVideoUrl ? (
                  <iframe
                    src={normalizedVideoUrl}
                    className="w-full h-full"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                    title={t("video_title")}
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-white/70">
                    لا يوجد فيديو متاح
                  </div>
                )}
              </div>
            </div>
          ) : null}
        </section>
      ) : null}

      <section className="space-y-4">
        {rooms.length > 0 ? (
          <LiveRoomsTable
            groupId={groupId}
            initialRooms={rooms}
            maxDays={maxDays}
            animalType={animalType as any}
            auctionType={auctionType}
            normalPaddlePrice={normalPaddlePrice}
            premiumPaddlePrice={premiumPaddlePrice}
            onDayChange={setActiveDay}
            hideActions
            enablePurchaseOffers
            isResultsPage
          />
        ) : null}
      </section>
    </>
  );
}