"use client";

import { useState } from "react";
import Image from "next/image";
import { withCDN } from "@/lib/utils";

export default function RobotCards({
  displayRobots,
  packageId,
}: {
  displayRobots: any[];
  packageId?: string;
}) {
  const [showAll, setShowAll] = useState(false);

  // Render every robot. On desktop all cards are visible; on mobile only the
  // first 4 show (cards past index 3 get `hidden md:block` below) until the
  // user taps "Show more". Slicing here would limit desktop to 4 as well and
  // make packages that share their first robots look identical.
  const visibleRobots = displayRobots;

  const handleBackToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <>
      {visibleRobots.map((item, index) => (
        <div
          key={item.id || index}
          className={`bg-white w-[290px] h-[290px] rounded-[55px] shadow-[12px_12px_24px_#00000033] overflow-hidden select-robo-card ${
            index > 3 && !showAll ? "hidden md:block" : ""
          }`}
        >
          <a
            href={`/building-instruction?robot=${item.id || ""}&package=${packageId || ""}`}
          >
            <div className="relative flex flex-col items-center justify-center gap-0 font-medium">
              <Image
                src={item.image}
                alt={item.name}
                width={241}
                height={170}
                className="object-contain w-[241px] h-[170px]"
              />

              <p className="text-[26px] text-[#58585A] mt-[-16px]">
                {item.name}
              </p>
            </div>

            <div className="relative mt-5 select-robo-footer">
              <Image
                src={withCDN("/Package/brick-light%20blue-hex-00bdf2.png")}
                alt="brick"
                width={364}
                height={80}
                unoptimized
                className="object-cover w-[364px] h-[80px]"
              />

              <div className="flex items-center justify-center w-full mt-[-56px] relative z-10">
                <Image
                  src={withCDN("/resource-access/video-controller.png")}
                  alt="play"
                  width={40}
                  height={40}
                  unoptimized
                  className="object-cover w-[40px] h-[40px]"
                />
              </div>
            </div>
          </a>
        </div>
      ))}

      {/* Show More */}
      {!showAll && displayRobots.length > 4 && (
        <div className="w-full flex justify-center mt-5 md:hidden">
          <button
            onClick={() => setShowAll(true)}
            className="bg-transparent text-[#00BDF2] py-3 cursor-pointer "
          >
           Show more Robots
          </button>
        </div>
      )}

      {/* Back To Top */}
      {showAll && (
        <div className="w-full flex justify-center mt-5 md:hidden">
          <button
            onClick={handleBackToTop}
            className="py-3 cursor-pointer "
          >
           <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="20" cy="20" r="19.5" transform="rotate(-180 20 20)" stroke="#0097DC"/>
           <path d="M20.6817 7.5155C20.4864 7.32024 20.1698 7.32024 19.9746 7.5155L16.7926 10.6975C16.5973 10.8927 16.5973 11.2093 16.7926 11.4046C16.9879 11.5998 17.3044 11.5998 17.4997 11.4046L20.3281 8.57616L23.1566 11.4046C23.3518 11.5998 23.6684 11.5998 23.8637 11.4046C24.0589 11.2093 24.0589 10.8927 23.8637 10.6975L20.6817 7.5155ZM20.3281 32.1313L20.8281 32.1313L20.8281 7.86905L20.3281 7.86905L19.8281 7.86905L19.8281 32.1313L20.3281 32.1313Z" fill="#0097DC"/>
        </svg>

          </button>
        </div>
      )}
    </>
  );
}