"use client"

import { getUserGroupAll, userEditById } from "@/components/label/api/user"
import { User } from "@/components/label/api/user/typing"
import {
  Button,
  Group,
  Modal,
  Select,
  Stack,
  TextInput,
} from "@mantine/core"
import { useForm } from "@mantine/form"
import { notifications } from "@mantine/notifications"
import { useEffect, useMemo, useState } from "react"

interface ComponentProps {
  opened: boolean
  data: User.UserInfo | null
  onCloseAction: (refresh?: boolean) => void
}

export default function EditUserModal({
  opened,
  data,
  onCloseAction,
}: ComponentProps) {
  const [groupOpts, setGroupOpts] = useState<Array<{ label: string; value: string }>>(
    []
  )
  const [submitting, setSubmitting] = useState(false)

  const groupValueByName = useMemo(() => {
    const map = new Map<string, string>()
    groupOpts.forEach((g) => map.set(g.label, g.value))
    return map
  }, [groupOpts])

  const form = useForm({
    initialValues: {
      name: "",
      group_uuid: "",
      base_city: "",
      work_status: "1",
    },
    validate: {
      name: (v) => (v.trim() ? null : "请输入用户名"),
      group_uuid: (v) => (v ? null : "请选择组织"),
      base_city: (v) => (v.trim() ? null : "请输入所在地"),
      work_status: (v) => (v ? null : "请选择状态"),
    },
  })

  useEffect(() => {
    if (!opened) return
    const run = async () => {
      const res = await getUserGroupAll()
      setGroupOpts(res ?? [])
    }
    queueMicrotask(run)
  }, [opened])

  useEffect(() => {
    if (!opened || !data) return
    form.setValues({
      name: data.name ?? "",
      group_uuid: groupValueByName.get(data.group_name ?? "") ?? "",
      base_city: data.base_city ?? "",
      work_status: data.work_status === 0 ? "0" : "1",
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [opened, data, groupValueByName])

  const submit = form.onSubmit(async (values) => {
    if (!data?.uid) return
    try {
      setSubmitting(true)
      await userEditById(
        {
          user_name: values.name.trim(),
          group_uuid: values.group_uuid,
          base_city: values.base_city.trim(),
          work_status: Number(values.work_status),
        },
        data.uid
      )
      notifications.show({
        color: "green",
        title: "操作成功",
        message: "已更新用户信息",
      })
      onCloseAction(true)
    } catch (e) {
      notifications.show({
        color: "red",
        title: "操作失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    } finally {
      setSubmitting(false)
    }
  })

  return (
    <Modal
      opened={opened}
      onClose={() => onCloseAction()}
      title="编辑用户"
      centered
      size={560}
      closeOnClickOutside={false}>
      <form onSubmit={submit}>
        <Stack gap="sm">
          <TextInput
            label="用户名"
            size="xs"
            radius="xs"
            withAsterisk
            {...form.getInputProps("name")}
          />
          <Select
            label="组织"
            size="xs"
            radius="xs"
            withAsterisk
            searchable
            data={groupOpts}
            {...form.getInputProps("group_uuid")}
          />
          <TextInput
            label="所在地"
            size="xs"
            radius="xs"
            withAsterisk
            {...form.getInputProps("base_city")}
          />
          <Select
            label="状态"
            size="xs"
            radius="xs"
            withAsterisk
            data={[
              { label: "在职", value: "1" },
              { label: "离职", value: "0" },
            ]}
            {...form.getInputProps("work_status")}
          />
          <Group justify="flex-end" mt="xs">
            <Button
              variant="default"
              size="xs"
              radius="xs"
              onClick={() => onCloseAction()}>
              取消
            </Button>
            <Button
              type="submit"
              size="xs"
              radius="xs"
              loading={submitting}>
              确定
            </Button>
          </Group>
        </Stack>
      </form>
    </Modal>
  )
}