"use client"

import { userImport } from "@/components/label/api/user"
import {
  Alert,
  Button,
  FileInput,
  Group,
  Modal,
  Paper,
  Stack,
  Text,
} from "@mantine/core"
import { notifications } from "@mantine/notifications"
import { IconAlertCircle, IconDownload, IconUpload } from "@tabler/icons-react"
import { useState } from "react"
import * as XLSX from "xlsx-js-style"

interface ComponentProps {
  opened: boolean
  onCloseAction: (refresh?: boolean) => void
}

type ImportItem = {
  user_name: string
  group_name: string
  base_city: string
}

export default function ImportModal({ opened, onCloseAction }: ComponentProps) {
  const [file, setFile] = useState<File | null>(null)
  const [sheetList, setSheetList] = useState<ImportItem[]>([])
  const [failedDataTips, setFailedDataTips] = useState<string[]>([])
  const [submitting, setSubmitting] = useState(false)

  const clearState = () => {
    setFile(null)
    setSheetList([])
    setFailedDataTips([])
  }

  const parseFile = async (nextFile: File | null) => {
    setFile(nextFile)
    setSheetList([])
    setFailedDataTips([])
    if (!nextFile) return
    if (!nextFile.name.endsWith(".xlsx")) {
      notifications.show({
        color: "red",
        title: "文件格式错误",
        message: "仅支持 .xlsx 文件",
      })
      setFile(null)
      return
    }

    try {
      const data = await nextFile.arrayBuffer()
      const workbook = XLSX.read(data, { type: "array" })
      const sheetName = workbook.SheetNames[0]
      const ws = workbook.Sheets[sheetName]
      const arr = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1, raw: false })
      const tableData = arr.slice(4).filter((row) => row.length > 0)

      if (tableData.length === 0) {
        setSheetList([])
        return
      }

      const checkList: Record<number, string> = {
        0: "用户名",
        1: "组织",
        2: "所在地",
      }
      const tipRows = 4
      const errors: string[] = []

      const list: ImportItem[] = tableData.map((item: any[], index: number) => {
        Object.entries(checkList).forEach(([key, fieldName]) => {
          const value = item[Number(key)]
          if (!value || (typeof value === "string" && !value.trim())) {
            errors.push(
              `第${index + 1 + tipRows}行数据缺少必填项【${fieldName}】或该必填项全为空格`
            )
          }
        })

        return {
          user_name: item[0] ? String(item[0]).trim() : "",
          group_name: item[1] ? String(item[1]).trim() : "",
          base_city: item[2] ? String(item[2]).trim() : "",
        }
      })

      if (errors.length > 0) {
        setFailedDataTips(errors)
        setSheetList([])
        return
      }

      setSheetList(list)
    } catch (e) {
      notifications.show({
        color: "red",
        title: "解析失败",
        message: e instanceof Error ? e.message : "读取文件失败",
      })
      setFile(null)
    }
  }

  const exportTemplateFile = () => {
    const tips = [
      [`提示:\n1.下列字段均为必填项\n2.【组织】仅可以填入一个组织名称`],
      [""],
      [""],
    ]
    const col = [["用户名", "组织", "所在地"]]
    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.aoa_to_sheet([...tips, ...col])
    XLSX.utils.book_append_sheet(wb, ws, "用户信息")
    wb.Sheets["用户信息"]["!rows"] = [{ hpx: 20 }, { hpx: 20 }, { hpx: 20 }]
    wb.Sheets["用户信息"]["!cols"] = [{ wch: 20 }, { wch: 20 }, { wch: 20 }]
    wb.Sheets["用户信息"]["!merges"] = [
      { s: { c: 0, r: 0 }, e: { c: 2, r: 2 } },
    ]
    if (wb.Sheets["用户信息"]["A1"]) {
      wb.Sheets["用户信息"]["A1"].s = { alignment: { wrapText: true } }
    }
    XLSX.writeFile(wb, "用户信息批量导入模板.xlsx")
  }

  const submit = async () => {
    if (sheetList.length === 0) {
      notifications.show({
        color: "yellow",
        title: "无导入数据",
        message: "请先上传并校验 Excel 文件",
      })
      return
    }
    try {
      setSubmitting(true)
      const res = await userImport({ user_infos: sheetList })
      if (Array.isArray(res) && res.length > 0) {
        setFailedDataTips(res)
        notifications.show({
          color: "red",
          title: "导入失败",
          message: "请根据错误提示修正后重试",
        })
        return
      }
      notifications.show({
        color: "green",
        title: "导入成功",
        message: "批量新增用户数据成功",
      })
      clearState()
      onCloseAction(true)
    } catch (e) {
      notifications.show({
        color: "red",
        title: "导入失败",
        message: e instanceof Error ? e.message : "请求失败",
      })
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <Modal
      opened={opened}
      onClose={() => {
        clearState()
        onCloseAction()
      }}
      title="批量导入用户信息"
      centered
      size={760}
      closeOnClickOutside={false}>
      <Stack gap="sm">
        <Paper
          withBorder
          p="sm"
          radius="sm"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
          }}>
          <Group gap={8}>
            <Text size="sm">点击下载</Text>
            <Button
              variant="subtle"
              size="compact-sm"
              leftSection={<IconDownload size={14} />}
              onClick={exportTemplateFile}>
              用户信息批量导入模板
            </Button>
            <Text size="sm">后，填写上传</Text>
          </Group>
        </Paper>

        <FileInput
          label="上传文件"
          description="支持单个 xlsx 文件上传"
          size="xs"
          radius="xs"
          accept=".xlsx"
          placeholder="请选择文件"
          leftSection={<IconUpload size={16} />}
          value={file}
          onChange={parseFile}
          clearable
        />

        <Paper
          withBorder
          p="xs"
          radius="sm"
          style={{
            borderColor:
              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
          }}>
          <Text size="sm">待导入数据：{sheetList.length} 条</Text>
        </Paper>

        {failedDataTips.length > 0 ? (
          <Alert
            icon={<IconAlertCircle size={16} />}
            color="red"
            radius="sm"
            title="错误信息提示">
            <Stack gap={4} style={{ maxHeight: 180, overflowY: "auto" }}>
              {failedDataTips.map((item) => (
                <Text key={item} size="sm">
                  {item}
                </Text>
              ))}
            </Stack>
          </Alert>
        ) : null}

        <Group justify="flex-end">
          <Button
            variant="default"
            size="xs"
            radius="xs"
            onClick={() => {
              clearState()
              onCloseAction()
            }}>
            取消
          </Button>
          <Button size="xs" radius="xs" onClick={submit} loading={submitting}>
            开始导入
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
}