'use client';

import { useEffect, useState, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { useRouter } from 'next/navigation';
import { RootState } from '@/lib/store/store';
import { PublicHeader } from './public-header';
import { ProfileHeader } from './profile-header';
import { ProfileTabs } from './profile-tabs';
import { 
  TrendingUp, IndianRupee, Target, PieChart, Briefcase, 
  GraduationCap, Globe, Linkedin, Twitter, Mail, Building2,
  CheckCircle, Lightbulb, Activity, Award, Calendar, MapPin
} from "lucide-react";
import Image from "next/image";
import { getFriendDetails, likeDislike, getUserPostsByUsername, getRecentActivity } from '@/lib/api/client';
import { cn } from "@/lib/utils";
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
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>
  );
}

// Investment Stats Skeleton
function InvestmentStatsSkeleton() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
      {[1, 2, 3, 4].map((i) => (
        <div key={i} className="bg-card rounded-xl border border-border/50 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="w-8 h-8 rounded-lg bg-gray-300 dark:bg-gray-700 mb-2"></div>
          <div className="h-7 w-20 bg-gray-300 dark:bg-gray-700 rounded mb-1"></div>
          <div className="h-3 w-16 bg-gray-300 dark:bg-gray-700 rounded"></div>
        </div>
      ))}
    </div>
  );
}

// Investment Criteria Skeleton
function InvestmentCriteriaSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-emerald-500/20 bg-emerald-500/5 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="flex items-center gap-2 mb-4">
        <div className="h-4 w-4 bg-gray-300 dark:bg-gray-700 rounded"></div>
        <div className="h-5 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        {[1, 2, 3, 4].map((i) => (
          <div key={i}>
            <div className="h-3 w-16 bg-gray-300 dark:bg-gray-700 rounded mb-1"></div>
            <div className="h-4 w-20 bg-gray-300 dark:bg-gray-700 rounded"></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Background Section Skeleton
