import React, { useState, useEffect, useMemo, useRef } from 'react'
import { 
  X, Table2, Plus, Trash2, Key, ArrowUp, ArrowDown, Save, 
  FileCode, Settings, Link2, List, Database, Play, Eye, GripVertical,
  Check, Search, ChevronDown
} from 'lucide-react'

// ============ 类型定义 ============
interface ColumnDef {
  id: string
  name: string
  type: string
  length: string
  decimals: string
  nullable: boolean
  primaryKey: boolean
  autoIncrement: boolean
  unsigned: boolean
  zerofill: boolean
  defaultValue: string
  comment: string
  isVirtual: boolean
  virtualExpression: string
  // 原始数据用于对比
  _original?: ColumnDef
  _isNew?: boolean
  _isDeleted?: boolean
}

interface IndexDef {
  id: string
  name: string
  columns: string[]  // 字段名数组，支持多列索引
  type: 'NORMAL' | 'UNIQUE' | 'FULLTEXT' | 'SPATIAL'
  method: 'BTREE' | 'HASH'
  comment: string
  _original?: IndexDef
  _isNew?: boolean
  _isDeleted?: boolean
}

interface ForeignKeyDef {
  id: string
  name: string
  columns: string[]
  refSchema: string
  refTable: string
  refColumns: string[]
  onDelete: 'CASCADE' | 'SET NULL' | 'NO ACTION' | 'RESTRICT' | 'SET DEFAULT'
  onUpdate: 'CASCADE' | 'SET NULL' | 'NO ACTION' | 'RESTRICT' | 'SET DEFAULT'
  _original?: ForeignKeyDef
  _isNew?: boolean
  _isDeleted?: boolean
}

interface TableOptions {
  engine: string
  charset: string
  collation: string
  comment: string
  autoIncrement: string
  rowFormat: string
}

interface Props {
  isOpen: boolean
  mode: 'create' | 'edit'
  database: string
  tableName?: string  // 编辑模式时传入
  connectionId: string
  dbType: string
  onClose: () => void
  onSave: (sql: string) => Promise<{ success: boolean; message: string }>
  // 用于获取数据库信息
  onGetTableInfo?: () => Promise<{
    columns: ColumnDef[]
    indexes: IndexDef[]
    foreignKeys: ForeignKeyDef[]
    options: TableOptions
  }>
  onGetDatabases?: () => Promise<string[]>
  onGetTables?: (database: string) => Promise<string[]>
  onGetColumns?: (database: string, table: string) => Promise<string[]>
}

// ============ 常量 ============
const DATA_TYPES = {
  mysql: [
    { group: '整数', types: ['TINYINT', 'SMALLINT', 'MEDIUMINT', 'INT', 'BIGINT'] },
    { group: '小数', types: ['DECIMAL', 'FLOAT', 'DOUBLE'] },
    { group: '字符串', types: ['CHAR', 'VARCHAR', 'TINYTEXT', 'TEXT', 'MEDIUMTEXT', 'LONGTEXT'] },
    { group: '日期时间', types: ['DATE', 'TIME', 'DATETIME', 'TIMESTAMP', 'YEAR'] },
    { group: '二进制', types: ['BINARY', 'VARBINARY', 'TINYBLOB', 'BLOB', 'MEDIUMBLOB', 'LONGBLOB'] },
    { group: '其他', types: ['JSON', 'ENUM', 'SET', 'BOOLEAN', 'BIT'] },
  ],
  postgres: [
    { group: '整数', types: ['SMALLINT', 'INTEGER', 'BIGINT', 'SERIAL', 'BIGSERIAL'] },
    { group: '小数', types: ['DECIMAL', 'NUMERIC', 'REAL', 'DOUBLE PRECISION'] },
    { group: '字符串', types: ['CHAR', 'VARCHAR', 'TEXT'] },
    { group: '日期时间', types: ['DATE', 'TIME', 'TIMESTAMP', 'TIMESTAMPTZ', 'INTERVAL'] },
    { group: '布尔', types: ['BOOLEAN'] },
    { group: '其他', types: ['JSON', 'JSONB', 'UUID', 'BYTEA', 'ARRAY'] },
  ],
  sqlserver: [
    { group: '整数', types: ['TINYINT', 'SMALLINT', 'INT', 'BIGINT'] },
    { group: '小数', types: ['DECIMAL', 'NUMERIC', 'FLOAT', 'REAL', 'MONEY'] },
    { group: '字符串', types: ['CHAR', 'VARCHAR', 'NCHAR', 'NVARCHAR', 'TEXT', 'NTEXT'] },
    { group: '日期时间', types: ['DATE', 'TIME', 'DATETIME', 'DATETIME2', 'DATETIMEOFFSET'] },
    { group: '二进制', types: ['BINARY', 'VARBINARY', 'IMAGE'] },
    { group: '其他', types: ['BIT', 'UNIQUEIDENTIFIER', 'XML'] },
  ],
  sqlite: [
    { group: '基本', types: ['INTEGER', 'REAL', 'TEXT', 'BLOB', 'NUMERIC'] },
  ],
}

const ENGINES = ['InnoDB', 'MyISAM', 'Memory', 'CSV', 'Archive', 'Blackhole', 'Federated', 'NDB']

const CHARSETS = [
  'utf8mb4', 'utf8mb3', 'utf8', 'latin1', 'gbk', 'gb2312', 'big5', 'ascii', 'binary'
]

const COLLATIONS: Record<string, string[]> = {
  'utf8mb4': ['utf8mb4_general_ci', 'utf8mb4_unicode_ci', 'utf8mb4_bin', 'utf8mb4_0900_ai_ci'],
  'utf8': ['utf8_general_ci', 'utf8_unicode_ci', 'utf8_bin'],
  'latin1': ['latin1_swedish_ci', 'latin1_general_ci', 'latin1_bin'],
  'gbk': ['gbk_chinese_ci', 'gbk_bin'],
}

const ROW_FORMATS = ['DEFAULT', 'DYNAMIC', 'FIXED', 'COMPRESSED', 'REDUNDANT', 'COMPACT']

// ============ 可搜索下拉框组件 ============
interface SearchableSelectProps {
  value: string
  options: { label: string; value: string }[]
  onChange: (value: string) => void
  placeholder?: string
  className?: string
  disabled?: boolean
}

function SearchableSelect({ value, options, onChange, placeholder = '选择...', className = '', disabled = false }: SearchableSelectProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [search, setSearch] = useState('')
  const containerRef = useRef<HTMLDivElement>(null)

  const filteredOptions = options.filter(opt => 
    opt.label.toLowerCase().includes(search.toLowerCase()) ||
    opt.value.toLowerCase().includes(search.toLowerCase())
  )

  const selectedOption = options.find(opt => opt.value === value)

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false)
        setSearch('')
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  return (
    <div 
      ref={containerRef} 
      className={`relative flex items-center justify-between cursor-pointer rounded-lg transition-all duration-200 ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-light-hover'}`}
      onClick={(e) => {
        e.stopPropagation()
        if (!disabled) setIsOpen(!isOpen)
      }}
    >
      <span className={`text-sm font-medium ${selectedOption ? 'text-text-primary' : 'text-text-muted'}`}>
        {selectedOption?.label || placeholder}
      </span>
      <ChevronDown size={14} className={`text-text-tertiary ml-2 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
      {isOpen && (
        <div className="absolute z-50 top-full left-0 w-full min-w-[160px] mt-1.5 bg-white border border-border-default 
                        shadow-xl rounded-xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-top-2 duration-200"
             style={{ maxHeight: '280px' }}>
          {/* 搜索框 */}
          <div className="p-2.5 border-b border-border-light bg-gradient-to-b from-light-surface to-white">
            <div className="relative">
              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                onClick={(e) => e.stopPropagation()}
                placeholder="搜索..."
                className="w-full h-9 pl-9 pr-3 bg-white border border-border-default rounded-lg text-sm text-text-primary 
                           focus:outline-none focus:border-primary-400 focus:ring-2 focus:ring-primary-100 transition-all"
                autoFocus
              />
            </div>
          </div>
          
          {/* 选项列表 */}
          <div className="overflow-auto flex-1 py-1.5" style={{ maxHeight: '220px' }}>
            {filteredOptions.length === 0 ? (
              <div className="px-4 py-6 text-sm text-text-muted text-center">
                <div className="text-2xl mb-2">🔍</div>
                无匹配项
              </div>
            ) : (
              filteredOptions.map(opt => (
                <div
                  key={opt.value}
                  onClick={(e) => {
                    e.stopPropagation()
                    onChange(opt.value)
                    setIsOpen(false)
                    setSearch('')
                  }}
                  className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-2.5 mx-1.5 rounded-lg transition-all duration-150
                    ${opt.value === value 
                      ? 'bg-primary-50 text-primary-700 font-medium' 
                      : 'text-text-primary hover:bg-light-hover'}`}
                >
                  {opt.value === value && (
                    <Check size={14} className="text-primary-500" strokeWidth={2.5} />
                  )}
                  <span className={opt.value === value ? '' : 'ml-5'}>{opt.label}</span>
                </div>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  )
}

