<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
import EmptyTableState from '@/components/ui/EmptyTableState.vue'
import Pagination from '@/components/ui/Pagination.vue'
import AddTasks from './AddTasks.vue'
import EditTasks from './EditTasks.vue'
import ApiCodeViewer from './ApiCodeViewer.vue'
import { toast } from 'vue-sonner'

import { useRoute, useRouter } from 'vue-router';
import { request } from '@/api/api';
import { CONSTANT } from '@/constant';
// @ts-ignore
import { getPageSize } from '@/util/pageUtils';


interface WayItem {
  id: string
  name: string
  type: string
  config: string
  created_on: string
  modified_on: string
  status: number
}

const route = useRoute();
const router = useRouter();
let state = reactive({
  tableData: [] as WayItem[],
  total: 0,
  currPage: 1,
  pageSize: getPageSize(),
  search: '',
  optionValue: '',
})

// 状态过滤
const selectedStatus = ref('all')

// 任务类型过滤
const selectedChannelType = ref('all')

// Sheet 相关状态
const isSheetOpen = ref(false)
const selectedConfig = ref('')
const selectedChannelName = ref('')

// 新增任务 Sheet 状态
const isAddChannelDrawerOpen = ref(false)

// 编辑任务 Sheet 状态
const isEditChannelDrawerOpen = ref(false)
const editChannelData = ref<WayItem | null>(null)

// API代码查看器状态
const isApiCodeViewerOpen = ref(false)
const selectedTaskData = ref<Record<string, any> | undefined>(undefined)

// 处理保存新任务
const handleSaveChannel = (_data: any) => {
  // 这里可以添加实际的保存逻辑
  // 保存成功后刷新列表
  queryListDataWithStatus()
}

// 总页数
const totalPages = computed(() => Math.ceil(state.total / state.pageSize))

// const getWayTypeText = (type: string) => {
//   const wayItem = CONSTANT.WAYS_DATA.find(item => item.type === type)
//   return wayItem ? wayItem.label : type
// }

// 打开编辑任务Drawer
const openEditChannelDrawer = (channel: WayItem) => {
  editChannelData.value = channel
  isEditChannelDrawerOpen.value = true
}

// 处理编辑任务保存
const handleEditChannel = (_data: any) => {
  // 保存成功后刷新列表
  queryListDataWithStatus()
}

// 处理查看日志
const handleViewLogs = (channel: WayItem) => {
  // 跳转到发信日志页面，携带taskid参数
  router.push(`/sendlogs?taskid=${channel.id}`)
}

// 处理查看API接口
const handleViewApi = (channel: WayItem) => {
  selectedTaskData.value = channel
  isApiCodeViewerOpen.value = true
}

const changePage = async (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    state.currPage = page
    await queryListDataWithStatus()
  }
}

//触发过滤筛选
const filterFunc = async () => {
  await queryListData(state.currPage, state.pageSize, state.search, state.optionValue);
}

// 按任务类型过滤
// const filterByChannelType = async (value: any) => {
//   if (value) {
//     selectedChannelType.value = String(value);
//     state.currPage = 1; // 重置到第一页
//     await queryListDataWithStatus();
//   }
// }

// 查询数据（包含状态过滤）
const queryListDataWithStatus = async () => {
  const statusParam = selectedStatus.value === 'all' ? '' : selectedStatus.value;
  const channelTypeParam = selectedChannelType.value === 'all' ? '' : selectedChannelType.value;
  await queryListData(state.currPage, state.pageSize, state.search, channelTypeParam, '', statusParam);
}

const queryListData = async (page: number, size: number, name = '', channelType = '', query = '', status = '') => {
  let params: any = { page: page, size: size, name: name, type: channelType, query: query };
  if (status !== '') {
    params.status = status;
  }
  const rsp = await request.get('/sendtasks/list', { params: params });
  state.tableData = await rsp.data.data.lists;
  state.total = await rsp.data.data.total;
}
// 删除任务
const handleDelete = async (id: string) => {
  const rsp = await request.post('/sendtasks/delete', { id: id });
  if (rsp.status == 200 && await rsp.data.code == 200) {
    // state.tableData.splice(index, 1);
    toast.success(rsp.data.msg);
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  }

}

onMounted(async () => {
  // 初始化查询
  state.search = route.query.name?.toString() || '';
  await queryListData(
    1,
    state.pageSize,
    route.query.name?.toString() || '',
    route.query.channel_type?.toString() || ''
  );
});

