'use client';

import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useSelector } from "react-redux";
import { 
  GraduationCap, 
  Briefcase, 
  Award, 
  Globe,
  Linkedin,
  Twitter,
  Mail,
  MapPin,
  Calendar,
  Lightbulb,
  Activity,
  Instagram
} from "lucide-react";
import Image from "next/image";
import { RootState } from "@/lib/store/store";
import { getFriendDetails, getLoggedInCustomerPost, likeDislike, getRecentActivity, getUserPostsByUsername } from "@/lib/api/client";
import { PublicHeader } from "./public-header";
import { ProfileHeader } from "./profile-header";
import { ProfileTabs } from "./profile-tabs";
import { toast } from "sonner";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

// ========== SHIMMER SKELETON COMPONENTS ==========

const shimmerStyle = `
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
`;

// Profile Header Skeleton with Shimmer
function ProfileHeaderSkeleton() {
  useEffect(() => {
    if (typeof document !== 'undefined' && !document.querySelector('#shimmer-style')) {
      const style = document.createElement('style');
      style.id = 'shimmer-style';
      style.textContent = shimmerStyle;
      document.head.appendChild(style);
    }
  }, []);

  return (
    <div className="relative bg-gradient-to-br from-primary/20 to-accent/20 rounded-2xl p-6 mb-4 overflow-hidden">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="flex flex-col md:flex-row gap-6">
        <div className="relative">
          <div className="w-24 h-24 rounded-full bg-gray-300 dark:bg-gray-700"></div>
        </div>
        <div className="flex-1 space-y-3">
          <div className="flex items-center gap-2">
            <div className="h-8 w-40 bg-gray-300 dark:bg-gray-700 rounded"></div>
            <div className="h-5 w-16 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
          </div>
          <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
          <div className="h-4 w-full max-w-md bg-gray-300 dark:bg-gray-700 rounded"></div>
          <div className="h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
          <div className="flex gap-6 mt-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="space-y-1">
                <div className="h-5 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
                <div className="h-4 w-8 bg-gray-300 dark:bg-gray-700 rounded"></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// About Section Skeleton
function AboutSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4 overflow-hidden relative">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="h-5 w-20 bg-gray-300 dark:bg-gray-700 rounded mb-4"></div>
      <div className="space-y-3">
        <div className="h-4 w-full bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div className="h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div className="flex items-start gap-3 mt-4">
          <div className="w-9 h-9 rounded-lg bg-gray-300 dark:bg-gray-700"></div>
          <div className="flex-1 space-y-1">
            <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
            <div className="h-3 w-24 bg-gray-300 dark:bg-gray-700 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Qualifications Section Skeleton
function QualificationsSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4 overflow-hidden relative">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="h-5 w-24 bg-gray-300 dark:bg-gray-700 rounded mb-4"></div>
      <div className="space-y-4">
        <div>
          <div className="h-4 w-20 bg-gray-300 dark:bg-gray-700 rounded mb-3"></div>
          {[1, 2].map((i) => (
            <div key={i} className="flex items-start gap-3 mb-3">
              <div className="w-8 h-8 rounded-lg bg-gray-300 dark:bg-gray-700"></div>
              <div className="flex-1 space-y-1">
                <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
                <div className="h-3 w-40 bg-gray-300 dark:bg-gray-700 rounded"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Skills Section Skeleton
function SkillsSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4 overflow-hidden relative">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="h-5 w-20 bg-gray-300 dark:bg-gray-700 rounded mb-3"></div>
      <div className="flex flex-wrap gap-2 mb-4">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="h-6 w-16 bg-gray-300 dark:bg-gray-700 rounded-lg"></div>
        ))}
      </div>
      <div className="h-5 w-24 bg-gray-300 dark:bg-gray-700 rounded mb-3"></div>
      <div className="flex flex-wrap gap-2">
        {[1, 2, 3].map((i) => (
          <div key={i} className="h-6 w-20 bg-gray-300 dark:bg-gray-700 rounded-lg"></div>
        ))}
      </div>
    </div>
  );
}