// 多选可搜索下拉框
interface MultiSelectProps {
  values: string[]
  options: { label: string; value: string }[]
  onChange: (values: string[]) => void
  placeholder?: string
  className?: string
}

function MultiSelect({ values, options, onChange, placeholder = '选择...', className = '' }: MultiSelectProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [search, setSearch] = useState('')
  const [tempValues, setTempValues] = useState<string[]>(values)
  const containerRef = useRef<HTMLDivElement>(null)

  const filteredOptions = options.filter(opt => 
    opt.label.toLowerCase().includes(search.toLowerCase())
  )

  // 打开时同步当前值
  useEffect(() => {
    if (isOpen) {
      setTempValues(values)
    }
  }, [isOpen, values])

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false)
        setSearch('')
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  const toggleValue = (val: string) => {
    if (tempValues.includes(val)) {
      setTempValues(tempValues.filter(v => v !== val))
    } else {
      setTempValues([...tempValues, val])
    }
  }

  const handleConfirm = () => {
    onChange(tempValues)
    setIsOpen(false)
    setSearch('')
  }

  const handleCancel = () => {
    setTempValues(values)
    setIsOpen(false)
    setSearch('')
  }

  const handleSelectAll = () => {
    setTempValues(filteredOptions.map(opt => opt.value))
  }

  const handleClearAll = () => {
    setTempValues([])
  }

  return (
    <div ref={containerRef} className={`relative ${className}`}>
      <div
        onClick={(e) => {
          e.stopPropagation()
          setIsOpen(!isOpen)
        }}
        className="w-full min-h-[36px] px-3 py-1.5 bg-white/50 border border-border-light hover:border-primary-300 rounded-lg
                   text-sm flex items-center gap-1.5 flex-wrap cursor-pointer transition-all duration-200
                   hover:shadow-sm hover:bg-white"
      >
        {values.length === 0 ? (
          <span className="text-text-muted">{placeholder}</span>
        ) : (
          values.map(v => (
            <span key={v} className="bg-gradient-to-r from-primary-100 to-primary-50 text-primary-700 px-2.5 py-1 rounded-md text-xs font-medium
                                    border border-primary-200/50 shadow-sm">
              {v}
            </span>
          ))
        )}
        <ChevronDown size={14} className={`ml-auto text-text-tertiary transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
      </div>
      {isOpen && (
        <div className="absolute z-50 top-full left-0 w-full min-w-[200px] mt-1.5 bg-white border border-border-default 
                        shadow-xl rounded-xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-top-2 duration-200"
             style={{ maxHeight: '320px' }}>
          {/* 搜索框 */}
          <div className="p-2.5 border-b border-border-light bg-gradient-to-b from-light-surface to-white">
            <div className="relative">
              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                onClick={(e) => e.stopPropagation()}
                placeholder="搜索字段..."
                className="w-full h-9 pl-9 pr-3 bg-white border border-border-default rounded-lg text-sm text-text-primary 
                           focus:outline-none focus:border-primary-400 focus:ring-2 focus:ring-primary-100 transition-all"
                autoFocus
              />
            </div>
          </div>
          
          {/* 快捷操作 */}
          <div className="px-2.5 py-2 border-b border-border-light flex items-center gap-2 bg-light-surface/50">
            <button
              onClick={(e) => { e.stopPropagation(); handleSelectAll() }}
              className="text-xs text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors"
            >
              全选
            </button>
            <span className="text-border-default">|</span>
            <button
              onClick={(e) => { e.stopPropagation(); handleClearAll() }}
              className="text-xs text-text-tertiary hover:text-text-secondary font-medium px-2 py-1 rounded hover:bg-light-hover transition-colors"
            >
              清空
            </button>
            <span className="ml-auto text-xs text-text-muted">
              已选 <span className="text-primary-600 font-medium">{tempValues.length}</span> 项
            </span>
          </div>

          {/* 选项列表 */}
          <div className="overflow-auto flex-1 py-1.5" style={{ maxHeight: '180px' }}>
            {filteredOptions.length === 0 ? (
              <div className="px-4 py-6 text-sm text-text-muted text-center">
                <div className="text-2xl mb-2">🔍</div>
                无匹配字段
              </div>
            ) : (
              filteredOptions.map(opt => (
                <div
                  key={opt.value}
                  onClick={(e) => {
                    e.stopPropagation()
                    toggleValue(opt.value)
                  }}
                  className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-3 mx-1.5 rounded-lg transition-all duration-150
                    ${tempValues.includes(opt.value) 
                      ? 'bg-primary-50 text-primary-700 hover:bg-primary-100' 
                      : 'text-text-primary hover:bg-light-hover'}`}
                >
                  <div className={`w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all duration-150
                    ${tempValues.includes(opt.value) 
                      ? 'bg-primary-500 border-primary-500' 
                      : 'border-border-default bg-white'}`}>
                    {tempValues.includes(opt.value) && (
                      <Check size={12} className="text-white" strokeWidth={3} />
                    )}
                  </div>
                  <span className="font-medium">{opt.label}</span>
                </div>
              ))
            )}
          </div>

          {/* 底部操作按钮 */}
          <div className="px-3 py-2.5 border-t border-border-light bg-gradient-to-t from-light-surface to-white flex items-center justify-end gap-2">
            <button
              onClick={(e) => { e.stopPropagation(); handleCancel() }}
              className="px-4 py-1.5 text-sm text-text-secondary hover:text-text-primary font-medium rounded-lg 
                         hover:bg-light-hover transition-all duration-150"
            >
              取消
            </button>
            <button
              onClick={(e) => { e.stopPropagation(); handleConfirm() }}
              className="px-4 py-1.5 text-sm text-white font-medium rounded-lg bg-gradient-to-r from-primary-500 to-primary-600
                         hover:from-primary-600 hover:to-primary-700 shadow-sm hover:shadow-md transition-all duration-150"
            >
              确认
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

const DEFAULT_COLUMN: Omit<ColumnDef, 'id'> = {
  name: '',
  type: 'INT',
  length: '',
  decimals: '',
  nullable: true,
  primaryKey: false,
  autoIncrement: false,
  unsigned: false,
  zerofill: false,
  defaultValue: '',
  comment: '',
  isVirtual: false,
  virtualExpression: '',
}

const DEFAULT_INDEX: Omit<IndexDef, 'id'> = {
  name: '',
  columns: [],
  type: 'NORMAL',
  method: 'BTREE',
  comment: '',
}

const DEFAULT_FK: Omit<ForeignKeyDef, 'id'> = {
  name: '',
  columns: [],
  refSchema: '',
  refTable: '',
  refColumns: [],
  onDelete: 'NO ACTION',
  onUpdate: 'NO ACTION',
}

const DEFAULT_OPTIONS: TableOptions = {
  engine: 'InnoDB',
  charset: 'utf8mb4',
  collation: 'utf8mb4_general_ci',
  comment: '',
  autoIncrement: '',
  rowFormat: 'DEFAULT',
}

