/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import React, { useEffect, useRef, useState } from "react";

type MiniMapProps = {
  mindmap: any;
  show: boolean;
};

export const MindmapMiniMap = ({ mindmap, show }: MiniMapProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [imgUrl, setImgUrl] = useState("");
  const [viewBoxStyle, setViewBoxStyle] = useState<any>({});
  const [svgBoxStyle, setSvgBoxStyle] = useState<any>({});

  useEffect(() => {
    if (!mindmap || !show || !containerRef.current) return;

    let timer: NodeJS.Timeout;

    const drawMiniMap = () => {
        if (!containerRef.current || !mindmap.miniMap) return;
        const { width, height } = containerRef.current.getBoundingClientRect();
        
        // simple-mind-map miniMap plugin API check
        // Assuming calculationMiniMap exists
        if (typeof mindmap.miniMap.calculationMiniMap !== 'function') return;

        const {
            getImgUrl,
            viewBoxStyle: newViewBoxStyle,
            miniMapBoxScale,
            miniMapBoxLeft,
            miniMapBoxTop
        } = mindmap.miniMap.calculationMiniMap(width, height);

        if (getImgUrl) {
            getImgUrl((img: string) => {
                setImgUrl(img);
            });
        }

        setViewBoxStyle(newViewBoxStyle);
        setSvgBoxStyle({
            transform: `scale(${miniMapBoxScale})`,
            left: miniMapBoxLeft,
            top: miniMapBoxTop,
        });
    };

    // Initial draw with delay to ensure rendering
    timer = setTimeout(drawMiniMap, 300);

    const onDataChange = () => {
        clearTimeout(timer);
        timer = setTimeout(drawMiniMap, 500);
    };

    const onViewBoxPositionChange = (pos: any) => {
         setViewBoxStyle((prev: any) => ({ ...prev, ...pos }));
    };

    // Listeners
    mindmap.on('data_change', onDataChange);
    mindmap.on('view_data_change', onDataChange);
    mindmap.on('node_tree_render_end', onDataChange);
    mindmap.on('mini_map_view_box_position_change', onViewBoxPositionChange);

    return () => {
        clearTimeout(timer);
        mindmap.off('data_change', onDataChange);
        mindmap.off('view_data_change', onDataChange);
        mindmap.off('node_tree_render_end', onDataChange);
        mindmap.off('mini_map_view_box_position_change', onViewBoxPositionChange);
    };
  }, [mindmap, show]);

  if (!show) return null;

  return (
    <div 
        ref={containerRef}
        className="absolute bottom-20 right-4 h-48 w-64 border border-gray-200 bg-white shadow-lg rounded overflow-hidden cursor-pointer z-50 select-none"
        onMouseDown={(e) => mindmap?.miniMap?.onMousedown(e)}
        onMouseMove={(e) => mindmap?.miniMap?.onMousemove(e)}
        onMouseUp={(e) => mindmap?.miniMap?.onMouseup(e)}
        onMouseLeave={(e) => mindmap?.miniMap?.onMouseup(e)} // Fallback for leaving container
    >
        <div className="absolute origin-top-left" style={svgBoxStyle}>
            <img src={imgUrl} draggable={false} className="select-none pointer-events-none" />
        </div>
        <div 
            className="absolute border-2 border-red-500 bg-red-500/20"
            style={viewBoxStyle}
            onMouseDown={(e) => { e.stopPropagation(); mindmap?.miniMap?.onViewBoxMousedown(e); }}
            onMouseMove={(e) => { e.stopPropagation(); mindmap?.miniMap?.onViewBoxMousemove(e); }}
        />
    </div>
  );
};
