'use client'

import { useEffect, useState, useCallback } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { 
  PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend,
} from 'recharts'
import { 
  Wallet, TrendingUp, TrendingDown, Plus, ArrowUpRight, ArrowDownRight,
  Bitcoin, Building2, Globe2, RefreshCw, DollarSign, Search, Check,
  Download, Upload, Trash2, Edit,
} from 'lucide-react'
import { 
  fetchAccounts, fetchTransactions, fetchPositions,
  fetchSecurities, createTransaction, deleteTransaction, updateTransaction, formatCurrency, formatPercent, 
  marketLabels, transactionTypeLabels
} from '@/lib/api'
import { Account, Position, Transaction, MarketType, TransactionType, Security } from '@/types'
import { toast } from 'sonner'
import { 
  exportTransactionsToCSV, exportPositionsToCSV, downloadCSV,
  TRANSACTION_IMPORT_TEMPLATE, parseImportCSV, validateImportTransaction, ImportTransaction
} from '@/lib/import-export'

// 市场图标映射
const marketIcons: Record<MarketType, React.ReactNode> = {
  US: <Globe2 className="h-4 w-4" />,
  CN: <Building2 className="h-4 w-4" />,
  HK: <Building2 className="h-4 w-4" />,
  CRYPTO: <Bitcoin className="h-4 w-4" />,
}

// 市场颜色配置
const marketColors: Record<MarketType, string> = {
  US: '#3b82f6',
  CN: '#ef4444',
  HK: '#f97316',
  CRYPTO: '#eab308',
}

// 持仓分析数据结构
interface PositionAnalytics {
  symbol: string
  name: string
  marketType: string
  accountName: string
  quantity: number
  avgCost: number
  currentPrice: number
  change: number
  changePercent: number
  costBasis: number
  marketValue: number
  marketValueUSD: number
  pnl: number
  pnlPercent: number
  pnlUSD: number
  currency: string
  isCrypto: boolean
}

// 分析汇总数据结构
interface AnalyticsSummary {
  totalCostBasis: number
  totalMarketValue: number
  totalPnL: number
  totalPnLPercent: number
  positionCount: number
}

// 货币转换函数（以 USD 为基准）
const EXCHANGE_RATES: Record<string, number> = {
  USD: 1,
  CNY: 7.24,  // 1 USD = 7.24 CNY
  HKD: 7.78,  // 1 USD = 7.78 HKD
}

function convertCurrency(amount: number, from: string, to: string): number {
  if (from === to) return amount
  // 先转换为 USD，再转换为目标货币
  const usdAmount = amount / EXCHANGE_RATES[from]
  return usdAmount * EXCHANGE_RATES[to]
}

