import * as React from 'react';
import { Button, Table, TableColumnsType, TablePaginationConfig, Modal } from 'antd';
import { PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import Search from './components/Search';
import dayjs from 'dayjs';
import store from './store';
import { Record } from './types';
import './style.scss';

const UsageStatistics: React.FC = () => {
    const {
        state,
        onClickSearch,
        onClickReset,
        onChangePagination,
        onClickDownload,
        init,
        reset
    } = store;
    const {
        listLoading,
        list,
        page
    } = state;

    React.useEffect(() => {
        init();
        return () => reset();
    }, []);

    const columns: TableColumnsType<Record> = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            render: (text, record, index) => {
                return index + 1;
            }
        },
        {
            title: '项目',
            dataIndex: 'dialog_name',
        },
        {
            title: '更新时间',
            dataIndex: 'create_time',
            width: 180,
            render: (text) => {
                if (text) {
                    return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
                } else {
                    return '--';
                }
            }
        },
        {
            title: '已用空间',
            dataIndex: 'length',
            width: 120,
            render: (text) => {
                return text + ' GB';
            }
        },
        {
            title: '剩余空间',
            dataIndex: 'create_time',
            width: 120,
            render: (text) => {
                if (text) {
                    return dayjs(text).format('YYYY-MM-DD');
                } else {
                    return '--';
                }
            }
        },
        {
            title: '变化日志',
            dataIndex: 'operation',
            width: 120,
            render: () => (
                <span className="text-primary" style={{ cursor: 'pointer' }}>
                    查看
                </span>
            )
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 100,
            fixed: 'right',
            render: (text, record) => {
                return (
                    <a
                        onClick={() => {
                            Modal.confirm({
                                title: '导出',
                                content: '确定导出 Excel 吗？',
                                onOk: async () => {
                                    await onClickDownload(record.id, record.dialog_name);
                                }
                            });
                        }}
                    >
                        <DownloadOutlined /> 导出
                    </a>
                );
            }
        }
    ];

    const paginationConfig: TablePaginationConfig = {
        showTotal: (total: number) => `共 ${total} 条`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showQuickJumper: true,
        current: page.pageNum,
        pageSize: page.pageSize,
        total: page.total,
        onChange: async (page, pageSize) => {
            await onChangePagination(page, pageSize);
        },
    };

    return (
        <div className="page-container">
            {/* List Header */}
            <div className="list-header">
                <div className="list-header-title">
                    <h1>使用统计</h1>
                    <p>查看系统使用情况和空间统计</p>
                </div>
                <div className="list-header-actions">
                    <Button type="primary" icon={<PlusOutlined />}>
                        创建
                    </Button>
                </div>
            </div>

            {/* 搜索 + 表格区域 - 共用一个 content-section */}
            <div className="content-section">
                {/* 搜索区域 */}
                <div style={{ marginBottom: 16 }}>
                    <Search
                        onClickSearch={onClickSearch}
                        onClickReset={onClickReset}
                    />
                </div>
                
                {/* 表格区域 */}
                <Table
                    scroll={{ x: 'max-content' }}
                    rowKey={(record) => record.id}
                    loading={listLoading}
                    columns={columns}
                    dataSource={list}
                    pagination={paginationConfig}
                />
            </div>
        </div>
    );
};

export default UsageStatistics;
