"use client";
import { useEffect, useState, useRef } from "react";
import Image from "next/image";
import { AWS_CDN_URL } from "@/utils/staticValues";


interface BaseItem {
  id: number;
  label: string;
  image?: string;
  price?: number;
  varPrice?: number;
  description?: string;
}

interface Props<T extends BaseItem> {
  item: T;
  isChecked: boolean;
  onToggle: (id: number) => void;
  onHover: (item: T | null) => void;
  disabled?: boolean;
  lookDisplay?: string;
  hasBorder?: boolean;
}

export default function TechniqueCheckboxCard<T extends BaseItem>({
  item,
  isChecked,
  onToggle,
  onHover,
  disabled,
  lookDisplay,
  hasBorder = true,
}: Props<T>) {
  const [longPressing, setLongPressing] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);


  const handleMouseDown = () => {
    if (window.innerWidth <= 768) {
      timeoutRef.current = setTimeout(() => {
        setLongPressing(true);
        document
          .getElementById("description-box")
          ?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 600);
    }
  };

  const handleMouseUp = () => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    if (!longPressing) onToggle(item.id);
    setLongPressing(false);
  };

  return (
    <div
      onMouseEnter={() => onHover(item)}
      onMouseLeave={() => onHover(null)}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      className={`relative cursor-pointer transition-all duration-300 ${
        disabled && !isChecked ? "cursor-not-allowed opacity-50" : ""
      }`}
    >
      <div
        className={`relative overflow-visible transition-all duration-300 ${
          hasBorder
            ? isChecked
              ? "border border-dashed border-green-400 bg-gray-100"
              : "border border-gray-950/25 bg-gray-100 hover:bg-gray-100"
            : isChecked
            ? "ring-dashed bg-gray-100 border border-dashed border-green-400"
            : "border-transparent hover:bg-gray-100"
        }`}
      >
        {isChecked && (
          <div className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full border-2 border-gray-100 bg-green-400 align-middle">
            <i className="icon-[qlementine-icons--check-tick-16] text-white"></i>
          </div>
        )}

        {/* Hidden checkbox (for accessibility) */}
        <input type="checkbox" checked={isChecked} readOnly className="sr-only" />

        {item.image && (
          <Image
            src={`${AWS_CDN_URL}/${item.image}`}
            alt={item.label}
            width={800}
            height={800}
            className="img-responsive"
          />
        )}

        <div
          className={`flex flex-col items-center justify-center text-center align-middle text-sm font-light capitalize ${
            lookDisplay === "boxLook"
              ? "border-t border-gray-950/50 py-4 px-2"
              : "p-2"
          }`}
        >
          <div className="text-xs md:text-sm">{item.label}</div>
          {item.price != null && item.price > 0 && (
            <p className="mt-1 text-xs md:text-sm">+ ${item.price}</p>
          )}
          {item.varPrice && <p className="mt-1 text-xs md:text-sm">+ ${item.varPrice}</p>}
        </div>
      </div>
    </div>
  );
}