"use client"

import { getUserTaskList } from "@/components/label/api/task"
import { Task } from "@/components/label/api/task/typing"
import TaskStatusTag from "@/components/label/components/TaskStatusTag"
import {
  useBackUrlStore,
  usePermissionStore,
} from "@/components/label/store/auth"
import {
  SettingCustomPageSizeControl,
  SettingDataTable,
  SettingHeaderActions,
  SettingListHeader,
  usePersistentPageSizeOptions,
} from "@/components/setting/PageSurface"
import {
  getPersistedPageSizeOptions,
  resolvePageSizeWithinOptions,
} from "@/components/setting/pageSize"
import { Button, Group, Stack, Text, UnstyledButton } from "@mantine/core"
import { IconRefresh } from "@tabler/icons-react"
import { DataTableColumn } from "mantine-datatable"
import { useCallback, useEffect, useMemo, useState } from "react"
import classes from "../page.module.css"

const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]

export default function PersonalTaskTable() {
  const user_name = usePermissionStore((s) => s.user_name)
  const setBackProps = useBackUrlStore((s) => s.setBackProps)

  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(() =>
    resolvePageSizeWithinOptions(
      10,
      getPersistedPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS),
      10
    )
  )
  const {
    recordsPerPageOptions,
    addCustomPageSize,
    clearCustomPageSizeCache,
    hasCustomPageSizeCache,
  } = usePersistentPageSizeOptions(DEFAULT_RECORDS_PER_PAGE_OPTIONS, pageSize)
  const [totalItems, setTotalItems] = useState(0)
  const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
  const [loading, setLoading] = useState(false)

  const totalPages = useMemo(() => {
    return Math.max(1, Math.ceil(totalItems / pageSize))
  }, [pageSize, totalItems])

  const load = useCallback(async () => {
    if (!user_name) return
    setLoading(true)
    try {
      const res = await getUserTaskList({
        page_number: page,
        page_size: pageSize,
      })
      setRecords(res?.simple_task_list ?? [])
      setTotalItems(res?.total_items ?? 0)
    } finally {
      setLoading(false)
    }
  }, [page, pageSize, user_name])

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

  useEffect(() => {
    if (page > totalPages) setPage(totalPages)
  }, [page, totalPages])

  const resetData = () => {
    if (page === 1) load()
    else setPage(1)
  }

  const [currentRowId, setCurrentRowId] = useState<number>(0)

  const originColumn = useMemo(() => {
    let column: DataTableColumn<Task.SimpleTaskItem>[] = [
      {
        accessor: "project_name",
        title: "项目名称",
        width: 160,
        render: (record: Task.SimpleTaskItem) => {
          return (
            <Text
              title={record.project_name ?? "-"}
              className={classes.ellipsisText}>
              {record.project_name ?? "-"}
            </Text>
          )
        },
      },
      {
        accessor: "id",
        title: "任务ID",
        width: 150,
        render: (record: Task.SimpleTaskItem) => {
          return (
            <UnstyledButton
              onClick={async () => {
                setCurrentRowId(record.id)
                if ([1, 2, 4, 5, 6, 7].includes(record.label_type)) {
                  setBackProps(`/person/dashboard`)
                  if ([4, 5, 6].includes(record.label_type)) {
                    // router.replace(
                    //   `/image/label?project_id=${record.project_id}&task_id=${record.id}`
                    // )
                    window.location.href = `/image/label?project_id=${record.project_id}&task_id=${record.id}`
                  } else if ([7].includes(record.label_type)) {
                    // router.replace(
                    //   `/video/label?project_id=${record.project_id}&task_id=${record.id}`
                    // )
                    window.location.href = `/video/label?project_id=${record.project_id}&task_id=${record.id}`
                  } else if ([1, 2].includes(record.label_type)) {
                    window.location.href = `/lidar/lidar-point?project_id=${record.project_id}&task_id=${record.id}`
                  }
                } else {
                  //   await runCommand(
                  //     record.id.toString(),
                  //     user_name,
                  //     user_password
                  //   )
                }
              }}
              title={record.id.toString()}
              className={classes.tableLink}>
              {record.id}
            </UnstyledButton>
          )
        },
      },
      {
        accessor: "label_object_size.object_size",
        title: "对象数",
        width: 80,
        render: (record: Task.SimpleTaskItem) => {
          return (
            <Text className={classes.tableCellText}>
              {record.label_object_size?.object_size || "-"}
            </Text>
          )
        },
      },
      {
        accessor: "label_status",
        title: "状态",
        width: 160,
        render: (record) => (
          <TaskStatusTag
            status={record.label_status}
            rejected={record.rejected}
          />
        ),
      },
      {
        accessor: "label_username",
        title: "标注员",
        width: 80,
        render: (record: Task.SimpleTaskItem) => (
          <Text className={classes.tableCellText}>
            {record.label_username || "-"}
          </Text>
        ),
      },
      {
        accessor: "review1_username",
        title: "审核员",
        width: 80,
        render: (record: Task.SimpleTaskItem) => (
          <Text className={classes.tableCellText}>
            {record.review1_username || "-"}
          </Text>
        ),
      },
      {
        accessor: "review2_username",
        title: "复审员",
        width: 80,
        render: (record: Task.SimpleTaskItem) => (
          <Text className={classes.tableCellText}>
            {record.review2_username || "-"}
          </Text>
        ),
      },
    ]
    return column
  }, [setBackProps])

  return (
    <Stack className={classes.dashboardSection}>
      <SettingListHeader
        title="我的任务"
        count={`共 ${totalItems} 条记录`}
        actions={
          <SettingHeaderActions>
            <Button
              variant="default"
              onClick={resetData}
              disabled={loading}
              leftSection={<IconRefresh size={16} />}>
              刷新
            </Button>
          </SettingHeaderActions>
        }
      />
      <div className={classes.dashboardTableArea}>
        <SettingDataTable<Task.SimpleTaskItem>
          width="100%"
          minHeight={0}
          style={{ width: "100%", flex: 1 }}
          pinFirstColumn
          fetching={loading}
          rowBackgroundColor={({ id }) => {
            if (id === currentRowId) return "#F7FBFF"
          }}
          scrollAreaProps={{ type: "auto" }}
          records={records}
          onRecordsPerPageChange={setPageSize}
          recordsPerPageOptions={recordsPerPageOptions}
          columns={originColumn}
          totalRecords={totalItems}
          recordsPerPage={pageSize}
          page={page}
          onPageChange={setPage}
          noRecordsText="暂无数据"
          recordsPerPageLabel="每页条数"
          paginationText={({ from, to, totalRecords }) =>
            `显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
          }
          renderPagination={({ Controls }) => (
            <Group
              justify="space-between"
              align="center"
              w="100%"
              gap="sm"
              wrap="wrap">
              <Group gap="xs" align="center" wrap="wrap">
                <Controls.Text />
                <Controls.PageSizeSelector />
                <SettingCustomPageSizeControl
                  addCustomPageSize={addCustomPageSize}
                  clearCustomPageSizeCache={clearCustomPageSizeCache}
                  hasCustomPageSizeCache={hasCustomPageSizeCache}
                  triggerButtonProps={{ variant: "default", size: "sm" }}
                  confirmButtonProps={{ color: "#1874ff" }}
                />
              </Group>
              <Controls.Pagination />
            </Group>
          )}
        />
      </div>
    </Stack>
  )
}