import { PlusOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import {
  App,
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  Modal,
  Select,
  Space,
  Switch,
  Tag,
  Typography,
} from 'antd'
import { useEffect, useState } from 'react'

import PercentTable from '@/components/common/PercentTable'
import { fetchAdminSession } from '@/services/admin/auth'
import {
  createAdminConsignmentContact,
  deleteAdminConsignmentContact,
  fetchAdminConsignmentContacts,
  setAdminConsignmentContactEnabled,
  updateAdminConsignmentContact,
} from '@/services/admin/consignment'
import type { ConsignmentContactSupporter } from '@/types/consignment'
import { resolveAdminPermission } from '@/utils/admin-auth'
import { formatDateTime } from '@/utils/date-time'
import type { TableColumnsType } from 'antd'

const { Text } = Typography

type ContactForm = {
  name: string
  note?: string
  sortOrder?: number
  enabled?: boolean
}

const ENABLED_FILTER_OPTIONS = [
  { label: '全部状态', value: '' },
  { label: '启用中', value: 'true' },
  { label: '已禁用', value: 'false' },
]

/**
 * 接单平台 → 对接客服。
 *
 * 独立名单（不复用后台账号）：打手发布寄卖时必选，后台按人统计提成与快速联系。
 * 已被寄卖记录引用的客服只能禁用，不能删除，保证历史单归属不丢。
 */
export default function ConsignmentContactsPanel() {
  const { message, modal } = App.useApp()
  const queryClient = useQueryClient()
  const [form] = Form.useForm<ContactForm>()

  const [keywordInput, setKeywordInput] = useState('')
  const [keyword, setKeyword] = useState('')
  const [enabledFilter, setEnabledFilter] = useState('')
  const [editingContact, setEditingContact] = useState<ConsignmentContactSupporter | null>(null)
  const [formOpen, setFormOpen] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [actionId, setActionId] = useState<number | null>(null)

  useEffect(() => {
    const timer = window.setTimeout(() => setKeyword(keywordInput.trim()), 300)
    return () => window.clearTimeout(timer)
  }, [keywordInput])

  const adminSessionQuery = useQuery({
    queryKey: ['admin-session'],
    queryFn: fetchAdminSession,
    retry: false,
  })
  // 写操作统一按 consignment.manage 门控：后端接口都挂了 requireAdminPermission，
  // 没有权限时按钮点了只会 403，所以直接从界面隐藏。
  const canManage = resolveAdminPermission(
    adminSessionQuery.data?.data.user.permissions,
    'consignment.manage',
  )

  const query = useQuery({
    queryKey: ['admin-consignment-contacts', keyword, enabledFilter],
    queryFn: () =>
      fetchAdminConsignmentContacts({
        keyword: keyword || undefined,
        enabled: enabledFilter || undefined,
      }),
  })

  const items = query.data?.data.items || []
  const total = Number(query.data?.data.total || 0)
  const enabledCount = items.filter((item) => item.enabled).length

  async function reload() {
    await queryClient.invalidateQueries({ queryKey: ['admin-consignment-contacts'] })
  }

  function openCreate() {
    setEditingContact(null)
    form.resetFields()
    form.setFieldsValue({ enabled: true, sortOrder: 0 })
    setFormOpen(true)
  }

  function openEdit(record: ConsignmentContactSupporter) {
    setEditingContact(record)
    form.setFieldsValue({
      name: record.name,
      note: record.note,
      sortOrder: record.sortOrder,
      enabled: record.enabled,
    })
    setFormOpen(true)
  }

  async function handleSubmit() {
    try {
      const values = await form.validateFields()
      setSubmitting(true)
      const payload = {
        name: values.name,
        note: values.note || '',
        sortOrder: Number(values.sortOrder || 0),
        enabled: values.enabled !== false,
      }
      if (editingContact) {
        await updateAdminConsignmentContact(editingContact.id, payload)
        message.success('对接客服已更新')
      } else {
        await createAdminConsignmentContact(payload)
        message.success('对接客服已新增')
      }
      setFormOpen(false)
      setEditingContact(null)
      await reload()
    } catch (error: any) {
      if (error?.errorFields) return
      message.error(error?.message || '保存对接客服失败')
    } finally {
      setSubmitting(false)
    }
  }

  async function handleToggleEnabled(record: ConsignmentContactSupporter, enabled: boolean) {
    setActionId(record.id)
    try {
      await setAdminConsignmentContactEnabled(record.id, enabled)
      message.success(enabled ? '已启用该对接客服' : '已禁用该对接客服')
      await reload()
    } catch (error: any) {
      message.error(error?.message || '更新对接客服状态失败')
    } finally {
      setActionId(null)
    }
  }

  function handleDelete(record: ConsignmentContactSupporter) {
    modal.confirm({
      title: `删除对接客服「${record.name}」？`,
      content:
        '只有未被任何寄卖记录使用的客服可以删除。已被使用的请改为「禁用」，历史寄卖单仍会保留对接客服信息。',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await deleteAdminConsignmentContact(record.id)
          message.success('对接客服已删除')
          await reload()
        } catch (error: any) {
          message.error(error?.message || '删除对接客服失败')
          throw error
        }
      },
    })
  }

  const columns: TableColumnsType<ConsignmentContactSupporter> = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: 160,
      render: (value: string) => <Text strong>{value}</Text>,
    },
    {
      title: '备注',
      dataIndex: 'note',
      width: 240,
      ellipsis: true,
      render: (value: string) =>
        value ? <Text style={{ fontSize: 12 }}>{value}</Text> : <Text type="secondary">-</Text>,
    },
    {
      title: '排序',
      dataIndex: 'sortOrder',
      width: 80,
      render: (value: number) => value || 0,
    },
    {
      title: '状态',
      key: 'enabled',
      width: 110,
      render: (_, record) => (
        <Space size={6}>
          <Switch
            size="small"
            checked={record.enabled}
            disabled={!canManage}
            loading={actionId === record.id}
            checkedChildren="启用"
            unCheckedChildren="禁用"
            onChange={(checked) => void handleToggleEnabled(record, checked)}
          />
          <Tag color={record.enabled ? 'green' : 'default'} style={{ marginInlineEnd: 0 }}>
            {record.enabled ? '启用中' : '已禁用'}
          </Tag>
        </Space>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      width: 170,
      render: (value: string) => formatDateTime(value),
    },
    {
      title: '操作',
      key: 'actions',
      width: 140,
      render: (_, record) =>
        canManage ? (
          <Space size={4}>
            <Button size="small" type="link" onClick={() => openEdit(record)}>
              编辑
            </Button>
            <Button size="small" type="link" danger onClick={() => handleDelete(record)}>
              删除
            </Button>
          </Space>
        ) : (
          <Text type="secondary">-</Text>
        ),
    },
  ]

  return (
    <div>
      <Card size="small" style={{ marginBottom: 16 }}>
        <Space direction="vertical" size={10} style={{ width: '100%' }}>
          <Space wrap size={12}>
            <Input
              allowClear
              prefix={<SearchOutlined />}
              placeholder="搜索姓名 / 备注"
              value={keywordInput}
              onChange={(event) => setKeywordInput(event.target.value)}
              style={{ width: 280 }}
            />
            <Select
              value={enabledFilter}
              options={ENABLED_FILTER_OPTIONS}
              onChange={setEnabledFilter}
              style={{ width: 140 }}
            />
            <Button icon={<ReloadOutlined />} onClick={() => void query.refetch()}>
              刷新
            </Button>
            <Text type="secondary">
              共 {total} 个，本页启用 {enabledCount} 个
            </Text>
            {canManage ? (
              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
                新增对接客服
              </Button>
            ) : null}
          </Space>
          <Text type="secondary" style={{ fontSize: 12 }}>
            打手发布寄卖时必须选择对接客服；已被寄卖记录使用的客服只能禁用，不能删除。
          </Text>
        </Space>
      </Card>

      <PercentTable<ConsignmentContactSupporter>
        rowKey="id"
        loading={query.isLoading}
        columns={columns}
        dataSource={items}
        pagination={false}
        size="small"
      />

      <Modal
        title={editingContact ? `编辑对接客服 · ${editingContact.name}` : '新增对接客服'}
        open={formOpen}
        onCancel={() => {
          setFormOpen(false)
          setEditingContact(null)
        }}
        onOk={() => void handleSubmit()}
        confirmLoading={submitting}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请填写对接客服姓名' }]}
          >
            <Input placeholder="如：小张" maxLength={60} />
          </Form.Item>
          <Form.Item name="note" label="备注">
            <Input.TextArea rows={2} placeholder="如：负责苏尔南寄卖 / 白班" maxLength={200} />
          </Form.Item>
          <Space size={24} align="start">
            <Form.Item
              name="sortOrder"
              label="排序"
              tooltip="数字越小越靠前；打手端默认选中第一个启用项"
            >
              <InputNumber min={0} max={9999} style={{ width: 140 }} />
            </Form.Item>
            <Form.Item name="enabled" label="启用" valuePropName="checked">
              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
            </Form.Item>
          </Space>
        </Form>
      </Modal>
    </div>
  )
}