ERP-node/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx

"use client";

import React from "react";
import { CheckCircle, XCircle, AlertCircle, Database } from "lucide-react";
import { MappingStats, FieldMapping } from "../types/redesigned";

interface MappingInfoPanelProps {
  mappingStats: MappingStats;
  fieldMappings: FieldMapping[];
  selectedMapping?: string;
  onMappingSelect: (mappingId: string) => void;
}

export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
  mappingStats,
  fieldMappings,
  selectedMapping,
  onMappingSelect,
}) => {
  return (
    <div className="p-6">
      <h2 className="mb-4 text-lg font-semibold text-gray-900">매핑 정보</h2>

      {/* 통계 카드 */}
      <div className="mb-6 grid grid-cols-2 gap-3">
        <div className="rounded-lg border border-green-200 bg-green-50 p-3">
          <div className="flex items-center gap-2">
            <CheckCircle className="h-4 w-4 text-green-600" />
            <span className="text-sm font-medium text-green-800">유효한 매핑</span>
          </div>
          <div className="mt-1 text-2xl font-bold text-green-900">{mappingStats.validMappings}</div>
        </div>

        <div className="bg-destructive/10 border-destructive/20 rounded-lg border p-3">
          <div className="flex items-center gap-2">
            <XCircle className="text-destructive h-4 w-4" />
            <span className="text-sm font-medium text-red-800">오류 매핑</span>
          </div>
          <div className="mt-1 text-2xl font-bold text-red-900">{mappingStats.invalidMappings}</div>
        </div>

        <div className="bg-accent border-primary/20 rounded-lg border p-3">
          <div className="flex items-center gap-2">
            <Database className="text-primary h-4 w-4" />
            <span className="text-sm font-medium text-blue-800">총 매핑</span>
          </div>
          <div className="mt-1 text-2xl font-bold text-blue-900">{mappingStats.totalMappings}</div>
        </div>

        <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-3">
          <div className="flex items-center gap-2">
            <AlertCircle className="h-4 w-4 text-yellow-600" />
            <span className="text-sm font-medium text-yellow-800">누락 필드</span>
          </div>
          <div className="mt-1 text-2xl font-bold text-yellow-900">{mappingStats.missingRequiredFields}</div>
        </div>
      </div>

      {/* 매핑 목록 */}
      <div className="space-y-2">
        <h3 className="mb-2 text-sm font-medium text-gray-700">필드 매핑 목록</h3>

        {fieldMappings.length === 0 ? (
          <div className="py-8 text-center text-gray-500">
            <Database className="mx-auto mb-2 h-8 w-8 opacity-50" />
            <p className="text-sm">아직 매핑이 없습니다</p>
            <p className="text-xs">3단계에서 필드를 매핑하세요</p>
          </div>
        ) : (
          <div className="max-h-64 space-y-1 overflow-y-auto">
            {fieldMappings.map((mapping) => (
              <div
                key={mapping.id}
                className={`cursor-pointer rounded-lg border p-3 transition-all duration-200 ${
                  selectedMapping === mapping.id
                    ? "border-orange-500 bg-orange-50"
                    : mapping.isValid
                      ? "border-green-200 bg-green-50 hover:border-green-300"
                      : "border-destructive/20 bg-destructive/10 hover:border-red-300"
                }`}
                onClick={() => onMappingSelect(mapping.id)}
              >
                <div className="flex items-center justify-between">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <span className="truncate text-sm font-medium text-gray-900">{mapping.fromField.name}</span>
                      <span className="text-gray-400">→</span>
                      <span className="truncate text-sm font-medium text-gray-900">{mapping.toField.name}</span>
                    </div>
                    <div className="mt-1 flex items-center gap-2">
                      <span
                        className={`rounded px-2 py-1 text-xs ${
                          mapping.fromField.type === mapping.toField.type
                            ? "bg-green-100 text-green-800"
                            : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {mapping.fromField.type}
                      </span>
                      <span className="text-gray-400">→</span>
                      <span
                        className={`rounded px-2 py-1 text-xs ${
                          mapping.fromField.type === mapping.toField.type
                            ? "bg-green-100 text-green-800"
                            : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {mapping.toField.type}
                      </span>
                    </div>
                  </div>

                  <div className="ml-2">
                    {mapping.isValid ? (
                      <CheckCircle className="h-4 w-4 text-green-600" />
                    ) : (
                      <XCircle className="text-destructive h-4 w-4" />
                    )}
                  </div>
                </div>

                {mapping.validationMessage && (
                  <p className="text-destructive mt-1 text-xs">{mapping.validationMessage}</p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};