"use client";

/**
 * 플로우 에디터 상단 툴바
 */

import { Save, FileCheck, Undo2, Redo2, ZoomIn, ZoomOut, Download, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { useReactFlow } from "reactflow";

export function FlowToolbar() {
  const { zoomIn, zoomOut, fitView } = useReactFlow();
  const {
    flowName,
    setFlowName,
    validateFlow,
    saveFlow,
    exportFlow,
    isSaving,
    selectedNodes,
    removeNodes,
    undo,
    redo,
    canUndo,
    canRedo,
  } = useFlowEditorStore();

  const handleValidate = () => {
    const result = validateFlow();
    if (result.valid) {
      alert("✅ 검증 성공! 오류가 없습니다.");
    } else {
      alert(`❌ 검증 실패\n\n${result.errors.map((e) => `- ${e.message}`).join("\n")}`);
    }
  };

  const handleSave = async () => {
    const result = await saveFlow();
    if (result.success) {
      alert(`✅ ${result.message}\nFlow ID: ${result.flowId}`);
    } else {
      alert(`❌ 저장 실패\n\n${result.message}`);
    }
  };

  const handleExport = () => {
    const json = exportFlow();
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `${flowName || "flow"}.json`;
    a.click();
    URL.revokeObjectURL(url);
    alert("✅ JSON 파일로 내보내기 완료!");
  };

  const handleDelete = () => {
    if (selectedNodes.length === 0) {
      alert("삭제할 노드를 선택해주세요.");
      return;
    }

    if (confirm(`선택된 ${selectedNodes.length}개 노드를 삭제하시겠습니까?`)) {
      removeNodes(selectedNodes);
      alert(`✅ ${selectedNodes.length}개 노드가 삭제되었습니다.`);
    }
  };

  return (
    <div className="flex items-center gap-2 rounded-lg border bg-white p-2 shadow-md">
      {/* 플로우 이름 */}
      <Input
        value={flowName}
        onChange={(e) => setFlowName(e.target.value)}
        className="h-8 w-[200px] text-sm"
        placeholder="플로우 이름"
      />

      <div className="h-6 w-px bg-gray-200" />

      {/* 실행 취소/다시 실행 */}
      <Button variant="ghost" size="sm" title="실행 취소 (Ctrl+Z)" disabled={!canUndo()} onClick={undo}>
        <Undo2 className="h-4 w-4" />
      </Button>
      <Button variant="ghost" size="sm" title="다시 실행 (Ctrl+Y)" disabled={!canRedo()} onClick={redo}>
        <Redo2 className="h-4 w-4" />
      </Button>

      <div className="h-6 w-px bg-gray-200" />

      {/* 삭제 버튼 */}
      <Button
        variant="ghost"
        size="sm"
        onClick={handleDelete}
        disabled={selectedNodes.length === 0}
        title={selectedNodes.length > 0 ? `${selectedNodes.length}개 노드 삭제` : "삭제할 노드를 선택하세요"}
        className="gap-1 text-red-600 hover:bg-red-50 hover:text-red-700 disabled:opacity-50"
      >
        <Trash2 className="h-4 w-4" />
        {selectedNodes.length > 0 && <span className="text-xs">({selectedNodes.length})</span>}
      </Button>

      <div className="h-6 w-px bg-gray-200" />

      {/* 줌 컨트롤 */}
      <Button variant="ghost" size="sm" onClick={() => zoomIn()} title="확대">
        <ZoomIn className="h-4 w-4" />
      </Button>
      <Button variant="ghost" size="sm" onClick={() => zoomOut()} title="축소">
        <ZoomOut className="h-4 w-4" />
      </Button>
      <Button variant="ghost" size="sm" onClick={() => fitView()} title="전체 보기">
        <span className="text-xs">전체</span>
      </Button>

      <div className="h-6 w-px bg-gray-200" />

      {/* 저장 */}
      <Button variant="outline" size="sm" onClick={handleSave} disabled={isSaving} className="gap-1">
        <Save className="h-4 w-4" />
        <span className="text-xs">{isSaving ? "저장 중..." : "저장"}</span>
      </Button>

      {/* 내보내기 */}
      <Button variant="outline" size="sm" onClick={handleExport} className="gap-1">
        <Download className="h-4 w-4" />
        <span className="text-xs">JSON</span>
      </Button>

      <div className="h-6 w-px bg-gray-200" />

      {/* 검증 */}
      <Button variant="outline" size="sm" onClick={handleValidate} className="gap-1">
        <FileCheck className="h-4 w-4" />
        <span className="text-xs">검증</span>
      </Button>
    </div>
  );
}