import { useEffect } from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { ArrowUpOutlined } from '@ant-design/icons';
import PositionList from './components/PositionList';
import { stockDataService } from '@/services/stock-data';
import './AssetsPage.css';

const AssetsPage = () => {
    // 初始化股票数据（页面加载时）
    useEffect(() => {
        stockDataService.init().catch((error) => {
            console.error('初始化股票数据失败', error);
        });
    }, []);

    // 写死的数据（占位）
    const stats = {
        totalAssets: 1234567,
        totalProfit: 234567,
        profitRate: 23.4,
        recordDays: 300,
    };

    return (
        <div className="assets-page">
            {/* 统计卡片 */}
            <Row gutter={[16, 16]} className="stats-row">
                <Col xs={24} sm={12} lg={6}>
                    <Card>
                        <Statistic
                            title="总资产"
                            value={stats.totalAssets}
                            prefix="¥"
                            valueStyle={{ color: '#1f2937' }}
                        />
                        <div className="stat-change positive">
                            <ArrowUpOutlined /> +2.5% 今日
                        </div>
                    </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                    <Card>
                        <Statistic
                            title="累计收益"
                            value={stats.totalProfit}
                            prefix="¥"
                            valueStyle={{ color: '#1f2937' }}
                        />
                        <div className="stat-change positive">
                            <ArrowUpOutlined /> +{stats.profitRate}%
                        </div>
                    </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                    <Card>
                        <Statistic
                            title="累计收益率"
                            value={stats.profitRate}
                            suffix="%"
                            valueStyle={{ color: '#1f2937' }}
                        />
                        <div className="stat-change positive">
                            <ArrowUpOutlined /> +2.3%
                        </div>
                    </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                    <Card>
                        <Statistic
                            title="记账时长"
                            value={stats.recordDays}
                            suffix="天"
                            valueStyle={{ color: '#1f2937' }}
                        />
                    </Card>
                </Col>
            </Row>

            {/* 资产趋势图表占位 */}
            <Card className="chart-card" title="资产趋势">
                <div className="chart-placeholder">
                    <p>图表区域（后续使用 ECharts 实现）</p>
                </div>
            </Card>

            {/* 持仓列表 */}
            <PositionList />
        </div>
    );
};

export default AssetsPage;