"use client";

import React, { useState } from "react";
import Image from "next/image";
import { Card, CardHeader, CardBody } from "@heroui/react";
import DynamicButton from "@/components/button";
import { motion } from "framer-motion";
import { BaseModal } from "../modal";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";

interface PlatformCardProps {
  id: string;
  imgSrc?: any;
  alt: string;
  test?: string;
  title: string;
  sponsorImageSrc?: string;
  buttons: {
    label: string;
    href: string;
    color?: "secondary" | "success" | "warning" | "danger" | "default";
    variant?:
      | "solid"
      | "bordered"
      | "flat"
      | "faded"
      | "light"
      | "ghost"
      | "shadow";
    bgClass?: string;
    textClass?: string;
  }[];
  badge?: {
    text: string;
    bgClass?: string;
    borderClass?: string;
    test?: string;
    textClass?: string;
  };
}

const PlatformCard: React.FC<
  PlatformCardProps & {
    onOpenPopup: (type: "auctions" | "offers", platformId: string) => void;
    isFirst?: boolean;
  }
> = ({
  id,
  imgSrc,
  sponsorImageSrc,
  alt,
  title,
  buttons,
  badge,
  onOpenPopup,
  isFirst = false,
}) => {
  const t = useTranslations("PLATFORMS");
  const router = useRouter();

  return (
    <Card
      id={id}
      className={`overflow-hidden soft bg-white rounded-2xl shadow-xl border transition-colors duration-300 ${
        id === "camel" ? "border-yellow-300" : "border-transparent"
      }`}
    >
      <CardHeader className="p-0 relative h-48 md:h-64 w-full">
        {imgSrc && (
          <motion.div
            className="relative w-full h-full overflow-hidden will-change-transform"
            whileHover={{
              scale: id === "camel" ? 1.03 : 1.1,
              y: id === "camel" ? -2 : -4,
            }}
            transition={{
              duration: id === "camel" ? 0.35 : 0.8,
              ease: [0.25, 0.46, 0.45, 0.94],
            }}
          >
            <Image
              src={imgSrc}
              alt={alt || t("default_alt")}
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
              priority={isFirst}
              placeholder="blur"
              blurDataURL="/logo.png"
            />

            {sponsorImageSrc && (
              <div
                className="absolute bottom-[20] left-[20] h-[104px] w-[104px] md:h-[136px] md:w-[136px] rounded-2xl overflow-hidden border border-white/30 shadow-lg bg-white/80 backdrop-blur-sm"
                style={{
                  backgroundImage: `url('${sponsorImageSrc}')`,
                  backgroundSize: "contain",
                  backgroundPosition: "center",
                  backgroundRepeat: "no-repeat",
                  padding: "10px",
                }}
              />
            )}

            {/*  {id === "camel" && (
              <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
                <span className="text-white text-3xl font-extrabold tracking-wide drop-shadow-lg">
                  {t("coming_soon")}
                </span>
              </div>
            )} */}
          </motion.div>
        )}
      </CardHeader>

      <CardBody className="p-3 sm:p-4">
        <h3 className="text-sm sm:text-lg font-bold text-start">{title}</h3>

        {/* Layout: Buttons with sponsor badge.
            On small/medium screens we stack vertically to avoid squashing.
            On large screens badge can sit to the right of the buttons. */}
        <div className="mt-3 sm:mt-4 flex flex-col lg:flex-row lg:items-center gap-2 sm:gap-3">
          {/* Buttons Group */}
          <div className="flex items-center gap-1.5 sm:gap-3 flex-row justify-between lg:flex-nowrap">
            <div className="flex flex-row gap-2">
              {buttons.map((btn, index) => (
                <DynamicButton
                  key={index}
                  color={btn.color}
                  onClick={() => {
                    const href = (btn.href || "").toString();
                    if (href.includes("auctions")) {
                      onOpenPopup("auctions", id);
                      return;
                    }
                    router.push(`/${href.replace(/^\/+/, "")}`);
                  }}
                  className={`py-1.5 sm:py-2 px-2.5 sm:px-4 rounded-lg sm:rounded-xl text-[12px] sm:text-sm ${btn.bgClass ?? ""} ${
                    btn.textClass ?? ""
                  }`}
                  variant={btn.variant || "solid"}
                  size="sm"
                >
                  {btn.label}
                </DynamicButton>
              ))}
            </div>

            {badge && (
              <div
                className={`mt-2 lg:mt-0 lg:ms-auto bg-white px-2 sm:px-6 py-1 sm:py-0 text-center rounded-lg sm:rounded-none md:hidden
              ${badge.borderClass || ""} ${badge.bgClass || ""}`}
              >
                <p
                  className={`text-[14px] sm:text-sm mb-0.5 sm:mb-2 font-medium sm:font-bold ${badge.test || ""}`}
                >
                  {badge.test}
                </p>
                <hr className="my-0.5 sm:my-1 hidden sm:block" />
                <p className="text-[14px] sm:text-sm md:text-lg font-bold leading-tight">
                  {badge.text}
                </p>
              </div>
            )}
          </div>

          {/* Sponsor Badge */}
          {badge && (
            <div
              className={`mt-2 lg:mt-0 lg:ms-auto bg-white px-2 sm:px-6 py-1 sm:py-0 text-center rounded-lg sm:rounded-none md:block hidden
              ${badge.borderClass || ""} ${badge.bgClass || ""}`}
            >
              <p
                className={`text-[10px] sm:text-sm mb-0.5 sm:mb-2 font-medium sm:font-bold ${badge.test || ""}`}
              >
                {badge.test}
              </p>
              <hr className="my-0.5 sm:my-1 hidden sm:block" />
              <p className="text-[10px] sm:text-sm md:text-lg font-bold leading-tight">
                {badge.text}
              </p>
            </div>
          )}
        </div>
      </CardBody>
    </Card>
  );
};

