import React, { useState, useEffect, useCallback } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Modal,
  message,
  Popconfirm,
  Tag,
  Tooltip,
  Progress,
  Descriptions,
  Alert,
  Divider,
  Typography,
  Upload,
  Statistic,
  Row,
  Col,
} from 'antd';
import {
  CloudDownloadOutlined,
  CloudUploadOutlined,
  DeleteOutlined,
  DownloadOutlined,
  UploadOutlined,
  ReloadOutlined,
  FileTextOutlined,
  DatabaseOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import api, { backupAPI } from '../api';
import CloseButton from '../components/CloseButton';
import { useNavigate } from 'react-router-dom';

const { Title, Text } = Typography;

const formatBytes = (bytes) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

const formatDateTime = (dateStr) => {
  if (!dateStr) return '-';
  return new Date(dateStr).toLocaleString('zh-CN');
};

// 现代化设计系统
const designTokens = {
  colors: {
    primary: {
      main: '#667eea',
      light: '#764ba2',
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      gradientHover: 'linear-gradient(135deg, #764ba2 0%, #667eea 100%)',
    },
    success: {
      main: '#10b981',
      light: '#34d399',
      gradient: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
    },
    warning: {
      main: '#f59e0b',
      light: '#fbbf24',
    },
    danger: {
      main: '#ef4444',
      light: '#f87171',
      gradient: 'linear-gradient(135deg, #ef4444 0%, #f87171 100%)',
    },
    background: {
      primary: '#f8fafc',
      secondary: '#ffffff',
      accent: '#f1f5f9',
    },
    text: {
      primary: '#1e293b',
      secondary: '#64748b',
      muted: '#94a3b8',
    },
  },
  shadows: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
    glow: '0 0 20px rgba(102, 126, 234, 0.3)',
  },
  borderRadius: {
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '20px',
  },
  spacing: {
    xs: '8px',
    sm: '16px',
    md: '24px',
    lg: '32px',
    xl: '40px',
  },
};

