frontend/src/components/UserInfoModal.tsx

'use client';

import { X, Crown, Calendar, User } from 'lucide-react';

interface UserInfoModalProps {
    isOpen: boolean;
    onClose: () => void;
    username: string;
    isVip: boolean;
    vipExpireAt: string | null;
    onRenewVip?: () => void;
}

export default function UserInfoModal({ isOpen, onClose, username, isVip, vipExpireAt, onRenewVip }: UserInfoModalProps) {
    if (!isOpen) return null;

    // 格式化到期日期
    const formatDate = (dateStr: string | null) => {
        if (!dateStr) return '永久有效';
        try {
            const date = new Date(dateStr);
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        } catch (e) {
            return dateStr;
        }
    };

    return (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <div className="bg-[#1E2030] rounded-2xl w-full max-w-sm border border-gray-800 shadow-2xl relative animate-in fade-in zoom-in duration-200">
                {/* 关闭按钮 */}
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
                >
                    <X size={20} />
                </button>

                <div className="p-8">
                    {/* 用户头像/标识 */}
                    <div className="flex flex-col items-center mb-6">
                        <div className="w-20 h-20 bg-blue-600/20 rounded-full flex items-center justify-center mb-4 relative">
                            <User size={40} className="text-blue-400" />
                            {isVip && (
                                <div className="absolute -bottom-1 -right-1 bg-yellow-500 rounded-full p-1.5 shadow-lg border-2 border-[#1E2030]">
                                    <Crown size={14} className="text-black" />
                                </div>
                            )}
                        </div>
                        <h3 className="text-xl font-bold text-white">{username}</h3>
                        <p className="text-sm text-gray-400 mt-1">
                            {isVip ? '尊贵 VIP 会员' : '普通注册用户'}
                        </p>
                    </div>

                    {/* 信息详情 */}
                    <div className="space-y-4">
                        <div className="bg-[#2A2D3C] border border-gray-700/50 rounded-xl p-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-3 text-gray-400">
                                    <Crown size={18} className={isVip ? 'text-yellow-500' : 'text-gray-600'} />
                                    <span className="text-sm font-medium">账户等级</span>
                                </div>
                                <span className={`text-sm font-bold ${isVip ? 'text-yellow-500' : 'text-gray-400'}`}>
                                    {isVip ? 'VIP' : 'Free'}
                                </span>
                            </div>
                        </div>

                        {isVip && (
                            <div className="bg-[#2A2D3C] border border-gray-700/50 rounded-xl p-4">
                                <div className="flex items-center justify-between">
                                    <div className="flex items-center gap-3 text-gray-400">
                                        <Calendar size={18} className="text-blue-400" />
                                        <span className="text-sm font-medium">到期时间</span>
                                    </div>
                                    <span className="text-sm font-bold text-gray-200">
                                        {formatDate(vipExpireAt)}
                                    </span>
                                </div>
                            </div>
                        )}
                    </div>

                    {/* 按钮 */}
                    <button
                        onClick={onRenewVip || onClose}
                        className="w-full mt-8 bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-400 hover:to-orange-500 text-white font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-orange-900/20 active:scale-[0.98] flex items-center justify-center gap-2"
                    >
                        <Crown size={16} />
                        <span>会员续费</span>
                    </button>
                </div>
            </div>
        </div>
    );
}