import {
    Card,
    Descriptions,
    Button,
    Typography,
    Skeleton,
    Result,
    Space,
    Tag,
    Divider,
    theme as antTheme,
} from 'antd';
import {
    UserOutlined,
    WalletOutlined,
    CrownOutlined,
    BarChartOutlined,
    RightOutlined,
} from '@ant-design/icons';
import {EnumResolver} from '@/shared/utils/enum-resolver';
import type { VipLevelsItem } from '@/modules/account/controllers/vip-api';
import { useAccountInfo } from '@/shared/hooks/use-api';
import { centToYuan, formatDate } from '@/shared/utils/display';

const {Text, Title} = Typography;

export function AccountInfo() {
    const {token} = antTheme.useToken();
    const { data, loading, error, errorMessage, refetch } = useAccountInfo();

    // ======== 加载态 ========
    if (loading) {
        return (
            <div style={{padding: 24}}>
                <Skeleton active paragraph={{rows: 6}} />
            </div>
        );
    }

    // ======== 错误态 ========
    if (error || !data) {
        return (
            <Result
                status="error"
                title="加载失败"
                subTitle={errorMessage || '未能获取账户信息'}
                extra={
                    <Button type="primary" onClick={refetch}>
                        重试
                    </Button>
                }
            />
        );
    }

    // ======== 数据展示 ========
    const [userInfo, vipsInfo] = data;
    const totalBalance: number = userInfo.balance_cent + userInfo.gift_balance_cent;

    // 匹配当前 VIP 等级（vip_level_id → VipLevelsItem）
    const matchedVip: VipLevelsItem | null =
        userInfo.vip_level_id != null && vipsInfo
            ? (vipsInfo.find((v) => v.id === userInfo.vip_level_id) ?? null)
            : null;

    const isExpired = new Date(userInfo.software_expires_at) < new Date();
    return (
        <div style={{padding: 24, maxWidth: 640}}>
            {/* ======== 标题：账户 ======== */}
            <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16}}>
                <Space align="center" size={12}>
                    <UserOutlined style={{fontSize: 22, color: token.colorPrimary}} />
                    <div>
                        <Title level={4} style={{margin: 0}}>
                            {userInfo.display_name || userInfo.real_name || userInfo.username || userInfo.id}
                            {userInfo.account_type && (
                                <Tag color="gold" style={{lineHeight: '18px', fontSize: 11}}>
                                    {EnumResolver.auth.accountType.label(userInfo.account_type)}
                                </Tag>
                            )}
                        </Title>
                        <Text type="secondary" style={{fontSize: 12}}>
                            ID: {userInfo.id}
                        </Text>
                    </div>
                </Space>
                <Button type="primary" ghost size="small" icon={<WalletOutlined />}>
                    充值
                </Button>
            </div>

            {/* ======== 积分栏 ======== */}
            <Card
                size="small"
                styles={{
                    body: {padding: '16px 20px'},
                }}
                style={{marginBottom: 16}}
            >
                <Text type="secondary" style={{fontSize: 12, marginBottom: 8, display: 'block'}}>
                    账户总积分
                </Text>
                <Title level={3} style={{margin: '0 0 12px 0'}}>
                    {centToYuan(totalBalance)}
                    <Text type="secondary" style={{fontSize: 14, marginLeft: 4}}>积分</Text>
                </Title>
                <Space size={32}>
                    <div>
                        <Text type="secondary" style={{fontSize: 12}}>主积分</Text>
                        <br />
                        <Text strong>{centToYuan(userInfo.balance_cent)}</Text>
                    </div>
                    <div>
                        <Text type="secondary" style={{fontSize: 12}}>赠送积分</Text>
                        <br />
                        <Text strong>{centToYuan(userInfo.gift_balance_cent)}</Text>
                    </div>
                    {userInfo.discount_rate && userInfo.discount_rate > 0 && userInfo.discount_rate < 1 && (
                        <div>
                            <Text type="secondary" style={{fontSize: 12}}>折扣率</Text>
                            <br />
                            <Tag color="green">{Math.round(userInfo.discount_rate * 100)}%</Tag>
                        </div>
                    )}
                </Space>
            </Card>

            {/* ======== 套餐信息 ======== */}
            <Card
                size="small"
                styles={{
                    body: {padding: '16px 20px'},
                }}
                style={{marginBottom: 16}}
            >
                <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12}}>
                    <Space size={8}>
                        <CrownOutlined style={{color: token.colorWarning}} />
                        <Text strong>当前套餐</Text>
                    </Space>
                    <Button type="link" size="small" icon={<RightOutlined />} iconPlacement="end">
                        续费 / 升级
                    </Button>
                </div>
                <Descriptions column={1} size="small" colon={false}>
                    <Descriptions.Item label="套餐名称">
                        <Space size={8}>
                            <Text strong>
                                {matchedVip?.name || userInfo.subscription_plan || '免费版'}
                            </Text>
                            {matchedVip?.level != null && (
                                <Tag color="gold" style={{fontSize: 11, lineHeight: '18px'}}>
                                    Lv.{matchedVip.level}
                                </Tag>
                            )}
                        </Space>
                    </Descriptions.Item>
                    {matchedVip?.description && (
                        <Descriptions.Item label="套餐说明">
                            <Text type="secondary" style={{fontSize: 12}}>
                                {matchedVip.description}
                            </Text>
                        </Descriptions.Item>
                    )}
                    <Descriptions.Item label="套餐周期">
                        {matchedVip?.duration_days ? `${matchedVip.duration_days} 天` : '—'}
                    </Descriptions.Item>
                    <Descriptions.Item label="到期时间">
                        <Text type={isExpired ? 'danger' : undefined}>
                            {formatDate(userInfo.software_expires_at)}
                        </Text>
                    </Descriptions.Item>
                    <Descriptions.Item label="席位上限">
                        {matchedVip?.seat_limit ?? userInfo.seat_limit ?? '—'}
                    </Descriptions.Item>
                </Descriptions>
            </Card>

            {/* ======== 今日统计 ======== */}
            <Card
                size="small"
                styles={{
                    body: {padding: '16px 20px'},
                }}
                style={{marginBottom: 16}}
            >
                <Space size={8} style={{marginBottom: 12}}>
                    <BarChartOutlined style={{color: token.colorSuccess}} />
                    <Text strong>今日使用</Text>
                </Space>
                <Text type="secondary" style={{display: 'block', textAlign: 'center', padding: '12px 0', fontSize: 13}}>
                    统计数据将在次日更新
                </Text>
            </Card>

            {/* ======== 查看更多权益 ======== */}
            <Divider style={{margin: '8px 0'}} />
            <Button type="link" block icon={<RightOutlined />} iconPlacement="end" style={{color: token.colorPrimary}}>
                查看更多权益
            </Button>
        </div>
    );
}