const BackupManagement = () => {
  const navigate = useNavigate();
  const [backups, setBackups] = useState([]);
  const [loading, setLoading] = useState(false);
  const [backupLoading, setBackupLoading] = useState(false);
  const [restoreLoading, setRestoreLoading] = useState(false);
  const [selectedBackup, setSelectedBackup] = useState(null);
  const [detailVisible, setDetailVisible] = useState(false);
  const [restoreVisible, setRestoreVisible] = useState(false);
  const [backupInfo, setBackupInfo] = useState(null);
  const [restoreProgress, setRestoreProgress] = useState(0);
  const [restoreStatus, setRestoreStatus] = useState('');

  const fetchBackups = useCallback(async () => {
    setLoading(true);
    try {
      const response = await api.get('/backup/list');
      if (response?.success) {
        setBackups(response.data?.backups || []);
      }
    } catch (error) {
      message.error('获取备份列表失败');
    } finally {
      setLoading(false);
    }
  }, []);

  const fetchBackupInfo = useCallback(async () => {
    try {
      const response = await api.get('/backup/info');
      if (response?.success) {
        setBackupInfo(response.data);
      }
    } catch (error) {
      console.error('获取备份信息失败:', error);
    }
  }, []);

  useEffect(() => {
    fetchBackups();
    fetchBackupInfo();
  }, [fetchBackups, fetchBackupInfo]);

  const handleCreateBackup = async () => {
    setBackupLoading(true);
    try {
      const response = await api.post('/backup', {
        description: '手动备份',
        includeFiles: true,
      });
      if (response?.success) {
        message.success('备份创建成功');
        fetchBackups();
        fetchBackupInfo();
      } else {
        message.error(response.data?.message || '备份创建失败');
      }
    } catch (error) {
      message.error('备份创建失败: ' + (error.response?.data?.message || error.message || '未知错误'));
    } finally {
      setBackupLoading(false);
    }
  };

  const handleDownload = (filename) => {
    window.open(`/api/backup/download/${filename}`, '_blank');
  };

  const handleValidate = async (filename) => {
    try {
      const response = await api.get(`/backup/validate/${filename}`);
      if (response?.success && response.data?.valid) {
        const data = response.data;
        Modal.info({
          title: (
            <Space>
              <div style={{
                width: 40,
                height: 40,
                borderRadius: '12px',
                background: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <CheckCircleOutlined style={{ color: '#fff', fontSize: 24 }} />
              </div>
              <span style={{ fontSize: '20px', fontWeight: 700 }}>备份文件验证通过</span>
            </Space>
          ),
          width: 700,
          content: (
            <div style={{ marginTop: 16 }}>
              {/* 基本信息 */}
              <div style={{ 
                padding: '16px', 
                background: designTokens.colors.background.accent,
                borderRadius: designTokens.borderRadius.md,
                marginBottom: 16,
              }}>
                <Descriptions 
                  column={2} 
                  size="small"
                  colon={false}
                  labelStyle={{ fontWeight: 600, color: designTokens.colors.text.muted }}
                  contentStyle={{ fontWeight: 500, color: designTokens.colors.text.primary }}
                >
                  <Descriptions.Item label="版本">{data.version}</Descriptions.Item>
                  <Descriptions.Item label="类型">
                    <Tag color="blue">{data.backupType === 'full' ? '完整备份' : '部分备份'}</Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="创建时间">{formatDateTime(data.timestamp)}</Descriptions.Item>
                  <Descriptions.Item label="压缩">
                    {data.compressed ? (
                      <Tag color="green">是</Tag>
                    ) : (
                      <Tag>否</Tag>
                    )}
                  </Descriptions.Item>
                  {data.description && (
                    <Descriptions.Item label="描述" span={2}>
                      {data.description}
                    </Descriptions.Item>
                  )}
                </Descriptions>
              </div>

              {/* 系统信息 */}
              {data.systemInfo && (
                <div style={{ 
                  padding: '16px', 
                  background: designTokens.colors.background.accent,
                  borderRadius: designTokens.borderRadius.md,
                  marginBottom: 16,
                }}>
                  <p style={{ 
                    margin: '0 0 12px 0', 
                    fontWeight: 600, 
                    color: designTokens.colors.text.primary,
                    display: 'flex',
                    alignItems: 'center',
                  }}>
                    <DatabaseOutlined style={{ marginRight: 8 }} />
                    系统环境信息
                  </p>
                  <Descriptions 
                    column={2} 
                    size="small"
                    colon={false}
                    labelStyle={{ fontWeight: 500, color: designTokens.colors.text.muted, fontSize: 12 }}
                    contentStyle={{ fontWeight: 500, color: designTokens.colors.text.secondary, fontSize: 13 }}
                  >
                    <Descriptions.Item label="Node.js 版本">{data.systemInfo.nodeVersion}</Descriptions.Item>
                    <Descriptions.Item label="操作系统">{data.systemInfo.platform}</Descriptions.Item>
                    <Descriptions.Item label="系统架构">{data.systemInfo.arch}</Descriptions.Item>
                    <Descriptions.Item label="数据库类型">{data.systemInfo.dbType}</Descriptions.Item>
                  </Descriptions>
                </div>
              )}

              {/* 数据表统计 */}
              <div style={{ 
                padding: '16px', 
                background: designTokens.colors.background.accent,
                borderRadius: designTokens.borderRadius.md,
                marginBottom: 16,
              }}>
                <p style={{ 
                  margin: '0 0 12px 0', 
                  fontWeight: 600, 
                  color: designTokens.colors.text.primary,
                  display: 'flex',
                  alignItems: 'center',
                }}>
                  <DatabaseOutlined style={{ marginRight: 8 }} />
                  数据表详情（共 {data.metadata?.tableCount} 个表，{data.metadata?.totalRecords} 条记录）
                </p>
                {data.details?.tables && (
                  <div style={{ 
                    display: 'grid', 
                    gridTemplateColumns: 'repeat(2, 1fr)', 
                    gap: '8px',
                    maxHeight: '300px',
                    overflowY: 'auto',
                    padding: '8px',
                    background: designTokens.colors.background.secondary,
                    borderRadius: designTokens.borderRadius.sm,
                  }}>
                    {Object.entries(data.details.tables).map(([tableName, tableInfo]) => (
                      <div 
                        key={tableName}
                        style={{
                          padding: '10px 12px',
                          background: designTokens.colors.background.secondary,
                          borderRadius: designTokens.borderRadius.sm,
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          border: `1px solid ${designTokens.colors.text.muted}10`,
                        }}
                      >
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                          <span style={{ 
                            fontWeight: 600, 
                            color: designTokens.colors.text.primary,
                            fontSize: 14,
                          }}>
                            {tableInfo.displayName || tableName}
                          </span>
                          {tableInfo.displayName !== tableName && (
                            <span style={{ 
                              fontSize: 11, 
                              color: designTokens.colors.text.muted,
                            }}>
                              {tableName}
                            </span>
                          )}
                        </div>
                        <Tag color={tableInfo.hasData ? 'green' : 'default'} style={{ borderRadius: '4px' }}>
                          {tableInfo.recordCount} 条
                        </Tag>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* 文件备份详情 */}
              {data.details?.files && data.details.files.total > 0 && (
                <div style={{ 
                  padding: '16px', 
                  background: designTokens.colors.background.accent,
                  borderRadius: designTokens.borderRadius.md,
                  marginBottom: 16,
                }}>
                  <p style={{ 
                    margin: '0 0 12px 0', 
                    fontWeight: 600, 
                    color: designTokens.colors.text.primary,
                    display: 'flex',
                    alignItems: 'center',
                  }}>
                    <FileTextOutlined style={{ marginRight: 8 }} />
                    备份文件详情（共 {data.details.files.total} 个文件）
                  </p>
                  
                  {data.details.files.avatars > 0 && (
                    <div style={{ marginBottom: 12 }}>
                      <p style={{ 
                        margin: '0 0 8px 0', 
                        fontSize: 13, 
                        fontWeight: 500,
                        color: designTokens.colors.text.secondary,
                      }}>
                        头像文件 ({data.details.files.avatars} 个):
                      </p>
                      <div style={{ 
                        display: 'flex', 
                        flexWrap: 'wrap', 
                        gap: '6px',
                        padding: '8px',
                        background: designTokens.colors.background.secondary,
                        borderRadius: designTokens.borderRadius.sm,
                      }}>
                        {data.details.files.avatarList.map((file, index) => (
                          <Tag 
                            key={index} 
                            color="blue"
                            style={{ borderRadius: '4px', margin: 0 }}
                          >
                            <FileTextOutlined style={{ marginRight: 4 }} />
                            {file.filename} ({formatBytes(file.size)})
                          </Tag>
                        ))}
                      </div>
                    </div>
                  )}
                  
                  {data.details.files.others > 0 && (
                    <div>
                      <p style={{ 
                        margin: '0 0 8px 0', 
                        fontSize: 13, 
                        fontWeight: 500,
                        color: designTokens.colors.text.secondary,
                      }}>
                        其他文件 ({data.details.files.others} 个):
                      </p>
                      <div style={{ 
                        display: 'flex', 
                        flexWrap: 'wrap', 
                        gap: '6px',
                        padding: '8px',
                        background: designTokens.colors.background.secondary,
                        borderRadius: designTokens.borderRadius.sm,
                      }}>
                        {data.details.files.otherList.map((file, index) => (
                          <Tag 
                            key={index} 
                            color="purple"
                            style={{ borderRadius: '4px', margin: 0 }}
                          >
                            <FileTextOutlined style={{ marginRight: 4 }} />
                            {file.filename} ({formatBytes(file.size)})
                          </Tag>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* 汇总信息 */}
              <div style={{ 
                padding: '16px', 
                background: designTokens.colors.primary.main + '08',
                borderRadius: designTokens.borderRadius.md,
                border: `1px solid ${designTokens.colors.primary.main}20`,
              }}>
                <p style={{ 
                  margin: '0 0 12px 0', 
                  fontWeight: 600, 
                  color: designTokens.colors.text.primary,
                  display: 'flex',
                  alignItems: 'center',
                }}>
                  <InfoCircleOutlined style={{ marginRight: 8 }} />
                  备份汇总
                </p>
                <Row gutter={[16, 16]}>
                  <Col span={8}>
                    <div style={{ textAlign: 'center' }}>
                      <p style={{ 
                        margin: 0, 
                        fontSize: '24px', 
                        fontWeight: 700,
                        background: designTokens.colors.primary.gradient,
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent',
                        backgroundClip: 'text',
                      }}>
                        {data.metadata?.tableCount}
                      </p>
                      <p style={{ 
                        margin: '4px 0 0 0', 
                        fontSize: 12, 
                        color: designTokens.colors.text.muted 
                      }}>
                        数据表
                      </p>
                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{ textAlign: 'center' }}>
                      <p style={{ 
                        margin: 0, 
                        fontSize: '24px', 
                        fontWeight: 700,
                        background: designTokens.colors.success.gradient,
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent',
                        backgroundClip: 'text',
                      }}>
                        {data.metadata?.totalRecords}
                      </p>
                      <p style={{ 
                        margin: '4px 0 0 0', 
                        fontSize: 12, 
                        color: designTokens.colors.text.muted 
                      }}>
                        记录数
                      </p>
                    </div>
                  </Col>
                  <Col span={8}>
                    <div style={{ textAlign: 'center' }}>
                      <p style={{ 
                        margin: 0, 
                        fontSize: '24px', 
                        fontWeight: 700,
                        background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent',
                        backgroundClip: 'text',
                      }}>
                        {data.metadata?.fileCount}
                      </p>
                      <p style={{ 
                        margin: '4px 0 0 0', 
                        fontSize: 12, 
                        color: designTokens.colors.text.muted 
                      }}>
                        文件数
                      </p>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          ),
          maskClosable: false,
          okText: '关闭',
          okButtonProps: {
            style: primaryButtonStyle,
          },
        });
      } else {
        Modal.error({
          title: '备份文件验证失败',
          content: response.data?.data?.error || '文件可能已损坏',
        });
      }
    } catch (error) {
      message.error('验证失败: ' + (error.response?.data?.message || error.message || '未知错误'));
    }
  };

  const handleRestore = async (filename) => {
    setRestoreLoading(true);
    setRestoreProgress(0);
    setRestoreStatus('正在验证备份文件...');

    try {
      setRestoreProgress(10);
      setRestoreStatus('正在读取备份数据...');

      const response = await api.post('/backup/restore', {
        filename,
        options: {
          overwriteExisting: true,
          skipFiles: false,
        },
      });

      setRestoreProgress(90);
      setRestoreStatus('正在完成恢复...');

      if (response?.success) {
        const data = response.data;
        setRestoreProgress(100);
        setRestoreStatus('恢复完成!');

        setTimeout(() => {
          setRestoreVisible(false);
          setRestoreLoading(false);
          Modal.success({
            title: (
              <Space>
                <div style={{
                  width: 40,
                  height: 40,
                  borderRadius: '12px',
                  background: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <CheckCircleOutlined style={{ color: '#fff', fontSize: 24 }} />
                </div>
                <span style={{ fontSize: '20px', fontWeight: 700 }}>数据恢复成功</span>
              </Space>
            ),
            width: 700,
            content: (
              <div style={{ marginTop: 16 }}>
                {/* 汇总信息 */}
                <div style={{ 
                  padding: '16px', 
                  background: designTokens.colors.primary.main + '08',
                  borderRadius: designTokens.borderRadius.md,
                  border: `1px solid ${designTokens.colors.primary.main}20`,
                  marginBottom: 16,
                }}>
                  <Row gutter={[16, 16]}>
                    <Col span={6}>
                      <div style={{ textAlign: 'center' }}>
                        <p style={{ 
                          margin: 0, 
                          fontSize: '24px', 
                          fontWeight: 700,
                          background: designTokens.colors.primary.gradient,
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          backgroundClip: 'text',
                        }}>
                          {data.tablesRestored}
                        </p>
                        <p style={{ 
                          margin: '4px 0 0 0', 
                          fontSize: 12, 
                          color: designTokens.colors.text.muted 
                        }}>
                          恢复表数
                        </p>
                      </div>
                    </Col>
                    <Col span={6}>
                      <div style={{ textAlign: 'center' }}>
                        <p style={{ 
                          margin: 0, 
                          fontSize: '24px', 
                          fontWeight: 700,
                          background: designTokens.colors.success.gradient,
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          backgroundClip: 'text',
                        }}>
                          {data.recordsRestored}
                        </p>
                        <p style={{ 
                          margin: '4px 0 0 0', 
                          fontSize: 12, 
                          color: designTokens.colors.text.muted 
                        }}>
                          恢复记录
                        </p>
                      </div>
                    </Col>
                    <Col span={6}>
                      <div style={{ textAlign: 'center' }}>
                        <p style={{ 
                          margin: 0, 
                          fontSize: '24px', 
                          fontWeight: 700,
                          background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          backgroundClip: 'text',
                        }}>
                          {data.filesRestored}
                        </p>
                        <p style={{ 
                          margin: '4px 0 0 0', 
                          fontSize: 12, 
                          color: designTokens.colors.text.muted 
                        }}>
                          恢复文件
                        </p>
                      </div>
                    </Col>
                    <Col span={6}>
                      <div style={{ textAlign: 'center' }}>
                        <p style={{ 
                          margin: 0, 
                          fontSize: '24px', 
                          fontWeight: 700,
                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          backgroundClip: 'text',
                        }}>
                          {formatDateTime(data.restoredAt)}
                        </p>
                        <p style={{ 
                          margin: '4px 0 0 0', 
                          fontSize: 12, 
                          color: designTokens.colors.text.muted 
                        }}>
                          恢复时间
                        </p>
                      </div>
                    </Col>
                  </Row>
                </div>

                {/* 数据表恢复详情 */}
                {data.tableDetails && Object.keys(data.tableDetails).length > 0 && (
                  <div style={{ 
                    padding: '16px', 
                    background: designTokens.colors.background.accent,
                    borderRadius: designTokens.borderRadius.md,
                    marginBottom: 16,
                  }}>
                    <p style={{ 
                      margin: '0 0 12px 0', 
                      fontWeight: 600, 
                      color: designTokens.colors.text.primary,
                      display: 'flex',
                      alignItems: 'center',
                    }}>
                      <DatabaseOutlined style={{ marginRight: 8 }} />
                      数据表恢复详情
                    </p>
                    <div style={{ 
                      display: 'grid', 
                      gridTemplateColumns: 'repeat(2, 1fr)', 
                      gap: '8px',
                      maxHeight: '300px',
                      overflowY: 'auto',
                      padding: '8px',
                      background: designTokens.colors.background.secondary,
                      borderRadius: designTokens.borderRadius.sm,
                    }}>
                      {Object.entries(data.tableDetails).map(([tableName, tableInfo]) => (
                        <div 
                          key={tableName}
                          style={{
                            padding: '10px 12px',
                            background: designTokens.colors.background.secondary,
                            borderRadius: designTokens.borderRadius.sm,
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            border: `1px solid ${designTokens.colors.text.muted}10`,
                          }}
                        >
                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
                            <span style={{ 
                              fontWeight: 600, 
                              color: designTokens.colors.text.primary,
                              fontSize: 14,
                            }}>
                              {tableInfo.displayName || tableName}
                            </span>
                            {tableInfo.displayName !== tableName && (
                              <span style={{ 
                                fontSize: 11, 
                                color: designTokens.colors.text.muted,
                              }}>
                                {tableName}
                              </span>
                            )}
                          </div>
                          <Tag color={tableInfo.success ? 'green' : 'default'} style={{ borderRadius: '4px' }}>
                            {tableInfo.recordCount} 条
                          </Tag>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* 文件恢复详情 */}
                {data.fileDetails && (data.fileDetails.avatars > 0 || data.fileDetails.others > 0) && (
                  <div style={{ 
                    padding: '16px', 
                    background: designTokens.colors.background.accent,
                    borderRadius: designTokens.borderRadius.md,
                    marginBottom: 16,
                  }}>
                    <p style={{ 
                      margin: '0 0 12px 0', 
                      fontWeight: 600, 
                      color: designTokens.colors.text.primary,
                      display: 'flex',
                      alignItems: 'center',
                    }}>
                      <FileTextOutlined style={{ marginRight: 8 }} />
                      文件恢复详情
                    </p>
                    
                    {data.fileDetails.avatars > 0 && (
                      <div style={{ marginBottom: 12 }}>
                        <p style={{ 
                          margin: '0 0 8px 0', 
                          fontSize: 13, 
                          fontWeight: 500,
                          color: designTokens.colors.text.secondary,
                        }}>
                          头像文件：{data.fileDetails.avatars} 个
                        </p>
                      </div>
                    )}
                    
                    {data.fileDetails.others > 0 && (
                      <div>
                        <p style={{ 
                          margin: '0 0 8px 0', 
                          fontSize: 13, 
                          fontWeight: 500,
                          color: designTokens.colors.text.secondary,
                        }}>
                          其他文件：{data.fileDetails.others} 个
                        </p>
                      </div>
                    )}
                  </div>
                )}

                <Alert
                  message="建议刷新页面以确保所有数据生效"
                  type="info"
                  showIcon
                  style={{ marginTop: 16 }}
                />
              </div>
            ),
            maskClosable: false,
            okText: '完成',
            okButtonProps: {
              style: primaryButtonStyle,
            },
          });
        }, 500);
      } else {
        throw new Error(response.data?.message || '恢复失败');
      }
    } catch (error) {
      setRestoreLoading(false);
      Modal.error({
        title: '数据恢复失败',
        content: error.response?.data?.message || error.message || '未知错误',
      });
    }
  };

  const handleDelete = async (filename) => {
    try {
      const response = await api.delete(`/backup/${filename}`);
      if (response?.success) {
        message.success('删除成功');
        fetchBackups();
        fetchBackupInfo();
      } else {
        message.error(response?.message || '删除失败');
      }
    } catch (error) {
      message.error('删除失败: ' + (error.response?.data?.message || error.message || '未知错误'));
    }
  };

  const handleUpload = async (options) => {
    const { file, onSuccess, onError } = options;
    const formData = new FormData();
    formData.append('backup', file);

    try {
      const response = await api.post('/backup/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });

      if (response?.success) {
        message.success('备份文件上传成功');
        fetchBackups();
        fetchBackupInfo();
        onSuccess(response.data);
      } else {
        message.error(response?.message || '上传失败');
        onError(new Error(response?.message));
      }
    } catch (error) {
      message.error('上传失败: ' + (error.response?.data?.message || error.message || '未知错误'));
      onError(error);
    }
  };

  const handleCleanBackups = async (maxCount = 30, maxAgeDays = 90, dryRun = false) => {
    try {
      const response = await api.post('/backup/clean', {
        maxCount,
        maxAgeDays,
        dryRun,
      });

      if (response?.success) {
        const data = response.data;
        if (dryRun) {
          Modal.info({
            title: '清理预览',
            width: 500,
            content: (
              <div style={{ marginTop: 16 }}>
                <p>将删除 <strong>{data.deletedCount}</strong> 个旧备份文件</p>
                <p>将保留 <strong>{data.keptCount}</strong> 个备份文件</p>
                <p>预计释放空间: <strong>{data.freedSizeFormatted}</strong></p>
                {data.deleted.length > 0 && (
                  <div style={{ marginTop: 16 }}>
                    <Text type="secondary">待删除文件:</Text>
                    <ul style={{ margin: '8px 0', paddingLeft: 20 }}>
                      {data.deleted.slice(0, 5).map(f => <li key={f}>{f}</li>)}
                      {data.deleted.length > 5 && <li>... 还有 {data.deleted.length - 5} 个</li>}
                    </ul>
                  </div>
                )}
              </div>
            ),
          });
        } else {
          message.success(`已清理 ${data.deletedCount} 个旧备份，释放 ${data.freedSizeFormatted}`);
          fetchBackups();
          fetchBackupInfo();
        }
        return data;
      }
    } catch (error) {
      message.error('清理失败: ' + (error.response?.data?.message || error.message || '未知错误'));
    }
  };

  const showRestoreConfirm = (record) => {
    setSelectedBackup(record);
    setRestoreVisible(true);
  };

  const columns = [
    {
      title: (
        <span style={{ fontWeight: 600, color: designTokens.colors.text.primary }}>
          <FileTextOutlined style={{ marginRight: 4 }} />
          文件名
        </span>
      ),
      dataIndex: 'filename',
      key: 'filename',
      width: 280,
      render: (text, record) => (
        <Space>
          <div style={{
            width: 32,
            height: 32,
            borderRadius: '8px',
            background: record.compressed ? designTokens.colors.success.gradient : designTokens.colors.primary.gradient,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            <FileTextOutlined style={{ color: '#fff', fontSize: 16 }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <Text copyable={{ text }} style={{ fontWeight: 500, display: 'block' }}>{text}</Text>
            {record.description && (
              <div style={{ 
                fontSize: 12, 
                color: designTokens.colors.text.muted,
                marginTop: 4,
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}>
                {record.description}
              </div>
            )}
            {record.isUploaded && (
              <Tag color="blue" style={{ marginTop: 4, borderRadius: '4px' }}>
                上传文件
              </Tag>
            )}
            {record.invalid && (
              <Tag color="red" style={{ marginTop: 4, borderRadius: '4px' }}>
                无法识别
              </Tag>
            )}
          </div>
        </Space>
      ),
    },
    {
      title: <span style={{ fontWeight: 600, color: designTokens.colors.text.primary }}>文件大小</span>,
      dataIndex: 'size',
      key: 'size',
      width: 140,
      render: (size) => (
        <span style={{ 
          fontFamily: 'monospace', 
          fontWeight: 500,
          color: designTokens.colors.text.secondary 
        }}>
          {formatBytes(size)}
        </span>
      ),
    },
    {
      title: (
        <span style={{ fontWeight: 600, color: designTokens.colors.text.primary }}>
          <ClockCircleOutlined style={{ marginRight: 4 }} />
          创建时间
        </span>
      ),
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 200,
      render: (time, record) => {
        // 优先使用备份文件中的 timestamp，如果没有则使用文件创建时间
        const displayTime = record.timestamp ? new Date(record.timestamp) : new Date(time);
        return (
          <span style={{ color: designTokens.colors.text.secondary }}>
            {formatDateTime(displayTime.toISOString())}
          </span>
        );
      },
      sorter: (a, b) => {
        const timeA = a.timestamp ? new Date(a.timestamp) : new Date(a.createdAt);
        const timeB = b.timestamp ? new Date(b.timestamp) : new Date(b.createdAt);
        return timeA - timeB;
      },
    },
    {
      title: <span style={{ fontWeight: 600, color: designTokens.colors.text.primary }}>操作</span>,
      key: 'action',
      width: 320,
      render: (_, record) => (
        <Space size="small">
          <Tooltip title="验证备份">
            <Button
              shape="circle"
              icon={<CheckCircleOutlined style={{ fontSize: 16 }} />}
              onClick={() => handleValidate(record.filename)}
              style={{
                border: 'none',
                background: 'linear-gradient(135deg, #10b981 0%, #34d399 100%)',
                color: '#fff',
                boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
                width: 36,
                height: 36,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
              disabled={record.invalid}
            />
          </Tooltip>
          <Tooltip title="下载备份">
            <Button
              shape="circle"
              icon={<DownloadOutlined style={{ fontSize: 16 }} />}
              onClick={() => handleDownload(record.filename)}
              style={{
                border: 'none',
                background: designTokens.colors.primary.gradient,
                color: '#fff',
                boxShadow: '0 2px 8px rgba(102, 126, 234, 0.3)',
                width: 36,
                height: 36,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
              disabled={record.invalid}
            />
          </Tooltip>
          <Tooltip title="恢复数据">
            <Button
              shape="circle"
              icon={<CloudUploadOutlined style={{ fontSize: 16 }} />}
              onClick={() => showRestoreConfirm(record)}
              style={{
                border: 'none',
                background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
                color: '#fff',
                boxShadow: '0 2px 8px rgba(245, 158, 11, 0.3)',
                width: 36,
                height: 36,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
              disabled={record.invalid}
            />
          </Tooltip>
          <Popconfirm
            title="确定要删除此备份文件吗？"
            onConfirm={() => handleDelete(record.filename)}
            okText="确定"
            cancelText="取消"
          >
            <Tooltip title="删除备份">
              <Button
                shape="circle"
                icon={<DeleteOutlined style={{ fontSize: 16 }} />}
                style={{
                  border: 'none',
                  background: designTokens.colors.danger.gradient,
                  color: '#fff',
                  boxShadow: '0 2px 8px rgba(239, 68, 68, 0.3)',
                  width: 36,
                  height: 36,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              />
            </Tooltip>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 页面容器样式
  const containerStyle = {
    minHeight: '100vh',
    background: `linear-gradient(135deg, ${designTokens.colors.background.primary} 0%, ${designTokens.colors.background.accent} 100%)`,
    padding: `${designTokens.spacing.lg} ${designTokens.spacing.lg}`,
  };

  // 页面标题样式
  const pageHeaderStyle = {
    marginBottom: '32px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: '20px',
    padding: `${designTokens.spacing.md} ${designTokens.spacing.lg}`,
    background: designTokens.colors.background.secondary,
    borderRadius: designTokens.borderRadius.xl,
    boxShadow: designTokens.shadows.lg,
  };

  const titleStyle = {
    fontSize: '28px',
    fontWeight: '800',
    margin: 0,
    background: designTokens.colors.primary.gradient,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    letterSpacing: '0.5px',
  };

  // 卡片通用样式
  const cardStyle = {
    borderRadius: designTokens.borderRadius.lg,
    border: 'none',
    boxShadow: designTokens.shadows.lg,
    overflow: 'hidden',
    background: designTokens.colors.background.secondary,
    transition: 'all 0.3s ease',
  };

  // 统计卡片样式
  const statCardStyle = {
    ...cardStyle,
    background: designTokens.colors.background.secondary,
    position: 'relative',
    overflow: 'hidden',
  };

  // 按钮组样式
  const buttonGroupStyle = {
    display: 'flex',
    gap: '12px',
    flexWrap: 'wrap',
  };

  // 主按钮样式
  const primaryButtonStyle = {
    background: designTokens.colors.primary.gradient,
    border: 'none',
    borderRadius: designTokens.borderRadius.md,
    padding: '8px 20px',
    fontWeight: 600,
    boxShadow: designTokens.shadows.md,
    transition: 'all 0.3s ease',
    color: '#fff',
    textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
  };

  // 次要按钮样式
  const secondaryButtonStyle = {
    background: designTokens.colors.background.secondary,
    border: `1px solid ${designTokens.colors.text.muted}`,
    borderRadius: designTokens.borderRadius.md,
    padding: '8px 20px',
    fontWeight: 500,
    color: designTokens.colors.text.primary,
    transition: 'all 0.3s ease',
  };

  // 危险按钮样式
  const dangerButtonStyle = {
    background: designTokens.colors.danger.gradient,
    border: 'none',
    borderRadius: designTokens.borderRadius.md,
    padding: '8px 20px',
    fontWeight: 600,
    boxShadow: designTokens.shadows.md,
    transition: 'all 0.3s ease',
    color: '#fff',
    textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
  };

  return (
    <div style={containerStyle}>
      <div style={pageHeaderStyle}>
        <div>
          <h1 style={titleStyle}>
            <DatabaseOutlined style={{ marginRight: 12, verticalAlign: 'middle' }} />
            数据备份管理
          </h1>
          <p style={{ 
            margin: '8px 0 0 0', 
            color: designTokens.colors.text.secondary,
            fontSize: '14px',
          }}>
            管理系统备份，确保数据安全与可恢复性
          </p>
        </div>
        <div style={buttonGroupStyle}>
          <Button
            icon={<SettingOutlined />}
            onClick={() => navigate('/auto-backup-settings')}
            style={{
              ...secondaryButtonStyle,
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
            }}
          >
            自动备份设置
          </Button>
          <Button 
            icon={<ReloadOutlined />} 
            onClick={() => { fetchBackups(); fetchBackupInfo(); }}
            style={secondaryButtonStyle}
          >
            刷新
          </Button>
          <Popconfirm
            title="清理旧备份"
            description={
              <div>
                <p>将删除超过 30 个或超过 90 天的旧备份</p>
                <p style={{ color: designTokens.colors.text.muted, fontSize: 12 }}>建议先点击"预览"查看将删除的文件</p>
              </div>
            }
            onConfirm={() => handleCleanBackups(30, 90, false)}
            okText="确认清理"
            cancelText="取消"
          >
            <Button 
              icon={<DeleteOutlined />} 
              danger
              style={dangerButtonStyle}
            >
              清理旧备份
            </Button>
          </Popconfirm>
          <Button 
            onClick={() => handleCleanBackups(30, 90, true)}
            style={secondaryButtonStyle}
          >
            预览清理
          </Button>
          <Upload
            customRequest={handleUpload}
            showUploadList={false}
            accept=".json,.gz,.json.gz"
          >
            <Button 
              icon={<UploadOutlined />}
              style={secondaryButtonStyle}
            >
              上传备份
            </Button>
          </Upload>
          <Button
            type="primary"
            icon={<CloudDownloadOutlined />}
            loading={backupLoading}
            onClick={handleCreateBackup}
            style={primaryButtonStyle}
          >
            创建备份
          </Button>
        </div>
      </div>

      {backupInfo && (
        <Row gutter={[24, 24]} style={{ marginBottom: 32 }}>
          <Col xs={24} sm={8}>
            <Card style={statCardStyle}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                minHeight: '120px',
              }}>
                <div style={{ flex: 1 }}>
                  <p style={{ 
                    margin: 0, 
                    color: designTokens.colors.text.muted,
                    fontSize: '14px',
                    fontWeight: 500,
                  }}>
                    备份文件数量
                  </p>
                  <p style={{ 
                    margin: '8px 0 0 0', 
                    fontSize: '32px', 
                    fontWeight: '700',
                    background: designTokens.colors.primary.gradient,
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                    lineHeight: 1.2,
                  }}>
                    {backupInfo.backupCount}
                    <span style={{ fontSize: '16px', marginLeft: 4 }}>个</span>
                  </p>
                </div>
                <div style={{
                  width: 64,
                  height: 64,
                  borderRadius: '16px',
                  background: designTokens.colors.primary.gradient,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  boxShadow: designTokens.shadows.lg,
                  flexShrink: 0,
                }}>
                  <DatabaseOutlined style={{ color: '#fff', fontSize: 32 }} />
                </div>
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card style={statCardStyle}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                minHeight: '120px',
              }}>
                <div style={{ flex: 1 }}>
                  <p style={{ 
                    margin: 0, 
                    color: designTokens.colors.text.muted,
                    fontSize: '14px',
                    fontWeight: 500,
                  }}>
                    备份总大小
                  </p>
                  <p style={{ 
                    margin: '8px 0 0 0', 
                    fontSize: '32px', 
                    fontWeight: '700',
                    background: designTokens.colors.success.gradient,
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                    lineHeight: 1.2,
                  }}>
                    {backupInfo.totalSizeFormatted}
                  </p>
                </div>
                <div style={{
                  width: 64,
                  height: 64,
                  borderRadius: '16px',
                  background: designTokens.colors.success.gradient,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  boxShadow: designTokens.shadows.lg,
                  flexShrink: 0,
                }}>
                  <FileTextOutlined style={{ color: '#fff', fontSize: 32 }} />
                </div>
              </div>
            </Card>
          </Col>
          <Col xs={24} sm={8}>
            <Card style={statCardStyle}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                minHeight: '120px',
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <p style={{ 
                    margin: 0, 
                    color: designTokens.colors.text.muted,
                    fontSize: '14px',
                    fontWeight: 500,
                  }}>
                    备份存储路径
                  </p>
                  <p style={{ 
                    margin: '8px 0 0 0', 
                    fontSize: '13px', 
                    fontWeight: 500,
                    color: designTokens.colors.text.secondary,
                    wordBreak: 'break-all',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    lineHeight: 1.4,
                  }}>
                    {backupInfo.backupPath}
                  </p>
                </div>
                <div style={{
                  width: 64,
                  height: 64,
                  borderRadius: '16px',
                  background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  boxShadow: designTokens.shadows.lg,
                  flexShrink: 0,
                }}>
                  <InfoCircleOutlined style={{ color: '#fff', fontSize: 32 }} />
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      )}

      <Card style={cardStyle} styles={{ body: { padding: '24px' } }}>
        <Alert
          message={
            <span style={{ fontWeight: 600 }}>
              <InfoCircleOutlined style={{ marginRight: 8 }} />
              备份说明
            </span>
          }
          description={
            <div style={{ marginTop: 12 }}>
              <p style={{ margin: '8px 0', color: designTokens.colors.text.secondary }}>
                ✓ 备份包含所有数据库表数据（设备、机柜、用户、工单、耗材等）
              </p>
              <p style={{ margin: '8px 0', color: designTokens.colors.text.secondary }}>
                ✓ 备份包含上传的文件（用户头像等）
              </p>
              <p style={{ margin: '8px 0', color: designTokens.colors.text.secondary }}>
                ✓ 可通过下载备份文件在新环境中恢复所有数据
              </p>
              <p style={{ margin: '8px 0', color: designTokens.colors.text.secondary }}>
                ✓ 建议定期备份以确保数据安全
              </p>
            </div>
          }
          type="info"
          showIcon
          style={{ 
            marginBottom: 24,
            borderRadius: designTokens.borderRadius.md,
            border: `1px solid ${designTokens.colors.text.muted}20`,
            background: `${designTokens.colors.primary.main}08`,
          }}
        />

        <Table
          columns={columns}
          dataSource={backups}
          rowKey="filename"
          loading={loading}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 个备份文件`,
            pageSizeOptions: ['10', '20', '50', '100'],
          }}
          locale={{
            emptyText: (
              <div style={{ 
                padding: '60px 0', 
                textAlign: 'center',
              }}>
                <div style={{
                  width: 80,
                  height: 80,
                  margin: '0 auto 16px',
                  borderRadius: '50%',
                  background: designTokens.colors.background.accent,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  <DatabaseOutlined style={{ fontSize: 40, color: designTokens.colors.text.muted }} />
                </div>
                <p style={{ 
                  margin: 0, 
                  fontSize: 16, 
                  fontWeight: 500,
                  color: designTokens.colors.text.primary,
                }}>
                  暂无备份文件
                </p>
                <p style={{ 
                  margin: '8px 0 0 0', 
                  fontSize: 14, 
                  color: designTokens.colors.text.muted,
                }}>
                  点击"创建备份"按钮开始备份
                </p>
              </div>
            ),
          }}
          rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
          style={{ 
            borderRadius: designTokens.borderRadius.md,
            overflow: 'hidden',
          }}
        />
      </Card>

      <Modal
        title={
          <Space>
            <div style={{
              width: 40,
              height: 40,
              borderRadius: '12px',
              background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <ExclamationCircleOutlined style={{ color: '#fff', fontSize: 24 }} />
            </div>
            <span style={{ 
              fontSize: '20px', 
              fontWeight: 700,
              color: designTokens.colors.text.primary,
            }}>
              确认恢复数据
            </span>
          </Space>
        }
        open={restoreVisible}
        closeIcon={<CloseButton />}
        onCancel={() => {
          if (!restoreLoading) {
            setRestoreVisible(false);
          }
        }}
        footer={null}
        width={560}
        maskClosable={false}
        styles={{
          body: { padding: '24px' },
          header: { padding: '20px 24px', borderBottom: `1px solid ${designTokens.colors.text.muted}20` },
        }}
      >
        <div style={{ marginTop: 8 }}>
          {restoreLoading ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{
                width: 80,
                height: 80,
                margin: '0 auto 24px',
                borderRadius: '50%',
                background: designTokens.colors.background.accent,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <CloudUploadOutlined style={{ fontSize: 40, color: designTokens.colors.primary.main }} />
              </div>
              <Progress 
                percent={restoreProgress} 
                status="active" 
                strokeColor={{
                  '0%': '#667eea',
                  '100%': '#764ba2',
                }}
                trailColor={designTokens.colors.background.accent}
              />
              <Text style={{ 
                marginTop: 16, 
                display: 'block', 
                fontSize: 14,
                color: designTokens.colors.text.secondary,
              }}>
                {restoreStatus}
              </Text>
            </div>
          ) : (
            <>
              <Alert
                message={
                  <span style={{ fontWeight: 600 }}>
                    <ExclamationCircleOutlined style={{ marginRight: 8 }} />
                    警告：恢复操作将覆盖当前所有数据
                  </span>
                }
                description="此操作不可撤销，建议先创建当前数据的备份"
                type="warning"
                showIcon
                style={{ 
                  marginBottom: 20,
                  borderRadius: designTokens.borderRadius.md,
                  border: `1px solid ${designTokens.colors.warning.main}30`,
                  background: `${designTokens.colors.warning.main}08`,
                }}
              />

              {selectedBackup && (
                <div style={{
                  background: designTokens.colors.background.accent,
                  borderRadius: designTokens.borderRadius.md,
                  padding: '16px',
                  marginBottom: 20,
                }}>
                  <Descriptions 
                    column={1} 
                    size="small"
                    colon={false}
                    labelStyle={{ 
                      fontWeight: 600, 
                      color: designTokens.colors.text.muted,
                      marginBottom: 8,
                    }}
                    contentStyle={{ 
                      fontWeight: 500, 
                      color: designTokens.colors.text.primary,
                    }}
                  >
                    <Descriptions.Item label="备份文件">
                      <Space>
                        <FileTextOutlined style={{ color: designTokens.colors.primary.main }} />
                        {selectedBackup.filename}
                      </Space>
                    </Descriptions.Item>
                    <Descriptions.Item label="文件大小">
                      <span style={{ fontFamily: 'monospace', color: designTokens.colors.success.main }}>
                        {formatBytes(selectedBackup.size)}
                      </span>
                    </Descriptions.Item>
                    <Descriptions.Item label="创建时间">
                      <Space>
                        <ClockCircleOutlined style={{ color: designTokens.colors.text.muted }} />
                        {formatDateTime(selectedBackup.createdAt)}
                      </Space>
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              )}

              <Divider style={{ margin: '20px 0' }} />

              <Space style={{ width: '100%', justifyContent: 'space-between' }}>
                <Button 
                  onClick={() => setRestoreVisible(false)}
                  style={secondaryButtonStyle}
                  disabled={restoreLoading}
                >
                  取消
                </Button>
                <Button
                  type="primary"
                  danger
                  onClick={() => handleRestore(selectedBackup?.filename)}
                  style={{
                    ...dangerButtonStyle,
                    padding: '8px 32px',
                  }}
                >
                  确认恢复
                </Button>
              </Space>
            </>
          )}
        </div>
      </Modal>
    </div>
  );
};

export default BackupManagement;