"use client";

import React, { useMemo, useState } from "react";
import DynamicButton from "@/components/button";
import BookletDownloadCard from "@/components/annaulMazad/BookletDownloadCard";
import { useTranslations, useLocale } from "next-intl";
import type { GroupAuction } from "@/actions/group-auctions";
import Link from "next/link";
import LiveRoomsTable from "@/components/annaulMazad/LiveRoomsTable";
import YearlyPaddleModal from "@/components/paddles/YearlyPaddleModal";
import { getPrefetchedGroupAuctionTerms } from "@/lib/groupAuctionShowTerms";
import { useAvailablePaddlesForAuction } from "@/lib/clientQueries";
import { useSession } from "@/auth/session-provider";
import { useSetAtom } from "jotai";
import { loginModalAtom } from "@/components/state/loginAtom";
import AuctionUnifiedTimer from "@/components/count/AuctionUnifiedTimer";
import GroupAuctionLocationMapSection from "@/components/annaulMazad/GroupAuctionLocationMapSection";
import {
  Download,
  Users,
  PawPrint,
  Gavel,
  QrCode,
  CheckCircle,
} from "lucide-react";

interface AuctionGroupRoom {
  id: string;
  first_single_auction_id?: string | null;
  name?: string | null;
  day_order?: string | number | null;
  single_auctions_count?: string | number | null;
  main_image?: { id?: number | null; url?: string };
  status?: string | null;
}

interface AuctionDetailsOnlyClientProps {
  auction: GroupAuction;
  initialRooms?: AuctionGroupRoom[];
  maxDays?: number;
}

