import React from 'react';
import { 
  Settings, 
  CreditCard, 
  ChevronRight, 
  Bluetooth, 
  Zap,
  Crown,
  Shield,
  HelpCircle,
  LogOut
} from 'lucide-react';

interface ProfileProps {
    onTopUp: () => void;
    onOpenDeviceManager: () => void;
    onOpenSubscription: () => void;
    onOpenPrivacy: () => void;
    onOpenHelp: () => void;
    onOpenSettings: () => void;
}

const Profile: React.FC<ProfileProps> = ({ 
    onTopUp, 
    onOpenDeviceManager, 
    onOpenSubscription,
    onOpenPrivacy,
    onOpenHelp,
    onOpenSettings
}) => {
  
  const menuItems = [
    { id: 'device', icon: Bluetooth, label: '我的设备', sub: 'Link-X Pro' },
    { id: 'sub', icon: CreditCard, label: '订阅管理', sub: '' },
    { id: 'privacy', icon: Shield, label: '隐私安全', sub: '' },
    { id: 'help', icon: HelpCircle, label: '帮助与反馈', sub: '' },
  ];

  const handleMenuClick = (id: string) => {
      if (id === 'device') {
          onOpenDeviceManager();
      } else if (id === 'sub') {
          onOpenSubscription();
      } else if (id === 'privacy') {
          onOpenPrivacy();
      } else if (id === 'help') {
          onOpenHelp();
      }
  };

  return (
    <div className="pt-4 px-5 pb-24 h-full overflow-y-auto no-scrollbar">
       
       {/* 1. User Header */}
       <div className="flex items-center justify-between mb-8">
           <div className="flex items-center gap-4">
               <div className="relative">
                   <div className="w-18 h-18 rounded-full p-[2px] bg-gradient-to-tr from-[#C084FC] to-[#F472B6]">
                       <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-white/20">
                            {/* Updated to reliable source */}
                            <img src="https://tse1.mm.bing.net/th?q=anime%20cool%20guy%20cyberpunk%20avatar&w=200&h=200&c=7" alt="User" className="w-full h-full object-cover" />
                       </div>
                   </div>
               </div>
               <div>
                   <h2 className="text-2xl font-bold text-white tracking-wide drop-shadow-md">Commander</h2>
                   <div className="flex items-center gap-1.5 mt-1 bg-white/10 backdrop-blur-md px-2.5 py-0.5 rounded-full border border-white/10 w-fit">
                       <Crown size={12} className="text-[#FBBF24] fill-[#FBBF24]" />
                       <span className="text-xs text-white font-bold tracking-wider">LV.4 黑金会员</span>
                   </div>
               </div>
           </div>
           <button 
                onClick={onOpenSettings}
                className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:bg-white/20 hover:text-white transition-all border border-white/10"
            >
               <Settings size={20} />
           </button>
       </div>

       {/* 2. Stats Grid - Lighter Glass */}
       <div className="grid grid-cols-3 gap-3 mb-6">
           {[
               { label: '互动时长', val: '42h', unit: '' },
               { label: '亲密指数', val: '85', unit: '%' },
               { label: '解锁剧本', val: '12', unit: '个' },
           ].map((stat, i) => (
               <div key={i} className="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center bg-white/5 border border-white/10">
                   <span className="text-xl font-bold text-white font-mono drop-shadow-sm">{stat.val}<span className="text-[10px] text-white/60 ml-0.5">{stat.unit}</span></span>
                   <span className="text-[10px] text-white/50 mt-0.5 uppercase tracking-wide">{stat.label}</span>
               </div>
           ))}
       </div>

       {/* 3. VIP / Wallet Card - Ultra Vibrant */}
       <div className="w-full relative h-32 rounded-3xl overflow-hidden mb-8 group active:scale-[0.99] transition-transform shadow-[0_10px_40px_-10px_rgba(192,132,252,0.5)]">
           <div className="absolute inset-0 bg-gradient-to-r from-[#7C3AED] via-[#9333EA] to-[#DB2777]"></div>
           <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-30 mix-blend-overlay"></div>
           
           <div className="relative z-10 p-6 flex justify-between items-center h-full">
               <div className="flex flex-col justify-center">
                   <div className="flex items-center gap-2 mb-1 opacity-90">
                       <Zap size={16} fill="white" className="text-white" />
                       <span className="text-xs font-bold tracking-wider text-white uppercase">Joy Points</span>
                   </div>
                   <h3 className="text-4xl font-bold text-white font-mono tracking-tight drop-shadow-lg">2,450</h3>
               </div>
               <button 
                onClick={onTopUp}
                className="bg-white text-[#9333EA] px-6 py-2.5 rounded-full text-sm font-bold shadow-lg active:bg-gray-100 transition-colors hover:scale-105 transform"
               >
                   立即充值
               </button>
           </div>
       </div>

       {/* 4. Menu List - Lighter Glass */}
       <div className="space-y-3">
           <h3 className="px-2 text-xs font-bold text-white/40 uppercase tracking-widest mb-2">General</h3>
           {menuItems.map((item) => (
               <button 
                    key={item.id} 
                    onClick={() => handleMenuClick(item.id)}
                    className="w-full glass-panel p-4 rounded-2xl flex items-center justify-between active:scale-[0.98] transition-all bg-white/5 hover:bg-white/10 border border-white/10 group"
                >
                   <div className="flex items-center gap-4">
                       <div className="p-2.5 rounded-xl bg-white/5 text-white/70 group-hover:text-white group-hover:bg-white/20 transition-colors">
                            <item.icon size={20} />
                       </div>
                       <span className="text-sm text-white font-medium">{item.label}</span>
                   </div>
                   <div className="flex items-center gap-2">
                        {item.sub && <span className="text-xs text-white/50 font-medium">{item.sub}</span>}
                        <ChevronRight size={18} className="text-white/30 group-hover:text-white transition-colors" />
                   </div>
               </button>
           ))}
       </div>

       {/* 5. System / Logout */}
       <div className="mt-8 mb-4 px-2">
           <button className="w-full p-4 rounded-2xl border border-red-400/30 text-red-400 flex items-center justify-center gap-2 text-sm font-medium hover:bg-red-400/10 active:scale-[0.98] transition-all bg-white/5">
               <LogOut size={18} />
               退出登录
           </button>
           <div className="mt-6 text-center">
               <p className="text-[10px] text-white/30 font-mono">Wei AI v2.5.0 (Neon Edition)</p>
           </div>
       </div>
    </div>
  );
};

export default Profile;