function BackgroundSectionSkeleton() {
  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">
        {[1, 2].map((i) => (
          <div key={i} className="flex items-start gap-3">
            <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-40 bg-gray-300 dark:bg-gray-700 rounded"></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Portfolio Highlights Skeleton
function PortfolioHighlightsSkeleton() {
  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-32 bg-gray-300 dark:bg-gray-700 rounded mb-4"></div>
      <div className="space-y-3">
        {[1, 2].map((i) => (
          <div key={i} className="flex items-center justify-between p-3 rounded-lg bg-secondary/50">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-gray-300 dark:bg-gray-700"></div>
              <div>
                <div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded mb-1"></div>
                <div className="h-3 w-16 bg-gray-300 dark:bg-gray-700 rounded"></div>
              </div>
            </div>
            <div className="h-4 w-12 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>
  );
}

// ========== ACTUAL COMPONENTS ==========

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' });
};

// Investment Stats
function InvestmentStats({ stats }: { stats: { totalInvested?: string; activeDeals?: number; avgIRR?: string; exits?: number } }) {
  const defaultStats = [
    { icon: IndianRupee, label: "Total Invested", value: stats.totalInvested || "Rs 0", color: "text-emerald-400" },
    { icon: Target, label: "Active Deals", value: stats.activeDeals?.toString() || "0", color: "text-emerald-400" },
    { icon: TrendingUp, label: "Avg. IRR", value: stats.avgIRR || "0%", color: "text-emerald-400" },
    { icon: PieChart, label: "Exits", value: stats.exits?.toString() || "0", color: "text-emerald-400" },
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
      {defaultStats.map((stat) => (
        <div key={stat.label} className="bg-card rounded-xl border border-border/50 p-4">
          <div className="flex items-center gap-2 mb-2">
            <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
              <stat.icon className={cn("h-4 w-4", stat.color)} />
            </div>
          </div>
          <p className="text-xl font-bold text-foreground">{stat.value}</p>
          <p className="text-xs text-muted-foreground">{stat.label}</p>
        </div>
      ))}
    </div>
  );
}

// Investment Criteria
function InvestmentCriteria({ criteria }: { criteria: { ticketSize?: string; stage?: string; geography?: string; decisionTime?: string } }) {
  return (
    <div className="bg-card rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-5 mb-4">
      <div className="flex items-center gap-2 mb-4">
        <Target className="h-4 w-4 text-emerald-400" />
        <h3 className="font-semibold text-foreground">Investment Criteria</h3>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div><p className="text-xs text-muted-foreground mb-1">Ticket Size</p><p className="text-sm font-medium text-foreground">{criteria.ticketSize || "Not specified"}</p></div>
        <div><p className="text-xs text-muted-foreground mb-1">Stage</p><p className="text-sm font-medium text-foreground">{criteria.stage || "Not specified"}</p></div>
        <div><p className="text-xs text-muted-foreground mb-1">Geography</p><p className="text-sm font-medium text-foreground">{criteria.geography || "Not specified"}</p></div>
        <div><p className="text-xs text-muted-foreground mb-1">Decision Time</p><p className="text-sm font-medium text-foreground">{criteria.decisionTime || "Not specified"}</p></div>
      </div>
    </div>
  );
}

// Background Section
function BackgroundSection({ education, experience }: { education: any[]; experience: any[] }) {
  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Background</h3>
      <div className="space-y-4">
        {experience && experience.length > 0 ? experience.map((exp, idx) => (
          <div key={idx} className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
              <Briefcase className="h-4 w-4 text-emerald-400" />
            </div>
            <div><p className="text-sm font-medium text-foreground">{exp.role}</p><p className="text-xs text-muted-foreground">{exp.company} - {exp.duration}</p></div>
          </div>
        )) : <p className="text-sm text-muted-foreground">No experience added yet</p>}
        {education && education.length > 0 ? education.map((edu, idx) => (
          <div key={idx} className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
              <GraduationCap className="h-4 w-4 text-muted-foreground" />
            </div>
            <div><p className="text-sm font-medium text-foreground">{edu.degree}</p><p className="text-xs text-muted-foreground">{edu.institution} - {edu.year}</p></div>
          </div>
        )) : <p className="text-sm text-muted-foreground">No education added yet</p>}
      </div>
    </div>
  );
}

// Portfolio Highlights
function PortfolioHighlights({ portfolio }: { portfolio: Array<{ name: string; status: string; return: string }> }) {
  if (!portfolio || portfolio.length === 0) return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Portfolio Highlights</h3>
      <p className="text-sm text-muted-foreground">No portfolio companies 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">Portfolio Highlights</h3>
      <div className="space-y-3">
        {portfolio.map((item, idx) => (
          <div key={idx} className="flex items-center justify-between p-3 rounded-lg bg-secondary/50">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center text-xs font-bold text-muted-foreground">
                {item.name.charAt(0)}
              </div>
              <div><p className="text-sm font-medium text-foreground">{item.name}</p><p className="text-xs text-muted-foreground flex items-center gap-1">
                {item.status === "Exited" ? <CheckCircle className="h-3 w-3 text-emerald-400" /> : <TrendingUp className="h-3 w-3 text-primary" />}
                {item.status}
              </p></div>
            </div>
            <span className="text-sm font-bold text-emerald-400">{item.return}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Social Links
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 personalWebsite = website || socialMedia?.find((s: any) => s.type === "website")?.link;
  const hasAnySocial = linkedin || twitter || 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} target="_blank" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary"><Globe className="h-4 w-4 text-muted-foreground" /><span className="text-sm text-foreground">Website</span></a>}
        {linkedin && <a href={linkedin} target="_blank" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary"><Linkedin className="h-4 w-4 text-[#0A66C2]" /><span className="text-sm text-foreground">LinkedIn</span></a>}
        {twitter && <a href={twitter} target="_blank" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary"><Twitter className="h-4 w-4 text-muted-foreground" /><span className="text-sm text-foreground">Twitter</span></a>}
        {email && <a href={`mailto:${email}`} className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary"><Mail className="h-4 w-4 text-muted-foreground" /><span className="text-sm text-foreground">{email}</span></a>}
      </div>
    </div>
  );
}

// Main Component
interface PublicInvestorProfileProps {
  profile: any;
}

export default function PublicInvestorProfile({ profile }: PublicInvestorProfileProps) {
  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("portfolio");
  
  const [userIdeas, setUserIdeas] = useState<any[]>([]);
  const [ideasLoading, setIdeasLoading] = useState(false);
  const [hasMoreIdeas, setHasMoreIdeas] = useState(true);
  const [ideasPage, setIdeasPage] = useState(1);
  
  const targetUser = profile?.customer || profile;
  const targetUsername = targetUser?.userName?.replace('@', '') || "";
  const [activities, setActivities] = useState<any[]>([]);
  const [activityLoading, setActivityLoading] = useState(false);
  const [activityPage, setActivityPage] = useState(1);
  const [hasMoreActivities, setHasMoreActivities] = useState(true);

  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";

  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);
      if (response.success && response.posts) {
        const formattedIdeas = response.posts.map((post: any) => ({
          id: post._id,
          title: post.description?.substring(0, 100) || "Untitled",
          timestamp: formatRelativeTime(post.createdAt),
          category: post.postCategory?.mainCategoryName || "",
          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 posts:", error);
      if (!append) setUserIdeas([]);
    } finally {
      setIdeasLoading(false);
    }
  }, [accessToken, targetUsername]);

  const fetchUserActivity = useCallback(async (pageNum: number = 1, append: boolean = false) => {
    if (!accessToken) return;
    setActivityLoading(true);
    try {
      const response = await getRecentActivity(accessToken, pageNum, 10, process.env.NEXT_PUBLIC_SECURITY_KEY);
      if (response.success && response.data?.activities) {
        const userActivities = response.data.activities.filter((activity: any) => 
          activity.userId === targetUser?._id || activity.customerId === targetUser?._id
        );
        const formattedActivities = userActivities.map((activity: any) => ({
          id: activity.id,
          type: activity.type,
          title: activity.title || activity.description?.substring(0, 60) || "Untitled",
          description: activity.description || "",
          timestamp: formatRelativeTime(activity.timestamp || activity.createdAt),
          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 };
        let newLikes = idea.likes + 1, 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);
    } catch { fetchUserIdeas(ideasPage, false); }
  };

  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 };
        let newDislikes = idea.dislikes + 1, 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);
    } catch { fetchUserIdeas(ideasPage, false); }
  };

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

  useEffect(() => {
    if (accessToken && targetUser?._id) fetchUserActivity(1, false);
  }, [accessToken, targetUser?._id, fetchUserActivity]);

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

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <PublicHeader />
        <main className="max-w-5xl mx-auto">
          <ProfileHeaderSkeleton />
          <div className="p-4 md:p-6">
            <InvestmentStatsSkeleton />
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
              <div className="lg:col-span-2">
                <InvestmentCriteriaSkeleton />
                <div className="bg-card rounded-xl border border-border/50">
                  <div className="p-4 border-b border-border/50">
                    <div className="h-5 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
                  </div>
                  <IdeasLoadingSkeleton />
                </div>
              </div>
              <div className="lg:col-span-1">
                <BackgroundSectionSkeleton />
                <PortfolioHighlightsSkeleton />
                <ContactSectionSkeleton />
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }

  const userData = userProfile;
  const investorData = userData?.investorProfile || userData;
  
  const badges = [
    userData?.isVerified ? "Verified Investor" : null,
    investorData?.isPremium ? "Premium Investor" : null,
    investorData?.topAngel ? "Top 100 Angels" : null,
  ].filter(Boolean);
  
  const userStats = {
    ideas: userData?.totalPost || 0,
    likes: userData?.totalLikes || 0,
    dislikes: userData?.totalDisLikes || 0,
    investments: investorData?.stats?.investments || 0,
  };
  
  const headerData = {
    name: userData?.fullName || "Investor",
    username: userData?.userName?.replace('@', '') || "username",
       designation: userData?.designation || profile?.personalInfo?.designation || "", // ✅ ADD
  address: userData?.address || "", // ✅ ADD
    avatar: userData?.imageURL ? `${BASE_URL}/uploads/${userData.imageURL}` : "",
    bio: userData?.aboutMe || investorData?.bio || "",
    location: userData?.country || "Location not set",
    website: investorData?.website || userData?.website || "",
    joinedDate: formatDate(userData?.createdAt),
    isVerified: userData?.isVerified || false,
    isPremium: investorData?.isPremium || false,
    userType: "investor" as const,
    aiMatchScore: investorData?.aiMatchScore || 85,
    stats: userStats,
    badges: badges,
  };

  const tabs = [
    { id: "portfolio", label: "Portfolio", count: investorData?.portfolio?.length || 0 },
    { id: "activity", label: "Activity" },
  ];

  return (
    <div className="min-h-screen bg-background">
      <PublicHeader />
      <main className="max-w-5xl mx-auto">
        <ProfileHeader
         isPremium={true} 
          {...headerData}
          userId={userData?._id}
          userModel="investor"
        />
        <ProfileTabs tabs={tabs} userType="investor" onTabChange={(tabId) => setActiveTab(tabId)} />
        
        <div className="p-4 md:p-6">
          <InvestmentStats stats={investorData?.stats || {}} />
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <div className="lg:col-span-2">
              <InvestmentCriteria criteria={investorData?.criteria || {}} />
              <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 === "portfolio" ? "Investment Ideas" : "Recent Activity"}</h2>
                </div>
                
                {activeTab === "portfolio" && (
                  <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 investment 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">Investment opportunity</p>
                                    <h4 className="font-semibold text-foreground mt-1 line-clamp-2">{idea.title}</h4>
                                    {idea.category && <span className="inline-block mt-2 px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">{idea.category}</span>}
                                    <div className="flex items-center gap-4 mt-3">
                                      <button onClick={(e) => { e.stopPropagation(); handleLike(idea.id, idea.likeStatus); }} className="flex items-center gap-1.5 px-2 py-1 rounded-lg">
                                        <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">
                                        <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>
                                    <p className="text-xs 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 py-2 text-sm text-primary hover:text-primary/80 disabled:opacity-50">
                              {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>
                        <p className="text-sm mt-2">When you create ideas or like posts, they'll appear here</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 investment opportunity</p>
                                      <h4 className="font-semibold text-foreground mt-1 line-clamp-2">{activity.title}</h4>
                                      {activity.description && (
                                        <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{activity.description}</p>
                                      )}
                                      {activity.category && activity.category !== "Uncategorized" && (
                                        <span className="inline-block mt-2 px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
                                          {activity.category}
                                        </span>
                                      )}
                                    </>
                                  )}
                                  {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>
                                    </>
                                  )}
                                  <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 hover:text-primary/80 disabled:opacity-50">
                              {activityLoading ? "Loading..." : "Load More"}
                            </button>
                          </div>
                        )}
                      </>
                    )}
                  </div>
                )}
              </div>
            </div>

            <div className="lg:col-span-1">
              <BackgroundSection education={userData?.education || []} experience={userData?.experience || []} />
              <PortfolioHighlights portfolio={investorData?.portfolio || []} />
              <SocialLinks socialMedia={userData?.socialMedia} email={userData?.email} website={investorData?.website} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}