// Achievements Section Skeleton
function AchievementsSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4 overflow-hidden relative">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="h-5 w-24 bg-gray-300 dark:bg-gray-700 rounded mb-3"></div>
      <div className="space-y-3">
        {[1, 2].map((i) => (
          <div key={i} className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-gray-300 dark:bg-gray-700"></div>
            <div className="h-4 w-48 bg-gray-300 dark:bg-gray-700 rounded"></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Contact Section Skeleton
function ContactSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 overflow-hidden relative">
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
      <div className="h-5 w-20 bg-gray-300 dark:bg-gray-700 rounded mb-3"></div>
      <div className="space-y-2">
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center gap-3 p-2">
            <div className="h-4 w-4 bg-gray-300 dark:bg-gray-700 rounded"></div>
            <div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded"></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Ideas Loading Skeleton
function IdeasLoadingSkeleton() {
  return (
    <div className="divide-y divide-border/50">
      {[1, 2, 3].map((i) => (
        <div key={i} className="p-4 overflow-hidden relative">
          <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-700"></div>
            <div className="flex-1 space-y-2">
              <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
              <div className="h-5 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
              <div className="flex gap-4 mt-2">
                <div className="h-5 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
                <div className="h-5 w-12 bg-gray-300 dark:bg-gray-700 rounded"></div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// Activity Loading Skeleton
function ActivityLoadingSkeleton() {
  return (
    <div className="p-4 space-y-4">
      {[1, 2].map((i) => (
        <div key={i} className="flex items-start gap-3 overflow-hidden relative">
          <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/30 dark:via-white/10 to-transparent" />
          <div className="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-700"></div>
          <div className="flex-1 space-y-2">
            <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
            <div className="h-4 w-full bg-gray-300 dark:bg-gray-700 rounded"></div>
            <div className="h-3 w-20 bg-gray-300 dark:bg-gray-700 rounded"></div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ========== HELPER FUNCTIONS ==========

// Helper functions
const formatDate = (dateString: string) => {
  if (!dateString) return "Unknown";
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
};

const formatRelativeTime = (date: Date | string) => {
  if (!date) return "recently";
  const now = new Date();
  const past = new Date(date);
  if (isNaN(past.getTime())) return "recently";
  const diffMins = Math.floor((now.getTime() - past.getTime()) / 60000);
  const diffHours = Math.floor(diffMins / 60);
  const diffDays = Math.floor(diffHours / 24);
  if (diffMins < 1) return "just now";
  if (diffMins < 60) return `${diffMins} min ago`;
  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
  return past.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};

// ========== DYNAMIC SECTIONS ==========

// ✅ DYNAMIC AboutSection
function AboutSection({ userData }: { userData?: any }) {
  const hasAboutContent = userData?.aboutMe && userData.aboutMe !== "max 200 characters";
  const hasBio = userData?.bio && userData.bio !== "";
  const hasDesignation = userData?.designation && userData.designation !== "Member";
  const hasLocation = userData?.country && userData.country !== "Location not set";
  
  const hasAnyContent = hasAboutContent || hasBio || hasDesignation || hasLocation;
  
  if (!hasAnyContent) {
    return (
      <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
        <h3 className="font-semibold text-foreground mb-4">About</h3>
        <p className="text-sm text-muted-foreground">No information added yet</p>
      </div>
    );
  }
  
  const displayBio = (userData?.aboutMe && userData.aboutMe !== "max 200 characters") 
    ? userData.aboutMe 
    : (userData?.bio && userData.bio !== "") 
      ? userData.bio 
      : null;
  
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">About</h3>
      
      {displayBio && (
        <div className="mb-4">
          <p className="text-sm text-muted-foreground">{displayBio}</p>
        </div>
      )}
      
      {userData?.designation && userData.designation !== "Member" && (
        <div className="flex items-start gap-3 mb-4">
          <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
            <GraduationCap className="h-4 w-4 text-primary" />
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">{userData.designation}</p>
            <p className="text-xs text-muted-foreground">Joined {formatDate(userData.createdAt)}</p>
          </div>
        </div>
      )}
      
      {userData?.country && userData.country !== "Location not set" && (
        <div className="flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
            <MapPin className="h-4 w-4 text-muted-foreground" />
          </div>
          <div>
            <p className="text-sm font-medium text-foreground">{userData.country}</p>
          </div>
        </div>
      )}
    </div>
  );
}

// ✅ DYNAMIC Qualifications Section
function QualificationsSection({ qualifications }: { qualifications: any[] }) {
  const education = qualifications?.filter(q => q.type === "education") || [];
  const experience = qualifications?.filter(q => q.type === "experience") || [];
  
  const hasData = education.length > 0 || experience.length > 0;
  
  if (!hasData) {
    return (
      <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
        <h3 className="font-semibold text-foreground mb-4">Qualifications</h3>
        <p className="text-sm text-muted-foreground">No qualifications added yet</p>
      </div>
    );
  }
  
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Qualifications</h3>
      
      {education.length > 0 && (
        <div className="mb-4">
          <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
            <GraduationCap className="h-4 w-4" />
            Education
          </h4>
          <div className="space-y-3">
            {education.map((edu, idx) => (
              <div key={idx} className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                  <GraduationCap className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">{edu.title || edu.degree}</p>
                  <p className="text-xs text-muted-foreground">
                    {edu.institution} {edu.year ? `- ${edu.year}` : ''}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
      
      {experience.length > 0 && (
        <div>
          <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
            <Briefcase className="h-4 w-4" />
            Work Experience
          </h4>
          <div className="space-y-3">
            {experience.map((exp, idx) => (
              <div key={idx} className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center shrink-0">
                  <Briefcase className="h-4 w-4 text-muted-foreground" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">{exp.title || exp.role}</p>
                  <p className="text-xs text-muted-foreground">
                    {exp.institution || exp.company} {exp.year || exp.duration ? `- ${exp.year || exp.duration}` : ''}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ✅ DYNAMIC SkillsSection
function SkillsSection({ skills, interests }: { skills: string[], interests: string[] }) {
  const hasSkills = skills && skills.length > 0;
  const hasInterests = interests && interests.length > 0;
  
  if (!hasSkills && !hasInterests) {
    return (
      <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
        <h3 className="font-semibold text-foreground mb-3">Skills & Interests</h3>
        <p className="text-sm text-muted-foreground">No skills or interests added yet</p>
      </div>
    );
  }
  
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      {hasSkills && (
        <>
          <h3 className="font-semibold text-foreground mb-3">Skills</h3>
          <div className="flex flex-wrap gap-2 mb-4">
            {skills.map((skill, idx) => (
              <span key={idx} className="px-2.5 py-1 rounded-lg bg-secondary text-xs text-foreground">
                {skill}
              </span>
            ))}
          </div>
        </>
      )}
      
      {hasInterests && (
        <>
          <h3 className="font-semibold text-foreground mb-3">Interests</h3>
          <div className="flex flex-wrap gap-2">
            {interests.map((interest, idx) => (
              <span key={idx} className="px-2.5 py-1 rounded-lg bg-primary/10 text-xs text-primary border border-primary/20">
                {interest}
              </span>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

// ✅ DYNAMIC AchievementsSection
function AchievementsSection({ achievements }: { achievements: Array<{ title: string }> }) {
  if (!achievements || achievements.length === 0) {
    return (
      <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
        <h3 className="font-semibold text-foreground mb-3">Achievements</h3>
        <p className="text-sm text-muted-foreground">No achievements added yet</p>
      </div>
    );
  }
  
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-3">Achievements</h3>
      <div className="space-y-3">
        {achievements.map((item, idx) => (
          <div key={idx} className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center">
              <Award className="h-4 w-4 text-amber-500" />
            </div>
            <p className="text-sm text-foreground">{item.title}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ✅ DYNAMIC SocialLinks
function SocialLinks({ socialMedia, email, website }: { 
  socialMedia?: any[]; 
  email?: string; 
  website?: string;
}) {
  const linkedin = socialMedia?.find((s: any) => s.type === "linkedin")?.link;
  const twitter = socialMedia?.find((s: any) => s.type === "twitter")?.link;
  const instagram = socialMedia?.find((s: any) => s.type === "instagram")?.link;
  const github = socialMedia?.find((s: any) => s.type === "github")?.link;
  const personalWebsite = website || socialMedia?.find((s: any) => s.type === "website")?.link;
  
  const hasAnySocial = linkedin || twitter || instagram || github || personalWebsite || email;
  
  if (!hasAnySocial) {
    return (
      <div className="bg-card rounded-xl border border-border/50 p-5">
        <h3 className="font-semibold text-foreground mb-3">Connect</h3>
        <p className="text-sm text-muted-foreground">No social links added yet</p>
      </div>
    );
  }
  
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5">
      <h3 className="font-semibold text-foreground mb-3">Connect</h3>
      <div className="space-y-2">
        {personalWebsite && (
          <a 
            href={personalWebsite.startsWith('http') ? personalWebsite : `https://${personalWebsite}`} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors group"
          >
            <Globe className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
            <span className="text-sm text-foreground">Website</span>
          </a>
        )}
        
        {linkedin && (
          <a 
            href={linkedin} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors group"
          >
            <Linkedin className="h-4 w-4 text-[#0A66C2]" />
            <span className="text-sm text-foreground">LinkedIn</span>
          </a>
        )}
        
        {twitter && (
          <a 
            href={twitter} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors group"
          >
            <Twitter className="h-4 w-4 text-[#1DA1F2]" />
            <span className="text-sm text-foreground">Twitter/X</span>
          </a>
        )}
        
        {instagram && (
          <a 
            href={instagram} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors group"
          >
            <Instagram className="h-4 w-4 text-[#E4405F]" />
            <span className="text-sm text-foreground">Instagram</span>
          </a>
        )}
        
        {email && (
          <a 
            href={`mailto:${email}`} 
            className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors group"
          >
            <Mail className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
            <span className="text-sm text-foreground">{email}</span>
          </a>
        )}
      </div>
    </div>
  );
}

// ========== MAIN COMPONENT ==========

interface PublicIndividualProfileProps {
  profile: any;
}

export default function PublicIndividualProfile({ profile }: PublicIndividualProfileProps) {
  const router = useRouter();
  const { accessToken, currentCustomer, dynamicImages } = useSelector((state: RootState) => state.user);
  const securityKey = dynamicImages?.securityKey;
  
  const [userProfile, setUserProfile] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("ideas");
  
  // State for Ideas
  const [userIdeas, setUserIdeas] = useState<any[]>([]);
  const [ideasLoading, setIdeasLoading] = useState(false);
  const [ideasPage, setIdeasPage] = useState(1);
  const [hasMoreIdeas, setHasMoreIdeas] = useState(true);
  
  // State for Recent Activity
  const [activities, setActivities] = useState<any[]>([]);
  const [activityLoading, setActivityLoading] = useState(false);
  const [activityPage, setActivityPage] = useState(1);
  const [hasMoreActivities, setHasMoreActivities] = useState(true);
  
  const targetUser = profile?.customer || profile;
  const targetUserId = targetUser?._id;
  const targetUsername = targetUser?.userName?.replace('@', '') || "";
  const isOwnProfile = currentCustomer?.customer?._id === targetUserId || currentCustomer?._id === targetUserId;
  
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(checkDarkMode);
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    return () => observer.disconnect();
  }, []);

  const getFilledLikeIcon = () => isDarkMode ? "/icons/dark-likefilled.svg" : "/icons/like_unfilled.svg";
  const getFilledDislikeIcon = () => isDarkMode ? "/icons/dark-dislikefilled.svg" : "/icons/dislike_unfilled.svg";
  const getUnfilledLikeIcon = () => isDarkMode ? "/icons/like-dark.svg" : "/icons/like_unfilled.svg";
  const getUnfilledDislikeIcon = () => isDarkMode ? "/icons/dislike-dark.svg" : "/icons/dislike_unfilled.svg";

  // Fetch user's posts with pagination
  const fetchUserIdeas = useCallback(async (pageNum: number = 1, append: boolean = false) => {
    if (!accessToken || !targetUsername) return;
    
    setIdeasLoading(true);
    try {
      const response = await getUserPostsByUsername(
        targetUsername, 
        accessToken, 
        process.env.NEXT_PUBLIC_SECURITY_KEY,
        pageNum,
        10
      );
      
      console.log("📡 Posts by username response:", response);
      
      if (response.success && response.posts) {
        const formattedIdeas = response.posts.map((post: any) => {
          let categoryName = "";
          if (post.postCategory) {
            if (typeof post.postCategory === 'object' && post.postCategory.mainCategoryName) {
              categoryName = post.postCategory.mainCategoryName;
            }
          }
          
          return {
            id: post._id,
            title: post.description?.substring(0, 100) || "Untitled",
            description: post.description || "",
            timestamp: formatRelativeTime(post.createdAt),
            category: categoryName,
            likes: post.counts?.likes || 0,
            dislikes: post.counts?.dislikes || 0,
            likeStatus: post.likeStatus || null
          };
        });
        
        if (append) {
          setUserIdeas(prev => [...prev, ...formattedIdeas]);
        } else {
          setUserIdeas(formattedIdeas);
        }
        
        setHasMoreIdeas(response.pagination?.hasNextPage || false);
        setIdeasPage(pageNum);
      } else {
        if (!append) setUserIdeas([]);
        setHasMoreIdeas(false);
      }
    } catch (error) {
      console.error("Error fetching user ideas:", error);
      if (!append) setUserIdeas([]);
    } finally {
      setIdeasLoading(false);
    }
  }, [accessToken, targetUsername]);

  // Fetch recent activity
  // In PublicBusinessProfile, PublicIndividualProfile, PublicInvestorProfile
const fetchUserActivity = useCallback(async (pageNum: number = 1, append: boolean = false) => {
  if (!accessToken) return;
  setActivityLoading(true);
  try {
    // ✅ Pass target user ID to API
    const response = await getRecentActivity(
      accessToken, 
      pageNum, 
      10, 
      targetUser?._id,  // 👈 Pass target user ID
      process.env.NEXT_PUBLIC_SECURITY_KEY
    );
    
    if (response.success && response.data?.activities) {
      const formattedActivities = response.data.activities.map((activity: any) => ({
        id: activity.id,
        type: activity.type,
        title: activity.title,
        description: activity.description || "",
        timestamp: activity.timestamp,
        category: activity.category,
        postId: activity.postId
      }));
      
      if (append) {
        setActivities(prev => [...prev, ...formattedActivities]);
      } else {
        setActivities(formattedActivities);
      }
      setHasMoreActivities(response.data.pagination?.hasNextPage || false);
      setActivityPage(pageNum);
    } else {
      if (!append) setActivities([]);
      setHasMoreActivities(false);
    }
  } catch (error) {
    console.error("Error fetching activity:", error);
    if (!append) setActivities([]);
  } finally {
    setActivityLoading(false);
  }
}, [accessToken, targetUser?._id]);

  const loadMoreIdeas = () => {
    if (!ideasLoading && hasMoreIdeas) {
      fetchUserIdeas(ideasPage + 1, true);
    }
  };

  const loadMoreActivities = () => {
    if (!activityLoading && hasMoreActivities) {
      fetchUserActivity(activityPage + 1, true);
    }
  };

  const handleLike = async (ideaId: string, currentLikeStatus: string | null) => {
    if (!accessToken) {
      toast.error("Please login to like posts");
      return;
    }
    const updatedIdeas = userIdeas.map(idea => {
      if (idea.id === ideaId) {
        if (currentLikeStatus === "like") {
          return { ...idea, likes: idea.likes - 1, likeStatus: null };
        } else {
          let newLikes = idea.likes + 1;
          let newDislikes = idea.dislikes;
          if (idea.likeStatus === "dislike") newDislikes = idea.dislikes - 1;
          return { ...idea, likes: newLikes, dislikes: newDislikes, likeStatus: "like" };
        }
      }
      return idea;
    });
    setUserIdeas(updatedIdeas);
    try {
      const result = await likeDislike(accessToken, ideaId, "like", securityKey);
      if (!result.success) {
        fetchUserIdeas(ideasPage, false);
        toast.error("Could not like the post");
      }
    } catch (error) {
      fetchUserIdeas(ideasPage, false);
      toast.error("Could not like the post");
    }
  };

  const handleDislike = async (ideaId: string, currentLikeStatus: string | null) => {
    if (!accessToken) {
      toast.error("Please login to dislike posts");
      return;
    }
    const updatedIdeas = userIdeas.map(idea => {
      if (idea.id === ideaId) {
        if (currentLikeStatus === "dislike") {
          return { ...idea, dislikes: idea.dislikes - 1, likeStatus: null };
        } else {
          let newDislikes = idea.dislikes + 1;
          let newLikes = idea.likes;
          if (idea.likeStatus === "like") newLikes = idea.likes - 1;
          return { ...idea, likes: newLikes, dislikes: newDislikes, likeStatus: "dislike" };
        }
      }
      return idea;
    });
    setUserIdeas(updatedIdeas);
    try {
      const result = await likeDislike(accessToken, ideaId, "dislike", securityKey);
      if (!result.success) {
        fetchUserIdeas(ideasPage, false);
        toast.error("Could not dislike the post");
      }
    } catch (error) {
      fetchUserIdeas(ideasPage, false);
      toast.error("Could not dislike the post");
    }
  };

  useEffect(() => {
    if (accessToken && targetUserId) {
      fetchUserIdeas(1, false);
      fetchUserActivity(1, false);
    }
  }, [accessToken, targetUserId]);

  useEffect(() => {
    if (targetUser) {
      setUserProfile(targetUser);
      setLoading(false);
    }
  }, [targetUser]);

  const userData = userProfile;
  const userCategories = userData?.postCategories || [];
  const categoryNames = userCategories.map((cat: any) => typeof cat === 'object' ? cat.mainCategoryName : cat);
  
  const userStats = {
    ideas: userData?.totalPost || 0,
    likes: userData?.totalLikes || 0,
    dislikes: userData?.totalDisLikes || 0,
  };
  
  // Get bio (avoid default placeholder)
  const isDefaultAbout = userData?.aboutMe === "max 200 characters";
  const bioText = isDefaultAbout 
    ? (userData?.bio || "")
    : (userData?.aboutMe || userData?.bio || "");
  
  const individualData = {
    name: userData?.fullName || "User",
    username: userData?.userName?.replace('@', '') || "username",
    avatar: userData?.imageURL ? `${BASE_URL}/uploads/${userData.imageURL}` : "",
     designation: userData?.designation || profile?.personalInfo?.designation || "", // ✅ ADD
  address: userData?.address || "", 
    bio: bioText,
    location: userData?.country || "Location not set",
    website: userData?.website || "",
    joinedDate: formatDate(userData?.createdAt) || "Unknown",
    isVerified: userData?.isVerified || false,
    isPremium: userData?.isPremium || false,
    userType: "individual" as const,
    aiMatchScore: userData?.aiMatchScore || 0,
    stats: userStats,
    badges: categoryNames,
  };
  
  const tabs = [
    { id: "ideas", label: "Ideas", count: userIdeas.length },
    { id: "activity", label: "Activity" },
  ];
  
  // Loading State with Full Skeletons
  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <PublicHeader />
        <main className="max-w-5xl mx-auto">
          <ProfileHeaderSkeleton />
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 md:p-6">
            <div className="lg:col-span-2">
              <div className="bg-card rounded-xl border border-border/50">
                <div className="p-4 border-b border-border/50">
                  <div className="h-5 w-20 bg-gray-300 dark:bg-gray-700 rounded"></div>
                </div>
                <IdeasLoadingSkeleton />
              </div>
            </div>
            <div className="lg:col-span-1">
              <AboutSectionSkeleton />
              <QualificationsSectionSkeleton />
              <SkillsSectionSkeleton />
              <AchievementsSectionSkeleton />
              <ContactSectionSkeleton />
            </div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <PublicHeader />
      <main className="max-w-5xl mx-auto">
        <ProfileHeader 
         isPremium={true} 
          {...individualData}
          userId={userData?._id}
          userModel="customer"
        />
        <ProfileTabs tabs={tabs} userType="individual" onTabChange={(tabId) => setActiveTab(tabId)} />
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 md:p-6">
          <div className="lg:col-span-2">
            <div className="bg-card rounded-xl border border-border/50">
              <div className="p-4 border-b border-border/50">
                <h2 className="font-semibold text-foreground">{activeTab === "ideas" ? "Ideas" : "Recent Activity"}</h2>
              </div>
              
              {activeTab === "ideas" && (
                <div>
                  {ideasLoading && userIdeas.length === 0 ? (
                    <IdeasLoadingSkeleton />
                  ) : userIdeas.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Lightbulb className="h-12 w-12 mx-auto mb-3 opacity-50" />
                      <p>No ideas posted yet</p>
                    </div>
                  ) : (
                    <>
                      <div className="divide-y divide-border/50">
                        {userIdeas.map((idea) => {
                          const isLiked = idea.likeStatus === "like";
                          const isDisliked = idea.likeStatus === "dislike";
                          return (
                            <div key={idea.id} className="p-4 hover:bg-secondary/30 transition-colors cursor-pointer" onClick={() => router.push(`/idea/${idea.id}`)}>
                             <div className="flex items-start gap-3">
  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
    <Lightbulb className="h-4 w-4 text-primary" />
  </div>

  <div className="flex-1 min-w-0">
    <p className="text-sm font-medium text-foreground">
      {isOwnProfile ? "Your idea" : `${userData?.fullName?.split(" ")[0] || "User"}'s idea`}
    </p>

    <h4 className="font-semibold text-foreground mt-1 line-clamp-2">
      {idea.title}
    </h4>

    {/* CATEGORY + LIKE DISLIKE SAME ROW */}
    <div className="flex items-center justify-start mt-2">
      {idea.category && idea.category !== "Uncategorized" && (
        <span className="inline-block px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
          {idea.category}
        </span>
      )}

      <div className="flex items-center gap-1">
        <button
          onClick={(e) => {
            e.stopPropagation();
            handleLike(idea.id, idea.likeStatus);
          }}
          className={`flex items-center gap-1.5 px-2 py-1 rounded-lg ${isLiked ? "" : "hover:bg-secondary"}`}
        >
          <Image
            src={isLiked ? getFilledLikeIcon() : getUnfilledLikeIcon()}
            alt="like"
            width={20}
            height={20}
            className="w-5 h-5"
          />
          <span className={`text-sm font-medium ${isLiked ? "text-primary" : "text-muted-foreground"}`}>
            {idea.likes || 0}
          </span>
        </button>

        <button
          onClick={(e) => {
            e.stopPropagation();
            handleDislike(idea.id, idea.likeStatus);
          }}
          className={`flex items-center gap-1.5 px-2 py-1 rounded-lg ${isDisliked ? "" : "hover:bg-secondary"}`}
        >
          <Image
            src={isDisliked ? getFilledDislikeIcon() : getUnfilledDislikeIcon()}
            alt="dislike"
            width={20}
            height={20}
            className="w-5 h-5"
          />
          <span className={`text-sm font-medium ${isDisliked ? "text-primary" : "text-muted-foreground"}`}>
            {idea.dislikes || 0}
          </span>
        </button>
      </div>
    </div>

    <p className="text-xs flex items-end justify-end text-muted-foreground mt-2">
      {idea.timestamp}
    </p>
  </div>
</div>
                            </div>
                          );
                        })}
                      </div>
                      {hasMoreIdeas && (
                        <div className="p-4 text-center border-t border-border/50">
                          <button onClick={loadMoreIdeas} disabled={ideasLoading} className="px-4 cursor-pointer py-2 text-sm text-primary">
                            {ideasLoading ? "Loading..." : "Load More"}
                          </button>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}
              
              {activeTab === "activity" && (
                <div>
                  {activityLoading && activities.length === 0 ? (
                    <ActivityLoadingSkeleton />
                  ) : activities.length === 0 ? (
                    <div className="p-8 text-center text-muted-foreground">
                      <Activity className="h-12 w-12 mx-auto mb-3 opacity-50" />
                      <p>No recent activity yet</p>
                    </div>
                  ) : (
                    <>
                      <div className="divide-y divide-border/50">
                        {activities.map((activity) => (
                          <div 
                            key={activity.id} 
                            className="p-4 hover:bg-secondary/30 transition-colors cursor-pointer" 
                            onClick={() => activity.postId && router.push(`/idea/${activity.postId}`)}
                          >
                            <div className="flex items-start gap-3">
                              <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center shrink-0">
                                {activity.type === "idea" && <Lightbulb className="h-4 w-4 text-primary" />}
                                {activity.type === "like" && <Image src="/icons/like_filled.svg" alt="like" width={16} height={16} className="w-4 h-4" />}
                                {activity.type === "dislike" && <Image src="/icons/dislike_filled.svg" alt="dislike" width={16} height={16} className="w-4 h-4" />}
                              </div>
                              <div className="flex-1 min-w-0">
                                {activity.type === "idea" ? (
                                  <>
                                    <p className="text-sm font-medium text-foreground">Posted an idea</p>
                                    <h4 className="font-semibold text-foreground mt-1 line-clamp-2">{activity.title}</h4>
                                  </>
                                ) : activity.type === "like" ? (
                                  <>
                                    <p className="text-sm font-medium text-foreground">Liked an idea</p>
                                    <h4 className="font-semibold text-foreground mt-1 line-clamp-2">{activity.title}</h4>
                                  </>
                                ) : activity.type === "dislike" ? (
                                  <>
                                    <p className="text-sm font-medium text-foreground">Disliked an idea</p>
                                    <h4 className="font-semibold text-foreground mt-1 line-clamp-2">{activity.title}</h4>
                                  </>
                                ) : null}
                                <p className="text-xs text-muted-foreground mt-2">{activity.timestamp}</p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                      {hasMoreActivities && (
                        <div className="p-4 text-center border-t border-border/50">
                          <button onClick={loadMoreActivities} disabled={activityLoading} className="px-4 py-2 text-sm text-primary">
                            {activityLoading ? "Loading..." : "Load More"}
                          </button>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}
            </div>
          </div>

          {/* Sidebar - All dynamic sections */}
          <div className="lg:col-span-1">
            <AboutSection userData={userData} />
            <QualificationsSection qualifications={userData?.qualifications || []} />
            <SkillsSection 
              skills={userData?.skills || []} 
              interests={userData?.interests || []} 
            />
            <AchievementsSection achievements={userData?.achievements || []} />
            <SocialLinks 
              socialMedia={userData?.socialMedia} 
              email={userData?.email}
              website={userData?.website}
            />
          </div>
        </div>
      </main>
    </div>
  );
}