"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">
            {mappings.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} →{" "}
                      {mapping.toField.displayName || mapping.toField.columnName}
                    </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} → {mapping.toField.webType}
                        </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>
            ))}

            {mappings.length === 0 && (
              <div className="text-muted-foreground py-8 text-center text-sm">
                <p>매핑된 필드가 없습니다.</p>
                <p className="mt-1 text-xs">우측에서 필드를 연결해주세요.</p>
              </div>
            )}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
};

export default MappingDetailList;