export default function AuctionDetailsOnlyClient({
  auction,
  initialRooms = [],
  maxDays = 0,
}: AuctionDetailsOnlyClientProps) {
  const t = useTranslations("AUCTION_DETAILS_ONLY");
  const tGroup = useTranslations("ANNUAL_GROUP_AUCTION");
  const tPaddle = useTranslations("YEARLY_PADDLE_MODAL");
  const locale = useLocale();
  const isRtl = (locale || "").toLowerCase().startsWith("ar");

  const toIsoDateTime = (value?: string | null): string | null => {
    if (!value) return null;
    const v = String(value).trim();
    if (!v) return null;
    if (v.includes("T")) return v;

    // "YYYY-MM-DD HH:MM" or "YYYY-MM-DD HH:MM:SS"
    const withTime = v.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})(?::(\d{2}))?$/);
    if (withTime) {
      const datePart = withTime[1];
      const timePart = withTime[2];
      const seconds = withTime[3] ?? "00";
      return `${datePart}T${timePart}:${seconds}`;
    }

    // "YYYY-MM-DD" only → treat as start of day (local) so countdown shows correctly
    if (/^\d{4}-\d{2}-\d{2}$/.test(v)) return `${v}T00:00:00`;

    return v;
  };

  const parseDateSafe = (value?: string | null): Date | null => {
    const iso = toIsoDateTime(value);
    if (!iso) return null;
    const d = new Date(iso);
    return Number.isNaN(d.getTime()) ? null : d;
  };

  const catalogUrl = (auction as any)?.catalog?.url as string | undefined;

  const getLocalizedText = (text: string) => {
    try {
      const parsed = JSON.parse(text);
      return parsed[locale] || parsed["en"] || text;
    } catch {
      return text;
    }
  };

  const isPrivate = auction.auction_type === "private";
  const animalType = (auction as any).animal_type || "camel";
  const isCamel = animalType === "camel";

  const availabilityStatus = (auction as any).availability_status as
    | string
    | undefined;


  // Same countdown logic as annual-auctions page (getCountdownDate / getCountdownTitle)
  const { countdownTarget, countdownLabel } = useMemo(() => {
    const now = new Date();
    const a = auction as any;

    const toIso = (value?: string | null): string | null => {
      if (!value) return null;
      const v = String(value).trim();
      if (!v) return null;
      if (v.includes("T")) return v;
      const m = v.match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})(?::(\d{2}))?$/);
      if (m) return `${m[1]}T${m[2]}:${m[3] ?? "00"}`;
      if (/^\d{4}-\d{2}-\d{2}$/.test(v)) return `${v}T00:00:00`;
      return v;
    };
    const parseDate = (value?: string | null): Date | null => {
      const iso = toIso(value);
      if (!iso) return null;
      const d = new Date(iso);
      return Number.isNaN(d.getTime()) ? null : d;
    };

    const getAuctionStartValue = (): string | null =>
      toIso(a.auction_start_datetime ?? a.auction_start_date);

    const getAuctionEndValue = (): string | null =>
      toIso(a.auction_end_datetime ?? a.auction_end_date);

    const getDurationEndValue = (): string | null => {
      const maxAllowedDays = Number(a.max_allowed_day ?? 0);
      if (!Number.isFinite(maxAllowedDays) || maxAllowedDays <= 0) return null;
      const start = parseDate(getAuctionStartValue());
      if (!start) return null;
      const end = new Date(start);
      end.setDate(end.getDate() + maxAllowedDays);
      return end.toISOString();
    };

    const subStartValue = toIso(
      a.subscription_start_datetime ?? a.subscription_start_date,
    );
    const subEndValue = toIso(
      a.subscription_end_datetime ?? a.subscription_end_date,
    );
    const startValue = getAuctionStartValue();
    const endValue = getAuctionEndValue() ?? getDurationEndValue();

    const badgeKey = a.auction_state === "ended" ? "closed" : a.auction_state;

    const getCountdownDate = (): string | null => {
      if (auction.auction_type === "private") {
        if (badgeKey === "upcoming") return startValue;
        if (badgeKey === "live") return endValue ?? startValue;
        return endValue;
      }

      if (badgeKey === "ended") {
        return endValue ?? startValue ?? subEndValue ?? subStartValue;
      }

      if (badgeKey === "live") {
        return endValue ?? startValue ?? subEndValue ?? subStartValue;
      }

      if (a.availability_status === "available_for_sellers") {
        const subStart = parseDate(subStartValue);
        const subEnd = parseDate(subEndValue);
        const start = parseDate(startValue);
        const end = parseDate(endValue);

        if (subStart && now < subStart) return subStartValue;
        if (subEnd && now < subEnd) return subEndValue;
        if (start && now < start) return startValue;
        if (end && now < end) return endValue;

        return endValue ?? startValue ?? subEndValue ?? subStartValue;
      }

      if (a.availability_status === "available_for_buyers") {
        const start = parseDate(startValue);
        const end = parseDate(endValue);

        if (start && now < start) return startValue;
        if (end && now < end) return endValue;
        return endValue;
      }

      return endValue ?? startValue;
    };

    const getCountdownLabel = (): string | null => {
      if (auction.auction_type === "private") {
        const start = parseDate(getAuctionStartValue());
        if (start && now < start) return tGroup("countdown.label_auction_start");
        return tGroup("countdown.label_auction_end");
      }

      if (badgeKey === "live") return tGroup("countdown.label_auction_end");
      if (badgeKey === "ended") return tGroup("countdown.label_auction_end");

      if (a.availability_status === "available_for_sellers") {
        const subStart = parseDate(subStartValue);
        const subEnd = parseDate(subEndValue);
        const start = parseDate(startValue);

        if (subStart && now < subStart) return tGroup("countdown.label_seller_start");
        if (subEnd && now < subEnd) return tGroup("countdown.label_seller_end");
        if (start && now < start) return tGroup("countdown.label_auction_start");
        return tGroup("countdown.label_seller_end");
      }

      if (a.availability_status === "available_for_buyers") {
        const start = parseDate(startValue);
        const end = parseDate(endValue ?? getDurationEndValue());

        if (start && now < start) return tGroup("countdown.label_auction_start");
        if (start && end && now > start) return tGroup("countdown.label_auction_end");
      }

      return null;
    };

    const dateStr = getCountdownDate();
    const label = getCountdownLabel();
    const target = dateStr ? parseDate(dateStr) : null;
    return {
      countdownTarget: target,
      countdownLabel: label,
    };
  }, [auction, tGroup]);

  const session = useSession();
  const setLoginModal = useSetAtom(loginModalAtom);
  const [paddleModalOpen, setPaddleModalOpen] = useState(false);

  const participationFee = auction.participation_fee || 0;
  const totalAnimals = (auction as any).total_participating_animals || "0";
  const uniqueId = (auction as any).unique_id || "---";

  const normalPaddlePrice =
    Number((auction as any)?.normal_paddle_price ?? 0) || 0;
  const premiumPaddlePrice =
    Number((auction as any)?.premium_paddle_price ?? 0) || 0;
  const premiumUseTimes = Number((auction as any)?.premium_use_times ?? 0) || 0;

  const auctionId = auction?.id ? String(auction.id) : "";
  const prices = {
    normalPrice: normalPaddlePrice,
    premiumPrice: premiumPaddlePrice,
    premiumUseTimes,
  };
  const { data: availablePaddles = [] } = useAvailablePaddlesForAuction(
    auctionId,
    "annual",
  );

  const handleOpenPaddleModal = () => {
    if (!session?.access_token) {
      setLoginModal(true);
      return;
    }
    setPaddleModalOpen(true);
  };

  const handleScrollToSchedule = () => {
    if (typeof window === "undefined") return;
    document
      .getElementById("annual-rooms-table")
      ?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="bg-[#FBF9F6] min-h-screen py-8">
      <div className="max-w-6xl mx-auto px-4">
        <div className="grid gap-6 lg:grid-cols-12">
          <div className="lg:col-span-7">
            {/* Header Card */}
            <div className="bg-linear-to-br from-[#0F5132] to-[#1B7A50] rounded-2xl p-6 text-white mb-6">
              {/* Badges */}
              <div className="flex items-center justify-center gap-3 mb-4">
                <span className="bg-[#F4EFE9] text-primary px-4 py-1.5 rounded-full text-sm font-bold flex items-center gap-1">
                  ✨ {t("badge.annual")}
                </span>
                {isPrivate && (
                  <span className="bg-amber-100 text-amber-700 px-4 py-1.5 rounded-full text-sm font-bold flex items-center gap-1">
                    🔒 {t("badge.private")}
                  </span>
                )}
              </div>

              {/* Title */}
              <h1 className="text-2xl md:text-3xl font-extrabold text-center mb-2">
                {getLocalizedText(auction.title) || t("title_fallback")}
              </h1>
              <p className="text-white/80 text-center text-sm">
                {getLocalizedText(auction.description) || ""}
              </p>

              {/* Stats */}
              <div className="grid grid-cols-2 gap-4 mt-6">
                <div className="bg-white/20 backdrop-blur rounded-xl p-4 text-center">
                  <Users className="w-8 h-8 mx-auto mb-2 text-amber-300" />
                  <div className="text-xs text-white/70">
                    {t("stats.sellers_count")}
                  </div>
                  <div className="text-xl font-bold">{totalAnimals}</div>
                </div>
                <div className="bg-white/20 backdrop-blur rounded-xl p-4 text-center">
                  <PawPrint className="w-8 h-8 mx-auto mb-2 text-amber-300" />
                  <div className="text-xs text-white/70">
                    {isCamel
                      ? t("stats.camels_participating")
                      : t("stats.horses_participating")}
                  </div>
                  <div className="text-xl font-bold">
                    {t("stats.not_specified")}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5 space-y-4">
            {/* Download Brochure */}
            {catalogUrl ? (
              <BookletDownloadCard
                catalogUrl={catalogUrl}
                className="bg-transparent shadow-none border-0 p-0"
                title={
                  isCamel
                    ? t("download_brochure_camel")
                    : t("download_brochure_horse")
                }
                description={t("download_brochure_description")}
              />
            ) : null}

            {/* Registration Section */}
            <div className="bg-white rounded-xl shadow-sm p-6">
              <div className="flex items-start gap-4">
                <div className="bg-primary/10 rounded-xl p-3">
                  <Gavel className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-gray-800">
                    {t("registration.title")}
                  </h3>
                  <p className="text-gray-500 text-sm mt-1">
                    {t("registration.description")}
                  </p>
                </div>
              </div>
            </div>

            {/* Auction Code */}
            <div className="bg-white rounded-xl shadow-sm p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="bg-amber-100 rounded-xl p-3">
                    <QrCode className="w-6 h-6 text-amber-600" />
                  </div>
                  <div>
                    <div className="font-bold text-gray-800">
                      {t("code.title")}
                    </div>
                    <div className="text-gray-500 text-xs">
                      {t("code.description")}
                    </div>
                  </div>
                </div>
                <div className="text-lg font-bold text-primary">{uniqueId}</div>
              </div>
            </div>

            {/* Terms Notice */}
            <div className="bg-white rounded-xl shadow-sm p-4">
              <div className="flex items-start gap-2 text-sm">
                <CheckCircle className="w-5 h-5 text-primary mt-0.5" />
                <div className="text-gray-700 leading-6">
                  <span>{t("terms_notice")}</span>
                  <span className="mx-1">{t("terms_notice_links_prefix")}</span>
                  <Link
                    href={`/${locale}/term-conditions`}
                    className="font-semibold text-primary underline underline-offset-2 hover:text-primary/80"
                  >
                    {t("terms_notice_links.auction_rules")}
                  </Link>
                  <span>، </span>
                  <Link
                    href={`/${locale}/privacy`}
                    className="font-semibold text-primary underline underline-offset-2 hover:text-primary/80"
                  >
                    {t("terms_notice_links.privacy_policy")}
                  </Link>
                  <span> {t("terms_notice_links_separator")} </span>
                  <Link
                    href={`/${locale}/term-conditions`}
                    className="font-semibold text-primary underline underline-offset-2 hover:text-primary/80"
                  >
                    {t("terms_notice_links.terms_of_use")}
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Countdown + Sponsor (buyers only, full-width like action cards) */}
        {availabilityStatus === "available_for_buyers" && (
          <div className="mt-6 grid gap-4 md:grid-cols-2">
            {/* Countdown card */}
            {countdownTarget && (
                <AuctionUnifiedTimer
                  targetDate={countdownTarget}
                  label={countdownLabel ?? tGroup("countdown.label_auction_start") ?? tGroup("countdown.title")}
                  variant="surface"
                  className="!border-border !bg-white"
                />
            )}

            {/* Sponsor card */}
            <div className="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between gap-4">
              <img
                src={(auction as any)?.logo?.url || "/logo.png"}
                alt={t("sponsor.alt")}
                className="w-20 h-20 object-contain"
              />
              <div className="text-center">
                <div className="text-gray-500 text-sm">
                  {t("sponsor.label")}
                </div>
                <div className="font-bold text-lg text-gray-800">
                  {(auction as any)?.sponsor || t("sponsor.fallback")}
                </div>
              </div>
            </div>
          </div>
        )}

        {(prices.normalPrice > 0 ||
          prices.premiumPrice > 0 ||
          initialRooms.length > 0) && (
          <div className="mt-6 grid gap-4 md:grid-cols-2">
            {(prices.normalPrice > 0 || prices.premiumPrice > 0) && (
              <div className="bg-white rounded-xl shadow-sm p-4">
                <div className="flex items-start gap-4">
                  <div className="bg-primary/10 rounded-xl p-3">
                    <Gavel className="w-6 h-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-bold text-gray-800">
                      {t("cards.buy_paddle_title")}
                    </h3>
                    <p className="text-gray-500 text-sm mt-1">
                      {t("cards.buy_paddle_desc")}
                    </p>
                    <div className="mt-3">
                      <DynamicButton fullWidth onClick={handleOpenPaddleModal}>
                        {tPaddle("buy_paddle_button")}
                      </DynamicButton>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {initialRooms.length > 0 && (
              <div className="bg-white rounded-xl shadow-sm p-4">
                <div className="flex items-start gap-4">
                  <div className="bg-primary/10 rounded-xl p-3">
                    <PawPrint className="w-6 h-6 text-primary" />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-bold text-gray-800">
                      {isCamel
                        ? t("cards.view_schedule_title", {
                            entity: tGroup("rooms.camels_title"),
                          })
                        : isRtl
                          ? "عرض المجموعة"
                          : "View Group"}
                    </h3>
                    <p className="text-gray-500 text-sm mt-1">
                      {isCamel
                        ? t("cards.view_schedule_desc")
                        : isRtl
                          ? "الانتقال إلى جدول المجموعة وفتح صفحة التفاصيل."
                          : "Go to the group section and open its details page."}
                    </p>
                    <div className="mt-3">
                      <DynamicButton fullWidth onClick={handleScrollToSchedule}>
                        {isCamel
                          ? t("cards.view_schedule_button")
                          : isRtl
                            ? "عرض المجموعة"
                            : "View Group"}
                      </DynamicButton>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Rooms Section - similar to live/ended auctions */}
        {initialRooms.length > 0 && (
          <section id="annual-rooms-section" className="mt-8 space-y-4">
            <div className="flex items-center justify-between flex-wrap gap-2">
              <h2 className="text-xl md:text-2xl font-extrabold">
                {isCamel
                  ? tGroup("rooms.camels_title")
                  : isRtl
                    ? "المجموعة"
                    : "Auction Group"}
              </h2>
            </div>
            <div id="annual-rooms-table">
              <LiveRoomsTable
                groupId={String(auction.id)}
                initialRooms={initialRooms}
                maxDays={maxDays}
                animalType={isCamel ? "camel" : "horse"}
                auctionType={auction.auction_type}
                hideActions
                hidePriceAndWinner
              />
            </div>
          </section>
        )}

        <GroupAuctionLocationMapSection lat={auction.lat} lng={auction.lng} />
      </div>

      <YearlyPaddleModal
        open={paddleModalOpen}
        onClose={() => setPaddleModalOpen(false)}
        groupAuctionId={auctionId}
        yearlyAuctionId={auctionId}
        yearlyAuctionType="group"
        prices={prices}
        availablePaddles={availablePaddles as any}
        prefetchedAuctionTerms={getPrefetchedGroupAuctionTerms(auction)}
        twoStepAuctionTerms
      />
    </div>
  );
}