"use client"

import {
  getProjectAdminList,
  projectConfig,
} from "@/components/label/api/project"
import { ProjectDetail } from "@/components/label/api/project/typing"
import { useAllUserStore } from "@/components/label/store/auth"
import {
  ActionIcon,
  Collapse,
  Group,
  Paper,
  ScrollArea,
  SimpleGrid,
  Stack,
  Switch,
  Text,
} from "@mantine/core"
import { notifications } from "@mantine/notifications"
import {
  IconCheck,
  IconChevronDown,
  IconChevronRight,
  IconEdit,
  IconX,
} from "@tabler/icons-react"
import { useCallback, useEffect, useMemo, useState } from "react"
import AdminUserModal from "./components/AdminUserModal"
import LabelSchemeContainer from "./components/LabelSchemeContainer"
import NoteRulesTable from "./components/NoteRulesTable"
import SamplingPlanContainer from "./components/SamplingPlanContainer"
import TaskStageTabsContainer from "./components/TaskStageTabsContainer"

export default function InfoSettingContainer(props: {
  info: ProjectDetail.DataProps | undefined
  userEnums: {
    allEnum: Map<any, any>
    labelEnum: Map<any, any>
    review1Enum: Map<any, any>
    review2Enum: Map<any, any>
  }
  updateAction: () => void
}) {
  const { info, userEnums, updateAction } = props
  const projectId = info?.id ?? -1

  const { userOpts } = useAllUserStore()
  const fallbackUserOptions = useMemo(() => {
    return userOpts.map((o) => ({ label: o.label, value: String(o.value) }))
  }, [userOpts])

  const [adminOptions, setAdminOptions] = useState<
    Array<{ label: string; value: string }>
  >([])

  const [adminModalOpen, setAdminModalOpen] = useState(false)
  const [lockingValue, setLockingValue] = useState<boolean>(
    !!info?.is_lock_object
  )
  const [lockingEditValue, setLockingEditValue] = useState<boolean>(
    !!info?.is_lock_object
  )
  const [isLockingEdit, setIsLockingEdit] = useState(false)
  const [savingLock, setSavingLock] = useState(false)

  const [show, setShow] = useState({
    process: true,
    scheme: true,
    sampling: true,
    note: true,
  })

  useEffect(() => {
    const v = !!info?.is_lock_object
    setLockingValue(v)
    setLockingEditValue(v)
    setIsLockingEdit(false)
  }, [info?.is_lock_object])

  const loadAdminOptions = useCallback(async () => {
    try {
      const res = await getProjectAdminList()
      const opts = (res ?? []).map((item) => ({
        label: item.label,
        value: String(item.value),
      }))
      setAdminOptions(opts)
    } catch {
      setAdminOptions([])
    }
  }, [])

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

  const adminText = useMemo(() => {
    const adminUids = info?.admin_user ?? []
    const names = adminUids.map((uid) => {
      const opt = userOpts.find((o) => o.value === uid)
      return opt?.label ?? String(uid)
    })
    return names.length ? names.join("、") : "-"
  }, [info?.admin_user, userOpts])

  const saveLock = async () => {
    if (projectId === -1) return
    setSavingLock(true)
    try {
      await projectConfig({
        project_id: projectId,
        is_lock_object: lockingEditValue,
      })
      notifications.show({
        color: "green",
        title: "操作成功",
        message: "已保存配置",
      })
      setLockingValue(lockingEditValue)
      setIsLockingEdit(false)
      updateAction()
    } catch (e) {
      notifications.show({
        color: "red",
        title: "操作失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    } finally {
      setSavingLock(false)
    }
  }

  const sectionTitle = (
    key: keyof typeof show,
    title: string,
    color: "blue" | "orange" | "teal" | "grape"
  ) => {
    const opened = show[key]
    return (
      <Group justify="space-between" wrap="nowrap">
        <Group gap={8}>
          <div
            style={{
              width: 3,
              height: 14,
              borderRadius: 2,
              backgroundColor: `var(--mantine-color-${color}-6)`,
            }}
          />
          <Text fw={700}>{title}</Text>
        </Group>
        <ActionIcon
          variant="subtle"
          color="gray"
          onClick={() => setShow((s) => ({ ...s, [key]: !opened }))}>
          {opened ? (
            <IconChevronDown size={16} />
          ) : (
            <IconChevronRight size={16} />
          )}
        </ActionIcon>
      </Group>
    )
  }

  const finalAdminOptions =
    adminOptions.length > 0 ? adminOptions : fallbackUserOptions

  return (
    <>
      <Stack gap="md" style={{ flex: 1, minHeight: 0 }} w="100%">
        <Paper
          withBorder
          p="sm"
          radius="md"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
          }}>
          <Stack gap="sm">
            <Group justify="space-between" wrap="wrap">
              <Text fw={700}>项目配置</Text>
              <ActionIcon variant="subtle" onClick={updateAction}>
                <IconEdit size={16} />
              </ActionIcon>
            </Group>

            <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
              <Paper
                withBorder
                p="xs"
                radius="sm"
                style={{
                  borderColor:
                    "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
                }}>
                <Group justify="space-between" wrap="nowrap" align="center">
                  <Stack gap={2} style={{ minWidth: 0 }}>
                    <Text size="sm" fw={600}>
                      项目管理员
                    </Text>
                    <Text
                      size="sm"
                      c="dimmed"
                      style={{
                        maxWidth: 420,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}>
                      {adminText}
                    </Text>
                  </Stack>
                  <ActionIcon
                    variant="subtle"
                    color="blue"
                    onClick={() => {
                      setAdminModalOpen(true)
                      if (adminOptions.length === 0) {
                        queueMicrotask(loadAdminOptions)
                      }
                    }}>
                    <IconEdit size={16} />
                  </ActionIcon>
                </Group>
              </Paper>

              <Paper
                withBorder
                p="xs"
                radius="sm"
                style={{
                  borderColor:
                    "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
                }}>
                <Group justify="space-between" wrap="nowrap" align="center">
                  <Stack gap={2}>
                    <Text size="sm" fw={600}>
                      图片对象锁定
                    </Text>
                    <Text size="sm" c="dimmed">
                      开启后对象可被锁定，避免多人同时标注冲突
                    </Text>
                  </Stack>
                  {isLockingEdit ? (
                    <Group gap={4} wrap="nowrap">
                      <Switch
                        checked={lockingEditValue}
                        onChange={(e) =>
                          setLockingEditValue(e.currentTarget.checked)
                        }
                      />
                      <ActionIcon
                        variant="subtle"
                        color="gray"
                        onClick={() => {
                          setLockingEditValue(lockingValue)
                          setIsLockingEdit(false)
                        }}>
                        <IconX size={16} />
                      </ActionIcon>
                      <ActionIcon
                        variant="subtle"
                        color="blue"
                        loading={savingLock}
                        onClick={saveLock}>
                        <IconCheck size={16} />
                      </ActionIcon>
                    </Group>
                  ) : (
                    <Group gap={8} wrap="nowrap">
                      <Switch checked={lockingValue} readOnly />
                      <ActionIcon
                        variant="subtle"
                        color="blue"
                        onClick={() => setIsLockingEdit(true)}>
                        <IconEdit size={16} />
                      </ActionIcon>
                    </Group>
                  )}
                </Group>
              </Paper>
            </SimpleGrid>

            <Group justify="flex-end">
              <ActionIcon variant="subtle" onClick={updateAction}>
                <IconCheck size={16} />
              </ActionIcon>
              <Text size="xs" c="dimmed">
                刷新项目详情
              </Text>
            </Group>
          </Stack>
        </Paper>

        <Paper
          withBorder
          p="sm"
          radius="md"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
            flex: 1,
            minHeight: 0,
          }}>
          <ScrollArea h="100%" type="auto">
            <Stack gap="sm">
              {sectionTitle("process", "任务流程", "blue")}
              <Collapse in={show.process}>
                <TaskStageTabsContainer
                  projectId={projectId}
                  info={info}
                  userOptions={fallbackUserOptions}
                  userEnums={userEnums}
                  onUpdatedAction={updateAction}
                />
              </Collapse>

              {sectionTitle("scheme", "标注方案", "orange")}
              <Collapse in={show.scheme}>
                <LabelSchemeContainer info={info} />
              </Collapse>

              {sectionTitle("sampling", "抽检方案", "teal")}
              <Collapse in={show.sampling}>
                <SamplingPlanContainer
                  projectId={projectId}
                  info={info}
                  onUpdated={updateAction}
                />
              </Collapse>

              {sectionTitle("note", "批注规则", "grape")}
              <Collapse in={show.note}>
                <NoteRulesTable info={info} onUpdated={updateAction} />
              </Collapse>
            </Stack>
          </ScrollArea>
        </Paper>
      </Stack>

      <AdminUserModal
        opened={adminModalOpen}
        value={info?.admin_user ?? []}
        options={finalAdminOptions}
        onCloseAction={async (next) => {
          setAdminModalOpen(false)
          if (!next || projectId === -1) return
          try {
            await projectConfig({ project_id: projectId, admin_user: next })
            notifications.show({
              color: "green",
              title: "操作成功",
              message: "已保存项目管理员",
            })
            updateAction()
          } catch (e) {
            notifications.show({
              color: "red",
              title: "操作失败",
              message: e instanceof Error ? e.message : "请求失败",
            })
          }
        }}
      />
    </>
  )
}