"use client";

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { CheckCircle, AlertTriangle, Edit, Trash2 } from "lucide-react";

// 타입 import
import { MappingDetailListProps } from "../types/redesigned";

/**
 * 📝 매핑 상세 목록
 * - 각 매핑별 상세 정보
 * - 타입 변환 정보
 * - 개별 수정/삭제 기능
 */
const MappingDetailList: React.FC<MappingDetailListProps> = ({
  mappings,
  selectedMapping,
  onSelectMapping,
  onUpdateMapping,
  onDeleteMapping,
}) => {
  return (
    <Card>
      <CardContent className="p-0">
        <ScrollArea className="h-[300px]">
          <div className="space-y-3 p-4">
            {(() => {
              console.log("🔍 MappingDetailList - 전체 매핑 데이터:", mappings);

              const validMappings = mappings.filter((mapping) => {
                const isValid =
                  mapping.fromField && mapping.toField && mapping.fromField.columnName && mapping.toField.columnName;
                console.log(`🔍 매핑 유효성 검사:`, {
                  mapping,
                  isValid,
                  hasFromField: !!mapping.fromField,
                  hasToField: !!mapping.toField,
                  fromColumnName: mapping.fromField?.columnName,
                  toColumnName: mapping.toField?.columnName,
                });
                return isValid;
              });

              if (validMappings.length === 0) {
                return (
                  <div className="text-muted-foreground flex h-[200px] items-center justify-center">
                    <div className="text-center">
                      <p className="text-sm">매핑된 필드가 없습니다</p>
                      <p className="text-xs">INSERT 액션이 있을 때 필드 매핑을 설정하세요</p>
                    </div>
                  </div>
                );
              }

              return validMappings.map((mapping, index) => (
                <div
                  key={mapping.id}
                  className={`cursor-pointer rounded-lg border p-3 transition-colors ${
                    selectedMapping === mapping.id ? "border-primary bg-primary/5" : "border-border hover:bg-muted/50"
                  }`}
                  onClick={() => onSelectMapping(mapping.id)}
                >
                  {/* 매핑 헤더 */}
                  <div className="mb-2 flex items-start justify-between">
                    <div className="min-w-0 flex-1">
                      <h4 className="truncate text-sm font-medium">
                        {index + 1}. {mapping.fromField?.displayName || mapping.fromField?.columnName || "Unknown"} →{" "}
                        {mapping.toField?.displayName || mapping.toField?.columnName || "Unknown"}
                      </h4>
                      <div className="mt-1 flex items-center gap-2">
                        {mapping.isValid ? (
                          <Badge variant="outline" className="text-xs text-green-600">
                            <CheckCircle className="mr-1 h-3 w-3" />
                            {mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
                          </Badge>
                        ) : (
                          <Badge variant="outline" className="text-xs text-orange-600">
                            <AlertTriangle className="mr-1 h-3 w-3" />
                            타입 불일치
                          </Badge>
                        )}
                      </div>
                    </div>

                    <div className="ml-2 flex gap-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 w-6 p-0"
                        onClick={(e) => {
                          e.stopPropagation();
                          // TODO: 매핑 편집 모달 열기
                        }}
                      >
                        <Edit className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-destructive hover:text-destructive h-6 w-6 p-0"
                        onClick={(e) => {
                          e.stopPropagation();
                          onDeleteMapping(mapping.id);
                        }}
                      >
                        <Trash2 className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>

                  {/* 변환 규칙 */}
                  {mapping.transformRule && (
                    <div className="text-muted-foreground text-xs">변환: {mapping.transformRule}</div>
                  )}

                  {/* 검증 메시지 */}
                  {mapping.validationMessage && (
                    <div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
                  )}
                </div>
              ));
            })()}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
};

export default MappingDetailList;