"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Save, Eye, TestTube, Copy, RotateCcw, Loader2 } from "lucide-react";
import { toast } from "sonner";

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

interface ActionButtonsProps {
  state: DataConnectionState;
  actions: DataConnectionActions;
}

/**
 * 🎯 액션 버튼들
 * - 저장, 미리보기, 테스트 실행
 * - 설정 복사, 초기화
 */
const ActionButtons: React.FC<ActionButtonsProps> = ({ state, actions }) => {
  const handleSave = async () => {
    try {
      await actions.saveMappings();
    } catch (error) {
      console.error("저장 실패:", error);
    }
  };

  const handlePreview = () => {
    // TODO: 미리보기 모달 열기
    toast.info("미리보기 기능은 곧 구현될 예정입니다.");
  };

  const handleTest = async () => {
    try {
      await actions.testExecution();
    } catch (error) {
      console.error("테스트 실패:", error);
    }
  };

  const handleCopySettings = () => {
    // TODO: 설정 복사 기능
    toast.info("설정 복사 기능은 곧 구현될 예정입니다.");
  };

  const handleReset = () => {
    if (confirm("모든 설정을 초기화하시겠습니까?")) {
      // TODO: 상태 초기화
      toast.success("설정이 초기화되었습니다.");
    }
  };

  const canSave = state.fieldMappings.length > 0 && !state.isLoading;
  const canTest = state.fieldMappings.length > 0 && !state.isLoading;

  return (
    <div className="space-y-3">
      {/* 주요 액션 */}
      <div className="grid grid-cols-2 gap-2">
        <Button onClick={handleSave} disabled={!canSave} className="h-8 text-xs">
          {state.isLoading ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <Save className="mr-1 h-3 w-3" />}
          저장
        </Button>

        <Button variant="outline" onClick={handlePreview} className="h-8 text-xs">
          <Eye className="mr-1 h-3 w-3" />
          미리보기
        </Button>
      </div>

      {/* 테스트 실행 */}
      <Button variant="secondary" onClick={handleTest} disabled={!canTest} className="h-8 w-full text-xs">
        {state.isLoading ? <Loader2 className="mr-1 h-3 w-3 animate-spin" /> : <TestTube className="mr-1 h-3 w-3" />}
        테스트 실행
      </Button>

      <Separator />

      {/* 보조 액션 */}
      <div className="grid grid-cols-2 gap-2">
        <Button variant="ghost" size="sm" onClick={handleCopySettings} className="h-7 text-xs">
          <Copy className="mr-1 h-3 w-3" />
          설정 복사
        </Button>

        <Button
          variant="ghost"
          size="sm"
          onClick={handleReset}
          className="text-destructive hover:text-destructive h-7 text-xs"
        >
          <RotateCcw className="mr-1 h-3 w-3" />
          초기화
        </Button>
      </div>

      {/* 상태 정보 */}
      {state.fieldMappings.length > 0 && (
        <div className="text-muted-foreground border-t pt-2 text-center text-xs">
          {state.fieldMappings.length}개 매핑 설정됨
          {state.validationErrors.length > 0 && (
            <span className="ml-1 text-orange-600">({state.validationErrors.length}개 오류)</span>
          )}
        </div>
      )}
    </div>
  );
};

export default ActionButtons;