<template>
  <div class="topo-toolbar">
    <!-- 缩放控制 -->
    <a-button-group type="outline" size="small">
      <a-tooltip content="放大">
        <a-button @click="props.onZoomIn">
          <icon-zoom-in :size="18" />
        </a-button>
      </a-tooltip>
      <a-tooltip content="缩小">
        <a-button @click="props.onZoomOut">
          <icon-zoom-out :size="18" />
        </a-button>
      </a-tooltip>
      <a-tooltip content="适应窗口">
        <a-button @click="props.onFitView">
          <icon-fullscreen :size="18" />
        </a-button>
      </a-tooltip>
    </a-button-group>

    <!-- 添加设备 -->
    <a-button-group type="outline" size="small">
      <a-dropdown trigger="click" @select="props.onAddDevice">
        <a-button>
          <icon-plus :size="18" />
          <span class="btn-text">设备</span>
        </a-button>
        <template #content>
          <a-doption value="server">服务器</a-doption>
          <a-doption value="switch">交换机</a-doption>
          <a-doption value="router">路由器</a-doption>
          <a-doption value="firewall">防火墙</a-doption>
          <a-doption value="storage">存储</a-doption>
        </template>
      </a-dropdown>
    </a-button-group>

    <!-- 布局 -->
    <a-button-group type="outline" size="small">
      <a-dropdown trigger="click" @select="props.onLayout">
        <a-button>
          <icon-apps :size="18" />
          <span class="btn-text">布局</span>
        </a-button>
        <template #content>
          <a-doption value="grid">网格布局</a-doption>
          <a-doption value="hierarchical">层次布局</a-doption>
          <a-doption value="circular">环形布局</a-doption>
        </template>
      </a-dropdown>
    </a-button-group>

    <!-- 链路样式 -->
    <a-button-group type="outline" size="small">
      <a-dropdown trigger="click" @select="props.onEdgeStyle">
        <a-button>
          <icon-minus :size="18" />
          <span class="btn-text">链路</span>
        </a-button>
        <template #content>
          <a-doption value="default">默认</a-doption>
          <a-doption value="straight">直线</a-doption>
          <a-doption value="step">阶梯</a-doption>
          <a-doption value="smoothstep">平滑阶梯</a-doption>
        </template>
      </a-dropdown>
    </a-button-group>

    <div class="spacer" />

    <!-- 操作 -->
    <a-button-group type="outline" size="small">
      <a-tooltip content="刷新">
        <a-button @click="props.onRefresh">
          <icon-refresh :size="18" />
        </a-button>
      </a-tooltip>
      <a-tooltip content="导出">
        <a-button @click="props.onExport">
          <icon-download :size="18" />
        </a-button>
      </a-tooltip>
      <a-tooltip v-if="props.onReset" content="重置">
        <a-button @click="props.onReset" status="warning">
          <icon-rotate-left :size="18" />
        </a-button>
      </a-tooltip>
    </a-button-group>
  </div>
</template>

<script setup lang="ts">
import {
  IconZoomIn,
  IconZoomOut,
  IconFullscreen,
  IconPlus,
  IconApps,
  IconMinus,
  IconRefresh,
  IconDownload,
  IconRotateLeft,
} from '@arco-design/web-vue/es/icon';

interface Props {
  onZoomIn: () => void;
  onZoomOut: () => void;
  onFitView: () => void;
  onAddDevice: (value: string | number | Record<string, any> | undefined) => void;
  onLayout: (value: string | number | Record<string, any> | undefined) => void;
  onEdgeStyle: (value: string | number | Record<string, any> | undefined) => void;
  onRefresh: () => void;
  onExport: () => void;
  onReset?: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  onReset: undefined,
});
</script>

<style scoped lang="less">
.topo-toolbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 10;
  padding: 12px;
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .spacer {
    flex-grow: 1;
  }

  .btn-text {
    margin-left: 4px;
    font-size: 12px;
  }
}
</style>
