import { useCallback, useEffect, useMemo, useState } from 'react'
import { useLocation } from 'react-router-dom'
import {
  Button,
  Card,
  Descriptions,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Select,
  Space,
  Table,
  Tabs,
  Tag,
  Typography,
  message,
} from 'antd'
import {
  ApiOutlined,
  CopyOutlined,
  LinkOutlined,
  PlusOutlined,
  ReloadOutlined,
  WalletOutlined,
} from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import { merchantApi } from '../api'
import { formatDateTime } from '../utils/time'
import type {
  ApiClient,
  ApiCredential,
  CallbackCredential,
  CallbackSubscription,
  CreateTestOrderResult,
  FulfillmentOrder,
  Merchant,
  MerchantMember,
  MerchantProduct,
  PageResult,
  WalletAccount,
  WalletLedgerEntry,
} from '../types'

const orderStatusMap: Record<string, { color: string; text: string }> = {
  paid: { color: 'blue', text: '待发货' },
  delivering: { color: 'cyan', text: '发货中' },
  delivered: { color: 'green', text: '已交付' },
  ship_failed: { color: 'red', text: '发货失败' },
  cancelled: { color: 'default', text: '已取消' },
}

const memberRoleOptions = [
  { value: 'owner', label: '负责人' },
  { value: 'operator', label: '运营' },
  { value: 'finance', label: '财务' },
  { value: 'viewer', label: '只读' },
]

const apiClientMax = 5

const scopeOptions = [
  { value: 'products:read', label: '商品读取' },
  { value: 'orders:read', label: '订单读取' },
  { value: 'orders:write', label: '订单写入' },
  { value: 'shipping:read', label: '发货读取' },
  { value: 'wallet:read', label: '钱包读取' },
]

const eventOptions = [
  { value: 'order.created', label: '订单创建' },
  { value: 'order.shipping.updated', label: '发货更新' },
  { value: 'order.cancelled', label: '订单取消' },
]

const testOrderStatusOptions = [
  { value: 'paid', label: '已支付，可发货' },
  { value: 'ship_failed', label: '发货失败，可重试' },
]

type MerchantCenterTab = 'products' | 'orders' | 'wallet' | 'api' | 'callbacks' | 'members'

interface MerchantCenterProps {
  fixedTab?: MerchantCenterTab
  title?: string
}

