"use client";

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Settings, CheckCircle, AlertCircle } from "lucide-react";

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

interface ActionSummaryPanelProps {
  state: DataConnectionState;
}

/**
 * 📋 액션 설정 요약 패널
 * - 액션 타입 표시
 * - 실행 조건 요약
 * - 설정 완료 상태
 */
const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
  const { actionType, actionConditions } = state;

  const isConfigured = actionType && (actionType === "insert" || actionConditions.length > 0);

  const actionTypeLabels = {
    insert: "INSERT",
    update: "UPDATE",
    delete: "DELETE",
    upsert: "UPSERT",
  };

  const actionTypeDescriptions = {
    insert: "새 데이터 삽입",
    update: "기존 데이터 수정",
    delete: "데이터 삭제",
    upsert: "있으면 수정, 없으면 삽입",
  };

  return (
    <Card className="shadow-sm">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-sm">
          <Settings className="h-4 w-4" />
          액션 설정
          {isConfigured ? (
            <CheckCircle className="h-4 w-4 text-green-600" />
          ) : (
            <AlertCircle className="h-4 w-4 text-orange-500" />
          )}
        </CardTitle>
      </CardHeader>

      <CardContent className="space-y-3 px-4 pt-0 pb-4">
        {/* 액션 타입 */}
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium">액션 타입</span>
            {actionType ? (
              <Badge variant="outline" className="text-xs">
                {actionTypeLabels[actionType]}
              </Badge>
            ) : (
              <span className="text-muted-foreground text-xs">미설정</span>
            )}
          </div>

          {actionType && <p className="text-muted-foreground text-xs">{actionTypeDescriptions[actionType]}</p>}
        </div>

        {/* 실행 조건 */}
        {actionType && actionType !== "insert" && (
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium">실행 조건</span>
              <span className="text-muted-foreground text-xs">
                {actionConditions.length > 0 ? `${actionConditions.length}개 조건` : "조건 없음"}
              </span>
            </div>

            {actionConditions.length === 0 && (
              <p className="text-xs text-orange-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
            )}
          </div>
        )}

        {/* INSERT 액션 안내 */}
        {actionType === "insert" && (
          <div className="rounded-md border border-green-200 bg-green-50 p-2">
            <p className="text-xs text-green-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
          </div>
        )}

        {/* 설정 상태 */}
        <div className="border-t pt-2">
          <div className="flex items-center gap-2">
            {isConfigured ? (
              <>
                <CheckCircle className="h-3 w-3 text-green-600" />
                <span className="text-xs font-medium text-green-600">설정 완료</span>
              </>
            ) : (
              <>
                <AlertCircle className="h-3 w-3 text-orange-500" />
                <span className="text-xs font-medium text-orange-600">설정 필요</span>
              </>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default ActionSummaryPanel;