import { useCallback, useEffect, useMemo, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import {
  Button,
  Form,
  Input,
  InputNumber,
  Modal,
  Select,
  Switch,
  Tabs,
  Typography,
  message,
} from 'antd'
import { ReloadOutlined } from '@ant-design/icons'
import { useAuth } from '../store/auth'
import { merchantApi } from '../api'
import { PageHeader } from '../components/PageHeader'
import type {
  ApiClient,
  ApiCredential,
  CallbackCredential,
  CallbackSubscription,
  FulfillmentOrder,
  Merchant,
  MerchantMember,
  MerchantRole,
  MerchantProduct,
  PageResult,
  WalletAccount,
  WalletLedgerEntry,
} from '../types'
import {
  apiClientMax,
  defaultCallbackFormValues,
  eventsToValue,
  featuresToList,
  productOptionLabel,
  resolveEnabledTab,
  rolePermissionOptions,
  roleText,
  scopeOptions,
  tabFromSearch,
} from './merchantCenterUtils'
import type { MerchantCenterProps, MerchantCenterTab } from './merchantCenterUtils'
import {
  ApiKeysTab,
  CallbacksTab,
  MembersTab,
  OrdersTab,
  ProductsTab,
  SecretBlock,
  WalletTab,
} from './merchantCenterTabs'

export default function MerchantCenter({ fixedTab, title = '商户中心' }: MerchantCenterProps = {}) {
  const { isAdmin, user } = useAuth()
  const location = useLocation()
  const navigate = useNavigate()
  const routeTab = useMemo(() => fixedTab ?? tabFromSearch(location.search), [fixedTab, location.search])
  const [merchant, setMerchant] = useState<Merchant | null>(null)
  const [merchantRole, setMerchantRole] = useState<MerchantMember['role']>()
  const [merchantPermissions, setMerchantPermissions] = useState<string[]>([])
  const [activeTab, setActiveTab] = useState<MerchantCenterTab>(routeTab ?? 'products')
  const [products, setProducts] = useState<PageResult<MerchantProduct>>({ list: [], total: 0, page: 1, size: 10 })
  const [orders, setOrders] = useState<PageResult<FulfillmentOrder>>({ list: [], total: 0, page: 1, size: 10 })
  const [orderSource, setOrderSource] = useState<'api' | 'manual'>('api')
  const [ledger, setLedger] = useState<PageResult<WalletLedgerEntry>>({ list: [], total: 0, page: 1, size: 10 })
  const [wallet, setWallet] = useState<WalletAccount | null>(null)
  const [apiClients, setApiClients] = useState<ApiClient[]>([])
  const [callback, setCallback] = useState<CallbackSubscription | null>(null)
  const [members, setMembers] = useState<MerchantMember[]>([])
  const [roles, setRoles] = useState<MerchantRole[]>([])
  const [loading, setLoading] = useState(false)
  const [apiClientOpen, setApiClientOpen] = useState(false)
  const [apiCredential, setApiCredential] = useState<ApiCredential | null>(null)
  const [callbackCredential, setCallbackCredential] = useState<CallbackCredential | null>(null)
  const [memberOpen, setMemberOpen] = useState(false)
  const [editingMember, setEditingMember] = useState<MerchantMember | null>(null)
  const [roleOpen, setRoleOpen] = useState(false)
  const [editingRole, setEditingRole] = useState<MerchantRole | null>(null)
  const [manualOrderOpen, setManualOrderOpen] = useState(false)
  const [manualOrderSubmitting, setManualOrderSubmitting] = useState(false)
  const [manualOrderProducts, setManualOrderProducts] = useState<MerchantProduct[]>([])
  const [manualOrderProductsLoading, setManualOrderProductsLoading] = useState(false)
  const [walletFilterForm] = Form.useForm()
  const [apiClientForm] = Form.useForm()
  const [callbackForm] = Form.useForm()
  const [memberForm] = Form.useForm()
  const [memberEditForm] = Form.useForm()
  const [roleForm] = Form.useForm()
  const [manualOrderForm] = Form.useForm()

  const hasPermission = useCallback((permission: string) => merchantPermissions.includes(permission), [merchantPermissions])
  const canManage = hasPermission('products:manage')
  const canOrderManage = hasPermission('orders:manage')
  const canAPIManage = hasPermission('api:manage')
  const canCallbacksManage = hasPermission('callbacks:manage')
  const canFinance = hasPermission('wallet:ledger')
  const enabledFeatures = useMemo(() => new Set(featuresToList(merchant?.features)), [merchant?.features])
  const hasFeature = useCallback((feature: string) => !merchant || enabledFeatures.has(feature), [enabledFeatures, merchant])
  const manualOrderProductOptions = useMemo(() => manualOrderProducts.map((item) => ({
    value: item.sku,
    label: productOptionLabel(item),
  })), [manualOrderProducts])

  const copyDeliveryLink = useCallback((orderNo: string) => {
    merchantApi.getDeliveryLink(orderNo)
      .then((data) => navigator.clipboard.writeText(data.delivery_url).then(() => message.success('发货链接已复制')))
      .catch((e) => message.error(e instanceof Error ? e.message : '复制失败'))
  }, [])

  const openDeliveryLink = useCallback((orderNo: string) => {
    merchantApi.getDeliveryLink(orderNo)
      .then((data) => window.open(data.delivery_url, '_blank', 'noopener,noreferrer'))
      .catch((e) => message.error(e instanceof Error ? e.message : '打开失败'))
  }, [])

  const patchDeliveryLinkState = useCallback((orderNo: string, patch: Partial<FulfillmentOrder>) => {
    setOrders((prev) => ({
      ...prev,
      list: prev.list.map((item) => item.order_no === orderNo ? { ...item, ...patch } : item),
    }))
  }, [])

  const revokeDeliveryLink = useCallback((orderNo: string) => {
    merchantApi.revokeDeliveryLink(orderNo)
      .then(() => {
        const revokedAt = new Date().toISOString()
        message.success('发货链接已作废')
        patchDeliveryLinkState(orderNo, { delivery_link_revoked_at: revokedAt })
      })
      .catch((e) => message.error(e instanceof Error ? e.message : '作废失败'))
  }, [patchDeliveryLinkState])

  const restoreDeliveryLink = useCallback((orderNo: string) => {
    merchantApi.restoreDeliveryLink(orderNo)
      .then((data) => {
        message.success('发货链接已恢复')
        patchDeliveryLinkState(orderNo, {
          delivery_link_expires_at: data.expires_at,
          delivery_link_revoked_at: null,
        })
      })
      .catch((e) => message.error(e instanceof Error ? e.message : '恢复失败'))
  }, [patchDeliveryLinkState])

  const loadCurrent = useCallback(async () => {
    const data = await merchantApi.current()
    setMerchant(data.merchant)
    setMerchantRole(data.role)
    const nextPermissions = [...new Set(data.permissions || [])].sort()
    setMerchantPermissions((current) => (
      current.length === nextPermissions.length && current.every((value, index) => value === nextPermissions[index])
        ? current
        : nextPermissions
    ))
    return data
  }, [])

  const loadProducts = useCallback(async (page = products.page, size = products.size) => {
    const data = await merchantApi.products({ page, size })
    setProducts(data)
  }, [products.page, products.size])

  const loadOrders = useCallback(async (page = orders.page, size = orders.size, source = orderSource) => {
    const data = await merchantApi.orders({ page, size, order_source: source })
    setOrders(data)
  }, [orderSource, orders.page, orders.size])

  const loadWallet = useCallback(async (
    page = ledger.page,
    size = ledger.size,
    permissions = merchantPermissions,
    filters?: { reference_no?: string; type?: string },
  ) => {
    const walletData = await merchantApi.wallet()
    setWallet(walletData)
    if (permissions.includes('wallet:ledger')) {
      const ledgerData = await merchantApi.ledger({ page, size, ...filters })
      setLedger(ledgerData)
    } else {
      setLedger({ list: [], total: 0, page, size })
    }
  }, [ledger.page, ledger.size, merchantPermissions])

  const loadAPIClients = useCallback(async () => {
    const clientData = await merchantApi.apiClients()
    setApiClients(clientData || [])
  }, [])

  const loadCallbacks = useCallback(async (permissions = merchantPermissions) => {
    if (!permissions.includes('callbacks:manage')) {
      setCallback(null)
      callbackForm.resetFields()
      return
    }
    const callbackData = await merchantApi.callbacks()
    setCallback(callbackData || null)
    callbackForm.setFieldsValue(callbackData ? {
      url: callbackData.url,
      events: eventsToValue(callbackData.events),
      status: callbackData.status,
    } : defaultCallbackFormValues())
  }, [callbackForm, merchantPermissions])

  const loadMembers = useCallback(async (permissions = merchantPermissions) => {
    if (!permissions.includes('members:manage')) {
      setMembers([])
      setRoles([])
      return
    }
    const [memberData, roleData] = await Promise.all([merchantApi.members(), merchantApi.roles()])
    setMembers(memberData || [])
    setRoles(roleData || [])
  }, [merchantPermissions])

  const loadActiveTab = useCallback(async (permissions = merchantPermissions, tab = activeTab) => {
    switch (tab) {
      case 'products':
        await loadProducts()
        return
      case 'orders':
        await loadOrders()
        return
      case 'wallet':
        await loadWallet(undefined, undefined, permissions)
        return
      case 'api':
        await loadAPIClients()
        return
      case 'callbacks':
        await loadCallbacks(permissions)
        return
      case 'members':
        await loadMembers(permissions)
        return
    }
  }, [activeTab, loadAPIClients, loadCallbacks, loadMembers, loadOrders, loadProducts, loadWallet, merchantPermissions])

  const loadAll = useCallback(async () => {
    setLoading(true)
    try {
      const current = await loadCurrent()
      const nextTab = fixedTab ?? resolveEnabledTab(routeTab ?? activeTab, current.merchant.features)
      if (!fixedTab && nextTab !== activeTab) {
        setActiveTab(nextTab)
      }
      await loadActiveTab(current.permissions || [], nextTab)
    } catch (e) {
      message.error(e instanceof Error ? e.message : '加载失败')
    } finally {
      setLoading(false)
    }
  }, [activeTab, fixedTab, loadActiveTab, loadCurrent, routeTab])

  useEffect(() => {
    loadAll()
  }, [loadAll])

  useEffect(() => {
    if (routeTab && activeTab !== routeTab) {
      setActiveTab(routeTab)
    }
  }, [activeTab, routeTab])

  const openProductToggle = (record: MerchantProduct) => {
    merchantApi.updateProductStatus(record.id, record.status === 'active' ? 'inactive' : 'active')
      .then(() => {
        message.success(record.status === 'active' ? '商品已下架，商户无法再下单' : '商品已上架')
        loadProducts()
      })
      .catch((e) => message.error(e instanceof Error ? e.message : '操作失败'))
  }

  const handleWalletFilter = async () => {
    const values = await walletFilterForm.validateFields()
    loadWallet(1, ledger.size, merchantPermissions, {
      reference_no: values.reference_no || undefined,
      type: values.type || undefined,
    })
  }

  const handleWalletFilterReset = () => {
    walletFilterForm.resetFields()
    loadWallet(1, ledger.size, merchantPermissions, {})
  }

  const handleLoadLedger = useCallback((page: number, size: number) => {
    const values = walletFilterForm.getFieldsValue()
    loadWallet(page, size, merchantPermissions, {
      reference_no: values.reference_no || undefined,
      type: values.type || undefined,
    })
  }, [loadWallet, merchantPermissions, walletFilterForm])

  const openManualOrderCreate = () => {
    manualOrderForm.resetFields()
    manualOrderForm.setFieldsValue({
      quantity: 1,
    })
    setManualOrderOpen(true)
    setManualOrderProductsLoading(true)
    merchantApi.manualOrderProducts()
      .then((data) => {
        setManualOrderProducts(data || [])
        if (data.length > 0) {
          manualOrderForm.setFieldsValue({ sku: data[0].sku })
        } else {
          message.warning('没有可用商品')
        }
      })
      .catch((e) => {
        message.error(e instanceof Error ? e.message : '商品加载失败')
      })
      .finally(() => setManualOrderProductsLoading(false))
  }

  const submitManualOrder = async () => {
    const values = await manualOrderForm.validateFields()
    setManualOrderSubmitting(true)
    try {
      const result = await merchantApi.createManualOrder({
        client_order_no: values.client_order_no,
        sku: values.sku,
        quantity: values.quantity,
        buyer_reference: values.buyer_reference,
        game_account: values.game_account,
        note: values.note,
      })
      setManualOrderOpen(false)
      setOrderSource('manual')
      message.success(result.idempotent ? '已找到已有手动订单，未重复扣款' : '手动订单已创建，余额与库存已扣减')
      await loadOrders(1, orders.size, 'manual')
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败')
    } finally {
      setManualOrderSubmitting(false)
    }
  }

  const changeOrderSource = (source: 'api' | 'manual') => {
    setOrderSource(source)
    loadOrders(1, orders.size, source).catch((e) => message.error(e instanceof Error ? e.message : '订单加载失败'))
  }

  const submitAPIClient = async () => {
    const values = await apiClientForm.validateFields()
    try {
      const credential = await merchantApi.createApiClient({
        name: values.name,
        scopes: (values.scopes || []).join(','),
        signature_version: values.signature_version,
        expires_at: values.expires_at,
      })
      setApiCredential(credential)
      setApiClientOpen(false)
      message.success('API 密钥已创建')
      loadAPIClients()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败')
    }
  }

  const submitCallback = async () => {
    const values = await callbackForm.validateFields()
    try {
      const credential = await merchantApi.saveCallback({
        url: values.url,
        events: (values.events || []).join(','),
        status: values.status,
      })
      setCallback(credential.subscription)
      if (credential.secret) {
        setCallbackCredential(credential)
      }
      message.success('回调配置已保存')
    } catch (e) {
      message.error(e instanceof Error ? e.message : '保存失败')
    }
  }

  const rotateCallbackSecret = async () => {
    const values = await callbackForm.validateFields()
    try {
      const credential = await merchantApi.saveCallback({
        url: values.url,
        events: (values.events || []).join(','),
        status: values.status,
        rotate_secret: true,
      })
      setCallback(credential.subscription)
      if (credential.secret) {
        setCallbackCredential(credential)
      }
      message.success('回调密钥已重置，旧密钥立即失效')
    } catch (e) {
      message.error(e instanceof Error ? e.message : '重置失败')
    }
  }

  const submitMember = async () => {
    const values = await memberForm.validateFields()
    try {
      await merchantApi.addMember({
        username: values.username,
        password: values.password,
        nickname: values.nickname,
        role: values.role,
      })
      setMemberOpen(false)
      message.success('成员已添加')
      loadMembers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '添加失败')
    }
  }

  const submitMemberEdit = async () => {
    if (!editingMember) return
    try {
      const values = await memberEditForm.validateFields()
      await merchantApi.updateMember(editingMember.id, {
        role: values.role,
        status: values.status,
        is_default: values.is_default || false,
      })
      setEditingMember(null)
      message.success('成员已更新')
      loadMembers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '更新失败')
    }
  }

  const toggleMemberStatus = async (member: MerchantMember) => {
    try {
      await merchantApi.updateMember(member.id, {
        role: member.role,
        status: member.status === 1 ? 0 : 1,
        is_default: member.is_default,
      })
      message.success(member.status === 1 ? '员工已停用' : '员工已启用')
      loadMembers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败')
    }
  }

  const removeMember = async (member: MerchantMember) => {
    try {
      await merchantApi.removeMember(member.id)
      message.success('员工已从当前商户移除')
      loadMembers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '移除失败')
    }
  }

  const submitRole = async () => {
    const values = await roleForm.validateFields()
    try {
      if (editingRole) {
        await merchantApi.updateRole(editingRole.id, { name: values.name, permissions: values.permissions || [] })
      } else {
        await merchantApi.createRole({ ...values, permissions: values.permissions || [] })
      }
      setRoleOpen(false)
      setEditingRole(null)
      message.success(editingRole ? '角色已更新' : '角色已创建')
      loadMembers()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败')
    }
  }

  const toggleAPIClient = async (record: ApiClient) => {
    try {
      await merchantApi.updateApiClientStatus(record.id, record.status === 'active' ? 'disabled' : 'active')
      message.success('状态已更新')
      loadAPIClients()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '更新失败')
    }
  }

  const deleteAPIClient = async (record: ApiClient) => {
    try {
      await merchantApi.deleteApiClient(record.id)
      message.success('密钥已删除')
      loadAPIClients()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '删除失败')
    }
  }

  const tabItems = [
    { key: 'products', label: '商品列表', disabled: !hasFeature('products'), children: (
      <ProductsTab loading={loading} products={products} canManage={canManage} onToggleProduct={openProductToggle} onLoadProducts={loadProducts} />
    ) },
    { key: 'orders', label: '发货订单', disabled: !hasFeature('orders'), children: (
      <OrdersTab loading={loading} orders={orders} orderSource={orderSource} canManage={canOrderManage} onCreateManualOrder={openManualOrderCreate} onOrderSourceChange={changeOrderSource} onLoadOrders={loadOrders} onCopyLink={copyDeliveryLink} onOpenLink={openDeliveryLink} onRevokeLink={revokeDeliveryLink} onRestoreLink={restoreDeliveryLink} />
    ) },
    { key: 'wallet', label: '钱包', disabled: !hasFeature('wallet'), children: (
      <WalletTab loading={loading} wallet={wallet} canFinance={canFinance} ledger={ledger} form={walletFilterForm} onFilter={handleWalletFilter} onResetFilter={handleWalletFilterReset} onLoadLedger={handleLoadLedger} />
    ) },
    { key: 'api', label: 'API 密钥', disabled: !hasFeature('api'), children: (
      <ApiKeysTab loading={loading} clients={apiClients} clientMax={apiClientMax} isAdmin={isAdmin} canManage={canAPIManage} form={apiClientForm} onOpenCreate={() => setApiClientOpen(true)} onNavigateDocs={() => navigate('/open-api')} onNavigateDebug={() => navigate('/api-debug')} onToggleClient={toggleAPIClient} onDeleteClient={deleteAPIClient} />
    ) },
    { key: 'callbacks', label: '回调', disabled: !hasFeature('callbacks'), children: (
      <CallbacksTab canManage={canCallbacksManage} callback={callback} form={callbackForm} onSubmit={submitCallback} onRotateSecret={rotateCallbackSecret} />
    ) },
    { key: 'members', label: '成员', children: (
      <MembersTab
        loading={loading}
        members={members}
        roles={roles}
        canManage={hasPermission('members:manage')}
        form={memberForm}
        onOpenAdd={() => setMemberOpen(true)}
        onOpenCreateRole={() => {
          setEditingRole(null)
          setRoleOpen(true)
        }}
        onEditRole={(role) => {
          setEditingRole(role)
          roleForm.setFieldsValue({
            name: role.name,
            code: role.code,
            permissions: role.permissions.split(',').filter(Boolean),
          })
          setRoleOpen(true)
        }}
        onEditMember={(member) => {
          setEditingMember(member)
          memberEditForm.setFieldsValue({ role: member.role, status: member.status, is_default: member.is_default })
        }}
        onToggleMemberStatus={toggleMemberStatus}
        onRemoveMember={removeMember}
        currentUserID={user?.id}
      />
    ) },
  ]
  const fixedTabContent = tabItems.find((item) => item.key === fixedTab)?.children

  const parentCategoryMap: Record<string, string> = {
    products: '商品管理',
    orders: '订单管理',
    wallet: '积分管理',
    api: '开放 API',
    callbacks: '开放 API',
    members: '员工管理',
  }

  const currentTabKey = fixedTab ?? activeTab
  const parentGroup = parentCategoryMap[currentTabKey]

  const computedBreadcrumbs = useMemo(() => {
    const pageTitle = title === '商品' ? '商品列表' : title
    if (parentGroup) {
      return [{ title: parentGroup }, { title: pageTitle }]
    }
    return [{ title: pageTitle }]
  }, [parentGroup, title])

  return (
    <div>
      <PageHeader
        title={title}
        subtitle={merchant ? `${merchant.name} (${merchant.code}) · 当前身份: ${merchantRole ? roleText(merchantRole) : '-'}` : '商户配置与管理中心'}
        breadcrumbs={computedBreadcrumbs}
        extra={
          <Button icon={<ReloadOutlined />} loading={loading} onClick={loadAll}>
            刷新
          </Button>
        }
      />

      {fixedTab ? fixedTabContent : (
        <Tabs
          activeKey={activeTab}
          onChange={(key) => setActiveTab(key as MerchantCenterTab)}
          items={tabItems}
        />
      )}

      <Modal title="创建手动订单" open={manualOrderOpen} confirmLoading={manualOrderSubmitting} onOk={submitManualOrder} onCancel={() => setManualOrderOpen(false)} destroyOnClose width={560}>
        <Form form={manualOrderForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="client_order_no" label="商户单号" rules={[{ required: true, message: '请输入商户单号' }, { max: 96, message: '商户单号最长 96 个字符' }]}>
            <Input maxLength={96} />
          </Form.Item>
          <Form.Item name="sku" label="商品" rules={[{ required: true, message: '请选择商品' }]}>
            <Select
              showSearch
              loading={manualOrderProductsLoading}
              optionFilterProp="label"
              options={manualOrderProductOptions}
            />
          </Form.Item>
          <Form.Item name="quantity" label="数量" rules={[{ required: true, message: '请输入数量' }]}>
            <InputNumber min={1} precision={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="game_account" label="充值账号 / 游戏 UID" rules={[{ max: 128, message: '账号最长 128 个字符' }]}>
            <Input maxLength={128} placeholder="用于后续发货时预填" />
          </Form.Item>
          <Form.Item name="buyer_reference" label="买家标识" rules={[{ max: 128, message: '买家标识最长 128 个字符' }]}>
            <Input maxLength={128} />
          </Form.Item>
          <Form.Item name="note" label="备注" rules={[{ max: 512 }]}>
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal title="新增 API 密钥" open={apiClientOpen} onOk={submitAPIClient} onCancel={() => setApiClientOpen(false)} destroyOnClose>
        <Form form={apiClientForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="name"
            label="名称"
            rules={[{ required: true }, { max: 64, message: '名称最长 64 个字符' }]}
          >
            <Input placeholder="按用途命名，如：下单系统 / 对账脚本" maxLength={64} />
          </Form.Item>
          <Form.Item name="scopes" label="权限" rules={[{ required: true }]}>
            <Select mode="multiple" options={scopeOptions} />
          </Form.Item>
          <Form.Item name="signature_version" label="签名版本">
            <Select options={[{ value: 'v1', label: 'v1' }]} />
          </Form.Item>
          <Typography.Text type="secondary">
            建议不同用途（下单、查询、对账）分别创建密钥，便于独立禁用与审计。每个商户最多 {apiClientMax} 个。
          </Typography.Text>
        </Form>
      </Modal>

      <Modal title="API 密钥" open={!!apiCredential} onCancel={() => setApiCredential(null)} footer={<Button type="primary" onClick={() => setApiCredential(null)}>我已保存</Button>}>
        {apiCredential && <SecretBlock appKey={apiCredential.client.app_key} secret={apiCredential.secret} />}
      </Modal>

      <Modal title="回调密钥" open={!!callbackCredential} onCancel={() => setCallbackCredential(null)} footer={<Button type="primary" onClick={() => setCallbackCredential(null)}>我已保存</Button>}>
        {callbackCredential && <SecretBlock secret={callbackCredential.secret} />}
      </Modal>

      <Modal title="添加员工" open={memberOpen} onOk={submitMember} onCancel={() => setMemberOpen(false)} destroyOnClose>
        <Form form={memberForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="username" label="员工用户名" rules={[{ required: true, min: 3, message: '请输入至少 3 位用户名' }]}>
            <Input maxLength={64} />
          </Form.Item>
          <Form.Item name="password" label="初始密码" rules={[{ required: true, min: 6, message: '密码至少 6 位' }]}>
            <Input.Password maxLength={128} />
          </Form.Item>
          <Form.Item name="nickname" label="员工姓名">
            <Input maxLength={64} />
          </Form.Item>
          <Form.Item name="role" label="团队角色" rules={[{ required: true }]}>
            <Select options={roles.map((item) => ({ value: item.code, label: item.name }))} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal title={editingMember ? `编辑员工：${editingMember.user?.nickname || editingMember.user?.username || ''}` : '编辑员工'} open={!!editingMember} onOk={submitMemberEdit} onCancel={() => setEditingMember(null)} destroyOnClose>
        <Form form={memberEditForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item label="账号"><Input value={editingMember?.user?.username} disabled /></Form.Item>
          <Form.Item name="role" label="团队角色" rules={[{ required: true }]}>
            <Select options={roles.map((item) => ({ value: item.code, label: item.name }))} />
          </Form.Item>
          <Form.Item name="status" label="状态" rules={[{ required: true }]}>
            <Select options={[{ value: 1, label: '启用' }, { value: 0, label: '停用' }]} />
          </Form.Item>
          <Form.Item name="is_default" label="设为默认商户" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Form>
      </Modal>

      <Modal title={editingRole ? `编辑角色：${editingRole.name}` : '新建团队角色'} open={roleOpen} onOk={submitRole} onCancel={() => { setRoleOpen(false); setEditingRole(null) }} destroyOnClose>
        <Form form={roleForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="name" label="角色名称" rules={[{ required: true }]}><Input maxLength={64} placeholder="例如：客服" /></Form.Item>
          {!editingRole && <Form.Item name="code" label="角色编码" rules={[{ required: true, pattern: /^[a-z0-9][a-z0-9-]{1,63}$/, message: '使用 2-64 位小写字母、数字或连字符' }]}><Input maxLength={64} placeholder="例如：support" /></Form.Item>}
          <Form.Item name="permissions" label="权限"><Select mode="multiple" options={rolePermissionOptions} /></Form.Item>
        </Form>
      </Modal>
    </div>
  )
}