<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia'
import PageCard from '@/components/PageCard.vue'
import { useToolsStore } from '@/stores/tools'
import { DEFAULT_TOOLS } from '@/constants'
import type { CustomTool } from '@/types'

const router = useRouter()
const toolsStore = useToolsStore()
const { tools } = storeToRefs(toolsStore)

function handleDefaultTool(id: string) {
  if (id === 'data-generate') {
    ElMessage.info('数据生成工具开发中...')
  } else if (id === 'json2jsonl') {
    router.push('/data-convert')
  } else if (id === 'md-convert') {
    ElMessage.info('转换Markdown 工具开发中...')
  }
}

function handleCustomTool(tool: CustomTool) {
  if (tool.url.startsWith('http')) {
    window.open(tool.url, '_blank')
  } else {
    router.push(tool.url)
  }
}

function editTool(tool: CustomTool) {
  router.push(`/tools/${tool.id}/edit`)
}

async function deleteTool(tool: CustomTool) {
  await ElMessageBox.confirm('确定要删除这个自定义工具吗？', '确认删除', { type: 'warning' })
  toolsStore.removeTool(tool.id)
  ElMessage.success('删除成功')
}
</script>

<template>
  <PageCard title="其他工具">
    <template #extra>
      <el-button type="primary" @click="router.push('/tools/create')">
        <i class="fa fa-plus" style="margin-right: 4px" />添加自定义工具
      </el-button>
    </template>

    <!-- 默认工具 -->
    <h3 class="section-title">默认工具</h3>
    <el-row :gutter="16" style="margin-bottom: 24px">
      <el-col v-for="tool in DEFAULT_TOOLS" :key="tool.id" :span="8">
        <el-card shadow="hover" class="tool-card" @click="handleDefaultTool(tool.id)">
          <div class="tool-icon">
            <i class="fa" :class="tool.icon" />
          </div>
          <h4 class="tool-name">{{ tool.name }}</h4>
          <p class="tool-desc">{{ tool.description }}</p>
        </el-card>
      </el-col>
    </el-row>

    <!-- 自定义工具 -->
    <h3 class="section-title">自定义工具</h3>
    <el-row v-if="tools.length" :gutter="16">
      <el-col v-for="tool in tools" :key="tool.id" :span="8">
        <el-card shadow="hover" class="tool-card" @click="handleCustomTool(tool)">
          <div class="tool-actions">
            <el-button link size="small" @click.stop="editTool(tool)">
              <i class="fa fa-pencil" />
            </el-button>
            <el-button link type="danger" size="small" @click.stop="deleteTool(tool)">
              <i class="fa fa-times" />
            </el-button>
          </div>
          <div class="tool-icon">
            <i class="fa" :class="tool.icon" />
          </div>
          <h4 class="tool-name">{{ tool.name }}</h4>
          <p class="tool-desc">{{ tool.description }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-empty v-else description="暂无自定义工具，点击右上角添加" />
  </PageCard>
</template>

<style scoped lang="scss">
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.tool-card {
  cursor: pointer;
  transition: all 0.2s;
  position: relative;

  &:hover {
    border-color: #1890ff;
  }

  .tool-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
  }

  &:hover .tool-actions {
    opacity: 1;
  }

  .tool-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(24, 144, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;

    i {
      font-size: 20px;
      color: #1890ff;
    }
  }

  .tool-name {
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    margin: 0 0 6px;
  }

  .tool-desc {
    font-size: 13px;
    color: #909399;
    margin: 0;
  }
}
</style>
