"use client";

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import { RefreshCw, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import "leaflet/dist/leaflet.css";

// Leaflet 아이콘 경로 설정 (엑박 방지)
if (typeof window !== "undefined") {
  const L = require("leaflet");
  delete (L.Icon.Default.prototype as any)._getIconUrl;
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
  });
}

// Leaflet 동적 import (SSR 방지)
const MapContainer = dynamic(
  () => import("react-leaflet").then((mod) => mod.MapContainer),
  { ssr: false }
);
const TileLayer = dynamic(
  () => import("react-leaflet").then((mod) => mod.TileLayer),
  { ssr: false }
);
const Marker = dynamic(
  () => import("react-leaflet").then((mod) => mod.Marker),
  { ssr: false }
);
const Popup = dynamic(
  () => import("react-leaflet").then((mod) => mod.Popup),
  { ssr: false }
);

interface MapMarker {
  id: string | number;
  latitude: number;
  longitude: number;
  label?: string;
  status?: string;
  additionalInfo?: Record<string, any>;
}

interface MapComponentProps {
  component: {
    id: string;
    config?: {
      dataSource?: {
        type?: "internal" | "external";
        connectionId?: number | null;
        tableName?: string;
        latColumn?: string;
        lngColumn?: string;
        labelColumn?: string;
        statusColumn?: string;
        additionalColumns?: string[];
        whereClause?: string;
      };
      mapConfig?: {
        center?: { lat: number; lng: number };
        zoom?: number;
        minZoom?: number;
        maxZoom?: number;
      };
      markerConfig?: {
        showLabel?: boolean;
        showPopup?: boolean;
        statusColors?: Record<string, string>;
      };
      refreshInterval?: number;
    };
  };
}

