import { FireOutlined, RiseOutlined, FallOutlined, LineOutlined } from '@ant-design/icons';
import { ProTable, type ProColumns } from '@ant-design/pro-components';
import { useIntl, FormattedMessage } from '@umijs/max';
import { Image, Space, Tag, Typography, theme, Rate } from 'antd';
import React from 'react';
import type { RankingItem } from './data';
import { queryRankingList } from '@/services/ranking';
import styles from './index.module.css';

const { Text, Title } = Typography;

const RankingPage: React.FC = () => {
    const intl = useIntl();
    const { token } = theme.useToken();

    const getTrendIcon = (trend: RankingItem['trend']) => {
        switch (trend) {
            case 'up': return <RiseOutlined className={styles.trendUp} />;
            case 'down': return <FallOutlined className={styles.trendDown} />;
            default: return <LineOutlined className={styles.trendStable} />;
        }
    };

    const columns: ProColumns<RankingItem>[] = [
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.rank', defaultMessage: '排名' }),
            dataIndex: 'rank',
            width: 80,
            align: 'center',
            render: (rank) => {
                const rankNum = rank as number;
                let className = styles.rankOther;
                if (rankNum === 1) className = styles.rank1;
                if (rankNum === 2) className = styles.rank2;
                if (rankNum === 3) className = styles.rank3;
                return <div className={`${styles.rankBadge} ${className}`}>{rankNum}</div>;
            },
        },
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.title', defaultMessage: '内容标题' }),
            dataIndex: 'title',
            render: (_, record) => (
                <div className={styles.titleCell}>
                    <Image
                        src={record.cover}
                        width={60}
                        height={84}
                        className={styles.cover}
                        preview={false}
                    />
                    <Space direction="vertical" size={0}>
                        <Text strong style={{ fontSize: 16 }}>{record.title}</Text>
                        <Text type="secondary" style={{ fontSize: 12 }}>{record.subTitle}</Text>
                    </Space>
                </div>
            ),
        },
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.rating', defaultMessage: '评分' }),
            dataIndex: 'rating',
            sorter: true,
            render: (v) => (
                <Space direction="vertical" size={0}>
                    <Text style={{ color: '#faad14', fontWeight: 'bold', fontSize: 18 }}>{v as number}</Text>
                    <Rate disabled defaultValue={Math.round((v as number) / 2)} style={{ fontSize: 12 }} />
                </Space>
            ),
        },
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.category', defaultMessage: '分类' }),
            dataIndex: 'category',
            render: (v) => <Tag color="blue">{v as string}</Tag>,
        },
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.viewCount', defaultMessage: '热度值' }),
            dataIndex: 'viewCount',
            hideInSearch: true,
            render: (_, record) => `${((record.viewCount || 0) / 10000).toFixed(1)}W`,
        },
        {
            title: intl.formatMessage({ id: 'pages.ranking.columns.trend', defaultMessage: '趋势' }),
            dataIndex: 'trend',
            render: (v) => (
                <Space>
                    {getTrendIcon(v as RankingItem['trend'])}
                    <Text type="secondary">
                        {v === 'up' ? '上升' : v === 'down' ? '下降' : '持平'}
                    </Text>
                </Space>
            ),
        },
    ];

    return (
        <div className={styles.pageContainer} style={{ background: token.colorBgLayout }}>
            <ProTable<RankingItem>
                headerTitle={
                    <Space>
                        <FireOutlined style={{ color: '#ff4d4f' }} />
                        <Title level={4} style={{ margin: 0 }}>
                            {intl.formatMessage({ id: 'pages.ranking.title', defaultMessage: '影片实时排行榜' })}
                        </Title>
                    </Space>
                }
                className={styles.proTable}
                rowKey="id"
                search={false}
                pagination={{
                    pageSize: 10,
                }}
                request={queryRankingList}
                columns={columns}
            />
        </div>
    );
};

export default RankingPage;
