<template>
  <div class="bottom-actions">
    <div class="pagination-container">
      <div class="pagination-control left" v-if="showPagination">
        <div class="pagination-btn-wrapper">
          <a-button :disabled="currentPage === 1" @click="goToPrevPage" class="pagination-btn prev-btn">
            <template #icon>
              <LeftOutlined />
            </template>
          </a-button>
          <div class="page-tooltip" v-if="currentPage > 1">
            {{ currentPage - 1 }} / {{ totalPages }}
          </div>
        </div>
      </div>

      <div class="buttons-container">
        <a-row :gutter="16" justify="center">
          <a-col v-for="button in currentPageButtons" :key="button.label">
            <a-button :type="button.type" size="large" @click="executeButtonAction(button.handler)"
              :class="['action-button', getButtonStatusClass(button)]">
              <component :is="getButtonStatusIcon(button)" v-if="getButtonStatusIcon(button)"
                class="status-icon-btn" />
              {{ button.label }}
            </a-button>
          </a-col>
        </a-row>
      </div>

      <div class="pagination-control right" v-if="showPagination">
        <div class="pagination-btn-wrapper">
          <a-button :disabled="currentPage === totalPages" @click="goToNextPage" class="pagination-btn next-btn">
            <template #icon>
              <RightOutlined />
            </template>
          </a-button>
          <div class="page-tooltip" v-if="currentPage < totalPages">
            {{ currentPage + 1 }} / {{ totalPages }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';

interface ActionButton {
  label: string;
  handler: string;
  type: ButtonType;
  status?: 'running' | 'paused' | 'idle';
}

interface Props {
  buttons: ActionButton[];
  buttonsPerPage?: number;
}

interface Emits {
  (e: 'execute', handlerName: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  buttonsPerPage: 6
});

const emit = defineEmits<Emits>();

// 底部按钮分页控制
const currentPage = ref(1);
const buttonsPerPage = ref(props.buttonsPerPage);

// 获取按钮状态样式类
const getButtonStatusClass = (button: ActionButton) => {
  const statusClasses = {
    running: 'status-running',
    paused: 'status-paused',
    idle: 'status-idle'
  };
  return statusClasses[button.status || 'idle'];
};

// 获取按钮状态图标
const getButtonStatusIcon = (button: ActionButton) => {
  const statusIcons = {
    running: 'i-play-circle',
    paused: 'i-pause-circle',
    idle: ''
  };
  return statusIcons[button.status || 'idle'];
};

// 计算当前页显示的按钮
const currentPageButtons = computed(() => {
  const start = (currentPage.value - 1) * buttonsPerPage.value;
  const end = start + buttonsPerPage.value;
  return props.buttons.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(props.buttons.length / buttonsPerPage.value);
});

// 是否显示分页控制
const showPagination = computed(() => {
  return totalPages.value > 1;
});

// 分页控制函数
const goToPrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const goToNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

// 执行按钮操作
const executeButtonAction = (handlerName: string) => {
  emit('execute', handlerName);
};

// 响应式调整按钮数量
const updateButtonsPerPage = () => {
  nextTick(() => {
    const buttonsContainer = document.querySelector('.buttons-container') as HTMLElement;
    if (!buttonsContainer) {
      buttonsPerPage.value = props.buttonsPerPage; // 默认值
      return;
    }

    const containerWidth = buttonsContainer.offsetWidth;
    const buttonWidth = 100; // 单个操作按钮最小宽度
    const buttonGap = 16; // 按钮间距

    // 计算可以放置的按钮数量
    const maxButtons = Math.floor((containerWidth + buttonGap) / (buttonWidth + buttonGap));

    // 设置最小和最大按钮数量
    buttonsPerPage.value = Math.max(3, maxButtons);
  });
};

// 初始化
onMounted(() => {
  // 初始化按钮数量
  updateButtonsPerPage();

  // 监听窗口大小变化
  window.addEventListener('resize', updateButtonsPerPage);
});

// 清理事件监听
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateButtonsPerPage);
});
</script>

<style scoped lang="scss">
// 变量定义
$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$success-color: #52c41a;
$success-light: #73d13d;
$success-bg: rgba(82, 196, 26, 0.1);
$success-bg-hover: rgba(82, 196, 26, 0.2);
$warning-color: #faad14;
$warning-light: #ffc53d;
$warning-bg: rgba(250, 173, 20, 0.1);
$warning-bg-hover: rgba(250, 173, 20, 0.2);
$error-color: #ff4d4f;
$error-light: #ff7875;
$bg-dark: rgba(0, 0, 0, 0.4);
$bg-overlay: rgba(255, 255, 255, 0.1);
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
$text-light: #cccccc;
$text-success: #52c41a;
$text-warning: #faad14;
$white: #ffffff;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$border-radius: 6px;
$border-radius-lg: 8px;
$transition: all 0.3s ease;

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin button-base {
  border-radius: $border-radius;
  font-weight: 500;
  transition: $transition;
  cursor: pointer;
  user-select: none;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 底部操作按钮区域 */
.bottom-actions {
  height: 80px;
  background: $bg-dark;
  border-top: 2px solid $primary-color;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-lg;
  flex-shrink: 0;
  gap: 6px;
}

.pagination-container {
  @include flex-center;
  width: 100%;
  gap: $spacing-lg;
}

.pagination-control {
  display: flex;
  align-items: center;
}

.pagination-btn-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.pagination-btn {
  width: 35px;
  height: 50px;
  border-radius: $border-radius-lg;
  @include flex-center;
  background: rgba(74, 144, 226, 0.1);
  border: 1px solid $primary-color;
  color: $text-light;
  transition: $transition;

  &:hover {
    background: rgba(74, 144, 226, 0.2);
    border-color: $primary-light;
    color: $white;
  }

  &:disabled {
    background: $bg-overlay;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.3);
    transform: none;
  }
}

.page-tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: $white;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
  }
}

.pagination-btn-wrapper:hover .page-tooltip {
  opacity: 1;
}

.buttons-container {
  flex: 1;
  @include flex-center;
}

.action-button {
  min-width: 100px;
  height: 36px;
  font-size: 14px;
  @include button-base;
}

/* 按钮状态样式 */
.action-button {
  &.status-running {
    background: $success-bg !important;
    border-color: $success-color !important;
    color: $text-success !important;
    box-shadow: 0 0 8px rgba(82, 196, 26, 0.3);

    &:hover {
      background: $success-bg-hover !important;
      border-color: $success-light !important;
      color: $white !important;
      box-shadow: 0 0 12px rgba(82, 196, 26, 0.5);
    }
  }

  &.status-paused {
    background: $warning-bg !important;
    border-color: $warning-color !important;
    color: $text-warning !important;
    box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);

    &:hover {
      background: $warning-bg-hover !important;
      border-color: $warning-light !important;
      color: $white !important;
      box-shadow: 0 0 12px rgba(250, 173, 20, 0.5);
    }
  }

  &.status-idle {
    background: $bg-overlay;
    border-color: rgba(255, 255, 255, 0.3);
    color: $text-light;

    &:hover {
      background: $bg-overlay-hover;
      border-color: rgba(255, 255, 255, 0.5);
      color: $white;
    }
  }
}

.status-icon-btn {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

/* 响应式设计 */
@media (max-width: 1366px) {
  .bottom-actions .ant-btn {
    min-width: 90px;
    height: 36px;
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .bottom-actions {
    height: 70px;

    .ant-row {
      flex-wrap: wrap;
      gap: $spacing-sm;
    }

    .ant-btn {
      min-width: 80px;
      height: 32px;
      font-size: 12px;
    }
  }
}
</style>