import React from 'react';
import { Card, Typography, Button, Table, Tag, Space, Modal, Form, Input, DatePicker, message, Row, Col, Progress } from 'antd';
import { DownloadOutlined, UploadOutlined, DeleteOutlined, ClockCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Title, Paragraph, Text } = Typography;

const BackupPage: React.FC = () => {
  const [loading, setLoading] = React.useState(false);
  const [backuping, setBackuping] = React.useState(false);

  const columns = [
    { title: '备份名称', dataIndex: 'name', key: 'name' },
    { title: '备份时间', dataIndex: 'time', key: 'time' },
    { title: '文件大小', dataIndex: 'size', key: 'size' },
    { title: '备份类型', dataIndex: 'type', key: 'type', render: (v: string) => <Tag color={v === 'auto' ? 'blue' : 'green'}>{v === 'auto' ? '自动' : '手动'}</Tag> },
    { title: '状态', dataIndex: 'status', key: 'status', render: (v: string) => <Tag color={v === 'success' ? 'success' : 'error'}>{v === 'success' ? '成功' : '失败'}</Tag> },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space>
          <Button size="small" type="link" icon={<DownloadOutlined />}>下载</Button>
          <Button size="small" type="link" icon={<UploadOutlined />}>恢复</Button>
          <Button size="small" danger type="link" icon={<DeleteOutlined />}>删除</Button>
        </Space>
      )
    }
  ];

  const data = [
    { key: '1', name: 'backup-20260319.sql', time: '2026-03-19 00:00', size: '15.2 MB', type: 'auto', status: 'success' },
    { key: '2', name: 'backup-20260318.sql', time: '2026-03-18 00:00', size: '14.8 MB', type: 'auto', status: 'success' },
    { key: '3', name: 'backup-manual-20260317.sql', time: '2026-03-17 15:30', size: '14.5 MB', type: 'manual', status: 'success' },
  ];

  const handleBackup = () => {
    setBackuping(true);
    setTimeout(() => {
      message.success('备份创建成功');
      setBackuping(false);
    }, 2000);
  };

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <Title level={3} style={{ marginBottom: 8 }}>数据备份</Title>
        <Paragraph type="secondary">管理系统数据备份与恢复</Paragraph>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Text type="secondary">总备份数</Text>
            <Title level={2} style={{ margin: '8px 0 0' }}>3</Title>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Text type="secondary">总大小</Text>
            <Title level={2} style={{ margin: '8px 0 0' }}>44.5 MB</Title>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Text type="secondary">最近备份</Text>
            <Title level={4} style={{ margin: '8px 0 0' }}>2026-03-19 00:00</Title>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Text type="secondary">存储空间</Text>
            <Progress percent={30} size="small" style={{ marginTop: 8 }} />
            <Text type="secondary">300 MB / 1 GB</Text>
          </Card>
        </Col>
      </Row>

      <Card 
        title="备份列表"
        extra={
          <Space>
            <Button icon={<ClockCircleOutlined />}>自动备份设置</Button>
            <Button type="primary" icon={<DownloadOutlined />} loading={backuping} onClick={handleBackup}>
              立即备份
            </Button>
          </Space>
        }
      >
        <Table columns={columns} dataSource={data} loading={loading} pagination={{ pageSize: 10 }} />
      </Card>
    </div>
  );
};

export default BackupPage;
