"use client"

import { getProjectList } from "@/components/label/api/project"
import {
  getAllSyncServerList,
  getDataSyncTaskList,
  newSyncTask,
  updateSyncTaskStatus,
} from "@/components/label/api/sync"
import { Response } from "@/components/label/api/sync/typing"
import useAuth from "@/components/label/hooks/useAuth"
import {
  ActionIcon,
  Button,
  Group,
  Modal,
  Paper,
  Select,
  Stack,
  Text,
} from "@mantine/core"
import { modals } from "@mantine/modals"
import { notifications } from "@mantine/notifications"
import { IconPlayerPause, IconPlayerPlay, IconPlus, IconRefresh, IconSearch, IconTrash, IconX } from "@tabler/icons-react"
import { DataTable, DataTableColumn } from "mantine-datatable"
import { useCallback, useEffect, useMemo, useState } from "react"

const StatusEnum = new Map<number, string>([
  [1, "待同步"],
  [2, "同步中"],
  [3, "同步失败"],
  [4, "同步成功"],
  [5, "待删除"],
  [6, "删除中"],
  [7, "删除失败"],
  [8, "删除完成"],
  [9, "等待暂停"],
  [10, "已暂停"],
  [11, "等待关闭"],
  [12, "已关闭"],
])

export default function TeamSyncTaskPage() {
  const { isShow } = useAuth()

  const [records, setRecords] = useState<Response.SyncTask[]>([])
  const [loading, setLoading] = useState(false)
  const [totalItems, setTotalItems] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)

  const [status, setStatus] = useState<string | null>(null)
  const [projectId, setProjectId] = useState<string | null>(null)
  const [serverId, setServerId] = useState<string | null>(null)
  const [appliedStatus, setAppliedStatus] = useState<string | null>(null)
  const [appliedProjectId, setAppliedProjectId] = useState<string | null>(null)
  const [appliedServerId, setAppliedServerId] = useState<string | null>(null)

  const [projectOpt, setProjectOpt] = useState<Array<{ label: string; value: string }>>([])
  const [serverAllOpt, setServerAllOpt] = useState<Array<{ label: string; value: string }>>([])
  const [serverOnlineOpt, setServerOnlineOpt] = useState<Array<{ label: string; value: string }>>(
    []
  )
  const [serverMap, setServerMap] = useState<Map<number, string>>(new Map())

  const [open, setOpen] = useState(false)
  const [newProjectId, setNewProjectId] = useState<string | null>(null)
  const [newServerId, setNewServerId] = useState<string | null>(null)
  const [creating, setCreating] = useState(false)

  const loadOptions = useCallback(async () => {
    const [projectRes, serverRes] = await Promise.all([
      getProjectList({ page_number: 1, page_size: 10000 }),
      getAllSyncServerList(),
    ])

    const projects = projectRes?.project_list ?? []
    setProjectOpt(projects.map((p) => ({ label: p.name, value: String(p.id) })))

    const allServers = serverRes ?? []
    setServerAllOpt(allServers.map((s) => ({ label: s.ip, value: String(s.id) })))
    setServerOnlineOpt(
      allServers
        .filter((s) => s.is_online)
        .map((s) => ({ label: s.ip, value: String(s.id) }))
    )
    setServerMap(new Map(allServers.map((s) => [s.id, s.ip])))
  }, [])

  const load = useCallback(async () => {
    try {
      setLoading(true)
      const params: any = {
        page_number: page,
        page_size: pageSize,
      }
      if (appliedStatus) params.status = Number(appliedStatus)
      if (appliedProjectId) params.project_id = Number(appliedProjectId)
      if (appliedServerId) params.sync_server_id = Number(appliedServerId)

      const res = await getDataSyncTaskList(params)
      setRecords(res?.sync_tasks ?? [])
      setTotalItems(res?.total_items ?? 0)
    } catch (e) {
      setRecords([])
      setTotalItems(0)
      notifications.show({
        color: "red",
        title: "加载失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    } finally {
      setLoading(false)
    }
  }, [appliedProjectId, appliedServerId, appliedStatus, page, pageSize])

  useEffect(() => {
    queueMicrotask(loadOptions)
  }, [loadOptions])

  useEffect(() => {
    load()
  }, [load])

  const performStatusAction = async (id: number, statusTo: number, successText: string) => {
    try {
      await updateSyncTaskStatus(id, statusTo)
      notifications.show({
        color: "green",
        title: "操作成功",
        message: successText,
      })
      load()
    } catch (e) {
      notifications.show({
        color: "red",
        title: "操作失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    }
  }

  const columns = useMemo(() => {
    const cols: DataTableColumn<Response.SyncTask>[] = [
      { accessor: "id", title: "ID", width: 80 },
      { accessor: "uuid", title: "UUID", width: 320 },
      {
        accessor: "status",
        title: "状态",
        width: 120,
        render: (record) => StatusEnum.get(record.status ?? 0) ?? "-",
      },
      { accessor: "project_name", title: "项目名称", width: 260 },
      {
        accessor: "sync_server_id",
        title: "同步服务IP",
        width: 160,
        render: (record) =>
          record.sync_server_id ? serverMap.get(record.sync_server_id) ?? "-" : "-",
      },
      { accessor: "location", title: "IP所在地", width: 140 },
      { accessor: "create_at", title: "创建时间", width: 180 },
      { accessor: "update_at", title: "更新时间", width: 180 },
      {
        accessor: "operation",
        title: "操作",
        width: 200,
        textAlign: "center",
        render: (record) => {
          const couldRun = isShow("task_edit") && [10].includes(record.status ?? -1)
          const couldStop = isShow("task_edit") && [1, 2].includes(record.status ?? -1)
          const couldDelete =
            isShow("task_edit") && [1, 2, 3, 4, 9, 10].includes(record.status ?? -1)
          const couldClose =
            isShow("task_edit") && ![11, 12].includes(record.status ?? -1)

          return (
            <Group justify="center" gap={4} wrap="nowrap">
              {couldRun ? (
                <ActionIcon
                  variant="subtle"
                  color="green"
                  onClick={() =>
                    performStatusAction(record.id as number, 1, "已恢复同步")
                  }>
                  <IconPlayerPlay size={16} />
                </ActionIcon>
              ) : null}
              {couldStop ? (
                <ActionIcon
                  variant="subtle"
                  color="yellow"
                  onClick={() => {
                    modals.openConfirmModal({
                      title: "暂停任务",
                      centered: true,
                      children: (
                        <Text size="sm">是否确定暂停当前同步任务？</Text>
                      ),
                      labels: { confirm: "确定", cancel: "取消" },
                      onConfirm: () =>
                        performStatusAction(record.id as number, 9, "已暂停任务"),
                    })
                  }}>
                  <IconPlayerPause size={16} />
                </ActionIcon>
              ) : null}
              {couldDelete ? (
                <ActionIcon
                  variant="subtle"
                  color="red"
                  onClick={() => {
                    modals.openConfirmModal({
                      title: "删除任务",
                      centered: true,
                      children: (
                        <Text size="sm">是否确定删除当前同步任务？</Text>
                      ),
                      labels: { confirm: "确定", cancel: "取消" },
                      confirmProps: { color: "red" },
                      onConfirm: () =>
                        performStatusAction(record.id as number, 5, "已提交删除"),
                    })
                  }}>
                  <IconTrash size={16} />
                </ActionIcon>
              ) : null}
              {couldClose ? (
                <ActionIcon
                  variant="subtle"
                  color="gray"
                  onClick={() => {
                    modals.openConfirmModal({
                      title: "关闭任务",
                      centered: true,
                      children: (
                        <Text size="sm">是否确定关闭当前同步任务？</Text>
                      ),
                      labels: { confirm: "确定", cancel: "取消" },
                      onConfirm: () =>
                        performStatusAction(record.id as number, 11, "已关闭任务"),
                    })
                  }}>
                  <IconX size={16} />
                </ActionIcon>
              ) : null}
            </Group>
          )
        },
      },
    ]
    return cols
  }, [isShow, serverMap])

  const createTask = async () => {
    if (!newProjectId || !newServerId) {
      notifications.show({
        color: "yellow",
        title: "参数不完整",
        message: "请先选择项目和同步服务",
      })
      return
    }
    try {
      setCreating(true)
      await newSyncTask({
        project_id: Number(newProjectId),
        sync_server_id: Number(newServerId),
      })
      notifications.show({
        color: "green",
        title: "操作成功",
        message: "已新增同步任务",
      })
      setOpen(false)
      setNewProjectId(null)
      setNewServerId(null)
      load()
    } catch (e) {
      notifications.show({
        color: "red",
        title: "操作失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    } finally {
      setCreating(false)
    }
  }

  return (
    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
      <Paper
        withBorder
        p="md"
        radius="md"
        style={{
          borderColor:
            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
        }}>
        <Group justify="space-between" wrap="wrap">
          <Group>
            <Select
              placeholder="任务状态"
              size="xs"
              radius="xs"
              data={Array.from(StatusEnum.entries()).map(([value, label]) => ({
                label,
                value: String(value),
              }))}
              clearable
              searchable
              value={status}
              onChange={setStatus}
            />
            <Select
              placeholder="项目名称"
              size="xs"
              radius="xs"
              data={projectOpt}
              clearable
              searchable
              value={projectId}
              onChange={setProjectId}
            />
            <Select
              placeholder="同步服务IP"
              size="xs"
              radius="xs"
              data={serverAllOpt}
              clearable
              searchable
              value={serverId}
              onChange={setServerId}
            />
            <Button
              size="xs"
              radius="xs"
              leftSection={<IconSearch size={16} />}
              onClick={() => {
                setAppliedStatus(status)
                setAppliedProjectId(projectId)
                setAppliedServerId(serverId)
                setPage(1)
              }}>
              查询
            </Button>
            <Button
              variant="default"
              size="xs"
              radius="xs"
              leftSection={<IconRefresh size={16} />}
              onClick={() => {
                setStatus(null)
                setProjectId(null)
                setServerId(null)
                setAppliedStatus(null)
                setAppliedProjectId(null)
                setAppliedServerId(null)
                setPage(1)
                setPageSize(20)
              }}>
              重置
            </Button>
          </Group>
          {isShow("task_add") ? (
            <Button
              size="xs"
              radius="xs"
              leftSection={<IconPlus size={16} />}
              onClick={() => {
                setNewProjectId(null)
                setNewServerId(null)
                setOpen(true)
              }}>
              新增同步任务
            </Button>
          ) : null}
        </Group>
      </Paper>

      <Paper
        withBorder
        p="md"
        radius="md"
        style={{
          borderColor:
            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
          flex: 1,
          minHeight: 0,
          display: "flex",
        }}>
        <DataTable<Response.SyncTask>
          withTableBorder
          withRowBorders
          fetching={loading}
          records={records}
          columns={columns}
          totalRecords={totalItems}
          recordsPerPage={pageSize}
          page={page}
          onPageChange={setPage}
          onRecordsPerPageChange={(v) => {
            setPageSize(v)
            setPage(1)
          }}
          recordsPerPageOptions={[10, 20, 50, 100]}
          noRecordsText="暂无数据"
          scrollAreaProps={{ type: "auto" }}
          style={{ width: "100%" }}
        />
      </Paper>

      <Modal
        opened={open}
        onClose={() => setOpen(false)}
        title="新增同步任务"
        centered
        size={520}
        closeOnClickOutside={false}>
        <Stack gap="sm">
          <Select
            label="项目名称"
            size="xs"
            radius="xs"
            data={projectOpt}
            searchable
            value={newProjectId}
            onChange={setNewProjectId}
          />
          <Select
            label="同步服务IP（仅在线）"
            size="xs"
            radius="xs"
            data={serverOnlineOpt}
            searchable
            value={newServerId}
            onChange={setNewServerId}
          />
          <Group justify="flex-end">
            <Button variant="default" size="xs" radius="xs" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button
              size="xs"
              radius="xs"
              loading={creating}
              onClick={createTask}>
              确定
            </Button>
          </Group>
        </Stack>
      </Modal>
    </Stack>
  )
}