export default function MapComponent({ component }: MapComponentProps) {
  const [markers, setMarkers] = useState<MapMarker[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);

  const dataSource = component.config?.dataSource;
  const mapConfig = component.config?.mapConfig;
  const markerConfig = component.config?.markerConfig;
  const refreshInterval = component.config?.refreshInterval || 0;

  // 데이터 로드
  const loadMapData = async () => {
    if (!dataSource?.tableName || !dataSource?.latColumn || !dataSource?.lngColumn) {
      setError("테이블명, 위도 컬럼, 경도 컬럼을 설정해주세요.");
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      // API URL 구성
      const isExternal = dataSource.type === "external" && dataSource.connectionId;
      const baseUrl = isExternal
        ? `/api/map-data/external/${dataSource.connectionId}`
        : `/api/map-data/internal`;

      const params = new URLSearchParams({
        tableName: dataSource.tableName,
        latColumn: dataSource.latColumn,
        lngColumn: dataSource.lngColumn,
      });

      if (dataSource.labelColumn) {
        params.append("labelColumn", dataSource.labelColumn);
      }
      if (dataSource.statusColumn) {
        params.append("statusColumn", dataSource.statusColumn);
      }
      if (dataSource.additionalColumns && dataSource.additionalColumns.length > 0) {
        params.append("additionalColumns", dataSource.additionalColumns.join(","));
      }
      if (dataSource.whereClause) {
        params.append("whereClause", dataSource.whereClause);
      }

      const response = await fetch(`${baseUrl}?${params.toString()}`);
      const result = await response.json();

      if (!result.success) {
        throw new Error(result.message || "데이터 조회 실패");
      }

      setMarkers(result.data.markers || []);
      setLastUpdate(new Date());
    } catch (err: any) {
      console.error("지도 데이터 로드 오류:", err);
      setError(err.message || "데이터를 불러올 수 없습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  // 초기 로드 및 자동 새로고침
  useEffect(() => {
    loadMapData();

    if (refreshInterval > 0) {
      const interval = setInterval(loadMapData, refreshInterval);
      return () => clearInterval(interval);
    }
  }, [
    dataSource?.type,
    dataSource?.connectionId,
    dataSource?.tableName,
    dataSource?.latColumn,
    dataSource?.lngColumn,
    dataSource?.whereClause,
    refreshInterval,
  ]);

  // 마커 색상 가져오기
  const getMarkerColor = (status?: string): string => {
    if (!status || !markerConfig?.statusColors) {
      return markerConfig?.statusColors?.default || "#3b82f6";
    }
    return markerConfig.statusColors[status] || markerConfig.statusColors.default || "#3b82f6";
  };

  // 커스텀 마커 아이콘 생성
  const createMarkerIcon = (status?: string) => {
    if (typeof window === "undefined") return undefined;

    const L = require("leaflet");
    const color = getMarkerColor(status);

    return new L.Icon({
      iconUrl: `data:image/svg+xml;base64,${btoa(`
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="41" viewBox="0 0 25 41">
          <path d="M12.5 0C5.6 0 0 5.6 0 12.5c0 8.4 12.5 28.5 12.5 28.5S25 20.9 25 12.5C25 5.6 19.4 0 12.5 0z" fill="${color}"/>
          <circle cx="12.5" cy="12.5" r="6" fill="white"/>
        </svg>
      `)}`,
      shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [0, -41],
    });
  };

  if (error) {
    return (
      <div className="flex h-full w-full items-center justify-center bg-gray-50">
        <div className="text-center">
          <AlertCircle className="mx-auto h-12 w-12 text-red-500" />
          <p className="mt-2 text-sm text-red-600">{error}</p>
          <Button onClick={loadMapData} className="mt-4" size="sm">
            다시 시도
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="relative h-full w-full">
      {/* 지도 */}
      {typeof window !== "undefined" && (
        <MapContainer
          center={[
            mapConfig?.center?.lat || 36.5,
            mapConfig?.center?.lng || 127.5,
          ]}
          zoom={mapConfig?.zoom || 7}
          minZoom={mapConfig?.minZoom || 5}
          maxZoom={mapConfig?.maxZoom || 18}
          style={{ height: "100%", width: "100%" }}
        >
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
          />

          {/* 마커 렌더링 */}
          {markers.map((marker) => (
            <Marker
              key={marker.id}
              position={[marker.latitude, marker.longitude]}
              icon={createMarkerIcon(marker.status)}
            >
              {markerConfig?.showPopup !== false && (
                <Popup>
                  <div className="text-sm">
                    {marker.label && (
                      <div className="mb-2 font-bold text-base">{marker.label}</div>
                    )}
                    <div className="space-y-1">
                      <div>
                        <strong>위도:</strong> {marker.latitude.toFixed(6)}
                      </div>
                      <div>
                        <strong>경도:</strong> {marker.longitude.toFixed(6)}
                      </div>
                      {marker.status && (
                        <div>
                          <strong>상태:</strong> {marker.status}
                        </div>
                      )}
                      {marker.additionalInfo &&
                        Object.entries(marker.additionalInfo).map(([key, value]) => (
                          <div key={key}>
                            <strong>{key}:</strong> {String(value)}
                          </div>
                        ))}
                    </div>
                  </div>
                </Popup>
              )}
            </Marker>
          ))}
        </MapContainer>
      )}

      {/* 상단 정보 바 */}
      <div className="absolute top-2 right-2 z-[1000] flex items-center gap-2 rounded-lg bg-white/90 backdrop-blur-sm px-3 py-2 shadow-lg">
        <span className="text-xs font-medium text-gray-700">
          마커: {markers.length}개
        </span>
        {lastUpdate && (
          <span className="text-xs text-gray-500">
            {lastUpdate.toLocaleTimeString()}
          </span>
        )}
        <Button
          onClick={loadMapData}
          disabled={isLoading}
          size="sm"
          variant="ghost"
          className="h-6 w-6 p-0"
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
        </Button>
      </div>
    </div>
  );
}