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

interface Record {
    id: string;
    name: string;
    apiKey: string;
    createTime: string;
    [key: string]: any;
}

const ApiKeyList: React.FC = () => {
    const [listLoading, setListLoading] = React.useState(false);
    const [list, setList] = React.useState<Record[]>([]);
    const [page, setPage] = React.useState({
        pageNum: 1,
        pageSize: 10,
        total: 0,
    });

    const fetchApiKeyList = React.useCallback(async () => {
        setListLoading(true);
        try {
            // TODO: 调用 API 获取数据
            setList([]);
        } catch (error) {
            console.error('获取 API Key 列表失败:', error);
        } finally {
            setListLoading(false);
        }
    }, []);

    React.useEffect(() => {
        fetchApiKeyList();
    }, [fetchApiKeyList]);

    const columns: TableColumnsType<Record> = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'API Key',
            dataIndex: 'apiKey',
            key: 'apiKey',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
        },
    ];

    return (
        <div className="page-container">
            {/* 标题区域 */}
            <div className="list-header">
                <div className='list-header-title'>
                    <h1>API Key 管理</h1>
                    <p>管理和使用 API Key</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 />
                </div>
                
                {/* 表格区域 */}
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={list}
                    loading={listLoading}
                    pagination={{
                        current: page.pageNum,
                        pageSize: page.pageSize,
                        total: page.total,
                    }}
                />
            </div>
        </div>
    );
};

export default ApiKeyList;
