"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="text-lg font-semibold text-gray-900 mb-4">
        매핑 정보
      </h2>

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

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

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

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

      {/* 매핑 목록 */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-gray-700 mb-2">
          필드 매핑 목록
        </h3>
        
        {fieldMappings.length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            <Database className="w-8 h-8 mx-auto mb-2 opacity-50" />
            <p className="text-sm">아직 매핑이 없습니다</p>
            <p className="text-xs">3단계에서 필드를 매핑하세요</p>
          </div>
        ) : (
          <div className="space-y-1 max-h-64 overflow-y-auto">
            {fieldMappings.map((mapping) => (
              <div
                key={mapping.id}
                className={`p-3 rounded-lg border cursor-pointer 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="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium text-gray-900 truncate">
                        {mapping.fromField.name}
                      </span>
                      <span className="text-gray-400">→</span>
                      <span className="text-sm font-medium text-gray-900 truncate">
                        {mapping.toField.name}
                      </span>
                    </div>
                    <div className="flex items-center gap-2 mt-1">
                      <span className={`text-xs px-2 py-1 rounded ${
                        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={`text-xs px-2 py-1 rounded ${
                        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="w-4 h-4 text-green-600" />
                    ) : (
                      <XCircle className="w-4 h-4 text-destructive" />
                    )}
                  </div>
                </div>
                
                {mapping.validationMessage && (
                  <p className="text-xs text-destructive mt-1">
                    {mapping.validationMessage}
                  </p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};