import React from 'react';
import { Panel, useReactFlow } from '@xyflow/react';

export default function CanvasToolbar({
  onRunPreview,
  onRunSave,
  onPersistSettings,
  onResetLayout,
  dirty,
  running,
}) {
  const { fitView } = useReactFlow();

  return (
    <Panel position="top-left" className="canvas-toolbar">
      <button
        type="button"
        className="canvas-toolbar-btn canvas-toolbar-btn--primary"
        disabled={running}
        onClick={onRunPreview}
        title="현재 가중치로 미리보기 실행"
      >
        {running ? '실행 중…' : '▶ 실행'}
      </button>
      <button
        type="button"
        className="canvas-toolbar-btn"
        disabled={running}
        onClick={onRunSave}
        title="실행 결과를 DB에 저장"
      >
        💾 저장 실행
      </button>
      <button
        type="button"
        className="canvas-toolbar-btn"
        disabled={!dirty}
        onClick={onPersistSettings}
        title="현재 설정을 영구 저장"
      >
        📌 설정 저장{dirty ? ' *' : ''}
      </button>
      <button
        type="button"
        className="canvas-toolbar-btn"
        onClick={onResetLayout}
        title="노드 위치를 초기 좌표로 복귀"
      >
        🔄
      </button>
      <button
        type="button"
        className="canvas-toolbar-btn"
        onClick={() => fitView({ padding: 0.2, duration: 300 })}
        title="화면에 맞춤"
      >
        ⛶
      </button>
    </Panel>
  );
}