import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../app/store';
import { fetchMemberFeed, fetchProfileData } from '../app/reducers/profile';
import ProfileLoadingSkeleton from '../components/profile/ProfileLoadingSkeleton';
import { useParams } from 'react-router-dom';
import ProfileFeeds from '../components/profile/ProfileFeeds';
import DirectMessage from '../components/profile/DirectMessage';
import Actions from '../components/profile/Actions';
import PhotoGallery from '../components/profile/PhotoGallery';
import ProfileInfo from '../components/profile/ProfileInfo';
import ProfileFooter from '../components/profile/ProfileFooter';
import ProfilePicture from '../components/profile/ProfilePicture';

export default function Profile() {
    const { id } = useParams();
    const { profileData, dataFetched } = useSelector((state: RootState) => state.profile);
    const dispatch = useDispatch<AppDispatch>();

    useEffect(() => {
        if(id){
            const decodedId = atob(id);
            dispatch(fetchProfileData(decodedId));
            dispatch(fetchMemberFeed({ id: decodedId, page: 1 }));
        }
    }, [dispatch, id]);

    if (!dataFetched) {
    return <ProfileLoadingSkeleton />;
    }
   

    return (
        <>
            <div className="max-w-4xl mx-3 md:mx-auto my-5 bg-white rounded-2xl shadow-lg overflow-hidden mt-[85px] md:mt-[15px]">
                {/* Cover Image */}
                <div className="relative h-48 md:h-80">
                    <img 
                        src={profileData?.cover_photo || '/src/images/registration/cover.png'}
                        alt="Cover" 
                        className="w-full h-full object-cover"
                        referrerPolicy='no-referrer'
                    />
                    
                    {/* Sagittarius Badge */}
                    <div className="absolute top-3 left-3 bg-white bg-opacity-95 rounded-full px-3 py-1 flex items-center space-x-1 shadow-sm">
                        <span className="text-xs font-medium text-gray-800">Sagittarius</span>
                        <svg className="w-3 h-3 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>

                {/* Profile Content with Image */}
                <div className="px-4 md:px-6 pb-6 relative">
                    {/* Profile Image - Positioned half in cover, half in content */}
                    <ProfilePicture />
                    
                    {/* Direct Message Section */}
                    <DirectMessage />
                    
                    {/* Profile Action Buttons */}
                    <Actions />
                    
                    {/* Photo Gallery Section */}
                    <PhotoGallery />

                    {/* Tagline */}
                    <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                        <h3 className="text-lg font-semibold text-gray-900 mb-3">
                        Tagline
                        </h3>
                        
                        <div className="space-y-2">
                            <p className="text-sm text-gray-600 leading-relaxed">
                                This short, actionable tagline would work well for a 
                                camera company. The catchphrase tells customers
                            </p>
                        </div>
                    </div>

                    {/* Profile Info */}
                    <ProfileInfo />
                </div>
            </div>
            <div className="max-w-4xl mx-3 md:mx-auto overflow-hidden">
                <ProfileFeeds />
            </div>
            <div className="max-w-4xl mx-3 md:mx-auto my-5 bg-white rounded-2xl shadow-lg overflow-hidden">
               <ProfileFooter />
            </div>
            
        </>
    );
}