export default function MerchantCenter({ fixedTab, title = '商户中心' }: MerchantCenterProps = {}) {
  const location = useLocation()
  const routeTab = useMemo(() => fixedTab ?? tabFromSearch(location.search), [fixedTab, location.search])
  const [merchant, setMerchant] = useState<Merchant | null>(null)
  const [merchantRole, setMerchantRole] = useState<MerchantMember['role']>()
  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 [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 [callbacks, setCallbacks] = useState<CallbackSubscription[]>([])
  const [members, setMembers] = useState<MerchantMember[]>([])
  const [loading, setLoading] = useState(false)
  const [productOpen, setProductOpen] = useState(false)
  const [editingProduct, setEditingProduct] = useState<MerchantProduct | null>(null)
  const [walletOpen, setWalletOpen] = useState(false)
  const [apiClientOpen, setApiClientOpen] = useState(false)
  const [apiCredential, setApiCredential] = useState<ApiCredential | null>(null)
  const [callbackOpen, setCallbackOpen] = useState(false)
  const [callbackCredential, setCallbackCredential] = useState<CallbackCredential | null>(null)
  const [memberOpen, setMemberOpen] = useState(false)
  const [testOrderOpen, setTestOrderOpen] = useState(false)
  const [testOrderProducts, setTestOrderProducts] = useState<MerchantProduct[]>([])
  const [testOrderProductsLoading, setTestOrderProductsLoading] = useState(false)
  const [testOrderResult, setTestOrderResult] = useState<CreateTestOrderResult | null>(null)
  const [productForm] = Form.useForm()
  const [walletForm] = Form.useForm()
  const [walletFilterForm] = Form.useForm()
  const [apiClientForm] = Form.useForm()
  const [callbackForm] = Form.useForm()
  const [memberForm] = Form.useForm()
  const [testOrderForm] = Form.useForm()

  const canManage = merchantRole === 'owner' || merchantRole === 'operator'
  const canFinance = merchantRole === 'owner' || merchantRole === 'finance'
  const enabledFeatures = useMemo(() => new Set(featuresToList(merchant?.features)), [merchant?.features])
  const hasFeature = useCallback((feature: string) => !merchant || enabledFeatures.has(feature), [enabledFeatures, merchant])
  const testOrderProductOptions = useMemo(() => testOrderProducts.map((item) => ({
    value: item.sku,
    label: productOptionLabel(item),
  })), [testOrderProducts])

  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),
    }))
    setTestOrderResult((prev) => prev?.order.order_no === orderNo ? {
      ...prev,
      order: { ...prev.order, ...patch },
    } : prev)
  }, [])

  const loadCurrent = useCallback(async () => {
    const data = await merchantApi.current()
    setMerchant(data.merchant)
    setMerchantRole(data.role)
    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) => {
    const data = await merchantApi.orders({ page, size })
    setOrders(data)
  }, [orders.page, orders.size])

  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 loadWallet = useCallback(async (
    page = ledger.page,
    size = ledger.size,
    role = merchantRole,
    filters?: { reference_no?: string; type?: string },
  ) => {
    const walletData = await merchantApi.wallet()
    setWallet(walletData)
    if (role === 'owner' || role === 'finance') {
      const ledgerData = await merchantApi.ledger({ page, size, ...filters })
      setLedger(ledgerData)
    } else {
      setLedger({ list: [], total: 0, page, size })
    }
  }, [ledger.page, ledger.size, merchantRole])

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

  const loadCallbacks = useCallback(async (role = merchantRole) => {
    if (role !== 'owner' && role !== 'operator') {
      setCallbacks([])
      return
    }
    const callbackData = await merchantApi.callbacks()
    setCallbacks(callbackData || [])
  }, [merchantRole])

  const loadMembers = useCallback(async (role = merchantRole) => {
    if (role !== 'owner' && role !== 'operator') {
      setMembers([])
      return
    }
    const memberData = await merchantApi.members()
    setMembers(memberData || [])
  }, [merchantRole])

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

  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.role, 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 openProductCreate = () => {
    setEditingProduct(null)
    productForm.resetFields()
    productForm.setFieldsValue({
      currency: 'POINT',
      stock: -1,
      status: 'active',
      price_amount: 0,
      cost_amount: 0,
    })
    setProductOpen(true)
  }

  const openProductEdit = (record: MerchantProduct) => {
    setEditingProduct(record)
    productForm.setFieldsValue({
      ...record,
    })
    setProductOpen(true)
  }

  const submitProduct = async () => {
    const values = await productForm.validateFields()
    try {
      const payload = {
        ...values,
      }
      if (editingProduct) {
        await merchantApi.updateProduct(editingProduct.id, payload)
        message.success('商品已更新')
      } else {
        await merchantApi.createProduct(payload)
        message.success('商品已创建')
      }
      setProductOpen(false)
      loadProducts()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '保存失败')
    }
  }

  const submitWalletAdjust = async () => {
    const values = await walletForm.validateFields()
    try {
      const walletData = await merchantApi.adjustWallet({
        amount: values.amount,
        idempotency_key: values.idempotency_key,
        note: values.note,
      })
      setWallet(walletData)
      setWalletOpen(false)
      message.success('钱包已调整')
      loadWallet()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '调整失败')
    }
  }

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

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

  const openTestOrderCreate = () => {
    testOrderForm.resetFields()
    testOrderForm.setFieldsValue({
      buyer_reference: '测试买家',
      note: '联调测试订单',
      order_status: 'paid',
    })
    setTestOrderOpen(true)
    setTestOrderProductsLoading(true)
    merchantApi.products({ page: 1, size: 100 })
      .then((data) => {
        const activeProducts = (data.list || []).filter((item) => item.status === 'active')
        setTestOrderProducts(activeProducts)
        if (activeProducts.length > 0) {
          testOrderForm.setFieldsValue({ sku: activeProducts[0].sku })
        } else {
          message.warning('没有可用商品')
        }
      })
      .catch((e) => {
        message.error(e instanceof Error ? e.message : '商品加载失败')
      })
      .finally(() => setTestOrderProductsLoading(false))
  }

  const submitTestOrder = async () => {
    const values = await testOrderForm.validateFields()
    try {
      const result = await merchantApi.createTestOrder({
        sku: values.sku,
        buyer_reference: values.buyer_reference,
        note: values.note,
        order_status: values.order_status,
      })
      setTestOrderOpen(false)
      setTestOrderResult(result)
      message.success('测试订单已创建')
      loadOrders()
    } 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.createCallback({
        name: values.name,
        url: values.url,
        events: (values.events || []).join(','),
      })
      setCallbackCredential(credential)
      setCallbackOpen(false)
      message.success('回调已创建')
      loadCallbacks()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '创建失败')
    }
  }

  const submitMember = async () => {
    const values = await memberForm.validateFields()
    try {
      await merchantApi.addMember({
        user_id: values.user_id,
        role: values.role,
        is_default: values.is_default,
      })
      setMemberOpen(false)
      message.success('成员已添加')
      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 toggleCallback = async (record: CallbackSubscription) => {
    try {
      await merchantApi.updateCallbackStatus(record.id, record.status === 'active' ? 'disabled' : 'active')
      message.success('状态已更新')
      loadCallbacks()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '更新失败')
    }
  }

  const productColumns: ColumnsType<MerchantProduct> = [
    { title: 'SKU', dataIndex: 'sku', width: 200, ellipsis: true, render: (v) => <Typography.Text code copyable={{ tooltips: false }} style={{ maxWidth: '100%' }} ellipsis>{v}</Typography.Text> },
    { title: '名称', dataIndex: 'display_name', width: 200, ellipsis: true, render: (_, r) => r.display_name || r.product?.name || '-' },
    { title: '目录编码', dataIndex: ['product', 'code'], width: 140, ellipsis: true, render: (_, r) => r.product?.code || '-' },
    { title: '售价', dataIndex: 'price_amount', width: 100, render: money },
    { title: '成本', dataIndex: 'cost_amount', width: 100, render: money },
    { title: '库存', dataIndex: 'stock', width: 80, render: (v) => (v < 0 ? '无限' : v) },
    { title: '状态', dataIndex: 'status', width: 80, render: productStatusTag },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (_, record) => canManage ? (
        <Button type="link" size="small" onClick={() => openProductEdit(record)}>编辑</Button>
      ) : '-',
    },
  ]

  const orderColumns: ColumnsType<FulfillmentOrder> = [
    {
      title: '平台订单号',
      dataIndex: 'order_no',
      width: 190,
      ellipsis: true,
      render: (v) => <Typography.Text copyable ellipsis style={{ maxWidth: '100%' }}>{v}</Typography.Text>,
    },
    { title: '商户单号', dataIndex: 'client_order_no', width: 140, ellipsis: true },
    {
      title: 'SKU',
      dataIndex: 'product_sku',
      width: 130,
      ellipsis: true,
      render: (v) => <Typography.Text code ellipsis style={{ maxWidth: '100%' }}>{v}</Typography.Text>,
    },
    { title: '商品', dataIndex: 'product_name', width: 220, ellipsis: true },
    { title: '基础金额', dataIndex: 'base_amount', width: 88, render: money },
    { title: '手续费', dataIndex: 'service_fee_amount', width: 82, render: money },
    { title: '扣款合计', dataIndex: 'amount', width: 88, render: money },
    { title: '状态', dataIndex: 'order_status', width: 92, render: orderStatusTag },
    { title: '上游单号', dataIndex: 'provider_order_no', width: 120, ellipsis: true, render: (v) => v || '-' },
    {
      title: '链接有效期',
      dataIndex: 'delivery_link_expires_at',
      width: 140,
      render: (_, record) => record.delivery_link_revoked_at ? <Tag color="red">已作废</Tag> : formatDateTime(record.delivery_link_expires_at),
    },
    { title: '时间', dataIndex: 'created_at', width: 150, render: formatDateTime },
    {
      title: '发货链接',
      key: 'delivery_link',
      width: 150,
      render: (_, record) => record.delivery_link_revoked_at ? (
        <Button type="link" size="small" onClick={() => restoreDeliveryLink(record.order_no)}>取消作废</Button>
      ) : (
        <Space size={4} wrap>
          <Button type="link" size="small" onClick={() => copyDeliveryLink(record.order_no)}>复制</Button>
          <Button type="link" size="small" onClick={() => openDeliveryLink(record.order_no)}>打开</Button>
          <Button type="link" danger size="small" onClick={() => revokeDeliveryLink(record.order_no)}>作废</Button>
        </Space>
      ),
    },
  ]

  const ledgerColumns: ColumnsType<WalletLedgerEntry> = [
    { title: '流水号', dataIndex: 'entry_no', width: 300, render: (v) => <Typography.Text code copyable={{ tooltips: false }}>{v}</Typography.Text> },
    { title: '类型', dataIndex: 'type', width: 80, render: ledgerTypeTag },
    { title: '金额', dataIndex: 'amount', width: 120, render: moneyWithSign },
    { title: '余额', dataIndex: 'balance_after', width: 120, render: money },
    { title: '关联单号', dataIndex: 'reference_no', width: 200, ellipsis: true, render: (v) => v ? <Typography.Text code ellipsis style={{ maxWidth: '100%' }}>{v}</Typography.Text> : '-' },
    { title: '备注', dataIndex: 'note', width: 150, ellipsis: { showTitle: false }, render: (v) => <Typography.Text ellipsis title={v}>{v || '-'}</Typography.Text> },
    { title: '时间', dataIndex: 'created_at', width: 170, render: formatDateTime },
  ]

  const apiClientColumns: ColumnsType<ApiClient> = [
    { title: '名称', dataIndex: 'name', width: 140, ellipsis: true },
    { title: 'App Key', dataIndex: 'app_key', width: 230, render: (v) => <Typography.Text code copyable>{v}</Typography.Text> },
    { title: '签名', dataIndex: 'signature_version', width: 80, render: (v) => <Tag>{v}</Tag> },
    { title: '权限', dataIndex: 'scopes', width: 250, render: scopesTag },
    { title: '状态', dataIndex: 'status', width: 80, render: activeStatusTag },
    { title: '最后使用', dataIndex: 'last_used_at', width: 170, render: formatDateTime },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record) => canManage ? (
        <Space size={0}>
          <Button type="link" size="small" onClick={() => toggleAPIClient(record)}>
            {record.status === 'active' ? '禁用' : '启用'}
          </Button>
          <Popconfirm
            title="删除该密钥？"
            description={record.status === 'active' ? '请先停用该密钥再删除' : '删除后不可恢复，使用该密钥的对接方将无法调用开放接口。'}
            okText="删除"
            okButtonProps={{ danger: true }}
            onConfirm={() => deleteAPIClient(record)}
          >
            <Button type="link" size="small" danger disabled={record.status === 'active'}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ) : '-',
    },
  ]

  const callbackColumns: ColumnsType<CallbackSubscription> = [
    { title: '名称', dataIndex: 'name', width: 180, ellipsis: true },
    { title: 'URL', dataIndex: 'url', ellipsis: true },
    { title: '事件', dataIndex: 'events', width: 260, ellipsis: true },
    { title: '状态', dataIndex: 'status', width: 90, render: activeStatusTag },
    { title: '创建时间', dataIndex: 'created_at', width: 180, render: formatDateTime },
    {
      title: '操作',
      key: 'action',
      width: 90,
      render: (_, record) => canManage ? (
        <Button type="link" size="small" onClick={() => toggleCallback(record)}>
          {record.status === 'active' ? '禁用' : '启用'}
        </Button>
      ) : '-',
    },
  ]

  const memberColumns: ColumnsType<MerchantMember> = [
    { title: '用户', dataIndex: ['user', 'username'], render: (_, r) => r.user?.username || `#${r.user_id}` },
    { title: '昵称', dataIndex: ['user', 'nickname'], render: (_, r) => r.user?.nickname || '-' },
    { title: '角色', dataIndex: 'role', width: 120, render: memberRoleTag },
    { title: '默认', dataIndex: 'is_default', width: 80, render: (v) => (v ? <Tag color="blue">默认</Tag> : '-') },
    { title: '状态', dataIndex: 'status', width: 90, render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>) },
  ]

  const productContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Typography.Text type="secondary">通用商品以商户 SKU 对外销售。</Typography.Text>
        {canManage && <Button type="primary" icon={<PlusOutlined />} onClick={openProductCreate}>新增商品</Button>}
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        columns={productColumns}
        dataSource={products.list}
        tableLayout="fixed"
        pagination={pageConfig(products, loadProducts)}
      />
    </Space>
  )

  const orderContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Typography.Text type="secondary">发货链接由后端生成并带签名，用户只填写游戏 UID。</Typography.Text>
        {canManage && (
          <Space>
            <Button type="primary" icon={<PlusOutlined />} onClick={openTestOrderCreate}>
              创建测试订单
            </Button>
          </Space>
        )}
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        columns={orderColumns}
        dataSource={orders.list}
        tableLayout="fixed"
        scroll={{ x: 1660 }}
        pagination={pageConfig(orders, loadOrders)}
      />
    </Space>
  )

  const walletContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }} size="large">
        <Descriptions size="small" bordered column={3}>
          <Descriptions.Item label="可用余额">{money(wallet?.available_balance ?? 0)}</Descriptions.Item>
          <Descriptions.Item label="冻结余额">{money(wallet?.frozen_balance ?? 0)}</Descriptions.Item>
          <Descriptions.Item label="币种">{wallet?.currency || 'POINT'}</Descriptions.Item>
        </Descriptions>
        {canFinance && (
          <Button
            type="primary"
            icon={<WalletOutlined />}
            onClick={() => {
              walletForm.resetFields()
              walletForm.setFieldsValue({ idempotency_key: `manual-${Date.now()}` })
              setWalletOpen(true)
            }}
          >
            调整
          </Button>
        )}
      </Space>
      {canFinance && (
        <Card size="small" style={{ background: '#fafafa' }}>
          <Form form={walletFilterForm} layout="inline" onFinish={handleWalletFilter}>
            <Form.Item name="reference_no" label="关联单号">
              <Input placeholder="店铺单号 / 充值单号" allowClear style={{ width: 220 }} />
            </Form.Item>
            <Form.Item name="type" label="收支">
              <Select placeholder="请选择" allowClear style={{ width: 120 }}>
                <Select.Option value="credit">入账</Select.Option>
                <Select.Option value="debit">扣款</Select.Option>
                <Select.Option value="refund">退款</Select.Option>
                <Select.Option value="adjust">调整</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item>
              <Space>
                <Button onClick={handleWalletFilterReset}>重置</Button>
                <Button type="primary" htmlType="submit">查询</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      )}
      {canFinance ? (
        <Table
          rowKey="id"
          loading={loading}
          columns={ledgerColumns}
          dataSource={ledger.list}
          tableLayout="fixed"
          scroll={{ x: 1300 }}
          pagination={pageConfig(ledger, (page, size) => {
            const values = walletFilterForm.getFieldsValue()
            loadWallet(page, size, merchantRole, {
              reference_no: values.reference_no || undefined,
              type: values.type || undefined,
            })
          })}
        />
      ) : (
        <Typography.Text type="secondary">当前角色可查看余额，钱包流水仅财务或负责人可见。</Typography.Text>
      )}
    </Space>
  )

  const apiKeyContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Typography.Text type="secondary">用于开放 API 调用鉴权。新 Secret 只在创建后显示一次，请及时保存。每个商户最多 {apiClientMax} 个。</Typography.Text>
        {canManage && <Button type="primary" icon={<ApiOutlined />} disabled={apiClients.length >= apiClientMax} onClick={() => {
          apiClientForm.resetFields()
          apiClientForm.setFieldsValue({ signature_version: 'v1', scopes: ['products:read', 'orders:read', 'orders:write'] })
          setApiClientOpen(true)
        }}>新增密钥（{apiClients.length}/{apiClientMax}）</Button>}
      </Space>
      <Table rowKey="id" loading={loading} columns={apiClientColumns} dataSource={apiClients} tableLayout="fixed" scroll={{ x: 1050 }} />
    </Space>
  )

  const callbackContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Typography.Text type="secondary">回调事件通过 outbox 持久化发送。</Typography.Text>
        {canManage && <Button type="primary" icon={<PlusOutlined />} onClick={() => {
          callbackForm.resetFields()
          callbackForm.setFieldsValue({ events: ['order.shipping.updated'] })
          setCallbackOpen(true)
        }}>新增回调</Button>}
      </Space>
      <Table rowKey="id" loading={loading} columns={callbackColumns} dataSource={callbacks} tableLayout="fixed" />
    </Space>
  )

  const memberContent = (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      <Space style={{ width: '100%', justifyContent: 'space-between' }}>
        <Typography.Text type="secondary">成员角色独立于平台账号角色。</Typography.Text>
        {merchantRole === 'owner' && <Button type="primary" icon={<PlusOutlined />} onClick={() => {
          memberForm.resetFields()
          memberForm.setFieldsValue({ role: 'operator' })
          setMemberOpen(true)
        }}>添加成员</Button>}
      </Space>
      <Table rowKey="id" loading={loading} columns={memberColumns} dataSource={members} tableLayout="fixed" />
    </Space>
  )

  const tabItems = [
    { key: 'products', label: '商品', disabled: !hasFeature('products'), children: productContent },
    { key: 'orders', label: '发货订单', disabled: !hasFeature('orders'), children: orderContent },
    { key: 'wallet', label: '钱包', disabled: !hasFeature('wallet'), children: walletContent },
    { key: 'api', label: 'API 密钥', disabled: !hasFeature('api'), children: apiKeyContent },
    { key: 'callbacks', label: '回调', disabled: !hasFeature('callbacks'), children: callbackContent },
    { key: 'members', label: '成员', children: memberContent },
  ]
  const fixedTabContent = tabItems.find((item) => item.key === fixedTab)?.children

  return (
    <div>
      <Space style={{ marginBottom: 16, width: '100%', justifyContent: 'space-between' }}>
        <div>
          <Typography.Title level={4} style={{ margin: 0 }}>
            {title}
          </Typography.Title>
          {!fixedTab && (
            <Typography.Text type="secondary">
              {merchant ? `${merchant.name} / ${merchant.code}` : '加载中'} · {merchantRole ? roleText(merchantRole) : '-'}
            </Typography.Text>
          )}
        </div>
        <Button icon={<ReloadOutlined />} loading={loading} onClick={loadAll}>
          刷新
        </Button>
      </Space>

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

      <Modal title={editingProduct ? '编辑商品' : '新增商品'} open={productOpen} onOk={submitProduct} onCancel={() => setProductOpen(false)} destroyOnClose width={620}>
        <Form form={productForm} layout="vertical" style={{ marginTop: 16 }}>
          {!editingProduct && (
            <>
              <Form.Item name="product_code" label="目录编码">
                <Input placeholder="已有目录编码可选填" />
              </Form.Item>
              <Form.Item name="product_name" label="商品名称" rules={[{ required: true }]}>
                <Input />
              </Form.Item>
            </>
          )}
          <Space size="middle" style={{ width: '100%' }}>
            <Form.Item name="sku" label="商户 SKU" rules={[{ required: true }]} style={{ width: 280 }}>
              <Input disabled={!!editingProduct} />
            </Form.Item>
            <Form.Item name="display_name" label="展示名" style={{ width: 280 }}>
              <Input />
            </Form.Item>
          </Space>
          <Space size="middle" style={{ width: '100%' }}>
            <Form.Item name="price_amount" label="售价（积分）" rules={[{ required: true }]} style={{ width: 180 }}>
              <InputNumber min={0} precision={0} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="cost_amount" label="成本（积分）" style={{ width: 180 }}>
              <InputNumber min={0} precision={0} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="currency" label="币种" style={{ width: 180 }}>
              <Select options={[{ value: 'POINT', label: 'POINT（积分）' }]} />
            </Form.Item>
          </Space>
          <Space size="middle" style={{ width: '100%' }}>
            <Form.Item name="stock" label="库存（-1 无限）" style={{ width: 180 }}>
              <InputNumber style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="status" label="状态" style={{ width: 180 }}>
              <Select options={[{ value: 'active', label: '上架' }, { value: 'inactive', label: '下架' }]} />
            </Form.Item>
            {!editingProduct && (
              <Form.Item name="category" label="品类" style={{ width: 180 }}>
                <Input />
              </Form.Item>
            )}
          </Space>
          <Form.Item name="fulfillment_config" label="发货配置">
            <Input.TextArea rows={3} placeholder='{"provider":"manual"}' />
          </Form.Item>
        </Form>
      </Modal>

      <Modal title="创建测试订单" open={testOrderOpen} onOk={submitTestOrder} onCancel={() => setTestOrderOpen(false)} destroyOnClose width={560}>
        <Form form={testOrderForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="sku" label="商品皮肤" rules={[{ required: true, message: '请选择商品' }]}>
            <Select
              showSearch
              loading={testOrderProductsLoading}
              optionFilterProp="label"
              options={testOrderProductOptions}
            />
          </Form.Item>
          <Form.Item name="buyer_reference" label="买家名称" rules={[{ max: 128 }]}>
            <Input />
          </Form.Item>
          <Form.Item name="order_status" label="订单状态" rules={[{ required: true }]}>
            <Select options={testOrderStatusOptions} />
          </Form.Item>
          <Form.Item name="note" label="备注" rules={[{ max: 512 }]}>
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="测试订单"
        open={!!testOrderResult}
        onCancel={() => setTestOrderResult(null)}
        footer={(
          <Space>
            <Button onClick={() => setTestOrderResult(null)}>关闭</Button>
            {testOrderResult?.order.delivery_link_revoked_at ? (
              <Button onClick={() => restoreDeliveryLink(testOrderResult?.order.order_no || '')}>取消作废</Button>
            ) : (
              <>
                <Button
                  icon={<CopyOutlined />}
                  onClick={() => copyDeliveryLink(testOrderResult?.order.order_no || '')}
                >
                  复制发货链接
                </Button>
                <Button type="primary" icon={<LinkOutlined />} onClick={() => openDeliveryLink(testOrderResult?.order.order_no || '')}>
                  打开发货页
                </Button>
                <Button danger onClick={() => revokeDeliveryLink(testOrderResult?.order.order_no || '')}>作废链接</Button>
              </>
            )}
          </Space>
        )}
      >
        {testOrderResult && (
          <Descriptions size="small" bordered column={1} style={{ marginTop: 16 }}>
            <Descriptions.Item label="订单号">
              <Typography.Text copyable>{testOrderResult.order.order_no}</Typography.Text>
            </Descriptions.Item>
            <Descriptions.Item label="SKU">
              <Typography.Text code>{testOrderResult.order.product_sku}</Typography.Text>
            </Descriptions.Item>
            <Descriptions.Item label="可发货">
              <Tag color={testOrderResult.can_ship ? 'green' : 'red'}>
                {testOrderResult.can_ship ? 'can_ship=true' : 'can_ship=false'}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="链接有效期">
              {testOrderResult.order.delivery_link_revoked_at ? <Tag color="red">已作废</Tag> : formatDateTime(testOrderResult.order.delivery_link_expires_at)}
            </Descriptions.Item>
            <Descriptions.Item label="链接状态">
              <Typography.Text type="secondary">由后端签名生成，可复制、打开或作废。</Typography.Text>
            </Descriptions.Item>
          </Descriptions>
        )}
      </Modal>

      <Modal title="钱包调整" open={walletOpen} onOk={submitWalletAdjust} onCancel={() => setWalletOpen(false)} destroyOnClose>
        <Form form={walletForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="amount" label="调整积分" rules={[{ required: true }]}>
            <InputNumber precision={0} style={{ width: '100%' }} placeholder="正数充值，负数扣减" />
          </Form.Item>
          <Form.Item name="idempotency_key" label="幂等键" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="note" label="备注">
            <Input />
          </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={callbackOpen} onOk={submitCallback} onCancel={() => setCallbackOpen(false)} destroyOnClose>
        <Form form={callbackForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="url" label="回调 URL" rules={[{ required: true }]}>
            <Input placeholder="https://example.com/callback" />
          </Form.Item>
          <Form.Item name="events" label="事件" rules={[{ required: true }]}>
            <Select mode="multiple" options={eventOptions} />
          </Form.Item>
        </Form>
      </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="user_id" label="用户 ID" rules={[{ required: true }]}>
            <InputNumber min={1} precision={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true }]}>
            <Select options={memberRoleOptions} />
          </Form.Item>
          <Form.Item name="is_default" label="默认商户">
            <Select options={[{ value: true, label: '是' }, { value: false, label: '否' }]} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

function pageConfig<T extends { page: number; size: number; total: number }>(
  data: T,
  load: (page: number, size: number) => void,
) {
  return {
    current: data.page,
    pageSize: data.size,
    total: data.total,
    showSizeChanger: true,
    showTotal: (total: number) => `共 ${total} 条`,
    onChange: load,
  }
}

function SecretBlock({ appKey, secret }: { appKey?: string; secret: string }) {
  return (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      {appKey && (
        <div>
          <Typography.Text type="secondary">App Key</Typography.Text>
          <Typography.Paragraph copyable={{ text: appKey }} code style={{ marginTop: 8 }}>{appKey}</Typography.Paragraph>
        </div>
      )}
      <div>
        <Typography.Text type="secondary">Secret</Typography.Text>
        <Typography.Paragraph copyable={{ text: secret }} code style={{ marginTop: 8 }}>{secret}</Typography.Paragraph>
      </div>
      <Button icon={<CopyOutlined />} onClick={() => navigator.clipboard.writeText(secret).then(() => message.success('已复制'))}>
        复制 Secret
      </Button>
    </Space>
  )
}

function featuresToList(features?: string) {
  const list = (features || '')
    .split(/[,\s]+/)
    .map((item) => item.trim())
    .filter(Boolean)
  return list.length > 0 ? list : ['products', 'orders', 'wallet', 'api', 'callbacks']
}

function tabFromSearch(search: string): MerchantCenterTab | null {
  const tab = new URLSearchParams(search).get('tab')
  const allowedTabs: MerchantCenterTab[] = ['products', 'orders', 'wallet', 'api', 'callbacks', 'members']
  return allowedTabs.includes(tab as MerchantCenterTab) ? tab as MerchantCenterTab : null
}

function resolveEnabledTab(current: MerchantCenterTab, features?: string): MerchantCenterTab {
  const enabled = new Set(featuresToList(features))
  const tabFeatures: Record<MerchantCenterTab, string | null> = {
    products: 'products',
    orders: 'orders',
    wallet: 'wallet',
    api: 'api',
    callbacks: 'callbacks',
    members: null,
  }
  const feature = tabFeatures[current]
  if (feature === null || enabled.has(feature)) {
    return current
  }
  return (['products', 'orders', 'wallet', 'api', 'callbacks'] as MerchantCenterTab[]).find((key) => enabled.has(key)) || 'members'
}

function money(value?: number | null) {
  return `${Number(value || 0)} 积分`
}

function moneyWithSign(value?: number | null) {
  const amount = Number(value || 0)
  const prefix = amount > 0 ? '+' : ''
  return `${prefix}${money(amount)}`
}

function productStatusTag(value: string) {
  return value === 'active' ? <Tag color="green">上架</Tag> : <Tag>下架</Tag>
}

function activeStatusTag(value: string) {
  return value === 'active' ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>
}

function productOptionLabel(item: MerchantProduct) {
  const name = item.display_name || item.product?.name || item.sku
  return name === item.sku ? item.sku : `${name} / ${item.sku}`
}

function orderStatusTag(value: string) {
  const item = orderStatusMap[value] || { color: 'default', text: value }
	return <Tag color={item.color}>{item.text}</Tag>
}

function ledgerTypeTag(value: string) {
  const map: Record<string, { color: string; text: string }> = {
    credit: { color: 'green', text: '入账' },
    debit: { color: 'red', text: '扣款' },
    refund: { color: 'purple', text: '退款' },
    adjust: { color: 'blue', text: '调整' },
  }
  const item = map[value] || { color: 'default', text: value }
  return <Tag color={item.color}>{item.text}</Tag>
}

function memberRoleTag(value: MerchantMember['role']) {
  return <Tag color={value === 'owner' ? 'gold' : 'blue'}>{roleText(value)}</Tag>
}

function scopesTag(value: string) {
  const scopes = (value || '').split(',').filter(Boolean)
  if (scopes.length === 0) {
    return '-'
  }
  return (
    <Space size={4} wrap>
      {scopes.map((s) => <Tag key={s}>{scopeLabel(s)}</Tag>)}
    </Space>
  )
}

function scopeLabel(scope: string) {
  return scopeOptions.find((item) => item.value === scope)?.label || scope
}

function roleText(value: MerchantMember['role']) {
  return memberRoleOptions.find((item) => item.value === value)?.label || value
}