</script>

<template>
  <div class="p-4 w-full max-w-6xl mx-auto space-y-2">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
      <div class="flex flex-col sm:flex-row gap-2 sm:gap-4">
        <div class="flex-1 sm:flex-initial">
          <Input v-model="state.search" placeholder="搜索发信方式名称..." class="w-full sm:w-64" @keyup.enter="filterFunc"
            @blur="filterFunc" />
        </div>
      </div>

      <div class="flex-shrink-0">
        <Dialog v-model:open="isAddChannelDrawerOpen">
          <DialogTrigger as-child>
            <Button variant="default" class="w-full sm:w-auto">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
              </svg>
              新增任务
            </Button>
          </DialogTrigger>

          <DialogContent class="w-[500px] max-w-[90vw]">
            <DialogHeader>
              <DialogTitle>新增发信任务</DialogTitle>
            </DialogHeader>

            <div class="px-4 pb-4">
              <AddTasks v-model:open="isAddChannelDrawerOpen" @save="handleSaveChannel"
                @cancel="() => isAddChannelDrawerOpen = false" />
            </div>
          </DialogContent>
        </Dialog>
      </div>
    </div>

    <!-- 表格 -->
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead class="w-20">ID</TableHead>
          <TableHead>发信任务名称</TableHead>
          <TableHead>创建时间</TableHead>
          <TableHead>更新时间</TableHead>
          <TableHead class="text-center">操作/状态</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <!-- 空数据展示 -->
        <TableRow v-if="state.tableData.length === 0">
          <TableCell colspan="6" class="text-center py-12">
            <EmptyTableState title="暂无发信方式" description="还没有配置任何发信方式，请先添加发信方式" />
          </TableCell>
        </TableRow>

        <!-- 数据行 -->
        <TableRow v-for="channel in state.tableData" :key="channel.id">
          <TableCell>{{ channel.id }}</TableCell>
          <TableCell>{{ channel.name }}</TableCell>
          <TableCell>{{ channel.created_on }}</TableCell>
          <TableCell>{{ channel.modified_on }}</TableCell>
          <TableCell class="text-center space-x-2" v-if="channel.id !== CONSTANT.LOG_TASK_ID">
            <Button size="sm" variant="outline" @click="handleViewApi(channel)">接口</Button>
            <Button size="sm" variant="outline" @click="handleViewLogs(channel)">日志</Button>
            <Button size="sm" variant="outline" @click="openEditChannelDrawer(channel)">编辑</Button>
            <Button size="sm" variant="outline" class="text-red-500 border-red-300 hover:bg-red-50 
              hover:border-red-400 hover:text-red-600 hover:shadow-md
               transition-all duration-200" @click="handleDelete(channel.id)">删除</Button>
          </TableCell>
          <TableCell class="text-center space-x-2" v-else>
            <Button size="sm" variant="outline" @click="handleViewLogs(channel)">日志</Button>
            <label>系统保留任务</label>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>

    <!-- 分页 -->
    <Pagination :total="state.total" :current-page="state.currPage" :page-size="state.pageSize"
      @page-change="changePage" />

    <!-- 编辑任务Dialog -->
    <Dialog v-model:open="isEditChannelDrawerOpen">
      <DialogContent class="w-[500px] max-w-[90vw] max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader class="flex-shrink-0">
          <DialogTitle>编辑发信任务</DialogTitle>
        </DialogHeader>

        <div class="px-4 pb-4 flex-1 overflow-y-auto">
          <EditTasks v-model:open="isEditChannelDrawerOpen" :edit-data="editChannelData" @save="handleEditChannel" />
        </div>
      </DialogContent>
    </Dialog>

    <!-- 配置详情Sheet -->
    <Sheet v-model:open="isSheetOpen">
      <SheetContent class="w-[600px] sm:w-[900px] lg:w-[1000px]">
        <SheetHeader>
          <SheetTitle>{{ selectedChannelName }} - 发信方式配置详情</SheetTitle>
        </SheetHeader>
        <div class="mt-6">
          <div class="bg-card p-4 rounded-lg border border-border">
            <pre class="whitespace-pre-wrap text-sm font-mono text-foreground">{{ selectedConfig }}</pre>
          </div>
        </div>
      </SheetContent>
    </Sheet>

    <!-- API代码查看器 -->
    <ApiCodeViewer v-model:open="isApiCodeViewerOpen" :task-data="selectedTaskData" />
  </div>
</template>