"use client";
import { getOverLayObj } from "@/components/lib/func/mapUtil";
import { Card } from "@common/business_components/ui/chart/lib/card";
import { useEffect, useRef, useState } from "react";
import WrOverLayTable from "./WrOverLayTable/WrOverLayTable";
import WrOverLayRuse from "./WrOverLayRuse/WrOverLayRuse";
import Draggable from "react-draggable";

export default function WrOverLay({
  title,
  data,
  code,
}: {
  title: string;
  data: any;
  code: any;
}) {
  const [newOverLayData, setNewOverLayData] = useState<Record<string, string>>(
    {}
  );
  const [typeTitle, setTypeTitle] = useState<string>("");
  const [pos, setPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 });

  const [open, setOpen] = useState(true);
  const bubbleLabel = title?.[0] ?? "•";

  const dragRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (title !== "하수재이용시설" && data) {
      const overRayData = getOverLayObj(title, data, code);
      setTypeTitle(overRayData?.title ?? "");
      setNewOverLayData(overRayData.newObj ?? {});
    }
  }, [title, data]);

  return (
    <>
      {open ? (
        <Draggable
          position={pos}
          nodeRef={dragRef}
          onDrag={(e, data) => setPos({ x: data.x, y: data.y })}
        >
          <div ref={dragRef}>
            <Card className="w-[320px] p-0 shadow-md rounded-xl overflow-hidden border border-slate-300 relative">
              {/* 헤더: 제목 바 + 우측 정렬 버튼 (절대배치 제거, 타이틀 중앙 정렬 유지) */}
              <div className="bg-sky-600 text-white font-semibold py-2 text-xl">
                <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2">
                  {/* 좌측 스페이서: 우측 버튼과 동일한 너비를 차지하도록 동일 버튼을 투명하게 복제 */}
                  <div className="opacity-0 pointer-events-none">
                    <div className="flex gap-2">
                      <button
                        onClick={() => setPos({ x: 0, y: 0 })}
                        className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
                        title="원위치"
                      >
                        ↺
                      </button>

                      <button
                        onClick={() => setOpen(false)}
                        aria-label="축소"
                        title="축소"
                        className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
                      >
                        –
                      </button>
                    </div>
                  </div>

                  {/* 중앙 타이틀 */}
                  <div className="text-2xl text-center truncate">
                    {title === "하수재이용시설" ? title: typeTitle + "(" + title + ")"}
                  </div>

                  {/* 우측 실제 버튼 영역 */}
                  <div className="flex gap-2 justify-end">
                    <button
                      onClick={() => setPos({ x: 0, y: 0 })}
                      className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
                      title="원위치"
                    >
                      ↺
                    </button>

                    <button
                      onClick={() => setOpen(false)}
                      aria-label="축소"
                      title="축소"
                      className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
                    >
                      –
                    </button>
                  </div>
                </div>
              </div>

              {/* 본문 */}
              {title === "하수재이용시설" ? (
                <WrOverLayRuse overLayData={data ?? []} />
              ) : (
                <WrOverLayTable overLayData={newOverLayData} />
              )}
            </Card>
          </div>
        </Draggable>
      ) : (
        <button
          onClick={() => setOpen(true)}
          aria-label="확장"
          title={title || "정보 보기"}
          className="w-[30px] h-[30px]  bg-white font-bold shadow flex items-center justify-center border border-slate-300"
        >
          {bubbleLabel}
        </button>
      )}
    </>
  );
}