"use client"

import { getProjectDetailById } from "@/components/label/api/project"
import { ProjectDetail } from "@/components/label/api/project/typing"
import { useAllUserStore, useBackUrlStore } from "@/components/label/store/auth"
import {
  Breadcrumbs,
  Button,
  Group,
  Paper,
  SegmentedControl,
  Stack,
  Text,
  UnstyledButton,
} from "@mantine/core"
import { IconChevronLeft } from "@tabler/icons-react"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useMemo, useState } from "react"
import InfoSettingContainer from "./InfoSettingContainer"
import OwnTaskTableContainer from "./OwnTaskTableContainer"
import TaskBoardContainer from "./TaskBoardContainer"
import TaskTableContainer from "./TaskTableContainer"

type TabKey = "own" | "all" | "setting" | "board"

export default function CollectionDetailPage() {
  const router = useRouter()
  const urlParams = useSearchParams()
  const type = urlParams.get("type")
  const id = urlParams.get("id")
  const projectId =
    typeof id === "string" && !isNaN(Number(id)) ? Number(id) : -1

  const { backTitle, setBackProps } = useBackUrlStore()
  const { userOpts } = useAllUserStore()

  const [selectKey, setSelectedKey] = useState<TabKey>(
    (backTitle as TabKey) || "own"
  )
  const [info, setInfo] = useState<ProjectDetail.DataProps>()
  const [userEnums, setUserEnums] = useState<{
    allEnum: Map<any, any>
    labelEnum: Map<any, any>
    review1Enum: Map<any, any>
    review2Enum: Map<any, any>
  }>({
    allEnum: new Map(),
    labelEnum: new Map(),
    review1Enum: new Map(),
    review2Enum: new Map(),
  })

  useEffect(() => {
    if (projectId === -1) return
    const getProjectInfo = async () => {
      const res = await getProjectDetailById(projectId)
      setInfo(res)
    }
    getProjectInfo()
  }, [projectId])

  const updateProjectInfo = async () => {
    if (projectId === -1) return
    const res = await getProjectDetailById(projectId)
    setInfo(res)
  }

  useEffect(() => {
    if (!info?.label_process) return
    const { step_detail } = info.label_process
    let label: number[] = []
    let review1: number[] = []
    let review2: number[] = []
    step_detail.forEach(({ action, user_list }: any) => {
      if (action === 1) label = user_list
      else if (action === 2) review1 = user_list
      else if (action === 3) review2 = user_list
    })
    const all = Array.from(new Set([...label, ...review1, ...review2]))

    const toLabelMap = (uids: number[]) =>
      new Map(
        uids.map((uid) => {
          const opt = userOpts.find((o) => o.value === uid)
          return [uid, opt?.label ?? String(uid)]
        })
      )

    queueMicrotask(() => {
      setUserEnums({
        allEnum: toLabelMap(all),
        labelEnum: toLabelMap(label),
        review1Enum: toLabelMap(review1),
        review2Enum: toLabelMap(review2),
      })
    })
  }, [info, userOpts])

  const breadcrumbsItems = useMemo(() => {
    return [
      {
        title: type
          ? type === "collect"
            ? "我的收藏"
            : type === "dynamic"
              ? "动态项目"
              : "全部项目"
          : "我的收藏",
        href: type
          ? `/management/person/collection?type=${type}`
          : "/management/person/collection?type=collect",
      },
      {
        title: info?.name || "项目名称",
        href: "",
      },
    ].map((item) => (
      <UnstyledButton
        key={item.title}
        onClick={() => {
          if (!item.href) return
          router.push(item.href)
        }}>
        <Text
          size="sm"
          c={item.href ? "dimmed" : "dark"}
          fw={item.href ? 400 : 700}>
          {item.title}
        </Text>
      </UnstyledButton>
    ))
  }, [info?.name, router, type])

  return (
    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
      <Paper
        withBorder
        p="md"
        radius="md"
        style={{ borderColor: "rgba(0,0,0,0.06)" }}>
        <Group justify="space-between" wrap="wrap" gap="sm">
          <Group gap="sm">
            <Button
              variant="subtle"
              size="xs"
              leftSection={<IconChevronLeft size={16} />}
              onClick={() => {
                router.push(
                  type
                    ? `/management/person/collection?type=${type}`
                    : "/management/person/collection?type=collect"
                )
              }}>
              返回
            </Button>
            <Breadcrumbs separator=">">{breadcrumbsItems}</Breadcrumbs>
          </Group>
          <SegmentedControl
            value={selectKey}
            data={[
              { label: "我的任务", value: "own" },
              { label: "任务列表", value: "all" },
              { label: "任务配置", value: "setting" },
            ]}
            onChange={(v) => {
              const next = v as TabKey
              setSelectedKey(next)
              const backUrl = type
                ? `/management/person/collection/detail?id=${projectId}&type=${type}`
                : `/management/person/collection/detail?id=${projectId}`
              setBackProps(backUrl, next)
            }}
          />
        </Group>
      </Paper>

      <Paper
        withBorder
        p="md"
        radius="md"
        style={{
          borderColor: "rgba(0,0,0,0.06)",
          flex: 1,
          minHeight: 0,
          display: "flex",
        }}>
        <Stack style={{ flex: 1, minHeight: 0 }} gap="md">
          {selectKey === "own" ? (
            <OwnTaskTableContainer info={info} userEnums={userEnums} />
          ) : null}
          {selectKey === "all" ? (
            <TaskTableContainer info={info} userEnums={userEnums} />
          ) : null}
          {selectKey === "board" ? <TaskBoardContainer /> : null}
          {selectKey === "setting" ? (
            <InfoSettingContainer
              info={info}
              userEnums={userEnums}
              update={updateProjectInfo}
            />
          ) : null}
        </Stack>
      </Paper>
    </Stack>
  )
}