"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="rounded-lg bg-background 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="rounded-lg bg-background 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-[10px] text-muted-foreground">
            마커 데이터를 자동으로 갱신하는 주기를 설정합니다
          </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>
            </SelectContent>
          </Select>
          <p className="text-[10px] text-muted-foreground">
            지도에 표시할 마커의 모양을 선택합니다
          </p>
        </div>
      </div>
    </div>
  );
}