"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Link, ArrowRight, MousePointer, Move } from "lucide-react";

// 타입 import
import { ColumnInfo } from "@/lib/types/multiConnection";

interface MappingControlsProps {
  selectedFromField: ColumnInfo | null;
  selectedToField: ColumnInfo | null;
  onCreateMapping: () => void;
  canCreate: boolean;
}

/**
 * 🎯 매핑 생성 컨트롤
 * - 선택된 필드 표시
 * - 매핑 생성 버튼
 * - 시각적 피드백
 */
const MappingControls: React.FC<MappingControlsProps> = ({
  selectedFromField,
  selectedToField,
  onCreateMapping,
  canCreate,
}) => {
  // 안내 메시지 표시 여부
  const showGuidance = !selectedFromField && !selectedToField;

  if (showGuidance) {
    return (
      <div className="bg-muted/50 rounded-lg border p-4">
        <div className="text-muted-foreground flex items-center justify-center gap-6 text-sm">
          <div className="flex items-center gap-2">
            <MousePointer className="h-4 w-4" />
            <span>클릭으로 선택</span>
          </div>
          <div className="text-muted-foreground">또는</div>
          <div className="flex items-center gap-2">
            <Move className="h-4 w-4" />
            <span>드래그 앤 드롭으로 매핑</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-muted/50 flex items-center justify-between rounded-lg border p-4">
      <div className="flex items-center gap-4">
        <div className="text-sm">
          <span className="text-muted-foreground">선택된 필드:</span>
          <div className="mt-2 flex items-center gap-2">
            {/* FROM 필드 */}
            <Badge
              variant={selectedFromField ? "default" : "outline"}
              className={`transition-all ${selectedFromField ? "shadow-sm" : ""}`}
            >
              FROM: {selectedFromField?.displayName || selectedFromField?.columnName || "없음"}
            </Badge>

            {/* 화살표 */}
            <ArrowRight
              className={`h-4 w-4 transition-colors ${canCreate ? "text-primary" : "text-muted-foreground"}`}
            />

            {/* TO 필드 */}
            <Badge
              variant={selectedToField ? "default" : "outline"}
              className={`transition-all ${selectedToField ? "shadow-sm" : ""}`}
            >
              TO: {selectedToField?.displayName || selectedToField?.columnName || "없음"}
            </Badge>
          </div>
        </div>

        {/* 타입 호환성 표시 */}
        {selectedFromField && selectedToField && (
          <div className="text-xs">
            <div className="flex items-center gap-2">
              <span className="text-muted-foreground">타입:</span>
              <Badge variant="outline" className="text-xs">
                {selectedFromField.webType || "unknown"}
              </Badge>
              <ArrowRight className="text-muted-foreground h-3 w-3" />
              <Badge variant="outline" className="text-xs">
                {selectedToField.webType || "unknown"}
              </Badge>
              {/* 타입 호환성 아이콘 */}
              {selectedFromField.webType === selectedToField.webType ? (
                <span className="text-xs text-green-600">✅</span>
              ) : (
                <span className="text-xs text-orange-600">⚠️</span>
              )}
            </div>
          </div>
        )}
      </div>

      {/* 매핑 생성 버튼 */}
      <Button
        onClick={onCreateMapping}
        disabled={!canCreate}
        size="sm"
        className={`transition-all ${canCreate ? "shadow-sm hover:shadow-md" : ""}`}
      >
        <Link className="mr-1 h-4 w-4" />
        매핑 생성
      </Button>
    </div>
  );
};

export default MappingControls;