"use client";

import { useEffect, useRef, useState } from "react";
import { PencilRuler, Settings2 } from "lucide-react";

type Props = {
  isGisEditActive: boolean;
  onToggleGisEdit: () => void;
  onOpenGisManagement: () => Window | null;
};

/** 기존 지도 도구와 같은 크기로 GIS 버튼의 기본·활성·키보드 포커스를 표시한다. */
const getButtonClass = (isActive: boolean) =>
  `flex h-[40px] w-[40px] items-center justify-center p-0 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ${
    isActive
      ? "bg-primary text-primary-foreground"
      : "bg-background text-label hover:bg-primary hover:text-primary-foreground"
  }`;

/** 분석도구 메뉴와 독립적으로 GIS 편집 모드와 관리 팝업의 진입 버튼을 제공한다. */
export default function GisToolButtons({
  isGisEditActive,
  onToggleGisEdit,
  onOpenGisManagement,
}: Props) {
  // 관리 팝업이 닫히면 버튼의 활성 표시도 해제한다.
  const [isGisManagementActive, setIsGisManagementActive] = useState(false);
  // 렌더링과 무관한 감지 타이머를 보관해 재클릭·화면 이탈 시 중복 실행을 방지한다.
  const closeWatcherRef = useRef<number | null>(null);

  useEffect(() => () => {
    if (closeWatcherRef.current !== null) {
      window.clearInterval(closeWatcherRef.current);
    }
  }, []);

  /** 기존 팝업 실행 함수를 호출하고 차단·닫힘 상태를 버튼에 반영한다. */
  const handleOpenGisManagement = () => {
    if (closeWatcherRef.current !== null) {
      window.clearInterval(closeWatcherRef.current);
      closeWatcherRef.current = null;
    }
    const popup = onOpenGisManagement();
    setIsGisManagementActive(Boolean(popup && !popup.closed));
    if (!popup || popup.closed) return;

    closeWatcherRef.current = window.setInterval(() => {
      if (!popup.closed) return;
      if (closeWatcherRef.current !== null) {
        window.clearInterval(closeWatcherRef.current);
        closeWatcherRef.current = null;
      }
      setIsGisManagementActive(false);
    }, 300);
  };

  return (
    <div
      role="group"
      aria-label="GIS 도구"
      className="absolute right-[16px] top-[222.67px] z-[45] flex w-[40px] flex-col overflow-hidden rounded-[3px] bg-background shadow-[0_1px_2px_rgba(60,64,67,0.3),0_1px_3px_1px_rgba(60,64,67,0.15)]"
    >
      <button
        type="button"
        title="GIS 편집"
        aria-label="GIS 편집"
        aria-pressed={isGisEditActive}
        onClick={onToggleGisEdit}
        className={`${getButtonClass(isGisEditActive)} border-b border-[#eeeeee]`}
      >
        <PencilRuler className="h-[20px] w-[20px]" aria-hidden="true" />
      </button>
      <button
        type="button"
        title="GIS 관리"
        aria-label="GIS 관리"
        aria-haspopup="dialog"
        className={getButtonClass(isGisManagementActive)}
        onClick={handleOpenGisManagement}
      >
        <Settings2 className="h-[20px] w-[20px]" aria-hidden="true" />
      </button>
    </div>
  );
}