const Profile = () => {
    const [isEditing, setIsEditing] = useState(false);
    const [profileData, setProfileData] = useState(currentUser);
    const [activeTab, setActiveTab] = useState('About');

    const tabs = ['About', 'Experience', 'Education', 'Projects'];

    const handleSave = () => {
        // In a real app, this would update the backend and global state
        setIsEditing(false);
    };

    return (
        <div className="space-y-6 pb-8">
            {/* Profile Header */}
            <div className="bg-white dark:bg-surface-dark rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                <div className="h-48 md:h-64 bg-gradient-to-r from-primary-500 via-primary-600 to-purple-700 relative">
                    <button className="absolute top-4 right-4 p-2 bg-black/20 hover:bg-black/40 text-white rounded-full backdrop-blur transition-colors">
                        <i data-lucide="camera" className="w-5 h-5"></i>
                    </button>
                </div>
                
                <div className="px-6 sm:px-8 pb-8 relative">
                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end -mt-16 sm:-mt-20 mb-4 gap-4">
                        <div className="relative">
                            <Avatar src={profileData.avatar} alt={profileData.name} size="2xl" border className="bg-white dark:bg-surface-dark shadow-md" />
                            {isEditing && (
                                <button className="absolute bottom-2 right-2 p-2 bg-primary-600 text-white rounded-full shadow-md hover:bg-primary-700 transition-colors">
                                    <i data-lucide="camera" className="w-4 h-4"></i>
                                </button>
                            )}
                        </div>
                        
                        <div className="flex gap-2 w-full sm:w-auto">
                            {isEditing ? (
                                <>
                                    <Button variant="outline" onClick={() => setIsEditing(false)}>Cancel</Button>
                                    <Button variant="primary" onClick={handleSave}>Save Profile</Button>
                                </>
                            ) : (
                                <>
                                    <Button variant="outline" icon={<i data-lucide="share-2" className="w-4 h-4" />}>Share</Button>
                                    <Button variant="primary" icon={<i data-lucide="edit-3" className="w-4 h-4" />} onClick={() => setIsEditing(true)}>Edit Profile</Button>
                                </>
                            )}
                        </div>
                    </div>

                    {isEditing ? (
                        <div className="space-y-4 max-w-2xl">
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <Input 
                                    placeholder="Full Name" 
                                    value={profileData.name}
                                    onChange={(e) => setProfileData({...profileData, name: e.target.value})}
                                />
                                <Input 
                                    placeholder="Location" 
                                    value={profileData.location}
                                    onChange={(e) => setProfileData({...profileData, location: e.target.value})}
                                />
                            </div>
                            <Input 
                                placeholder="Professional Headline" 
                                value={profileData.role}
                                onChange={(e) => setProfileData({...profileData, role: e.target.value})}
                            />
                            <textarea 
                                value={profileData.bio}
                                onChange={(e) => setProfileData({...profileData, bio: e.target.value})}
                                placeholder="Write a short bio..."
                                className="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-sm text-gray-900 dark:text-gray-100 focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all min-h-[100px] resize-none outline-none"
                            />
                        </div>
                    ) : (
                        <div>
                            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-1">{profileData.name}</h1>
                            <p className="text-lg text-gray-700 dark:text-gray-300 mb-2">{profileData.role}</p>
                            <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
                                <i data-lucide="map-pin" className="w-4 h-4 mr-1"></i> {profileData.location}
                                <span className="mx-2">•</span>
                                <span className="font-medium text-primary-600 dark:text-primary-400">{profileData.connections} connections</span>
                            </div>
                            <p className="text-gray-600 dark:text-gray-300 max-w-3xl leading-relaxed">{profileData.bio}</p>
                        </div>
                    )}
                </div>
            </div>

            {/* Profile Content */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 space-y-6">
                    <Card className="p-0 overflow-hidden">
                        <div className="flex gap-2 border-b border-gray-200 dark:border-gray-800 overflow-x-auto no-scrollbar px-2">
                            {tabs.map(tab => (
                                <Tab key={tab} active={activeTab === tab} onClick={() => setActiveTab(tab)}>
                                    {tab}
                                </Tab>
                            ))}
                        </div>
                        <div className="p-6">
                            {activeTab === 'About' && (
                                <div className="space-y-6">
                                    <div>
                                        <div className="flex justify-between items-center mb-4">
                                            <h3 className="text-lg font-bold text-gray-900 dark:text-white">Skills</h3>
                                            {isEditing && <button className="text-primary-600 hover:text-primary-700"><i data-lucide="plus" className="w-5 h-5"></i></button>}
                                        </div>
                                        <div className="flex flex-wrap gap-2">
                                            {profileData.skills.map(skill => (
                                                <Badge key={skill} variant="indigo" className="text-sm px-3 py-1.5">{skill}</Badge>
                                            ))}
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <div className="flex justify-between items-center mb-4">
                                            <h3 className="text-lg font-bold text-gray-900 dark:text-white">Interests</h3>
                                            {isEditing && <button className="text-primary-600 hover:text-primary-700"><i data-lucide="plus" className="w-5 h-5"></i></button>}
                                        </div>
                                        <div className="flex flex-wrap gap-2">
                                            {profileData.interests.map(interest => (
                                                <Badge key={interest} variant="gray" className="text-sm px-3 py-1.5">{interest}</Badge>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            {activeTab === 'Experience' && (
                                <div className="space-y-6">
                                    <div className="flex justify-between items-start mb-4">
                                        <h3 className="text-lg font-bold text-gray-900 dark:text-white">Experience</h3>
                                        {isEditing && <button className="text-primary-600 hover:text-primary-700"><i data-lucide="plus" className="w-5 h-5"></i></button>}
                                    </div>
                                    <div className="relative border-l-2 border-gray-200 dark:border-gray-800 ml-3 space-y-8 pb-4">
                                        <div className="relative pl-6">
                                            <div className="absolute w-4 h-4 bg-primary-500 rounded-full -left-[9px] top-1 border-4 border-white dark:border-surface-dark"></div>
                                            <h4 className="font-bold text-gray-900 dark:text-white">Senior Product Designer</h4>
                                            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium">TechCorp Inc.</p>
                                            <p className="text-xs text-gray-400 mt-1 mb-2">2023 - Present • San Francisco, CA</p>
                                            <p className="text-sm text-gray-600 dark:text-gray-300">Leading the design system team and overseeing the UX strategy for the core platform. Managed a team of 4 designers.</p>
                                        </div>
                                        <div className="relative pl-6">
                                            <div className="absolute w-4 h-4 bg-gray-300 dark:bg-gray-600 rounded-full -left-[9px] top-1 border-4 border-white dark:border-surface-dark"></div>
                                            <h4 className="font-bold text-gray-900 dark:text-white">UX/UI Designer</h4>
                                            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium">StartupX</p>
                                            <p className="text-xs text-gray-400 mt-1 mb-2">2020 - 2023 • Remote</p>
                                            <p className="text-sm text-gray-600 dark:text-gray-300">Designed the complete MVP for a B2B SaaS product, resulting in $2M seed funding.</p>
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            {(activeTab === 'Education' || activeTab === 'Projects') && (
                                <EmptyState 
                                    icon={<i data-lucide="folder-open" className="w-8 h-8"></i>}
                                    title="No data added yet"
                                    description={`You haven't added any ${activeTab.toLowerCase()} to your profile.`}
                                    action={isEditing ? <Button variant="primary">Add {activeTab}</Button> : null}
                                />
                            )}
                        </div>
                    </Card>
                </div>

                <div className="space-y-6">
                    <Card className="p-5">
                        <h3 className="font-bold text-gray-900 dark:text-white mb-4">Profile Strength</h3>
                        <div className="flex items-center gap-3 mb-2">
                            <div className="flex-1 bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                                <div className="bg-emerald-500 h-2 rounded-full w-4/5"></div>
                            </div>
                            <span className="text-sm font-bold text-emerald-600 dark:text-emerald-400">80%</span>
                        </div>
                        <p className="text-xs text-gray-500 dark:text-gray-400">Add your education details to reach All-Star status.</p>
                        <Button variant="outline" size="sm" className="w-full mt-4">Add Education</Button>
                    </Card>
                    
                    <Card className="p-5">
                        <h3 className="font-bold text-gray-900 dark:text-white mb-4">Your Communities</h3>
                        <div className="space-y-3">
                            {mockCommunities.slice(0, 2).map(comm => (
                                <div key={comm.id} className="flex items-center gap-3">
                                    <Avatar src={comm.logo} alt={comm.name} size="sm" className="rounded-md" />
                                    <div className="overflow-hidden flex-1">
                                        <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">{comm.name}</p>
                                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{comm.members.toLocaleString()} members</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <Button variant="ghost" size="sm" className="w-full mt-4 font-semibold text-xs text-primary-600 dark:text-primary-400">View all</Button>
                    </Card>
                </div>
            </div>
        </div>
    );
};