ERP-node/frontend/components/admin/dashboard/widget-sections/MapConfigSection.tsx

"use client";

import React from "react";
import { QueryResult } from "../types";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";

interface MapConfigSectionProps {
  queryResult: QueryResult | null;
  refreshInterval?: number;
  markerType?: string;
  onRefreshIntervalChange?: (interval: number) => void;
  onMarkerTypeChange?: (type: string) => void;
}

/**
 * 지도 위젯 설정 섹션
 * - 자동 새로고침 간격 설정
 * - 마커 종류 선택
 */
export function MapConfigSection({
  queryResult,
  refreshInterval = 5,
  markerType = "circle",
  onRefreshIntervalChange,
  onMarkerTypeChange,
}: MapConfigSectionProps) {
  // 쿼리 결과가 없으면 안내 메시지 표시
  if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
    return (
      <div className="bg-background rounded-lg p-3 shadow-sm">
        <Label className="mb-2 block text-xs font-semibold">지도 설정</Label>
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription className="text-xs">먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.</AlertDescription>
        </Alert>
      </div>
    );
  }

  return (
    <div className="bg-background rounded-lg p-3 shadow-sm">
      <Label className="mb-3 block text-xs font-semibold">지도 설정</Label>

      <div className="space-y-3">
        {/* 자동 새로고침 간격 */}
        <div className="space-y-1.5">
          <Label htmlFor="refresh-interval" className="text-xs">
            자동 새로고침 간격
          </Label>
          <Select
            value={refreshInterval.toString()}
            onValueChange={(value) => onRefreshIntervalChange?.(parseInt(value))}
          >
            <SelectTrigger id="refresh-interval" className="h-9 text-xs">
              <SelectValue placeholder="새로고침 간격 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="0" className="text-xs">
                없음
              </SelectItem>
              <SelectItem value="5" className="text-xs">
                5초
              </SelectItem>
              <SelectItem value="10" className="text-xs">
                10초
              </SelectItem>
              <SelectItem value="30" className="text-xs">
                30초
              </SelectItem>
              <SelectItem value="60" className="text-xs">
                1분
              </SelectItem>
            </SelectContent>
          </Select>
          <p className="text-muted-foreground text-[10px]">마커 데이터를 자동으로 갱신하는 주기를 설정합니다</p>
        </div>

        {/* 마커 종류 선택 */}
        <div className="space-y-1.5">
          <Label htmlFor="marker-type" className="text-xs">
            마커 종류
          </Label>
          <Select value={markerType} onValueChange={(value) => onMarkerTypeChange?.(value)}>
            <SelectTrigger id="marker-type" className="h-9 text-xs">
              <SelectValue placeholder="마커 종류 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="circle" className="text-xs">
                동그라미
              </SelectItem>
              <SelectItem value="arrow" className="text-xs">
                화살표
              </SelectItem>
              <SelectItem value="truck" className="text-xs">
                트럭
              </SelectItem>
            </SelectContent>
          </Select>
          <p className="text-muted-foreground text-[10px]">지도에 표시할 마커의 모양을 선택합니다</p>
        </div>
      </div>
    </div>
  );
}