import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Table, Button, Space, Tag, Popconfirm, message, Typography, Spin, Modal, Descriptions, Divider, Form, Input, Alert } from 'antd'
import { PlusOutlined, ReloadOutlined, EditOutlined, CopyOutlined } from '@ant-design/icons'
import { useTranslation } from 'react-i18next'
import { useAccountStore } from '../store/accountStore'
import type { Account } from '../types'
import { useMediaQuery } from 'react-responsive'
import { formatUSDC } from '../utils'

const { Title } = Typography

const AccountList: React.FC = () => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const { accounts, loading, fetchAccounts, deleteAccount, fetchAccountBalance, fetchAccountDetail, updateAccount } = useAccountStore()
  const [balanceMap, setBalanceMap] = useState<Record<number, { total: string; available: string; position: string }>>({})
  const [balanceLoading, setBalanceLoading] = useState<Record<number, boolean>>({})
  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [detailAccount, setDetailAccount] = useState<Account | null>(null)
  const [detailBalance, setDetailBalance] = useState<{ total: string; available: string; position: string; positions: any[] } | null>(null)
  const [detailBalanceLoading, setDetailBalanceLoading] = useState(false)
  const [editModalVisible, setEditModalVisible] = useState(false)
  const [editAccount, setEditAccount] = useState<Account | null>(null)
  const [editForm] = Form.useForm()
  const [editLoading, setEditLoading] = useState(false)
  
  useEffect(() => {
    fetchAccounts()
  }, [fetchAccounts])
  
  // 加载所有账户的余额
  useEffect(() => {
    const loadBalances = async () => {
      for (const account of accounts) {
        if (!balanceMap[account.id] && !balanceLoading[account.id]) {
          setBalanceLoading(prev => ({ ...prev, [account.id]: true }))
          try {
            const balanceData = await fetchAccountBalance(account.id)
            setBalanceMap(prev => ({ 
              ...prev, 
              [account.id]: {
                total: balanceData.totalBalance || '0',
                available: balanceData.availableBalance || '0',
                position: balanceData.positionBalance || '0'
              }
            }))
          } catch (error) {
            console.error(`获取账户 ${account.id} 余额失败:`, error)
            setBalanceMap(prev => ({ 
              ...prev, 
              [account.id]: { total: '-', available: '-', position: '-' }
            }))
          } finally {
            setBalanceLoading(prev => ({ ...prev, [account.id]: false }))
          }
        }
      }
    }
    
    if (accounts.length > 0) {
      loadBalances()
    }
  }, [accounts])
  
  const handleDelete = async (account: Account) => {
    try {
      await deleteAccount(account.id)
      message.success(t('accountList.deleteSuccess'))
    } catch (error: any) {
      message.error(error.message || t('accountList.deleteFailed'))
    }
  }
  
  const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      message.success(t('accountList.copySuccess'))
    }).catch(() => {
      message.error(t('accountList.copyFailed'))
    })
  }
  
  const handleShowDetail = async (account: Account) => {
    try {
      setDetailModalVisible(true)
      setDetailAccount(account)
      setDetailBalance(null)
      setDetailBalanceLoading(false)
      
      // 加载详情和余额
      try {
        const accountDetail = await fetchAccountDetail(account.id)
        setDetailAccount(accountDetail)
        
        // 加载余额
        setDetailBalanceLoading(true)
        try {
          const balanceData = await fetchAccountBalance(account.id)
          setDetailBalance({
            total: balanceData.totalBalance || '0',
            available: balanceData.availableBalance || '0',
            position: balanceData.positionBalance || '0',
            positions: balanceData.positions || []
          })
        } catch (error) {
          console.error('获取余额失败:', error)
          setDetailBalance(null)
        } finally {
          setDetailBalanceLoading(false)
        }
      } catch (error: any) {
        console.error('获取账户详情失败:', error)
        message.error(error.message || t('accountList.getDetailFailed'))
        setDetailModalVisible(false)
        setDetailAccount(null)
      }
    } catch (error: any) {
      console.error('打开详情失败:', error)
      message.error(t('accountList.openDetailFailed'))
      setDetailModalVisible(false)
      setDetailAccount(null)
    }
  }
  
  const handleRefreshDetailBalance = async () => {
    if (!detailAccount) return
    
    setDetailBalanceLoading(true)
    try {
      const balanceData = await fetchAccountBalance(detailAccount.id)
      setDetailBalance({
        total: balanceData.totalBalance || '0',
        available: balanceData.availableBalance || '0',
        position: balanceData.positionBalance || '0',
        positions: balanceData.positions || []
      })
      message.success(t('accountList.refreshBalanceSuccess'))
    } catch (error: any) {
      message.error(error.message || t('accountList.refreshBalanceFailed'))
    } finally {
      setDetailBalanceLoading(false)
    }
  }
  
  const handleShowEdit = async (account: Account) => {
    try {
      setEditModalVisible(true)
      setEditAccount(account)
      
      // 加载账户详情并设置表单初始值
      const accountDetail = await fetchAccountDetail(account.id)
      setEditAccount(accountDetail)
      
      editForm.setFieldsValue({
        accountName: accountDetail.accountName || '',
        apiKey: '',  // 不显示实际值，留空表示不修改
        apiSecret: '',  // 不显示实际值，留空表示不修改
        apiPassphrase: ''  // 不显示实际值，留空表示不修改
      })
    } catch (error: any) {
      console.error('打开编辑失败:', error)
      message.error(error.message || t('accountList.getDetailFailedForEdit'))
      setEditModalVisible(false)
      setEditAccount(null)
    }
  }
  
  const handleEditSubmit = async (values: any) => {
    if (!editAccount) return
    
    setEditLoading(true)
    try {
      // 构建更新请求，空字符串转换为 undefined（不修改）
      const updateData: any = {
        accountId: editAccount.id,
        accountName: values.accountName || undefined
      }
      
      // 只有非空字符串才更新 API 凭证
      if (values.apiKey && values.apiKey.trim()) {
        updateData.apiKey = values.apiKey.trim()
      }
      if (values.apiSecret && values.apiSecret.trim()) {
        updateData.apiSecret = values.apiSecret.trim()
      }
      if (values.apiPassphrase && values.apiPassphrase.trim()) {
        updateData.apiPassphrase = values.apiPassphrase.trim()
      }
      
      await updateAccount(updateData)
      
      message.success(t('accountList.updateSuccess'))
      setEditModalVisible(false)
      setEditAccount(null)
      editForm.resetFields()
      
      // 刷新账户列表
      await fetchAccounts()
      
      // 如果详情 Modal 打开着，也刷新详情
      if (detailModalVisible && detailAccount && detailAccount.id === editAccount.id) {
        const accountDetail = await fetchAccountDetail(editAccount.id)
        setDetailAccount(accountDetail)
      }
    } catch (error: any) {
      message.error(error.message || t('accountList.updateFailed'))
    } finally {
      setEditLoading(false)
    }
  }
  
  const columns = [
    {
      title: t('accountList.accountName'),
      dataIndex: 'accountName',
      key: 'accountName',
      render: (text: string, record: Account) => text || `${t('accountList.accountName')} ${record.id}`
    },
    {
      title: t('accountList.walletAddress'),
      dataIndex: 'walletAddress',
      key: 'walletAddress',
      render: (text: string) => (
        <Space>
          <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>{text}</span>
          <Button
            type="text"
            size="small"
            icon={<CopyOutlined />}
            onClick={() => handleCopy(text)}
            title={t('accountList.walletAddress')}
          />
        </Space>
      )
    },
    {
      title: t('accountList.proxyAddress'),
      dataIndex: 'proxyAddress',
      key: 'proxyAddress',
      render: (address: string) => (
        <Space>
          <span style={{ fontFamily: 'monospace', fontSize: '12px' }}>{address}</span>
          <Button
            type="text"
            size="small"
            icon={<CopyOutlined />}
            onClick={() => handleCopy(address)}
            title={t('accountList.proxyAddress')}
          />
        </Space>
      )
    },
    {
      title: t('accountList.apiCredentials'),
      key: 'apiCredentials',
      render: (_: any, record: Account) => {
        const allConfigured = record.apiKeyConfigured && record.apiSecretConfigured && record.apiPassphraseConfigured
        const partialConfigured = record.apiKeyConfigured || record.apiSecretConfigured || record.apiPassphraseConfigured
        return (
          <Tag color={allConfigured ? 'success' : partialConfigured ? 'warning' : 'default'}>
            {allConfigured ? t('accountList.fullConfig') : partialConfigured ? t('accountList.partialConfig') : t('accountList.notConfigured')}
          </Tag>
        )
      }
    },
    {
      title: t('accountList.balance'),
      dataIndex: 'balance',
      key: 'balance',
      render: (_: any, record: Account) => {
        if (balanceLoading[record.id]) {
          return <Spin size="small" />
        }
        const balanceObj = balanceMap[record.id]
        const balance = balanceObj?.total || record.balance || '-'
        return balance && balance !== '-' && typeof balance === 'string' ? `${formatUSDC(balance)} USDC` : '-'
      }
    },
    {
      title: t('accountList.activeOrders'),
      dataIndex: 'activeOrders',
      key: 'activeOrders',
      render: (_: any, record: Account) => {
        if (record.activeOrders !== undefined && record.activeOrders !== null) {
          return <Tag color={record.activeOrders > 0 ? 'orange' : 'default'}>{record.activeOrders}</Tag>
        }
        return <span style={{ color: '#999' }}>-</span>
      }
    },
    {
      title: t('accountList.action'),
      key: 'action',
      render: (_: any, record: Account) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            onClick={() => handleShowDetail(record)}
          >
            {t('accountList.detail')}
          </Button>
          <Button
            type="link"
            size="small"
            icon={<EditOutlined />}
            onClick={() => handleShowEdit(record)}
          >
            {t('accountList.edit')}
          </Button>
          <Popconfirm
            title={t('accountList.deleteConfirm')}
            description={
              record.apiKeyConfigured 
                ? t('accountList.deleteConfirmDesc')
                : t('accountList.deleteConfirmDescSimple')
            }
            onConfirm={() => handleDelete(record)}
            okText={t('accountList.deleteConfirmOk')}
            cancelText={t('common.cancel')}
            okButtonProps={{ danger: true }}
          >
            <Button type="link" size="small" danger>
              {t('accountList.delete')}
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  
  const mobileColumns = [
    {
      title: t('accountList.accountName'),
      key: 'info',
      render: (_: any, record: Account) => {
        const allConfigured = record.apiKeyConfigured && record.apiSecretConfigured && record.apiPassphraseConfigured
        const partialConfigured = record.apiKeyConfigured || record.apiSecretConfigured || record.apiPassphraseConfigured
        
        return (
          <div style={{ padding: '8px 0' }}>
            <div style={{ 
              fontWeight: 'bold', 
              marginBottom: '8px',
              fontSize: '16px'
            }}>
              {record.accountName || `${t('accountList.accountName')} ${record.id}`}
            </div>
            <div style={{ 
              fontSize: '11px', 
              color: '#666', 
              marginBottom: '8px',
              wordBreak: 'break-all',
              fontFamily: 'monospace',
              lineHeight: '1.4'
            }}>
              <div style={{ marginBottom: '4px' }}>
                <strong>{t('accountList.walletAddress')}:</strong> {record.walletAddress}
                <Button
                  type="text"
                  size="small"
                  icon={<CopyOutlined />}
                  onClick={() => handleCopy(record.walletAddress)}
                  style={{ marginLeft: '4px', padding: '0 4px' }}
                />
              </div>
              <div>
                <strong>{t('accountList.proxyAddress')}:</strong> {record.proxyAddress}
                <Button
                  type="text"
                  size="small"
                  icon={<CopyOutlined />}
                  onClick={() => handleCopy(record.proxyAddress)}
                  style={{ marginLeft: '4px', padding: '0 4px' }}
                />
              </div>
            </div>
            <div style={{ marginBottom: '8px', display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
              <Tag color={allConfigured ? 'success' : partialConfigured ? 'warning' : 'default'} style={{ margin: 0 }}>
                {allConfigured ? t('accountList.fullConfig') : partialConfigured ? t('accountList.partialConfig') : t('accountList.notConfigured')}
              </Tag>
            </div>
            <div style={{ 
              fontSize: '14px',
              fontWeight: '500',
              color: '#1890ff'
            }}>
              {t('accountList.totalBalance')}: {balanceLoading[record.id] ? (
                <Spin size="small" style={{ marginLeft: '4px' }} />
              ) : balanceMap[record.id]?.total && balanceMap[record.id].total !== '-' ? (
                `${formatUSDC(balanceMap[record.id].total)} USDC`
              ) : (
                '-'
              )}
            </div>
            {balanceMap[record.id] && balanceMap[record.id].available !== '-' && (
              <div style={{ 
                fontSize: '12px',
                color: '#666',
                marginTop: '4px'
              }}>
                {t('accountList.available')}: {formatUSDC(balanceMap[record.id].available)} USDC | {t('accountList.position')}: {formatUSDC(balanceMap[record.id].position)} USDC
              </div>
            )}
            {(record.activeOrders !== undefined && record.activeOrders !== null) && (
              <div style={{ 
                fontSize: '12px',
                color: '#666',
                marginTop: '4px',
                display: 'flex',
                alignItems: 'center',
                gap: '8px'
              }}>
                {t('accountList.activeOrders')}: <Tag color={record.activeOrders > 0 ? 'orange' : 'default'} style={{ margin: 0 }}>{record.activeOrders}</Tag>
              </div>
            )}
          </div>
        )
      }
    },
    {
      title: t('accountList.action'),
      key: 'action',
      width: 100,
      render: (_: any, record: Account) => (
        <Space direction="vertical" size="small" style={{ width: '100%' }}>
          <Button
            type="primary"
            size="small"
            block
            onClick={() => handleShowDetail(record)}
            style={{ minHeight: '32px' }}
          >
            {t('accountList.viewDetail')}
          </Button>
          <Button
            size="small"
            block
            icon={<EditOutlined />}
            onClick={() => handleShowEdit(record)}
            style={{ minHeight: '32px' }}
          >
            {t('accountList.edit')}
          </Button>
          <Popconfirm
            title={t('accountList.deleteConfirm')}
            description={
              record.apiKeyConfigured 
                ? t('accountList.deleteConfirmDesc')
                : t('accountList.deleteConfirmDescSimple')
            }
            onConfirm={() => handleDelete(record)}
            okText={t('accountList.deleteConfirmOk')}
            cancelText={t('common.cancel')}
            okButtonProps={{ danger: true }}
          >
            <Button 
              size="small" 
              block 
              danger
              style={{ minHeight: '32px' }}
            >
              {t('accountList.delete')}
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  
  return (
    <div style={{ 
      padding: isMobile ? '0' : undefined,
      margin: isMobile ? '0 -8px' : undefined
    }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: isMobile ? '12px' : '16px',
        flexWrap: 'wrap',
        gap: '12px',
        padding: isMobile ? '0 8px' : '0'
      }}>
        <Title level={isMobile ? 3 : 2} style={{ margin: 0, fontSize: isMobile ? '18px' : undefined }}>
          {t('accountList.title')}
        </Title>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => navigate('/accounts/import')}
          size={isMobile ? 'middle' : 'large'}
          block={isMobile}
          style={isMobile ? { minHeight: '44px' } : undefined}
        >
          {t('accountList.importAccount')}
        </Button>
      </div>
      
      <Card style={{ 
        margin: isMobile ? '0 -8px' : '0',
        borderRadius: isMobile ? '0' : undefined
      }}>
        {isMobile ? (
          <Table
            dataSource={accounts}
            columns={mobileColumns}
            rowKey="id"
            loading={loading}
            pagination={{
              pageSize: 10,
              showSizeChanger: false,
              simple: true,
              size: 'small'
            }}
            scroll={{ x: 'max-content' }}
            size="small"
            style={{ fontSize: '14px' }}
          />
        ) : (
          <Table
            dataSource={accounts}
            columns={columns}
            rowKey="id"
            loading={loading}
            pagination={{
              pageSize: 20,
              showSizeChanger: true
            }}
          />
        )}
      </Card>
      
      {/* 账户详情 Modal */}
      <Modal
        title={detailAccount ? (detailAccount.accountName || `${t('accountList.accountName')} ${detailAccount.id}`) : t('accountList.accountDetail')}
        open={detailModalVisible}
        onCancel={() => {
          setDetailModalVisible(false)
          setDetailAccount(null)
          setDetailBalance(null)
        }}
        footer={[
          <Button 
            key="refresh" 
            icon={<ReloadOutlined />} 
            onClick={handleRefreshDetailBalance} 
            loading={detailBalanceLoading}
            disabled={!detailAccount}
          >
            {t('accountList.refreshBalance')}
          </Button>,
          <Button 
            key="edit" 
            type="primary"
            icon={<EditOutlined />} 
            onClick={() => {
              if (detailAccount) {
                setDetailModalVisible(false)
                handleShowEdit(detailAccount)
              }
            }}
            disabled={!detailAccount}
          >
            {t('accountList.edit')}
          </Button>,
          <Button 
            key="close" 
            onClick={() => {
              setDetailModalVisible(false)
              setDetailAccount(null)
              setDetailBalance(null)
            }}
          >
            {t('common.close')}
          </Button>
        ]}
        width={isMobile ? '95%' : 800}
        style={{ top: isMobile ? 20 : 50 }}
        destroyOnClose
        maskClosable
        closable
      >
        {detailAccount ? (
          <div>
            <Descriptions
              column={isMobile ? 1 : 2}
              bordered
              size={isMobile ? 'small' : 'middle'}
            >
              <Descriptions.Item label={t('accountList.accountId')}>
                {detailAccount.id}
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.accountName')}>
                {detailAccount.accountName || '-'}
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.walletAddress')} span={isMobile ? 1 : 2}>
                <Space>
                  <span style={{ 
                    fontFamily: 'monospace', 
                    fontSize: isMobile ? '11px' : '13px',
                    wordBreak: 'break-all',
                    lineHeight: '1.4',
                    display: 'block'
                  }}>
                    {detailAccount.walletAddress || '-'}
                  </span>
                  <Button
                    type="text"
                    size="small"
                    icon={<CopyOutlined />}
                    onClick={() => handleCopy(detailAccount.walletAddress || '')}
                    title={t('accountList.walletAddress')}
                  />
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.proxyAddress')} span={isMobile ? 1 : 2}>
                <Space>
                  <span style={{ 
                    fontFamily: 'monospace', 
                    fontSize: isMobile ? '11px' : '13px',
                    wordBreak: 'break-all',
                    lineHeight: '1.4',
                    display: 'block'
                  }}>
                    {detailAccount.proxyAddress || '-'}
                  </span>
                  <Button
                    type="text"
                    size="small"
                    icon={<CopyOutlined />}
                    onClick={() => handleCopy(detailAccount.proxyAddress || '')}
                    title={t('accountList.proxyAddress')}
                  />
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.totalBalance')} span={isMobile ? 1 : 2}>
                {detailBalanceLoading ? (
                  <Spin size="small" />
                ) : detailBalance ? (
                  <span style={{ fontWeight: 'bold', color: '#1890ff', fontSize: '16px' }}>
                    {formatUSDC(detailBalance.total)} USDC
                  </span>
                ) : (
                  <span style={{ color: '#999' }}>-</span>
                )}
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.available')}>
                {detailBalanceLoading ? (
                  <Spin size="small" />
                ) : detailBalance ? (
                  <span style={{ color: '#52c41a' }}>
                    {formatUSDC(detailBalance.available)} USDC
                  </span>
                ) : (
                  <span style={{ color: '#999' }}>-</span>
                )}
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.position')}>
                {detailBalanceLoading ? (
                  <Spin size="small" />
                ) : detailBalance ? (
                  <span style={{ color: '#1890ff' }}>
                    {formatUSDC(detailBalance.position)} USDC
                  </span>
                ) : (
                  <span style={{ color: '#999' }}>-</span>
                )}
              </Descriptions.Item>
            </Descriptions>
            
            <Divider />
            
            <Descriptions
              column={isMobile ? 1 : 2}
              bordered
              size={isMobile ? 'small' : 'middle'}
              title={t('accountList.apiCredentials')}
            >
              <Descriptions.Item label={t('accountList.apiKey')}>
                <Tag color={detailAccount.apiKeyConfigured ? 'success' : 'default'}>
                  {detailAccount.apiKeyConfigured ? t('accountList.configured') : t('accountList.notConfiguredStatus')}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.apiSecret')}>
                <Tag color={detailAccount.apiSecretConfigured ? 'success' : 'default'}>
                  {detailAccount.apiSecretConfigured ? t('accountList.configured') : t('accountList.notConfiguredStatus')}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.apiPassphrase')}>
                <Tag color={detailAccount.apiPassphraseConfigured ? 'success' : 'default'}>
                  {detailAccount.apiPassphraseConfigured ? t('accountList.configured') : t('accountList.notConfiguredStatus')}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label={t('accountList.configStatus')}>
                {detailAccount.apiKeyConfigured && detailAccount.apiSecretConfigured && detailAccount.apiPassphraseConfigured ? (
                  <Tag color="success">{t('accountList.fullConfig')}</Tag>
                ) : (
                  <Tag color="warning">{t('accountList.partialConfig')}</Tag>
                )}
              </Descriptions.Item>
            </Descriptions>
            
            {(detailAccount.totalOrders !== undefined || detailAccount.totalPnl !== undefined || 
              detailAccount.activeOrders !== undefined || 
              detailAccount.completedOrders !== undefined || detailAccount.positionCount !== undefined) && (
              <>
                <Divider />
                <Descriptions
                  column={isMobile ? 1 : 2}
                  bordered
                  size={isMobile ? 'small' : 'middle'}
                  title={t('accountList.statistics')}
                >
                  {detailAccount.totalOrders !== undefined && (
                    <Descriptions.Item label={t('accountList.totalOrders')}>
                      {detailAccount.totalOrders}
                    </Descriptions.Item>
                  )}
                  {detailAccount.activeOrders !== undefined && (
                    <Descriptions.Item label={t('accountList.activeOrdersCount')}>
                      <Tag color={detailAccount.activeOrders > 0 ? 'orange' : 'default'}>{detailAccount.activeOrders}</Tag>
                    </Descriptions.Item>
                  )}
                  {detailAccount.completedOrders !== undefined && (
                    <Descriptions.Item label={t('accountList.completedOrders')}>
                      <Tag color="success">{detailAccount.completedOrders}</Tag>
                    </Descriptions.Item>
                  )}
                  {detailAccount.positionCount !== undefined && (
                    <Descriptions.Item label={t('accountList.positionCount')}>
                      <Tag color={detailAccount.positionCount > 0 ? 'blue' : 'default'}>{detailAccount.positionCount}</Tag>
                    </Descriptions.Item>
                  )}
                  {detailAccount.totalPnl !== undefined && (
                    <Descriptions.Item label={t('accountList.totalPnl')}>
                      <span style={{ 
                        fontWeight: 'bold',
                        color: detailAccount.totalPnl && detailAccount.totalPnl.startsWith('-') ? '#ff4d4f' : '#52c41a'
                      }}>
                        {formatUSDC(detailAccount.totalPnl)} USDC
                      </span>
                    </Descriptions.Item>
                  )}
                </Descriptions>
              </>
            )}
          </div>
        ) : (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <Spin size="large" />
            <div style={{ marginTop: '16px' }}>{t('accountList.loading')}</div>
          </div>
        )}
      </Modal>
      
      {/* 编辑账户 Modal */}
      <Modal
        title={editAccount ? `${t('accountList.editAccount')} - ${editAccount.accountName || `${t('accountList.accountName')} ${editAccount.id}`}` : t('accountList.editAccount')}
        open={editModalVisible}
        onCancel={() => {
          setEditModalVisible(false)
          setEditAccount(null)
          editForm.resetFields()
        }}
        footer={null}
        width={isMobile ? '95%' : 600}
        style={{ top: isMobile ? 20 : 50 }}
        destroyOnClose
        maskClosable
        closable
      >
        {editAccount ? (
          <Form
            form={editForm}
            layout="vertical"
            onFinish={handleEditSubmit}
            size={isMobile ? 'middle' : 'large'}
          >
            <Alert
              message={t('accountList.editTip')}
              description={t('accountList.editTipDesc')}
              type="info"
              showIcon
              style={{ marginBottom: '24px' }}
            />
            
            <Form.Item
              label={t('accountList.accountName')}
              name="accountName"
            >
              <Input placeholder={t('accountList.accountNamePlaceholder')} />
            </Form.Item>
            
            <Form.Item
              label={t('accountList.apiKey')}
              name="apiKey"
              help={t('accountList.leaveEmptyToNotModify')}
            >
              <Input.Password placeholder={t('accountList.leaveEmptyToNotModify')} />
            </Form.Item>
            
            <Form.Item
              label={t('accountList.apiSecret')}
              name="apiSecret"
              help={t('accountList.leaveEmptyToNotModify')}
            >
              <Input.Password placeholder={t('accountList.leaveEmptyToNotModify')} />
            </Form.Item>
            
            <Form.Item
              label={t('accountList.apiPassphrase')}
              name="apiPassphrase"
              help={t('accountList.leaveEmptyToNotModify')}
            >
              <Input.Password placeholder={t('accountList.leaveEmptyToNotModify')} />
            </Form.Item>
            
            <Form.Item>
              <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
                <Button 
                  onClick={() => {
                    setEditModalVisible(false)
                    setEditAccount(null)
                    editForm.resetFields()
                  }}
                  size={isMobile ? 'middle' : 'large'}
                  style={isMobile ? { minHeight: '44px' } : undefined}
                >
                  {t('common.cancel')}
                </Button>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={editLoading}
                  size={isMobile ? 'middle' : 'large'}
                  style={isMobile ? { minHeight: '44px' } : undefined}
                >
                  {t('common.save')}
                </Button>
              </Space>
            </Form.Item>
          </Form>
        ) : (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            <Spin size="large" />
            <div style={{ marginTop: '16px' }}>{t('accountList.loading')}</div>
          </div>
        )}
      </Modal>
    </div>
  )
}

export default AccountList