// 主页面组件
export default function Dashboard() {
  // 状态定义
  const [accounts, setAccounts] = useState<Account[]>([])
  const [transactions, setTransactions] = useState<Transaction[]>([])
  const [positions, setPositions] = useState<Position[]>([])
  const [securities, setSecurities] = useState<Security[]>([])
  const [analytics, setAnalytics] = useState<{ prices: Record<string, any>; positions: PositionAnalytics[]; summary: AnalyticsSummary } | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedAccountId, setSelectedAccountId] = useState<string>('')
  const [showTxDialog, setShowTxDialog] = useState(false)
  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
  const [showImportDialog, setShowImportDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [positionToDelete, setPositionToDelete] = useState<PositionAnalytics | null>(null)
  const [symbolSearch, setSymbolSearch] = useState('')
  const [filteredSecurities, setFilteredSecurities] = useState<Security[]>([])
  const [importFile, setImportFile] = useState<File | null>(null)
  const [importData, setImportData] = useState<ImportTransaction[]>([])
  
  // 显示货币状态（默认 CNY）
  const [displayCurrency, setDisplayCurrency] = useState<'CNY' | 'USD' | 'HKD'>('CNY')
  
  // 交易记录删除状态
  const [transactionToDelete, setTransactionToDelete] = useState<Transaction | null>(null)
  const [showDeleteTxDialog, setShowDeleteTxDialog] = useState(false)
  
  // 交易记录编辑状态
  const [transactionToEdit, setTransactionToEdit] = useState<Transaction | null>(null)
  const [showEditTxDialog, setShowEditTxDialog] = useState(false)
  const [editTxForm, setEditTxForm] = useState({
    type: 'BUY' as TransactionType,
    symbol: '',
    quantity: '',
    price: '',
    amount: '',
    fee: '0',
    currency: 'USD',
    notes: '',
    executedAt: new Date().toISOString().slice(0, 16),
  })
  
  // 交易表单状态
  const [txForm, setTxForm] = useState({
    type: 'BUY' as TransactionType,
    symbol: '',
    quantity: '',
    price: '',
    amount: '', // 仅用于出金/入金
    fee: '0',
    currency: 'USD',
    notes: '',
    executedAt: new Date().toISOString().slice(0, 16),
  })

  // 获取当前选中的账户对象
  const selectedAccount = accounts.find(a => a.id === selectedAccountId)

  // 加载数据
  const loadData = useCallback(async () => {
    try {
      setLoading(true)
      // 并行加载所有数据
      const [accountsData, transactionsData, positionsData, securitiesData, analyticsData] = await Promise.all([
        fetchAccounts(),
        fetchTransactions({ limit: 50 }),
        fetchPositions(),
        fetchSecurities(),
        fetch('/api/dashboard/analytics').then(r => r.json()).catch(() => null),
      ])
      
      setAccounts(accountsData)
      setTransactions(transactionsData.data || [])
      setPositions(positionsData)
      setSecurities(securitiesData)
      setAnalytics(analyticsData)
      
      // 默认选中第一个账户
      if (accountsData.length > 0 && !selectedAccountId) {
        setSelectedAccountId(accountsData[0].id)
      }
    } catch (error) {
      toast.error('加载数据失败')
    } finally {
      setLoading(false)
    }
  }, [selectedAccountId])

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

  // 搜索证券（根据输入实时过滤）
  useEffect(() => {
    if (symbolSearch.length >= 1) {
      const filtered = securities.filter(s => 
        s.symbol.toLowerCase().includes(symbolSearch.toLowerCase()) ||
        s.name.toLowerCase().includes(symbolSearch.toLowerCase())
      ).slice(0, 8)
      setFilteredSecurities(filtered)
    } else {
      setFilteredSecurities([])
    }
  }, [symbolSearch, securities])

  // 获取证券显示文本（代码+名称）
  const getSecurityDisplayText = (symbol: string) => {
    if (!symbol) return ''
    const sec = securities.find(s => s.symbol === symbol)
    return sec ? `${sec.symbol} ${sec.name}` : symbol
  }

  // 选择证券后自动填充价格和币种
  const handleSelectSecurity = (symbol: string) => {
    const price = analytics?.prices[symbol]?.price || 0
    const sec = securities.find(s => s.symbol === symbol)
    setTxForm(prev => ({
      ...prev,
      symbol,
      price: price > 0 ? price.toString() : prev.price,
      currency: sec?.currency || prev.currency,
    }))
    setSymbolSearch('')
    setFilteredSecurities([])
  }

  // 当数量或价格变化时，自动计算成交总额
  const calculatedAmount = txForm.quantity && txForm.price 
    ? (parseFloat(txForm.quantity) * parseFloat(txForm.price)).toFixed(2)
    : ''

  // 提交交易记录
  const handleSubmitTx = async () => {
    try {
      if (!selectedAccountId) {
        toast.error('请先选择账户')
        return
      }

      const amount = txForm.quantity && txForm.price 
        ? (parseFloat(txForm.quantity) * parseFloat(txForm.price)).toFixed(2)
        : txForm.amount

      await createTransaction({
        accountId: selectedAccountId,
        type: txForm.type,
        symbol: txForm.symbol || undefined,
        quantity: txForm.quantity ? parseFloat(txForm.quantity) : undefined,
        price: txForm.price ? parseFloat(txForm.price) : undefined,
        amount: parseFloat(amount || '0'),
        fee: parseFloat(txForm.fee) || 0,
        currency: txForm.currency,
        notes: txForm.notes || undefined,
        executedAt: txForm.executedAt,
      })
      toast.success('交易记录成功')
      setShowTxDialog(false)
      setShowConfirmDialog(false)
      resetTxForm()
      loadData()
    } catch (error) {
      toast.error('创建交易失败')
    }
  }

  // 删除持仓
  const handleDeletePosition = async () => {
    if (!positionToDelete) return
    
    try {
      // 通过卖出全部来删除持仓
      const position = positions.find(p => p.symbol === positionToDelete.symbol)
      if (!position) {
        toast.error('未找到持仓记录')
        return
      }

      await createTransaction({
        accountId: selectedAccountId || position.accountId,
        type: 'SELL',
        symbol: positionToDelete.symbol,
        quantity: parseFloat(positionToDelete.quantity.toString()),
        price: parseFloat(positionToDelete.currentPrice.toString()),
        amount: parseFloat((positionToDelete.quantity * positionToDelete.currentPrice).toFixed(2)),
        fee: 0,
        currency: positionToDelete.currency,
        notes: '删除持仓',
        executedAt: new Date().toISOString(),
      })
      
      toast.success('持仓已删除')
      setShowDeleteDialog(false)
      setPositionToDelete(null)
      loadData()
    } catch (error) {
      toast.error('删除持仓失败')
    }
  }

  // 打开删除确认对话框
  const openDeleteDialog = (pos: PositionAnalytics) => {
    setPositionToDelete(pos)
    setShowDeleteDialog(true)
  }

  // 打开删除交易记录对话框
  const openDeleteTxDialog = (tx: Transaction) => {
    setTransactionToDelete(tx)
    setShowDeleteTxDialog(true)
  }

  // 删除交易记录
  const handleDeleteTransaction = async () => {
    if (!transactionToDelete) return
    
    try {
      await deleteTransaction(transactionToDelete.id)
      toast.success('交易记录已删除')
      setShowDeleteTxDialog(false)
      setTransactionToDelete(null)
      loadData()
    } catch (error) {
      toast.error('删除交易记录失败')
    }
  }

  // 打开编辑交易记录对话框
  const openEditTxDialog = (tx: Transaction) => {
    setTransactionToEdit(tx)
    setEditTxForm({
      type: tx.type,
      symbol: tx.symbol || '',
      quantity: tx.quantity ? parseFloat(tx.quantity.toString()).toString() : '',
      price: tx.price ? parseFloat(tx.price.toString()).toString() : '',
      amount: parseFloat(tx.amount.toString()).toString(),
      fee: parseFloat(tx.fee.toString()).toString(),
      currency: tx.currency,
      notes: tx.notes || '',
      executedAt: new Date(tx.executedAt).toISOString().slice(0, 16),
    })
    setShowEditTxDialog(true)
  }

  // 提交编辑交易记录
  const handleEditTransaction = async () => {
    if (!transactionToEdit) return

    try {
      const amount = editTxForm.quantity && editTxForm.price 
        ? (parseFloat(editTxForm.quantity) * parseFloat(editTxForm.price)).toFixed(2)
        : editTxForm.amount

      await updateTransaction(transactionToEdit.id, {
        type: editTxForm.type,
        symbol: editTxForm.symbol || undefined,
        quantity: editTxForm.quantity ? parseFloat(editTxForm.quantity) : undefined,
        price: editTxForm.price ? parseFloat(editTxForm.price) : undefined,
        amount: parseFloat(amount || '0'),
        fee: parseFloat(editTxForm.fee) || 0,
        currency: editTxForm.currency,
        notes: editTxForm.notes || undefined,
        executedAt: editTxForm.executedAt,
      })
      toast.success('交易记录已更新')
      setShowEditTxDialog(false)
      setTransactionToEdit(null)
      loadData()
    } catch (error) {
      toast.error('更新交易记录失败')
    }
  }

  // 重置交易表单
  const resetTxForm = () => {
    setTxForm({
      type: 'BUY',
      symbol: '',
      quantity: '',
      price: '',
      amount: '',
      fee: '0',
      currency: selectedAccount?.baseCurrency || 'USD',
      notes: '',
      executedAt: new Date().toISOString().slice(0, 16),
    })
  }

  // 打开交易对话框
  const openTxDialog = () => {
    resetTxForm()
    setShowTxDialog(true)
  }

  // 获取确认对话框显示信息
  const getConfirmInfo = () => {
    const typeLabel = transactionTypeLabels[txForm.type]
    const symbolLabel = txForm.symbol ? `${txForm.symbol} ` : ''
    const qtyLabel = txForm.quantity ? `${txForm.quantity}股 ` : ''
    const priceLabel = txForm.price ? `@ ${formatCurrency(parseFloat(txForm.price), txForm.currency)}` : ''
    const total = txForm.quantity && txForm.price 
      ? (parseFloat(txForm.quantity) * parseFloat(txForm.price)).toFixed(2)
      : txForm.amount
    
    return {
      account: selectedAccount?.name || '未选择',
      market: selectedAccount ? marketLabels[selectedAccount.marketType] : '',
      action: `${typeLabel} ${symbolLabel}${qtyLabel}${priceLabel}`,
      total: total ? `合计 ${formatCurrency(parseFloat(total), txForm.currency)}` : '',
      fee: txForm.fee && parseFloat(txForm.fee) > 0 ? `手续费: ${formatCurrency(parseFloat(txForm.fee), txForm.currency)}` : '',
      time: new Date(txForm.executedAt).toLocaleString('zh-CN'),
    }
  }

  // 导出交易记录为 CSV
  const handleExportTransactions = () => {
    const csv = exportTransactionsToCSV(transactions)
    const date = new Date().toISOString().slice(0, 10)
    downloadCSV(csv, `transactions_${date}.csv`)
    toast.success('交易记录已导出')
  }

  // 导出持仓记录为 CSV
  const handleExportPositions = () => {
    const csv = exportPositionsToCSV(positions.map(p => ({
      ...p,
      name: analytics?.positions?.find(ap => ap.symbol === p.symbol)?.name || p.symbol,
      currentPrice: analytics?.prices[p.symbol]?.price || parseFloat(p.averageCost),
      value: parseFloat(p.quantity) * (analytics?.prices[p.symbol]?.price || parseFloat(p.averageCost)),
      valueInUSD: parseFloat(p.quantity) * (analytics?.prices[p.symbol]?.price || parseFloat(p.averageCost)),
      pnl: 0,
      pnlPercent: 0,
    })))
    const date = new Date().toISOString().slice(0, 10)
    downloadCSV(csv, `positions_${date}.csv`)
    toast.success('持仓记录已导出')
  }

  // 下载导入模板 CSV
  const handleDownloadTemplate = () => {
    downloadCSV(TRANSACTION_IMPORT_TEMPLATE, 'transaction_import_template.csv')
  }

  // 处理文件导入
  const handleFileImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    setImportFile(file)
    
    const reader = new FileReader()
    reader.onload = (event) => {
      const content = event.target?.result as string
      const { headers, rows } = parseImportCSV(content)
      // 验证每一行数据
      const validated = rows.map(row => validateImportTransaction(row, headers))
      setImportData(validated)
    }
    reader.readAsText(file)
  }

  // 执行批量导入
  const handleExecuteImport = async () => {
    if (!selectedAccountId) {
      toast.error('请先选择导入目标账户')
      return
    }

    const validTxs = importData.filter(tx => tx.errors.length === 0)
    if (validTxs.length === 0) {
      toast.error('没有有效的交易记录')
      return
    }

    try {
      const response = await fetch('/api/import/transactions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          transactions: validTxs.map(tx => ({
            type: tx.type,
            symbol: tx.symbol || null,
            quantity: tx.quantity || null,
            price: tx.price || null,
            amount: tx.amount,
            fee: tx.fee || '0',
            currency: tx.currency,
            notes: tx.notes || null,
            executedAt: tx.executedAt,
          })),
          accountId: selectedAccountId,
        }),
      })

      const result = await response.json()
      toast.success(`导入完成: ${result.success} 成功, ${result.failed} 失败`)
      setShowImportDialog(false)
      setImportData([])
      setImportFile(null)
      loadData()
    } catch (error) {
      toast.error('导入失败')
    }
  }

  // 市场分布数据（用于饼图）
  const marketDistribution = analytics?.summary ? [
    { name: '美股', value: analytics.summary.totalMarketValue * 0.6, color: marketColors.US },
    { name: 'A股', value: analytics.summary.totalMarketValue * 0.2, color: marketColors.CN },
    { name: '港股', value: analytics.summary.totalMarketValue * 0.15, color: marketColors.HK },
    { name: '加密', value: analytics.summary.totalMarketValue * 0.05, color: marketColors.CRYPTO },
  ].filter(item => item.value > 0) : []

  // 加载中状态
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background">
      {/* 顶部导航栏 */}
      <header className="border-b bg-card/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Wallet className="h-6 w-6 text-primary" />
            <h1 className="text-xl font-bold">投资持仓管理</h1>
          </div>
          <div className="flex items-center gap-2">
            {/* 显示货币选择 */}
            <Select value={displayCurrency} onValueChange={(v) => setDisplayCurrency(v as 'CNY' | 'USD' | 'HKD')}>
              <SelectTrigger className="w-[100px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="CNY">CNY ¥</SelectItem>
                <SelectItem value="USD">USD $</SelectItem>
                <SelectItem value="HKD">HKD $</SelectItem>
              </SelectContent>
            </Select>
            {/* 账户选择下拉框 */}
            <Select value={selectedAccountId} onValueChange={(v) => v && setSelectedAccountId(v)}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="选择账户">
                  {selectedAccount ? (
                    <div className="flex items-center gap-2">
                      {marketIcons[selectedAccount.marketType]}
                      <span>{selectedAccount.name}</span>
                    </div>
                  ) : '选择账户'}
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                {accounts.map((acc) => (
                  <SelectItem key={acc.id} value={acc.id}>
                    <div className="flex items-center gap-2">
                      {marketIcons[acc.marketType]}
                      <span>{acc.name}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {/* 导入按钮 */}
            <Button variant="outline" size="sm" onClick={() => setShowImportDialog(true)}>
              <Upload className="h-4 w-4 mr-2" />
              导入
            </Button>
            {/* 导出按钮 */}
            <Button variant="outline" size="sm" onClick={handleExportPositions}>
              <Download className="h-4 w-4 mr-2" />
              导出
            </Button>
            {/* 记录交易按钮 */}
            <Button onClick={openTxDialog}>
              <Plus className="h-4 w-4 mr-2" />
              记录交易
            </Button>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 py-6 space-y-6">
        {/* 资产概览卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {/* 总资产卡片 */}
          <Card className="bg-gradient-to-br from-blue-600 to-blue-700 text-white border-0">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium opacity-90">总资产 ({displayCurrency})</CardTitle>
              <Wallet className="h-4 w-4 opacity-80" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{formatCurrency(convertCurrency(analytics?.summary?.totalMarketValue || 0, 'USD', displayCurrency), displayCurrency)}</div>
              <p className="text-xs opacity-80 mt-1">
                成本 {formatCurrency(convertCurrency(analytics?.summary?.totalCostBasis || 0, 'USD', displayCurrency), displayCurrency)}
              </p>
            </CardContent>
          </Card>

          {/* 浮动盈亏卡片 */}
          <Card className="bg-gradient-to-br from-emerald-600 to-emerald-700 text-white border-0">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium opacity-90">浮动盈亏</CardTitle>
              <TrendingUp className="h-4 w-4 opacity-80" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{formatCurrency(convertCurrency(analytics?.summary?.totalPnL || 0, 'USD', displayCurrency), displayCurrency)}</div>
              <p className={`text-xs mt-1 flex items-center gap-1 ${(analytics?.summary?.totalPnL || 0) >= 0 ? 'text-emerald-200' : 'text-red-200'}`}>
                {(analytics?.summary?.totalPnL || 0) >= 0 ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                {formatPercent(analytics?.summary?.totalPnLPercent || 0)}
              </p>
            </CardContent>
          </Card>

          {/* 持仓市值卡片 */}
          <Card className="bg-gradient-to-br from-purple-600 to-purple-700 text-white border-0">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium opacity-90">持仓市值</CardTitle>
              <DollarSign className="h-4 w-4 opacity-80" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{formatCurrency(convertCurrency(analytics?.summary?.totalMarketValue || 0, 'USD', displayCurrency), displayCurrency)}</div>
              <p className="text-xs opacity-80 mt-1">{analytics?.summary?.positionCount || 0} 个持仓</p>
            </CardContent>
          </Card>

          {/* 账户数量卡片 */}
          <Card className="bg-gradient-to-br from-orange-600 to-orange-700 text-white border-0">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium opacity-90">账户数量</CardTitle>
              <Building2 className="h-4 w-4 opacity-80" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{accounts.length}</div>
              <p className="text-xs opacity-80 mt-1">分布在 {accounts.length} 个市场</p>
            </CardContent>
          </Card>
        </div>

        {/* 图表区域 */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 市场分布饼图 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">资产配置</CardTitle>
            </CardHeader>
            <CardContent>
              {marketDistribution.length > 0 ? (
                <ResponsiveContainer width="100%" height={240}>
                  <PieChart>
                    <Pie
                      data={marketDistribution}
                      cx="50%"
                      cy="50%"
                      innerRadius={60}
                      outerRadius={100}
                      paddingAngle={2}
                      dataKey="value"
                    >
                      {marketDistribution.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip 
                      formatter={(value) => formatCurrency(value as number)}
                      contentStyle={{ backgroundColor: 'var(--card)', border: '1px solid var(--border)' }}
                    />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              ) : (
                <div className="h-[240px] flex items-center justify-center text-muted-foreground">
                  暂无数据
                </div>
              )}
            </CardContent>
          </Card>

          {/* 持仓分析卡片 */}
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle className="text-lg">持仓分析</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {analytics?.positions?.slice(0, 4).map((pos) => (
                  <div key={pos.symbol} className="p-4 rounded-lg bg-muted/50">
                    <div className="flex items-center gap-2 mb-2">
                      {marketIcons[pos.marketType as MarketType]}
                      <span className="font-medium">{pos.symbol}</span>
                      <span className="text-xs text-muted-foreground">{pos.currency}</span>
                    </div>
                    <div className="text-lg font-bold">{formatCurrency(pos.marketValue, pos.currency)}</div>
                    <Separator className="my-2" />
                    <div className={`text-sm flex items-center gap-1 ${pos.pnl >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                      {pos.pnl >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                      {formatCurrency(Math.abs(pos.pnl), pos.currency)} ({formatPercent(pos.pnlPercent)})
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 标签页区域：持仓明细、交易流水、分析 */}
        <Tabs defaultValue="positions" className="space-y-4">
          <TabsList>
            <TabsTrigger value="positions">持仓明细</TabsTrigger>
            <TabsTrigger value="transactions">交易流水</TabsTrigger>
            <TabsTrigger value="analytics">分析</TabsTrigger>
          </TabsList>

          {/* 持仓明细标签页 */}
          <TabsContent value="positions">
            <Card>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>证券</TableHead>
                      <TableHead>市场</TableHead>
                      <TableHead className="text-right">数量</TableHead>
                      <TableHead className="text-right">成本价</TableHead>
                      <TableHead className="text-right">当前价</TableHead>
                      <TableHead className="text-right">市值</TableHead>
                      <TableHead className="text-right">盈亏</TableHead>
                      <TableHead className="w-[50px]"></TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {analytics?.positions && analytics.positions.length > 0 ? analytics.positions?.map((pos) => (
                      <TableRow key={pos.symbol}>
                        <TableCell>
                          <div className="font-medium">{pos.symbol}</div>
                          <div className="text-xs text-muted-foreground">{pos.name}</div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="gap-1">
                            {marketIcons[pos.marketType as MarketType]}
                            {marketLabels[pos.marketType as MarketType]}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {pos.quantity.toFixed(pos.isCrypto ? 6 : 0)}
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {formatCurrency(pos.avgCost, pos.currency)}
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          <div className="flex items-center justify-end gap-2">
                            {formatCurrency(pos.currentPrice, pos.currency)}
                            {pos.change !== 0 && (
                              <span className={`text-xs ${pos.change >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                                {pos.change >= 0 ? '+' : ''}{pos.changePercent.toFixed(2)}%
                              </span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {formatCurrency(pos.marketValue, pos.currency)}
                        </TableCell>
                        <TableCell className={`text-right font-mono ${pos.pnl >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                          <div className="flex items-center justify-end gap-1">
                            {pos.pnl >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                            {formatCurrency(Math.abs(pos.pnl))}
                            <span className="text-xs">({formatPercent(pos.pnlPercent)})</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Button variant="ghost" size="sm" onClick={() => openDeleteDialog(pos)}>
                            <Trash2 className="h-4 w-4 text-destructive" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    )) : (
                      <TableRow>
                        <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                          暂无持仓记录
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 交易流水标签页 */}
          <TabsContent value="transactions">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle>交易流水</CardTitle>
                <Button variant="outline" size="sm" onClick={handleExportTransactions}>
                  <Download className="h-4 w-4 mr-2" />
                  导出 CSV
                </Button>
              </CardHeader>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>时间</TableHead>
                      <TableHead>类型</TableHead>
                      <TableHead>证券</TableHead>
                      <TableHead className="text-right">数量</TableHead>
                      <TableHead className="text-right">价格</TableHead>
                      <TableHead className="text-right">金额</TableHead>
                      <TableHead>账户</TableHead>
                      <TableHead className="w-[50px]"></TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {transactions.length > 0 ? transactions.map((tx) => (
                      <TableRow key={tx.id}>
                        <TableCell className="text-sm">
                          {new Date(tx.executedAt).toLocaleDateString('zh-CN')}
                        </TableCell>
                        <TableCell>
                          <Badge 
                            variant={
                              tx.type === 'BUY' || tx.type === 'DEPOSIT' || tx.type === 'DIVIDEND' 
                                ? 'default' 
                                : 'secondary'
                            }
                          >
                            {transactionTypeLabels[tx.type]}
                          </Badge>
                        </TableCell>
                        <TableCell className="font-mono">{tx.symbol || '-'}</TableCell>
                        <TableCell className="text-right font-mono">
                          {tx.quantity ? parseFloat(tx.quantity).toFixed(4) : '-'}
                        </TableCell>
                        <TableCell className="text-right font-mono">
                          {tx.price ? formatCurrency(parseFloat(tx.price), tx.currency) : '-'}
                        </TableCell>
                        <TableCell className="text-right font-mono font-medium">
                          {formatCurrency(parseFloat(tx.amount), tx.currency)}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            {marketIcons[tx.account?.marketType || 'US']}
                            <span className="text-sm">{tx.account?.name}</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            <Button variant="ghost" size="sm" onClick={() => openEditTxDialog(tx)}>
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => openDeleteTxDialog(tx)}>
                              <Trash2 className="h-4 w-4 text-destructive" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    )) : (
                      <TableRow>
                        <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                          暂无交易记录
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 分析标签页 */}
          <TabsContent value="analytics">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 资产分布条形图 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">资产分布</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {analytics?.positions?.map((pos) => {
                      const percent = analytics?.summary?.totalMarketValue && analytics.summary.totalMarketValue > 0 
                        ? (pos.marketValueUSD / analytics.summary.totalMarketValue) * 100 
                        : 0
                      return (
                        <div key={pos.symbol} className="space-y-2">
                          <div className="flex items-center justify-between text-sm">
                            <div className="flex items-center gap-2">
                              {marketIcons[pos.marketType as MarketType]}
                              <span className="font-medium">{pos.symbol}</span>
                              <span className="text-xs text-muted-foreground">{pos.currency}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">{percent.toFixed(1)}%</span>
                              <span className="font-mono">{formatCurrency(pos.marketValue, pos.currency)}</span>
                            </div>
                          </div>
                          <div className="h-2 bg-muted rounded-full overflow-hidden">
                            <div 
                              className="h-full rounded-full transition-all"
                              style={{ 
                                width: `${percent}%`,
                                backgroundColor: marketColors[pos.marketType as MarketType]
                              }}
                            />
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>

              {/* 盈亏排行榜 */}
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">盈亏排行</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {analytics?.positions
                      ?.sort((a, b) => b.pnlUSD - a.pnlUSD)
                      .map((pos, index) => (
                        <div key={pos.symbol} className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
                          <div className="flex items-center gap-3">
                            <span className="text-lg font-bold text-muted-foreground">#{index + 1}</span>
                            <div>
                              <div className="font-medium">{pos.symbol}</div>
                              <div className="text-xs text-muted-foreground">{pos.name}</div>
                            </div>
                          </div>
                          <div className={`text-right font-mono ${pos.pnl >= 0 ? 'text-green-500' : 'text-red-500'}`}>
                            <div className="flex items-center gap-1 justify-end">
                              {pos.pnl >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                              {formatCurrency(Math.abs(pos.pnl), pos.currency)}
                            </div>
                            <div className="text-xs">{formatPercent(pos.pnlPercent)}</div>
                          </div>
                        </div>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </main>

      {/* 记录交易对话框 */}
      <Dialog open={showTxDialog} onOpenChange={setShowTxDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>记录交易</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              {/* 账户选择 */}
              <div className="space-y-2">
                <Label>账户</Label>
                <Select value={selectedAccountId} onValueChange={(v) => {
                    if (v) {
                      setSelectedAccountId(v)
                      const selected = accounts.find(a => a.id === v)
                      if (selected) {
                        setTxForm(prev => ({ ...prev, currency: selected.baseCurrency }))
                      }
                    }
                  }}>
                  <SelectTrigger>
                    <SelectValue>
                      {selectedAccount ? selectedAccount.name : '选择账户'}
                    </SelectValue>
                  </SelectTrigger>
                  <SelectContent>
                    {accounts.map((acc) => (
                      <SelectItem key={acc.id} value={acc.id}>
                        {acc.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              {/* 交易类型选择 */}
              <div className="space-y-2">
                <Label>交易类型</Label>
                <Select value={txForm.type} onValueChange={(v) => setTxForm({ ...txForm, type: v as TransactionType })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {(['BUY', 'SELL', 'DEPOSIT', 'WITHDRAW', 'DIVIDEND'] as TransactionType[]).map((t) => (
                      <SelectItem key={t} value={t}>
                        {transactionTypeLabels[t]}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* 证券代码搜索（买入/卖出/分红时显示） */}
            {['BUY', 'SELL', 'DIVIDEND'].includes(txForm.type) && (
              <div className="space-y-2">
                <Label>证券代码</Label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    className="pl-9"
                    placeholder="搜索证券代码或名称"
                    value={symbolSearch || getSecurityDisplayText(txForm.symbol)}
                    onChange={(e) => {
                      setSymbolSearch(e.target.value)
                      setTxForm({ ...txForm, symbol: e.target.value.toUpperCase() })
                    }}
                  />
                  {/* 搜索结果下拉列表 */}
                  {filteredSecurities.length > 0 && (
                    <div className="absolute z-10 w-full mt-1 bg-popover border rounded-md shadow-lg max-h-48 overflow-auto">
                      {filteredSecurities.map((sec) => (
                        <button
                          key={sec.id}
                          className="w-full px-3 py-2 text-left hover:bg-accent flex items-center justify-between"
                          onClick={() => handleSelectSecurity(sec.symbol)}
                        >
                          <div>
                            <span className="font-medium">{sec.symbol}</span>
                            <span className="text-muted-foreground ml-2">{sec.name}</span>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {marketLabels[sec.market]}
                          </Badge>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* 数量和价格输入（买入/卖出/分红时显示） */}
            {['BUY', 'SELL', 'DIVIDEND'].includes(txForm.type) && (
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>数量</Label>
                  <Input
                    type="number"
                    step="any"
                    placeholder="0"
                    value={txForm.quantity}
                    onChange={(e) => setTxForm({ ...txForm, quantity: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>价格</Label>
                  <Input
                    type="number"
                    step="any"
                    placeholder="0.00"
                    value={txForm.price}
                    onChange={(e) => setTxForm({ ...txForm, price: e.target.value })}
                  />
                </div>
              </div>
            )}

            {/* 成交总额（自动计算） */}
            {['BUY', 'SELL', 'DIVIDEND'].includes(txForm.type) && (
              <div className="space-y-2">
                <Label>成交总额</Label>
                <div className="p-3 bg-muted rounded-lg">
                  <span className="text-2xl font-bold">
                    {calculatedAmount ? formatCurrency(parseFloat(calculatedAmount), txForm.currency) : '—'}
                  </span>
                  {txForm.quantity && txForm.price && (
                    <span className="text-sm text-muted-foreground ml-2">
                      ({txForm.quantity} × {formatCurrency(parseFloat(txForm.price), txForm.currency)})
                    </span>
                  )}
                </div>
              </div>
            )}

            {/* 入金/出金金额输入 */}
            {['DEPOSIT', 'WITHDRAW'].includes(txForm.type) && (
              <div className="space-y-2">
                <Label>金额</Label>
                <Input
                  type="number"
                  step="any"
                  placeholder="0.00"
                  value={txForm.amount}
                  onChange={(e) => setTxForm({ ...txForm, amount: e.target.value })}
                />
              </div>
            )}

            {/* 手续费输入 */}
            <div className="space-y-2">
              <Label>手续费</Label>
              <Input
                type="number"
                step="any"
                placeholder="0.00"
                value={txForm.fee}
                onChange={(e) => setTxForm({ ...txForm, fee: e.target.value })}
              />
            </div>

            {/* 交易时间 */}
            <div className="space-y-2">
              <Label>交易时间</Label>
              <Input
                type="datetime-local"
                value={txForm.executedAt}
                onChange={(e) => setTxForm({ ...txForm, executedAt: e.target.value })}
              />
            </div>

            {/* 备注 */}
            <div className="space-y-2">
              <Label>备注</Label>
              <Input
                placeholder="可选备注"
                value={txForm.notes}
                onChange={(e) => setTxForm({ ...txForm, notes: e.target.value })}
              />
            </div>

            {/* 提交按钮 */}
            <Button className="w-full" onClick={() => {
              if (!selectedAccountId) {
                toast.error('请先选择账户')
                return
              }
              if (['BUY', 'SELL', 'DIVIDEND'].includes(txForm.type) && (!txForm.quantity || !txForm.price)) {
                toast.error('请输入数量和价格')
                return
              }
              if (['DEPOSIT', 'WITHDRAW'].includes(txForm.type) && !txForm.amount) {
                toast.error('请输入金额')
                return
              }
              setShowConfirmDialog(true)
            }}>
              确认记录
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 交易确认对话框 */}
      <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>确认交易信息</DialogTitle>
          </DialogHeader>
          <div className="py-4 space-y-3">
            {(() => {
              const info = getConfirmInfo()
              return (
                <>
                  <div className="flex items-center gap-2 text-sm">
                    <span className="text-muted-foreground">账户:</span>
                    <span className="font-medium">{info.account}</span>
                    <Badge variant="outline" className="text-xs">{info.market}</Badge>
                  </div>
                  <Separator />
                  <div className="text-center py-2">
                    <div className="text-2xl font-bold">{info.action}</div>
                  </div>
                  <div className="flex items-center justify-between text-sm bg-muted/50 p-3 rounded-lg">
                    <span className="text-muted-foreground">成交总额</span>
                    <span className="text-xl font-bold">{info.total}</span>
                  </div>
                  {info.fee && (
                    <div className="text-sm text-muted-foreground text-center">
                      {info.fee}
                    </div>
                  )}
                  <Separator />
                  <div className="text-xs text-muted-foreground text-center">
                    交易时间: {info.time}
                  </div>
                </>
              )
            })()}
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => setShowConfirmDialog(false)}>
              取消
            </Button>
            <Button onClick={handleSubmitTx}>
              <Check className="h-4 w-4 mr-1" />
              确认
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 编辑交易记录对话框 */}
      <Dialog open={showEditTxDialog} onOpenChange={setShowEditTxDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>编辑交易记录</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              {/* 交易类型选择 */}
              <div className="space-y-2">
                <Label>交易类型</Label>
                <Select value={editTxForm.type} onValueChange={(v) => setEditTxForm({ ...editTxForm, type: v as TransactionType })}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {(['BUY', 'SELL', 'DEPOSIT', 'WITHDRAW', 'DIVIDEND'] as TransactionType[]).map((t) => (
                      <SelectItem key={t} value={t}>
                        {transactionTypeLabels[t]}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              {/* 交易时间 */}
              <div className="space-y-2">
                <Label>交易时间</Label>
                <Input
                  type="datetime-local"
                  value={editTxForm.executedAt}
                  onChange={(e) => setEditTxForm({ ...editTxForm, executedAt: e.target.value })}
                />
              </div>
            </div>

            {/* 证券代码（买入/卖出/分红时显示） */}
            {['BUY', 'SELL', 'DIVIDEND'].includes(editTxForm.type) && (
              <div className="space-y-2">
                <Label>证券代码</Label>
                <Input
                  placeholder="输入证券代码"
                  value={editTxForm.symbol}
                  onChange={(e) => setEditTxForm({ ...editTxForm, symbol: e.target.value.toUpperCase() })}
                />
              </div>
            )}

            {/* 数量和价格输入（买入/卖出/分红时显示） */}
            {['BUY', 'SELL', 'DIVIDEND'].includes(editTxForm.type) && (
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>数量</Label>
                  <Input
                    type="number"
                    step="any"
                    placeholder="0"
                    value={editTxForm.quantity}
                    onChange={(e) => setEditTxForm({ ...editTxForm, quantity: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>价格</Label>
                  <Input
                    type="number"
                    step="any"
                    placeholder="0.00"
                    value={editTxForm.price}
                    onChange={(e) => setEditTxForm({ ...editTxForm, price: e.target.value })}
                  />
                </div>
              </div>
            )}

            {/* 金额输入（入金/出金时显示） */}
            {['DEPOSIT', 'WITHDRAW'].includes(editTxForm.type) && (
              <div className="space-y-2">
                <Label>金额</Label>
                <Input
                  type="number"
                  step="any"
                  placeholder="0.00"
                  value={editTxForm.amount}
                  onChange={(e) => setEditTxForm({ ...editTxForm, amount: e.target.value })}
                />
              </div>
            )}

            {/* 手续费输入 */}
            <div className="space-y-2">
              <Label>手续费</Label>
              <Input
                type="number"
                step="any"
                placeholder="0.00"
                value={editTxForm.fee}
                onChange={(e) => setEditTxForm({ ...editTxForm, fee: e.target.value })}
              />
            </div>

            {/* 备注 */}
            <div className="space-y-2">
              <Label>备注</Label>
              <Input
                placeholder="可选备注"
                value={editTxForm.notes}
                onChange={(e) => setEditTxForm({ ...editTxForm, notes: e.target.value })}
              />
            </div>

            {/* 提交按钮 */}
            <Button className="w-full" onClick={handleEditTransaction}>
              保存修改
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 删除交易记录确认对话框 */}
      <Dialog open={showDeleteTxDialog} onOpenChange={setShowDeleteTxDialog}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>确认删除交易记录</DialogTitle>
          </DialogHeader>
          {transactionToDelete && (
            <div className="py-4 space-y-3">
              <div className="bg-muted/50 p-3 rounded-lg space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">类型</span>
                  <span className="font-medium">{transactionTypeLabels[transactionToDelete.type]}</span>
                </div>
                {transactionToDelete.symbol && (
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">证券</span>
                    <span className="font-mono">{transactionToDelete.symbol}</span>
                  </div>
                )}
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">金额</span>
                  <span className="font-mono font-medium">{formatCurrency(parseFloat(transactionToDelete.amount), transactionToDelete.currency)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">时间</span>
                  <span className="text-sm">{new Date(transactionToDelete.executedAt).toLocaleString('zh-CN')}</span>
                </div>
              </div>
              <div className="text-sm text-destructive text-center">
                确定要删除此交易记录吗？此操作将回滚相关账户余额和持仓变化
              </div>
            </div>
          )}
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => {
              setShowDeleteTxDialog(false)
              setTransactionToDelete(null)
            }}>
              取消
            </Button>
            <Button variant="destructive" onClick={handleDeleteTransaction}>
              <Trash2 className="h-4 w-4 mr-1" />
              确认删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除持仓确认对话框 */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>确认删除持仓</DialogTitle>
          </DialogHeader>
          {positionToDelete && (
            <div className="py-4 space-y-3">
              <div className="text-center py-2">
                <div className="text-lg font-bold">{positionToDelete.symbol}</div>
                <div className="text-sm text-muted-foreground">{positionToDelete.name}</div>
              </div>
              <div className="bg-muted/50 p-3 rounded-lg space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">数量</span>
                  <span className="font-mono">{positionToDelete.quantity.toFixed(positionToDelete.isCrypto ? 6 : 0)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">当前价</span>
                  <span className="font-mono">{formatCurrency(positionToDelete.currentPrice, positionToDelete.currency)}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">市值</span>
                  <span className="font-mono font-bold">{formatCurrency(positionToDelete.marketValue, positionToDelete.currency)}</span>
                </div>
              </div>
              <div className="text-sm text-destructive text-center">
                确定要删除此持仓吗？这将自动卖出全部持仓
              </div>
            </div>
          )}
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => {
              setShowDeleteDialog(false)
              setPositionToDelete(null)
            }}>
              取消
            </Button>
            <Button variant="destructive" onClick={handleDeletePosition}>
              <Trash2 className="h-4 w-4 mr-1" />
              确认删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 导入对话框 */}
      <Dialog open={showImportDialog} onOpenChange={setShowImportDialog}>
        <DialogContent className="sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle>导入交易记录</DialogTitle>
          </DialogHeader>
          <div className="py-4 space-y-4">
            {/* 下载模板按钮 */}
            <div className="flex items-center gap-4">
              <Button variant="outline" onClick={handleDownloadTemplate}>
                <Download className="h-4 w-4 mr-2" />
                下载模板
              </Button>
              <span className="text-sm text-muted-foreground">先下载模板，填写后导入</span>
            </div>
            
            <Separator />
            
            {/* 文件选择 */}
            <div className="space-y-2">
              <Label>选择 CSV 文件</Label>
              <Input 
                type="file" 
                accept=".csv"
                onChange={handleFileImport}
              />
            </div>

            {/* 导入预览表格 */}
            {importFile && (
              <div className="space-y-2">
                <div className="text-sm font-medium">导入预览 ({importData.length} 条)</div>
                <div className="max-h-64 overflow-auto border rounded-lg">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>状态</TableHead>
                        <TableHead>时间</TableHead>
                        <TableHead>类型</TableHead>
                        <TableHead>证券</TableHead>
                        <TableHead className="text-right">金额</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {importData.slice(0, 10).map((tx, index) => (
                        <TableRow key={index}>
                          <TableCell>
                            {tx.errors.length > 0 ? (
                              <Badge variant="destructive" className="text-xs">
                                错误 {tx.errors.length}
                              </Badge>
                            ) : (
                              <Badge variant="default" className="text-xs">有效</Badge>
                            )}
                          </TableCell>
                          <TableCell className="text-sm">{tx.executedAt}</TableCell>
                          <TableCell className="text-sm">{tx.type}</TableCell>
                          <TableCell className="text-sm">{tx.symbol || '-'}</TableCell>
                          <TableCell className="text-right font-mono">{tx.amount}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                  {importData.length > 10 && (
                    <div className="p-2 text-center text-sm text-muted-foreground">
                      还有 {importData.length - 10} 条记录...
                    </div>
                  )}
                </div>
                {importData.some(tx => tx.errors.length > 0) && (
                  <div className="text-sm text-destructive">
                    部分记录存在错误，将被跳过
                  </div>
                )}
              </div>
            )}

            <DialogFooter>
              <Button variant="outline" onClick={() => {
                setShowImportDialog(false)
                setImportData([])
                setImportFile(null)
              }}>
                取消
              </Button>
              <Button 
                onClick={handleExecuteImport} 
                disabled={importData.filter(tx => tx.errors.length === 0).length === 0}
              >
                导入 {importData.filter(tx => tx.errors.length === 0).length} 条记录
              </Button>
            </DialogFooter>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}