interface PlatformsSectionProps {
  platforms: PlatformCardProps[];
}

const PlatformsSection: React.FC<PlatformsSectionProps> = ({ platforms }) => {
  const t = useTranslations("PLATFORMS");
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const [popupPlatform, setPopupPlatform] = useState<"horse" | "camel" | null>(
    null,
  );

  const handleOpenPopup = (type: "auctions" | "offers", platformId: string) => {
    setPopupPlatform(platformId === "camel" ? "camel" : "horse");
    setIsOpen(true);
  };

  return (
    <section id="platforms" className="py-12">
      <div className="custom-container grid md:grid-cols-2 gap-8">
        {platforms.map((platform, idx) => (
          <PlatformCard
            key={platform.id}
            {...platform}
            onOpenPopup={handleOpenPopup}
            isFirst={idx === 0}
          />
        ))}
      </div>

      <BaseModal
        isOpen={isOpen}
        onOpenChange={(open) => setIsOpen(open)}
        title={t("choose_auction_type")}
        contentClassName="rounded-2xl shadow-2xl border border-gray-200"
      >
        <div className="space-y-3">
          <DynamicButton
            fullWidth
            variant="solid"
            className="rounded-xl bg-[color:var(--primary)] text-white font-bold hover:opacity-95"
            onClick={() => {
              const platform = popupPlatform || "horse";
              setIsOpen(false);
              if (platform === "camel") router.push("/camels/auctions");
              else router.push("/auctions");
            }}
          >
            {t("individual_auctions")}
          </DynamicButton>
          <DynamicButton
            fullWidth
            variant="bordered"
            className="rounded-xl border border-emerald-200 text-emerald-800 font-bold bg-white hover:bg-emerald-50"
            onClick={() => {
              const platform = popupPlatform || "horse";
              setIsOpen(false);
              router.push(`/annual-auctions?animal=${platform}`);
            }}
          >
            {t("annual_and_group_auctions")}
          </DynamicButton>
        </div>
      </BaseModal>

      {/*       <BaseModal
        isOpen={isOpen}
        onOpenChange={(open) => setIsOpen(open)}
        title={t("camel_modal_title")}
        contentClassName="rounded-2xl shadow-2xl border border-gray-200"
        footer={
          <div className="flex flex-row gap-2">
            <a
              href="/horses"
              className="px-4 py-2 rounded-full border border-green-200 text-primary font-bold text-sm bg-white"
            >
              {t("go_to_auctions")}
            </a>
            <a
              href="/horses/auctions"
              className="px-4 py-2 rounded-full border border-green-200 text-primary font-bold text-sm bg-white"
            >
              {t("go_to_offers")}
            </a>
          </div>
        }
      >
        <p className="font-semibold mb-2">{t("camel_modal_body_1")}</p>
        <p className="text-gray-600 text-sm">
          {t("camel_modal_body_2", { section: noun })}
        </p>
      </BaseModal> */}
    </section>
  );
};

export default PlatformsSection;