// ============ 主组件 ============
export default function TableDesigner({ 
  isOpen, mode, database, tableName: initialTableName, connectionId, dbType,
  onClose, onSave, onGetTableInfo, onGetDatabases, onGetTables, onGetColumns
}: Props) {
  const [activeTab, setActiveTab] = useState<'columns' | 'indexes' | 'foreignKeys' | 'options' | 'sql'>('columns')
  const [tableName, setTableName] = useState(initialTableName || '')
  const [columns, setColumns] = useState<ColumnDef[]>([])
  const [indexes, setIndexes] = useState<IndexDef[]>([])
  const [foreignKeys, setForeignKeys] = useState<ForeignKeyDef[]>([])
  const [options, setOptions] = useState<TableOptions>(DEFAULT_OPTIONS)
  const [originalOptions, setOriginalOptions] = useState<TableOptions | null>(null)
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [selectedColumnId, setSelectedColumnId] = useState<string | null>(null)
  const [selectedIndexId, setSelectedIndexId] = useState<string | null>(null)
  const [selectedFkId, setSelectedFkId] = useState<string | null>(null)

  // 加载表信息（编辑模式）
  useEffect(() => {
    if (isOpen && mode === 'edit' && onGetTableInfo) {
      setTableName(initialTableName || '')
      setError('')
      loadTableInfo()
    } else if (isOpen && mode === 'create') {
      // 创建模式初始化
      setColumns([{
        ...DEFAULT_COLUMN,
        id: crypto.randomUUID(),
        name: 'id',
        primaryKey: true,
        autoIncrement: true,
        nullable: false,
        _isNew: true,
      }])
      setIndexes([])
      setForeignKeys([])
      setOptions(DEFAULT_OPTIONS)
      setOriginalOptions(null)
      setTableName('')
      setError('')
      setLoading(false)
    }
  }, [isOpen, mode, initialTableName])

  const loadTableInfo = async () => {
    if (!onGetTableInfo) {
      setLoading(false)
      return
    }
    setLoading(true)
    try {
      const info = await onGetTableInfo()
      if (info && info.columns) {
        setColumns(info.columns.map(c => ({ ...c, _original: { ...c } })))
      } else {
        setColumns([])
      }
      if (info && info.indexes) {
        setIndexes(info.indexes.map(i => ({ ...i, _original: { ...i } })))
      } else {
        setIndexes([])
      }
      if (info && info.foreignKeys) {
        setForeignKeys(info.foreignKeys.map(fk => ({ ...fk, _original: { ...fk } })))
      } else {
        setForeignKeys([])
      }
      if (info && info.options) {
        setOptions(info.options)
        setOriginalOptions(info.options)
      } else {
        setOriginalOptions(null)
      }
    } catch (e: any) {
      console.error('Load table info error:', e)
      setError(e.message || '加载表信息失败')
    } finally {
      setLoading(false)
    }
  }

  // 获取数据类型列表
  const dataTypes = useMemo(() => {
    const type = dbType.toLowerCase()
    if (type === 'mysql' || type === 'mariadb') return DATA_TYPES.mysql
    if (type === 'postgres' || type === 'postgresql') return DATA_TYPES.postgres
    if (type === 'sqlserver') return DATA_TYPES.sqlserver
    if (type === 'sqlite') return DATA_TYPES.sqlite
    return DATA_TYPES.mysql
  }, [dbType])

  // 检查类型是否需要长度
  const needsLength = (type: string) => {
    const t = type.toUpperCase()
    return ['VARCHAR', 'CHAR', 'DECIMAL', 'NUMERIC', 'FLOAT', 'DOUBLE', 'BINARY', 'VARBINARY', 'BIT'].includes(t)
  }

  // 检查类型是否需要小数位
  const needsDecimals = (type: string) => {
    const t = type.toUpperCase()
    return ['DECIMAL', 'NUMERIC', 'FLOAT', 'DOUBLE'].includes(t)
  }

  // 是否支持 UNSIGNED
  const supportsUnsigned = (type: string) => {
    const t = type.toUpperCase()
    return ['TINYINT', 'SMALLINT', 'MEDIUMINT', 'INT', 'INTEGER', 'BIGINT', 'FLOAT', 'DOUBLE', 'DECIMAL'].includes(t)
  }

  // ============ 字段操作 ============
  const addColumn = () => {
    const newCol: ColumnDef = { 
      ...DEFAULT_COLUMN, 
      id: crypto.randomUUID(),
      _isNew: true,
    }
    setColumns([...columns, newCol])
    setSelectedColumnId(newCol.id)
  }

  const removeColumn = (id: string) => {
    const col = columns.find(c => c.id === id)
    if (!col) return
    
    if (col._isNew) {
      // 新增的直接删除
      setColumns(columns.filter(c => c.id !== id))
    } else {
      // 已存在的标记为删除
      setColumns(columns.map(c => c.id === id ? { ...c, _isDeleted: true } : c))
    }
  }

  const updateColumn = (id: string, field: keyof ColumnDef, value: any) => {
    setColumns(columns.map(col => {
      if (col.id !== id) return col
      const updated = { ...col, [field]: value }
      
      // 主键不能为空
      if (field === 'primaryKey' && value) {
        updated.nullable = false
      }
      // 自增必须是主键且不为空
      if (field === 'autoIncrement' && value) {
        updated.primaryKey = true
        updated.nullable = false
      }
      return updated
    }))
  }

  const moveColumn = (index: number, direction: 'up' | 'down') => {
    const visibleColumns = columns.filter(c => !c._isDeleted)
    const newIndex = direction === 'up' ? index - 1 : index + 1
    if (newIndex < 0 || newIndex >= visibleColumns.length) return
    
    const newColumns = [...visibleColumns]
    const temp = newColumns[index]
    newColumns[index] = newColumns[newIndex]
    newColumns[newIndex] = temp
    
    // 保留已删除的列
    setColumns([...newColumns, ...columns.filter(c => c._isDeleted)])
  }

  // ============ 索引操作 ============
  const addIndex = () => {
    const newIdx: IndexDef = { 
      ...DEFAULT_INDEX, 
      id: crypto.randomUUID(),
      _isNew: true,
    }
    setIndexes([...indexes, newIdx])
    setSelectedIndexId(newIdx.id)
  }

  const removeIndex = (id: string) => {
    const idx = indexes.find(i => i.id === id)
    if (!idx) return
    
    if (idx._isNew) {
      setIndexes(indexes.filter(i => i.id !== id))
    } else {
      setIndexes(indexes.map(i => i.id === id ? { ...i, _isDeleted: true } : i))
    }
  }

  // 生成索引名称
  const generateIndexName = (cols: string[], type: string) => {
    if (cols.length === 0 || !cols.some(c => c)) return ''
    const prefix = type === 'UNIQUE' ? 'uk' : type === 'FULLTEXT' ? 'ft' : 'idx'
    const tbl = tableName || 'table'
    return `${prefix}_${tbl}_${cols.filter(c => c).join('_')}`
  }

  const updateIndex = (id: string, field: keyof IndexDef, value: any) => {
    setIndexes(indexes.map(idx => {
      if (idx.id !== id) return idx
      const updated = { ...idx, [field]: value }
      
      // 当选择字段时，自动生成索引名（如果名称为空或以 idx_/uk_/ft_ 开头）
      if (field === 'columns' && Array.isArray(value) && value.length > 0 && value.some((c: string) => c)) {
        const autoName = generateIndexName(value, idx.type)
        if (!idx.name || idx.name.startsWith('idx_') || idx.name.startsWith('uk_') || idx.name.startsWith('ft_')) {
          updated.name = autoName
        }
      }
      // 当修改索引类型时，也更新名称前缀
      if (field === 'type' && idx.columns.length > 0 && idx.columns.some(c => c)) {
        const autoName = generateIndexName(idx.columns, value)
        if (!idx.name || idx.name.startsWith('idx_') || idx.name.startsWith('uk_') || idx.name.startsWith('ft_')) {
          updated.name = autoName
        }
      }
      return updated
    }))
  }

  // ============ 外键操作 ============
  // 生成外键名称
  const generateForeignKeyName = (cols: string[]) => {
    if (cols.length === 0 || !cols[0]) return ''
    const tbl = tableName || 'table'
    return `fk_${tbl}_${cols.filter(c => c).join('_')}`
  }

  const addForeignKey = () => {
    const newFk: ForeignKeyDef = { 
      ...DEFAULT_FK, 
      id: crypto.randomUUID(),
      _isNew: true,
    }
    setForeignKeys([...foreignKeys, newFk])
    setSelectedFkId(newFk.id)
  }

  const removeForeignKey = (id: string) => {
    const fk = foreignKeys.find(f => f.id === id)
    if (!fk) return
    
    if (fk._isNew) {
      setForeignKeys(foreignKeys.filter(f => f.id !== id))
    } else {
      setForeignKeys(foreignKeys.map(f => f.id === id ? { ...f, _isDeleted: true } : f))
    }
  }

  const updateForeignKey = (id: string, field: keyof ForeignKeyDef | Record<string, any>, value?: any) => {
    setForeignKeys(prev => prev.map(fk => {
      if (fk.id !== id) return fk
      
      // 支持批量更新多个字段
      if (typeof field === 'object') {
        return { ...fk, ...field }
      }
      
      const updated = { ...fk, [field]: value }
      
      // 当选择字段时，自动生成外键名（如果名称为空或以 fk_ 开头）
      if (field === 'columns' && Array.isArray(value) && value.length > 0 && value[0]) {
        const autoName = generateForeignKeyName(value)
        if (!fk.name || fk.name.startsWith('fk_')) {
          updated.name = autoName
        }
      }
      return updated
    }))
  }

  // 检查列是否被修改
  const isColumnModified = (col: ColumnDef): boolean => {
    if (!col._original) return false
    const orig = col._original
    return col.name !== orig.name ||
           col.type !== orig.type ||
           col.length !== orig.length ||
           col.decimals !== orig.decimals ||
           col.nullable !== orig.nullable ||
           col.defaultValue !== orig.defaultValue ||
           col.comment !== orig.comment ||
           col.unsigned !== orig.unsigned ||
           col.autoIncrement !== orig.autoIncrement
  }

  // ============ SQL 生成 ============
  const generateSQL = useMemo(() => {
    const dbTypeLower = dbType.toLowerCase()
    const quote = (name: string) => {
      if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') return `\`${name}\``
      if (dbTypeLower === 'postgres' || dbTypeLower === 'postgresql') return `"${name}"`
      if (dbTypeLower === 'sqlserver') return `[${name}]`
      return `"${name}"`
    }

    const formatColumnType = (col: ColumnDef) => {
      let type = col.type.toUpperCase()
      if (col.length) {
        if (col.decimals && needsDecimals(col.type)) {
          type += `(${col.length},${col.decimals})`
        } else {
          type += `(${col.length})`
        }
      }
      return type
    }

    const formatColumnDef = (col: ColumnDef, forCreate = false) => {
      let def = `${quote(col.name)} ${formatColumnType(col)}`
      
      if (supportsUnsigned(col.type) && col.unsigned && (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb')) {
        def += ' UNSIGNED'
      }
      if (col.zerofill && (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb')) {
        def += ' ZEROFILL'
      }
      if (!col.nullable) {
        def += ' NOT NULL'
      }
      if (col.autoIncrement) {
        if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
          def += ' AUTO_INCREMENT'
        } else if (dbTypeLower === 'sqlserver') {
          def += ' IDENTITY(1,1)'
        }
      }
      if (col.defaultValue !== undefined && col.defaultValue !== '') {
        const val = col.defaultValue
        if (val.toUpperCase() === 'NULL') {
          def += ' DEFAULT NULL'
        } else if (val.toUpperCase() === 'CURRENT_TIMESTAMP' || val.toUpperCase().startsWith('NOW')) {
          def += ` DEFAULT ${val}`
        } else {
          def += ` DEFAULT '${val}'`
        }
      }
      if (col.comment && (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb')) {
        def += ` COMMENT '${col.comment.replace(/'/g, "''")}'`
      }
      return def
    }

    if (mode === 'create') {
      // CREATE TABLE
      const visibleColumns = columns.filter(c => !c._isDeleted && c.name)
      if (!tableName || visibleColumns.length === 0) return '-- 请填写表名和至少一个字段'

      const colDefs = visibleColumns.map(col => '  ' + formatColumnDef(col, true))
      
      // 主键
      const pkCols = visibleColumns.filter(c => c.primaryKey)
      if (pkCols.length > 0) {
        colDefs.push(`  PRIMARY KEY (${pkCols.map(c => quote(c.name)).join(', ')})`)
      }

      // 索引（需要有名称和至少一个有效字段）
      const visibleIndexes = indexes.filter(i => !i._isDeleted && i.name && i.columns.length > 0 && i.columns.some(c => c))
      for (const idx of visibleIndexes) {
        let indexDef = '  '
        if (idx.type === 'UNIQUE') indexDef += 'UNIQUE '
        else if (idx.type === 'FULLTEXT') indexDef += 'FULLTEXT '
        else if (idx.type === 'SPATIAL') indexDef += 'SPATIAL '
        indexDef += `INDEX ${quote(idx.name)} (${idx.columns.map(c => quote(c)).join(', ')})`
        if (idx.method && idx.method !== 'BTREE' && (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb')) {
          indexDef += ` USING ${idx.method}`
        }
        colDefs.push(indexDef)
      }

      // 外键（需要有名称、至少一个有效字段、引用表和引用字段）
      const visibleFKs = foreignKeys.filter(fk => !fk._isDeleted && fk.name && fk.columns.length > 0 && fk.columns[0] && fk.refTable && fk.refColumns.length > 0 && fk.refColumns[0])
      for (const fk of visibleFKs) {
        let fkDef = `  CONSTRAINT ${quote(fk.name)} FOREIGN KEY (${fk.columns.map(c => quote(c)).join(', ')}) `
        fkDef += `REFERENCES ${fk.refSchema ? quote(fk.refSchema) + '.' : ''}${quote(fk.refTable)} (${fk.refColumns.map(c => quote(c)).join(', ')})`
        if (fk.onDelete !== 'NO ACTION') fkDef += ` ON DELETE ${fk.onDelete}`
        if (fk.onUpdate !== 'NO ACTION') fkDef += ` ON UPDATE ${fk.onUpdate}`
        colDefs.push(fkDef)
      }

      let sql = `CREATE TABLE ${quote(database)}.${quote(tableName)} (\n${colDefs.join(',\n')}\n)`

      // 表选项
      if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
        const opts: string[] = []
        if (options.engine) opts.push(`ENGINE=${options.engine}`)
        if (options.charset) opts.push(`DEFAULT CHARSET=${options.charset}`)
        if (options.collation) opts.push(`COLLATE=${options.collation}`)
        if (options.rowFormat && options.rowFormat !== 'DEFAULT') opts.push(`ROW_FORMAT=${options.rowFormat}`)
        if (options.comment) opts.push(`COMMENT='${options.comment.replace(/'/g, "''")}'`)
        if (options.autoIncrement) opts.push(`AUTO_INCREMENT=${options.autoIncrement}`)
        if (opts.length > 0) {
          sql += '\n' + opts.join('\n')
        }
      }

      return sql + ';'
    } else {
      // ALTER TABLE
      const sqls: string[] = []
      const tbl = `${quote(database)}.${quote(tableName)}`

      // 删除的列
      const deletedCols = columns.filter(c => c._isDeleted && c._original)
      for (const col of deletedCols) {
        sqls.push(`ALTER TABLE ${tbl} DROP COLUMN ${quote(col.name)};`)
      }

      // 新增的列
      const newCols = columns.filter(c => c._isNew && !c._isDeleted && c.name)
      for (const col of newCols) {
        sqls.push(`ALTER TABLE ${tbl} ADD COLUMN ${formatColumnDef(col)};`)
      }

      // 修改的列
      const modifiedCols = columns.filter(c => !c._isNew && !c._isDeleted && c._original && isColumnModified(c))
      for (const col of modifiedCols) {
        if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
          sqls.push(`ALTER TABLE ${tbl}\nCHANGE COLUMN ${quote(col._original!.name)} ${formatColumnDef(col)};`)
        } else if (dbTypeLower === 'postgres' || dbTypeLower === 'postgresql') {
          if (col._original!.name !== col.name) {
            sqls.push(`ALTER TABLE ${tbl} RENAME COLUMN ${quote(col._original!.name)} TO ${quote(col.name)};`)
          }
          sqls.push(`ALTER TABLE ${tbl} ALTER COLUMN ${quote(col.name)} TYPE ${formatColumnType(col)};`)
          if (col.nullable !== col._original!.nullable) {
            sqls.push(`ALTER TABLE ${tbl} ALTER COLUMN ${quote(col.name)} ${col.nullable ? 'DROP' : 'SET'} NOT NULL;`)
          }
        } else if (dbTypeLower === 'sqlserver') {
          if (col._original!.name !== col.name) {
            sqls.push(`EXEC sp_rename '${tableName}.${col._original!.name}', '${col.name}', 'COLUMN';`)
          }
          sqls.push(`ALTER TABLE ${tbl} ALTER COLUMN ${quote(col.name)} ${formatColumnType(col)}${col.nullable ? '' : ' NOT NULL'};`)
        }
      }

      // 删除的索引
      const deletedIndexes = indexes.filter(i => i._isDeleted && i._original)
      for (const idx of deletedIndexes) {
        if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
          sqls.push(`ALTER TABLE ${tbl} DROP INDEX ${quote(idx.name)};`)
        } else if (dbTypeLower === 'postgres' || dbTypeLower === 'postgresql') {
          sqls.push(`DROP INDEX ${quote(idx.name)};`)
        } else if (dbTypeLower === 'sqlserver') {
          sqls.push(`DROP INDEX ${quote(idx.name)} ON ${tbl};`)
        }
      }

      // 新增的索引（需要有名称和至少一个有效字段）
      const newIndexes = indexes.filter(i => i._isNew && !i._isDeleted && i.name && i.columns.length > 0 && i.columns.some(c => c))
      for (const idx of newIndexes) {
        let sql = ''
        if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
          sql = `ALTER TABLE ${tbl} ADD `
          if (idx.type === 'UNIQUE') sql += 'UNIQUE '
          else if (idx.type === 'FULLTEXT') sql += 'FULLTEXT '
          else if (idx.type === 'SPATIAL') sql += 'SPATIAL '
          sql += `INDEX ${quote(idx.name)} (${idx.columns.map(c => quote(c)).join(', ')})`
          if (idx.method && idx.method !== 'BTREE') sql += ` USING ${idx.method}`
        } else {
          sql = `CREATE ${idx.type === 'UNIQUE' ? 'UNIQUE ' : ''}INDEX ${quote(idx.name)} ON ${tbl} (${idx.columns.map(c => quote(c)).join(', ')})`
        }
        sqls.push(sql + ';')
      }

      // 删除的外键
      const deletedFKs = foreignKeys.filter(fk => fk._isDeleted && fk._original)
      for (const fk of deletedFKs) {
        if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
          sqls.push(`ALTER TABLE ${tbl} DROP FOREIGN KEY ${quote(fk.name)};`)
        } else {
          sqls.push(`ALTER TABLE ${tbl} DROP CONSTRAINT ${quote(fk.name)};`)
        }
      }

      // 新增的外键（需要有名称、至少一个有效字段、引用表和引用字段）
      const newFKs = foreignKeys.filter(fk => fk._isNew && !fk._isDeleted && fk.name && fk.columns.length > 0 && fk.columns[0] && fk.refTable && fk.refColumns.length > 0 && fk.refColumns[0])
      for (const fk of newFKs) {
        let sql = `ALTER TABLE ${tbl} ADD CONSTRAINT ${quote(fk.name)} FOREIGN KEY (${fk.columns.map(c => quote(c)).join(', ')}) `
        sql += `REFERENCES ${fk.refSchema ? quote(fk.refSchema) + '.' : ''}${quote(fk.refTable)} (${fk.refColumns.map(c => quote(c)).join(', ')})`
        if (fk.onDelete !== 'NO ACTION') sql += ` ON DELETE ${fk.onDelete}`
        if (fk.onUpdate !== 'NO ACTION') sql += ` ON UPDATE ${fk.onUpdate}`
        sqls.push(sql + ';')
      }

      // 表选项修改（仅 MySQL，对比原选项）
      if (dbTypeLower === 'mysql' || dbTypeLower === 'mariadb') {
        const origOpts = originalOptions || { comment: '', engine: '', charset: '', collation: '', rowFormat: '', autoIncrement: '' }
        // 只有注释发生变化时才生成 SQL
        if (options.comment !== origOpts.comment) {
          if (options.comment) {
            sqls.push(`ALTER TABLE ${tbl} COMMENT='${options.comment.replace(/'/g, "''")}';`)
          } else {
            sqls.push(`ALTER TABLE ${tbl} COMMENT='';`)
          }
        }
        // 引擎变化
        if (options.engine && options.engine !== origOpts.engine) {
          sqls.push(`ALTER TABLE ${tbl} ENGINE=${options.engine};`)
        }
        // 字符集变化
        if (options.charset && options.charset !== origOpts.charset) {
          let alterCharset = `ALTER TABLE ${tbl} CONVERT TO CHARACTER SET ${options.charset}`
          if (options.collation) {
            alterCharset += ` COLLATE ${options.collation}`
          }
          sqls.push(alterCharset + ';')
        }
      }

      return sqls.length > 0 ? sqls.join('\n\n') : '-- 没有需要执行的修改'
    }
  }, [mode, tableName, columns, indexes, foreignKeys, options, originalOptions, database, dbType])

  // ============ 保存 ============
  const handleSave = async () => {
    if (!tableName) {
      setError('请输入表名')
      return
    }
    const visibleCols = columns.filter(c => !c._isDeleted && c.name)
    if (visibleCols.length === 0) {
      setError('请至少添加一个字段')
      return
    }

    setSaving(true)
    setError('')
    try {
      const result = await onSave(generateSQL)
      if (!result.success) {
        setError(result.message)
      } else {
        // 保存成功后，重置所有状态标记，使 SQL 预览显示"没有需要执行的修改"
        // 对于编辑模式，重新加载表信息
        if (mode === 'edit' && onGetTableInfo) {
          try {
            const tableInfo = await onGetTableInfo()
            if (tableInfo) {
              const loadedColumns = tableInfo.columns.map((col: any) => ({
                ...col,
                id: crypto.randomUUID(),
                _original: { ...col, id: crypto.randomUUID() },
              }))
              const loadedIndexes = tableInfo.indexes.map((idx: any) => ({
                ...idx,
                id: crypto.randomUUID(),
                _original: { ...idx, id: crypto.randomUUID() },
              }))
              const loadedForeignKeys = tableInfo.foreignKeys.map((fk: any) => ({
                ...fk,
                id: crypto.randomUUID(),
                _original: { ...fk, id: crypto.randomUUID() },
              }))
              setColumns(loadedColumns)
              setIndexes(loadedIndexes)
              setForeignKeys(loadedForeignKeys)
              if (tableInfo.options) {
                setOptions(tableInfo.options)
                setOriginalOptions(tableInfo.options)
              }
            }
          } catch (e) {
            // 忽略重新加载错误
          }
        } else {
          // 创建模式，保存成功后关闭
          onClose()
        }
      }
    } catch (e: any) {
      setError(e.message || '保存失败')
    } finally {
      setSaving(false)
    }
  }

  // 如果 isOpen 为 false，组件不会被父组件渲染，这里做个保险
  if (!isOpen) {
    return null
  }

  const visibleColumns = columns.filter(c => !c._isDeleted)
  const visibleIndexes = indexes.filter(i => !i._isDeleted)
  const visibleForeignKeys = foreignKeys.filter(fk => !fk._isDeleted)

  const tabs = [
    { id: 'columns', label: '字段', icon: List, count: visibleColumns.length },
    { id: 'indexes', label: '索引', icon: Database, count: visibleIndexes.length },
    { id: 'foreignKeys', label: '外键', icon: Link2, count: visibleForeignKeys.length },
    { id: 'options', label: '选项', icon: Settings },
    { id: 'sql', label: 'SQL 预览', icon: FileCode },
  ] as const

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white border border-border-default w-[1100px] h-[700px] flex flex-col shadow-modal rounded-xl animate-fade-in">
        {/* 标题栏 */}
        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border-default bg-white flex-shrink-0 rounded-t-xl">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-teal-50 flex items-center justify-center">
              <Table2 size={18} className="text-teal-500" />
            </div>
            <span className="font-semibold text-text-primary">
              {mode === 'create' ? '新建表' : '编辑表'} - {database}
            </span>
            {mode === 'edit' && initialTableName && (
              <span className="text-text-secondary font-normal">({initialTableName})</span>
            )}
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={handleSave}
              disabled={saving}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-primary-500 hover:bg-primary-600 text-white rounded-lg
                         disabled:opacity-50 transition-colors"
            >
              <Save size={14} />
              {saving ? '保存中...' : '保存'}
            </button>
            <button
              onClick={onClose}
              className="p-2 hover:bg-light-hover rounded-lg transition-colors text-text-secondary hover:text-text-primary"
            >
              <X size={18} />
            </button>
          </div>
        </div>

        {/* 表名 & 注释 & 标签页 */}
        <div className="border-b border-border-default bg-white/50 flex-shrink-0">
          {/* 表名和注释 */}
          <div className="flex items-center gap-6 px-4 py-2 border-b border-border-default/50">
            <div className="flex items-center gap-2">
              <span className="text-sm text-text-secondary w-12">表名:</span>
              <input
                type="text"
                value={tableName}
                onChange={(e) => setTableName(e.target.value)}
                placeholder="输入表名"
                disabled={mode === 'edit'}
                className="w-48 h-8 px-3 bg-white border border-border-default text-sm rounded-lg text-text-primary
                           focus:border-primary-500 focus:outline-none transition-colors
                           disabled:opacity-60 disabled:cursor-not-allowed"
              />
            </div>
            <div className="flex items-center gap-2 flex-1">
              <span className="text-sm text-text-secondary w-12">注释:</span>
              <input
                type="text"
                value={options.comment}
                onChange={(e) => setOptions({ ...options, comment: e.target.value })}
                placeholder="表注释"
                className="flex-1 max-w-md h-8 px-3 bg-white border border-border-default text-sm rounded-lg text-text-primary
                           focus:border-primary-500 focus:outline-none transition-colors"
              />
            </div>
          </div>
          {/* 标签页 */}
          <div className="flex px-5">
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2.5 text-sm border-b-2 transition-colors font-medium
                  ${activeTab === tab.id 
                    ? 'border-primary-500 text-primary-600' 
                    : 'border-transparent text-text-secondary hover:text-text-primary'}`}
              >
                <tab.icon size={15} />
                {tab.label}
                {'count' in tab && tab.count !== undefined && (
                  <span className={`ml-1 text-xs px-1.5 py-0.5 rounded-full ${activeTab === tab.id ? 'bg-primary-100 text-primary-600' : 'bg-light-muted text-text-secondary'}`}>{tab.count}</span>
                )}
              </button>
            ))}
          </div>
        </div>

        {/* 错误提示 */}
        {error && (
          <div className="px-4 py-2 bg-danger-500/20 border-b border-danger-500/30 text-sm text-danger-500 flex-shrink-0">
            {error}
          </div>
        )}

        {/* 内容区 */}
        <div className="flex-1 overflow-hidden bg-light-bg">
          {loading ? (
            <div className="flex items-center justify-center h-full text-text-secondary">
              加载中...
            </div>
          ) : (
            <>
              {/* 字段标签页 */}
              {activeTab === 'columns' && (
                <ColumnsTab
                  columns={visibleColumns}
                  dataTypes={dataTypes}
                  dbType={dbType}
                  selectedId={selectedColumnId}
                  onSelect={setSelectedColumnId}
                  onAdd={addColumn}
                  onRemove={removeColumn}
                  onUpdate={updateColumn}
                  onMove={moveColumn}
                  needsLength={needsLength}
                  needsDecimals={needsDecimals}
                  supportsUnsigned={supportsUnsigned}
                />
              )}

              {/* 索引标签页 */}
              {activeTab === 'indexes' && (
                <IndexesTab
                  indexes={visibleIndexes}
                  columns={visibleColumns}
                  selectedId={selectedIndexId}
                  onSelect={setSelectedIndexId}
                  onAdd={addIndex}
                  onRemove={removeIndex}
                  onUpdate={updateIndex}
                  dbType={dbType}
                />
              )}

              {/* 外键标签页 */}
              {activeTab === 'foreignKeys' && (
                <ForeignKeysTab
                  foreignKeys={visibleForeignKeys}
                  columns={visibleColumns}
                  selectedId={selectedFkId}
                  onSelect={setSelectedFkId}
                  onAdd={addForeignKey}
                  onRemove={removeForeignKey}
                  onUpdate={updateForeignKey}
                  onGetDatabases={onGetDatabases}
                  onGetTables={onGetTables}
                  onGetColumns={onGetColumns}
                  currentDatabase={database}
                />
              )}

              {/* 选项标签页 */}
              {activeTab === 'options' && (
                <OptionsTab
                  options={options}
                  dbType={dbType}
                  onChange={setOptions}
                />
              )}

              {/* SQL 预览标签页 */}
              {activeTab === 'sql' && (
                <SqlPreviewTab sql={generateSQL} />
              )}
            </>
          )}
        </div>
      </div>
    </div>
  )
}

// ============ 字段标签页 ============
interface ColumnsTabProps {
  columns: ColumnDef[]
  dataTypes: { group: string; types: string[] }[]
  dbType: string
  selectedId: string | null
  onSelect: (id: string | null) => void
  onAdd: () => void
  onRemove: (id: string) => void
  onUpdate: (id: string, field: keyof ColumnDef, value: any) => void
  onMove: (index: number, direction: 'up' | 'down') => void
  needsLength: (type: string) => boolean
  needsDecimals: (type: string) => boolean
  supportsUnsigned: (type: string) => boolean
}

function ColumnsTab({ 
  columns, dataTypes, dbType, selectedId, onSelect, onAdd, onRemove, onUpdate, onMove,
  needsLength, needsDecimals, supportsUnsigned
}: ColumnsTabProps) {
  const isMysql = dbType.toLowerCase() === 'mysql' || dbType.toLowerCase() === 'mariadb'
  const [dragIndex, setDragIndex] = useState<number | null>(null)
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)

  const handleDragStart = (e: React.DragEvent, index: number) => {
    setDragIndex(index)
    e.dataTransfer.effectAllowed = 'move'
  }

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault()
    if (dragIndex !== null && dragIndex !== index) {
      setDragOverIndex(index)
    }
  }

  const handleDragEnd = () => {
    if (dragIndex !== null && dragOverIndex !== null && dragIndex !== dragOverIndex) {
      // 执行移动
      if (dragOverIndex < dragIndex) {
        // 向上移动
        for (let i = dragIndex; i > dragOverIndex; i--) {
          onMove(i, 'up')
        }
      } else {
        // 向下移动
        for (let i = dragIndex; i < dragOverIndex; i++) {
          onMove(i, 'down')
        }
      }
    }
    setDragIndex(null)
    setDragOverIndex(null)
  }

  return (
    <div className="h-full flex flex-col">
      {/* 工具栏 */}
      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
        <button
          onClick={onAdd}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
        >
          <Plus size={14} />
          添加字段
        </button>
      </div>

      {/* 表格 */}
      <div className="flex-1 overflow-auto">
        <table className="w-full text-sm">
          <thead className="bg-white sticky top-0">
            <tr className="border-b border-border-default text-text-primary">
              <th className="w-8 px-1 py-2"></th>
              <th className="w-36 px-3 py-2 text-left font-medium">名称</th>
              <th className="w-28 px-3 py-2 text-left font-medium">类型</th>
              <th className="w-16 px-3 py-2 text-left font-medium">长度</th>
              <th className="w-16 px-3 py-2 text-left font-medium">小数点</th>
              <th className="w-16 px-3 py-2 text-center font-medium">不是 null</th>
              {isMysql && <th className="w-16 px-3 py-2 text-center font-medium">无符号</th>}
              <th className="w-14 px-3 py-2 text-center font-medium">键</th>
              <th className="w-36 px-3 py-2 text-left font-medium">默认值</th>
              <th className="px-3 py-2 text-left font-medium">注释</th>
              <th className="w-12 px-2 py-2 text-center font-medium">操作</th>
            </tr>
          </thead>
          <tbody>
            {columns.map((col, index) => (
              <tr
                key={col.id}
                onDragOver={(e) => handleDragOver(e, index)}
                onClick={() => onSelect(col.id)}
                className={`border-b border-border-default/50 cursor-pointer transition-colors
                  ${selectedId === col.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
                  ${col._isNew ? 'bg-success-50' : ''}
                  ${dragOverIndex === index ? 'border-t-2 border-t-primary-500' : ''}`}
              >
                <td 
                  draggable
                  onDragStart={(e) => handleDragStart(e, index)}
                  onDragEnd={handleDragEnd}
                  className="px-1 py-1.5 text-center cursor-grab active:cursor-grabbing"
                >
                  <GripVertical size={14} className="text-text-secondary mx-auto" />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="text"
                    value={col.name}
                    onChange={(e) => onUpdate(col.id, 'name', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    placeholder="字段名"
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
                               selection:bg-primary-500 selection:text-white"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <select
                    value={col.type}
                    onChange={(e) => onUpdate(col.id, 'type', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                  >
                    {dataTypes.map(group => (
                      <optgroup key={group.group} label={group.group}>
                        {group.types.map(t => (
                          <option key={t} value={t}>{t}</option>
                        ))}
                      </optgroup>
                    ))}
                  </select>
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="text"
                    value={col.length}
                    onChange={(e) => onUpdate(col.id, 'length', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    disabled={!needsLength(col.type)}
                    placeholder={needsLength(col.type) ? '' : '-'}
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-primary-500 selection:text-white"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="text"
                    value={col.decimals}
                    onChange={(e) => onUpdate(col.id, 'decimals', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    disabled={!needsDecimals(col.type)}
                    placeholder={needsDecimals(col.type) ? '' : '-'}
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
                               disabled:opacity-40 disabled:cursor-not-allowed selection:bg-primary-500 selection:text-white"
                  />
                </td>
                <td className="px-3 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="checkbox"
                    checked={!col.nullable}
                    onChange={(e) => {
                      onSelect(col.id)
                      onUpdate(col.id, 'nullable', !e.target.checked)
                    }}
                    disabled={col.primaryKey}
                    className="w-4 h-4 accent-blue-500 disabled:opacity-50"
                  />
                </td>
                {isMysql && (
                  <td className="px-3 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
                    <input
                      type="checkbox"
                      checked={col.unsigned}
                      onChange={(e) => {
                        onSelect(col.id)
                        onUpdate(col.id, 'unsigned', e.target.checked)
                      }}
                      disabled={!supportsUnsigned(col.type)}
                      className="w-4 h-4 accent-blue-500 disabled:opacity-50"
                    />
                  </td>
                )}
                <td className="px-3 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
                  <button
                    onClick={() => {
                      onSelect(col.id)
                      onUpdate(col.id, 'primaryKey', !col.primaryKey)
                    }}
                    className={`p-1.5 rounded transition-colors ${col.primaryKey ? 'bg-warning-500 text-white' : 'text-text-muted hover:bg-light-hover hover:text-warning-500'}`}
                    title={col.primaryKey ? '主键' : '设为主键'}
                  >
                    <Key size={14} />
                  </button>
                  {col.autoIncrement && (
                    <span className="ml-1 text-xs text-primary-500" title="自增">A</span>
                  )}
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="text"
                    value={col.defaultValue}
                    onChange={(e) => onUpdate(col.id, 'defaultValue', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    placeholder=""
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
                               selection:bg-primary-500 selection:text-white"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="text"
                    value={col.comment}
                    onChange={(e) => onUpdate(col.id, 'comment', e.target.value)}
                    onFocus={() => onSelect(col.id)}
                    placeholder=""
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary
                               selection:bg-primary-500 selection:text-white"
                  />
                </td>
                <td className="px-2 py-1.5 text-center" onClick={(e) => e.stopPropagation()}>
                  <button
                    onClick={() => {
                      onSelect(col.id)
                      if (columns.length > 1) onRemove(col.id)
                    }}
                    disabled={columns.length <= 1}
                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors
                               disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-text-secondary disabled:hover:bg-transparent"
                    title="删除字段"
                  >
                    <Trash2 size={14} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 底部详情区 */}
      {selectedId && (
        <ColumnDetailPanel
          column={columns.find(c => c.id === selectedId)!}
          onUpdate={(field, value) => onUpdate(selectedId, field, value)}
          isMysql={isMysql}
        />
      )}
    </div>
  )
}

// 字段详情面板
function ColumnDetailPanel({ column, onUpdate, isMysql }: { 
  column: ColumnDef
  onUpdate: (field: keyof ColumnDef, value: any) => void
  isMysql: boolean
}) {
  return (
    <div className="border-t border-border-default bg-white px-5 py-3.5 flex-shrink-0">
      <div className="grid grid-cols-4 gap-4 text-sm">
        <label className="flex items-center gap-2 text-text-primary cursor-pointer">
          <input
            type="checkbox"
            checked={column.autoIncrement}
            onChange={(e) => onUpdate('autoIncrement', e.target.checked)}
            className="w-4 h-4 accent-blue-500 rounded"
          />
          <span>自动递增</span>
        </label>
        {isMysql && (
          <>
            <label className="flex items-center gap-2 text-text-primary cursor-pointer">
              <input
                type="checkbox"
                checked={column.zerofill}
                onChange={(e) => onUpdate('zerofill', e.target.checked)}
                className="w-4 h-4 accent-blue-500 rounded"
              />
              <span>填充零</span>
            </label>
            <label className="flex items-center gap-2 text-text-primary cursor-pointer">
              <input
                type="checkbox"
                checked={column.isVirtual}
                onChange={(e) => onUpdate('isVirtual', e.target.checked)}
                className="w-4 h-4 accent-blue-500 rounded"
              />
              <span>虚拟</span>
            </label>
          </>
        )}
      </div>
    </div>
  )
}

// ============ 索引标签页 ============
interface IndexesTabProps {
  indexes: IndexDef[]
  columns: ColumnDef[]
  selectedId: string | null
  onSelect: (id: string | null) => void
  onAdd: () => void
  onRemove: (id: string) => void
  onUpdate: (id: string, field: keyof IndexDef, value: any) => void
  dbType: string
}

function IndexesTab({ indexes, columns, selectedId, onSelect, onAdd, onRemove, onUpdate, dbType }: IndexesTabProps) {
  const isMysql = dbType.toLowerCase() === 'mysql' || dbType.toLowerCase() === 'mariadb'
  const columnOptions = columns.filter(c => c.name).map(c => ({ label: c.name, value: c.name }))
  const indexTypeOptions = [
    { label: 'NORMAL', value: 'NORMAL' },
    { label: 'UNIQUE', value: 'UNIQUE' },
    ...(isMysql ? [{ label: 'FULLTEXT', value: 'FULLTEXT' }, { label: 'SPATIAL', value: 'SPATIAL' }] : [])
  ]
  const indexMethodOptions = [
    { label: 'BTREE', value: 'BTREE' },
    { label: 'HASH', value: 'HASH' }
  ]

  return (
    <div className="h-full flex flex-col">
      {/* 工具栏 */}
      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
        <button
          onClick={onAdd}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
        >
          <Plus size={14} />
          添加索引
        </button>
      </div>

      {/* 表格 */}
      <div className="flex-1 overflow-auto">
        <table className="w-full text-sm">
          <thead className="bg-white sticky top-0">
            <tr className="border-b border-border-default text-text-primary">
              <th className="w-40 px-3 py-2 text-left font-medium">名称</th>
              <th className="w-64 px-3 py-2 text-left font-medium">字段</th>
              <th className="w-28 px-3 py-2 text-left font-medium">索引类型</th>
              {isMysql && <th className="w-24 px-3 py-2 text-left font-medium">索引方法</th>}
              <th className="px-3 py-2 text-left font-medium">注释</th>
              <th className="w-16 px-3 py-2 text-center font-medium">操作</th>
            </tr>
          </thead>
          <tbody>
            {indexes.map((idx) => (
              <tr
                key={idx.id}
                onClick={() => onSelect(idx.id)}
                className={`border-b border-border-default/50 cursor-pointer transition-colors
                  ${selectedId === idx.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
                  ${idx._isNew ? 'bg-success-50' : ''}`}
              >
                <td className="px-3 py-1.5">
                  <input
                    type="text"
                    value={idx.name}
                    onChange={(e) => onUpdate(idx.id, 'name', e.target.value)}
                    onClick={(e) => e.stopPropagation()}
                    placeholder="索引名"
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <MultiSelect
                    values={idx.columns}
                    options={columnOptions}
                    onChange={(vals) => onUpdate(idx.id, 'columns', vals)}
                    placeholder="选择字段..."
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={idx.type}
                    options={indexTypeOptions}
                    onChange={(val) => onUpdate(idx.id, 'type', val)}
                    placeholder="索引类型"
                  />
                </td>
                {isMysql && (
                  <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                    <SearchableSelect
                      value={idx.method}
                      options={indexMethodOptions}
                      onChange={(val) => onUpdate(idx.id, 'method', val)}
                      placeholder="索引方法"
                    />
                  </td>
                )}
                <td className="px-3 py-1.5">
                  <input
                    type="text"
                    value={idx.comment}
                    onChange={(e) => onUpdate(idx.id, 'comment', e.target.value)}
                    onClick={(e) => e.stopPropagation()}
                    placeholder=""
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                  />
                </td>
                <td className="px-3 py-1.5 text-center">
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      onRemove(idx.id)
                    }}
                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors"
                    title="删除索引"
                  >
                    <Trash2 size={14} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {indexes.length === 0 && (
          <div className="text-center py-8 text-text-secondary text-sm">
            暂无索引，点击"添加索引"创建
          </div>
        )}
      </div>
    </div>
  )
}

// ============ 外键标签页 ============
interface ForeignKeysTabProps {
  foreignKeys: ForeignKeyDef[]
  columns: ColumnDef[]
  selectedId: string | null
  onSelect: (id: string | null) => void
  onAdd: () => void
  onRemove: (id: string) => void
  onUpdate: (id: string, field: keyof ForeignKeyDef | Record<string, any>, value?: any) => void
  onGetDatabases?: () => Promise<string[]>
  onGetTables?: (database: string) => Promise<string[]>
  onGetColumns?: (database: string, table: string) => Promise<string[]>
  currentDatabase: string
}

function ForeignKeysTab({ 
  foreignKeys, columns, selectedId, onSelect, onAdd, onRemove, onUpdate,
  onGetDatabases, onGetTables, onGetColumns, currentDatabase
}: ForeignKeysTabProps) {
  const [databases, setDatabases] = useState<string[]>([currentDatabase])
  const [refTables, setRefTables] = useState<Record<string, string[]>>({})
  const [refColumns, setRefColumns] = useState<Record<string, string[]>>({})

  useEffect(() => {
    if (onGetDatabases) {
      onGetDatabases().then(dbs => setDatabases(dbs))
    }
  }, [])

  // 当外键列表变化时，为没有加载表列表的外键自动加载当前数据库的表
  useEffect(() => {
    foreignKeys.forEach(fk => {
      if (!refTables[fk.id] && onGetTables) {
        const schema = fk.refSchema || currentDatabase
        onGetTables(schema).then(tables => {
          setRefTables(prev => ({ ...prev, [fk.id]: tables }))
        })
      }
    })
  }, [foreignKeys.length, currentDatabase])

  const loadRefTables = async (fkId: string, schema: string) => {
    if (!onGetTables) return
    const tables = await onGetTables(schema)
    setRefTables(prev => ({ ...prev, [fkId]: tables }))
  }

  const loadRefColumns = async (fkId: string, schema: string, table: string) => {
    if (!onGetColumns) return
    const cols = await onGetColumns(schema, table)
    setRefColumns(prev => ({ ...prev, [fkId]: cols }))
  }

  const FK_ACTIONS = ['CASCADE', 'SET NULL', 'NO ACTION', 'RESTRICT', 'SET DEFAULT']
  const columnOptions = columns.filter(c => c.name).map(c => ({ label: c.name, value: c.name }))
  const dbOptions = databases.map(db => ({ label: db, value: db }))
  const fkActionOptions = FK_ACTIONS.map(a => ({ label: a, value: a }))

  return (
    <div className="h-full flex flex-col">
      {/* 工具栏 */}
      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-white/30 flex-shrink-0">
        <button
          onClick={onAdd}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
        >
          <Plus size={14} />
          添加外键
        </button>
      </div>

      {/* 表格 */}
      <div className="flex-1 overflow-auto">
        <table className="w-full text-sm">
          <thead className="bg-white sticky top-0">
            <tr className="border-b border-border-default text-text-primary">
              <th className="w-36 px-3 py-2 text-left font-medium">名称</th>
              <th className="w-28 px-3 py-2 text-left font-medium">字段</th>
              <th className="w-28 px-3 py-2 text-left font-medium">被引用的数据库</th>
              <th className="w-28 px-3 py-2 text-left font-medium">被引用的表</th>
              <th className="w-28 px-3 py-2 text-left font-medium">被引用的字段</th>
              <th className="w-24 px-3 py-2 text-left font-medium">删除时</th>
              <th className="w-24 px-3 py-2 text-left font-medium">更新时</th>
              <th className="w-16 px-3 py-2 text-center font-medium">操作</th>
            </tr>
          </thead>
          <tbody>
            {foreignKeys.map((fk) => (
              <tr
                key={fk.id}
                onClick={() => onSelect(fk.id)}
                className={`border-b border-border-default/50 cursor-pointer transition-colors
                  ${selectedId === fk.id ? 'bg-primary-500/20' : 'hover:bg-light-hover/50'}
                  ${fk._isNew ? 'bg-success-50' : ''}`}
              >
                <td className="px-3 py-1.5">
                  <input
                    type="text"
                    value={fk.name}
                    onChange={(e) => onUpdate(fk.id, 'name', e.target.value)}
                    onClick={(e) => e.stopPropagation()}
                    placeholder="外键名"
                    className="w-full h-7 px-2 bg-transparent border border-transparent hover:border-border-default 
                               focus:border-primary-500 focus:bg-white focus:outline-none text-xs text-text-primary"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.columns[0] || ''}
                    options={columnOptions}
                    onChange={(val) => onUpdate(fk.id, 'columns', [val])}
                    placeholder="选择字段"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.refSchema || currentDatabase}
                    options={dbOptions}
                    onChange={(val) => {
                      // 批量更新：设置数据库并清空表和字段
                      onUpdate(fk.id, { refSchema: val, refTable: '', refColumns: [] })
                      // 自动加载该数据库下的表列表
                      loadRefTables(fk.id, val)
                    }}
                    placeholder="选择数据库"
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.refTable}
                    options={(refTables[fk.id] || []).map(t => ({ label: t, value: t }))}
                    onChange={(val) => {
                      onUpdate(fk.id, 'refTable', val)
                      loadRefColumns(fk.id, fk.refSchema || currentDatabase, val)
                    }}
                    placeholder={refTables[fk.id] ? "选择表" : "请先选择数据库"}
                    disabled={!refTables[fk.id]}
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.refColumns[0] || ''}
                    options={(refColumns[fk.id] || []).map(c => ({ label: c, value: c }))}
                    onChange={(val) => onUpdate(fk.id, 'refColumns', [val])}
                    placeholder={refColumns[fk.id] ? "选择字段" : "请先选择表"}
                    disabled={!fk.refTable || !refColumns[fk.id]}
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.onDelete}
                    options={fkActionOptions}
                    onChange={(val) => onUpdate(fk.id, 'onDelete', val)}
                  />
                </td>
                <td className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                  <SearchableSelect
                    value={fk.onUpdate}
                    options={fkActionOptions}
                    onChange={(val) => onUpdate(fk.id, 'onUpdate', val)}
                  />
                </td>
                <td className="px-3 py-1.5 text-center">
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      onRemove(fk.id)
                    }}
                    className="p-1 text-text-secondary hover:text-danger-500 hover:bg-danger-500/10 rounded transition-colors"
                    title="删除外键"
                  >
                    <Trash2 size={14} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {foreignKeys.length === 0 && (
          <div className="text-center py-8 text-text-secondary text-sm">
            暂无外键，点击"添加外键"创建
          </div>
        )}
      </div>
    </div>
  )
}

// ============ 选项标签页 ============
interface OptionsTabProps {
  options: TableOptions
  dbType: string
  onChange: (options: TableOptions) => void
}

function OptionsTab({ options, dbType, onChange }: OptionsTabProps) {
  const isMysql = dbType.toLowerCase() === 'mysql' || dbType.toLowerCase() === 'mariadb'

  const engineOptions = ENGINES.map(e => ({ label: e, value: e }))
  const rowFormatOptions = ROW_FORMATS.map(r => ({ label: r, value: r }))
  const charsetOptions = CHARSETS.map(c => ({ label: c, value: c }))
  const collationOptions = (COLLATIONS[options.charset] || []).map(c => ({ label: c, value: c }))

  if (!isMysql) {
    return (
      <div className="p-4 text-text-secondary text-sm">
        表选项仅适用于 MySQL / MariaDB
      </div>
    )
  }

  return (
    <div className="p-6 space-y-5">
      <div className="grid grid-cols-2 gap-5">
        <div>
          <label className="block text-sm text-text-primary font-medium mb-2">数据库引擎</label>
          <SearchableSelect
            value={options.engine}
            options={engineOptions}
            onChange={(val) => onChange({ ...options, engine: val })}
            placeholder="选择引擎"
            className="h-10 bg-white border border-border-default rounded-lg px-3"
          />
        </div>
        <div>
          <label className="block text-sm text-text-primary font-medium mb-2">行格式</label>
          <SearchableSelect
            value={options.rowFormat}
            options={rowFormatOptions}
            onChange={(val) => onChange({ ...options, rowFormat: val })}
            placeholder="选择行格式"
            className="h-10 bg-white border border-border-default rounded-lg px-3"
          />
        </div>
        <div>
          <label className="block text-sm text-text-primary font-medium mb-2">字符集</label>
          <SearchableSelect
            value={options.charset}
            options={charsetOptions}
            onChange={(val) => {
              const collations = COLLATIONS[val] || []
              onChange({ 
                ...options, 
                charset: val,
                collation: collations[0] || ''
              })
            }}
            placeholder="选择字符集"
            className="h-10 bg-white border border-border-default rounded-lg px-3"
          />
        </div>
        <div>
          <label className="block text-sm text-text-primary font-medium mb-2">排序规则</label>
          <SearchableSelect
            value={options.collation}
            options={collationOptions}
            onChange={(val) => onChange({ ...options, collation: val })}
            placeholder="选择排序规则"
            className="h-10 bg-white border border-border-default rounded-lg px-3"
          />
        </div>
        <div>
          <label className="block text-sm text-text-primary font-medium mb-2">自增值</label>
          <input
            type="text"
            value={options.autoIncrement}
            onChange={(e) => onChange({ ...options, autoIncrement: e.target.value })}
            placeholder="默认"
            className="w-full h-10 px-3 bg-white border border-border-default text-sm text-text-primary rounded-lg
                       focus:border-primary-500 focus:outline-none transition-colors"
          />
        </div>
      </div>
    </div>
  )
}

// ============ SQL 预览标签页 ============
function SqlPreviewTab({ sql }: { sql: string }) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(sql)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="h-full flex flex-col">
      <div className="flex items-center justify-between px-5 py-3 border-b border-border-default bg-white flex-shrink-0">
        <span className="text-sm text-text-primary font-medium">将要执行的 SQL 语句</span>
        <button
          onClick={handleCopy}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-primary bg-white hover:bg-light-hover border border-border-default rounded-lg transition-colors"
        >
          {copied ? '✓ 已复制' : '复制'}
        </button>
      </div>
      <div className="flex-1 overflow-auto p-5 bg-slate-50">
        <pre className="text-sm font-mono text-primary-600 whitespace-pre-wrap break-all leading-relaxed">
          {sql}
        </pre>
      </div>
    </div>
  )
}
