"use client";
import { useRef, useState, useEffect, useMemo } from "react";
import { createPortal } from "react-dom";
import { useRouter, useSearchParams } from "next/navigation";

export type Option = {
  value: string;
  label: string;
};

export type Item = {
  id: number;
  label: string;
  name: string;
  value: string;
  options: Option[];
};

type HorizontalDropdownScrollerProps = {
  items: Item[];
  showLabels?: boolean;
  clearSignal?: boolean;
  showPrevArrow?: boolean;
  showNextArrow?: boolean;
  showBorder?: boolean;
};

export default function HorizontalDropdownScroller({
  items,
  showLabels = true,
  clearSignal = false,
  showPrevArrow = true,
  showNextArrow = true,
  showBorder = true,
}: HorizontalDropdownScrollerProps) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const containerRef = useRef<HTMLDivElement>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(true);
  const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
  const [dropdownPosition, setDropdownPosition] = useState<{
    top: number;
    left: number;
    width: number;
  } | null>(null);

  const [checkedItems, setCheckedItems] = useState<Record<number, string[]>>(
    {},
  );
  const lastClearSignal = useRef(clearSignal);
  const isFirstRender = useRef(true);

  const scrollAmount = 200;

  /**
   * ✅ Initialize from URL
   */
  useEffect(() => {
    const initialCheckedItems: Record<number, string[]> = {};

    items.forEach((item) => {
      const paramValue = searchParams.get(item.name);
      if (paramValue) {
        initialCheckedItems[item.id] = paramValue.split(",").filter(Boolean);
      }
    });

    setCheckedItems(initialCheckedItems);
  }, [searchParams, items]);

  /**
   * ✅ Clear filters
   */
  useEffect(() => {
    if (clearSignal !== lastClearSignal.current) {
      lastClearSignal.current = clearSignal;

      setCheckedItems({});
      setOpenDropdownId(null);
      setDropdownPosition(null);

      window.history.replaceState(null, "", window.location.pathname);
    }
  }, [clearSignal]);

  /**
   * ✅ Memoized URL (CRITICAL FIX)
   */
  const newUrl = useMemo(() => {
  const params = new URLSearchParams(searchParams.toString());

  items.forEach((item) => {
    const selected = checkedItems[item.id];

    if (selected && selected.length > 0) {
      params.set(item.name, selected.join(","));
    } else {
      params.delete(item.name);
    }
  });

  const search = params.toString();
  return `${search ? `?${search}` : ""}`;
}, [checkedItems, items, searchParams]);

  /**
   * ✅ Safe router.replace (FIXED)
   */
 useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return;
  }

  const timeout = setTimeout(() => {
    const currentUrl = `?${searchParams.toString()}`;

    if (currentUrl !== newUrl) {
      router.replace(newUrl, { scroll: false });
    }
  }, 150);

  return () => clearTimeout(timeout);
}, [newUrl, router, searchParams]);

  /**
   * Toggle option
   */
  const toggleOption = (itemId: number, optionValue: string) => {
    setCheckedItems((prev) => {
      const selected = prev[itemId] || [];

      const newSelected = selected.includes(optionValue)
        ? selected.filter((o) => o !== optionValue)
        : [...selected, optionValue];

      return { ...prev, [itemId]: newSelected };
    });
  };

  /**
   * Scroll controls
   */
  const updateButtons = () => {
    if (!containerRef.current) return;

    const { scrollLeft, scrollWidth, clientWidth } = containerRef.current;
    setCanScrollPrev(scrollLeft > 0);
    setCanScrollNext(scrollLeft + clientWidth < scrollWidth - 1);
  };

  useEffect(() => {
    updateButtons();

    const current = containerRef.current;
    if (!current) return;

    current.addEventListener("scroll", updateButtons);
    window.addEventListener("resize", updateButtons);

    return () => {
      current.removeEventListener("scroll", updateButtons);
      window.removeEventListener("resize", updateButtons);
    };
  }, []);

  /**
   * Outside click
   */
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      const target = event.target as Node;

      if (
        containerRef.current &&
        !containerRef.current.contains(target) &&
        dropdownRef.current &&
        !dropdownRef.current.contains(target)
      ) {
        setOpenDropdownId(null);
        setDropdownPosition(null);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  /**
   * Dropdown toggle
   */
  const toggleDropdown = (
    id: number,
    event: React.MouseEvent<HTMLDivElement>,
  ) => {
    if (openDropdownId === id) {
      setOpenDropdownId(null);
      setDropdownPosition(null);
      return;
    }

    // ✅ MOBILE: center modal
    if (typeof window !== "undefined" && window.innerWidth < 768) {
      setDropdownPosition({
        top: window.innerHeight / 2,
        left: window.innerWidth / 2,
        width: window.innerWidth - 32, // padding
      });

      setOpenDropdownId(id);
      return;
    }

    // ✅ DESKTOP: existing behavior
    const rect = event.currentTarget.getBoundingClientRect();

    const maxWidth = 240;
    const viewportWidth = window.innerWidth - 16;
    const width = Math.min(maxWidth, viewportWidth);

    let left = rect.left + window.scrollX;

    if (left + width > window.innerWidth - 16) {
      left = window.innerWidth - width - 16;
    }

    setDropdownPosition({
      top: rect.bottom + window.scrollY,
      left,
      width,
    });

    setOpenDropdownId(id);
  };

  /**
   * Dropdown Portal
   */
  const DropdownPortal = () => {
    if (openDropdownId === null || !dropdownPosition) return null;

    const item = items.find((i) => i.id === openDropdownId);
    if (!item) return null;

    return createPortal(
      <div
        ref={dropdownRef}
        style={
          window.innerWidth < 768
            ? {
                position: "fixed",
                top: "15%",
                left: "10%",
                //transform: "translateY(-50%)",
                width: "85%",
                maxHeight: "70vh",
                overflowY: "auto",
                background: "white",
                boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
                zIndex: 50,
                padding: "0.75rem 0",
              }
            : {
                position: "absolute",
                top: dropdownPosition.top,
                left: dropdownPosition.left,
                width: dropdownPosition.width,
                maxHeight: "16rem",
                overflowY: "auto",
                background: "white",
                boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
                zIndex: 20,
                padding: "0.5rem 0",
              }
        }
      >
        {item.options.map((opt) => {
          const isChecked = checkedItems[item.id]?.includes(opt.value) || false;

          return (
            <label
              key={opt.value}
              className="flex cursor-pointer items-center px-3 py-2 text-xs hover:bg-gray-100"
            >
              {/* Hidden native checkbox (for accessibility) */}
              <input
                type="checkbox"
                checked={isChecked}
                onChange={() => toggleOption(item.id, opt.value)}
                className="peer hidden"
              />

              {/* Custom UI */}
              <span
                className={`mr-3 flex h-4 w-4 items-center justify-center rounded-full border transition-all duration-200 ${isChecked ? "border-gray-800 bg-white" : "border-gray-400 bg-white"} `}
              >
                {/* Inner dot */}
                <span
                  className={`h-2 w-2 rounded-full bg-gray-950 transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"} `}
                />
              </span>

              {/* Label */}
              <span className="capitalize">{opt.label}</span>
            </label>
          );
        })}
      </div>,
      document.body,
    );
  };

  return (
    <>
      <div className="relative flex w-full items-center">
        <div
          ref={containerRef}
          className="flex w-full gap-1 overflow-x-auto px-4 align-middle md:items-center md:justify-center md:px-0"
        >
          {items.map((item) => (
            <div
              key={item.id}
              className="relative flex cursor-pointer border border-neutral-400 bg-gray-100 py-1 pr-5 pl-2 hover:border-neutral-950 hover:bg-white"
            >
              <div
                onClick={(e) => toggleDropdown(item.id, e)}
                className="text-sm -tracking-wider whitespace-nowrap"
              >
                {item.name}
              </div>
              <span className="absolute top-1.25 right-1">
                <i className="icon-[ph--caret-down-bold]"></i>
              </span>
            </div>
          ))}
        </div>
      </div>

      <DropdownPortal />
    </>
  );
}