'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 { 
  Building2, Users, Globe, Linkedin, Twitter, Mail, 
  MapPin, Calendar, IndianRupee, Target, Briefcase, 
  TrendingUp, Award, Lightbulb, Activity,
} from "lucide-react";
import Image from "next/image";
import { getFriendDetails, likeDislike, getRecentActivity, getUserPostsByUsername } from '@/lib/api/client';
import { toast } from "sonner";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

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

// Shimmer keyframes style (add to your global.css or here via style tag)
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>
  );
}

// Company Overview Skeleton
function CompanyOverviewSkeleton() {
  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-4">
        {[1, 2, 3].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-3 w-20 bg-gray-300 dark:bg-gray-700 rounded"></div>
              <div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded"></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Looking For Section Skeleton
function LookingForSectionSkeleton() {
  return (
    <div className="bg-card rounded-xl border border-amber-500/20 bg-amber-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-3">
        <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="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>
  );
}

// What We Offer Section Skeleton
function WhatWeOfferSectionSkeleton() {
  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-start gap-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-24 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>
  );
}

// Key People Section Skeleton
function KeyPeopleSectionSkeleton() {
  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-3">
        {[1, 2].map((i) => (
          <div key={i} className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700"></div>
            <div className="flex-1 space-y-1">
              <div className="h-4 w-28 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>
    </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>
  );
}

// Recent Activity Skeleton
function RecentActivitySkeleton() {
  return (
    <div className="bg-card rounded-xl border border-border/50 overflow-hidden relative">
      <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>
      <div className="p-4 space-y-4">
        {[1, 2].map((i) => (
          <div key={i} 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-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>
    </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>
  );
}

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

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

// Company Overview Section
function CompanyOverview({ organization, location }: { organization: any, location: any }) {
  const hasData = organization?.industry || organization?.type || organization?.employeeCount || 
                  organization?.foundedYear || organization?.headquarters || organization?.annualRevenue;
  
  if (!hasData) return null;

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Company Overview</h3>
      <div className="space-y-4">
        {organization?.type && (
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-amber-500/10 flex items-center justify-center shrink-0">
              <Building2 className="h-4 w-4 text-amber-500" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Business Type</p>
              <p className="text-sm font-medium text-foreground">{organization.type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</p>
            </div>
          </div>
        )}
        {organization?.industry && (
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-amber-500/10 flex items-center justify-center shrink-0">
              <Building2 className="h-4 w-4 text-amber-500" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Industry</p>
              <p className="text-sm font-medium text-foreground">{organization.industry}</p>
            </div>
          </div>
        )}
        {organization?.employeeCount && (
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
              <Users className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Company Size</p>
              <p className="text-sm font-medium text-foreground">{organization.employeeCount}</p>
            </div>
          </div>
        )}
        {organization?.foundedYear && (
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
              <Calendar className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Founded</p>
              <p className="text-sm font-medium text-foreground">{organization.foundedYear}</p>
            </div>
          </div>
        )}
        {(organization?.headquarters || (location?.city && location?.country)) && (
          <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-xs text-muted-foreground">Headquarters</p>
              <p className="text-sm font-medium text-foreground">
                {organization?.headquarters || [location?.city, location?.country].filter(Boolean).join(", ")}
              </p>
            </div>
          </div>
        )}
        {organization?.annualRevenue && (
          <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
              <IndianRupee className="h-4 w-4 text-muted-foreground" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">Annual Revenue</p>
              <p className="text-sm font-medium text-foreground">{organization.annualRevenue}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Looking For Section
function LookingForSection({ postCategories }: { postCategories: any[] }) {
  const categories = postCategories?.map((cat: any) => 
    typeof cat === 'object' ? cat.mainCategoryName : cat
  ) || [];

  if (categories.length === 0) return null;

  return (
    <div className="bg-card rounded-xl border border-amber-500/20 bg-amber-500/5 p-5 mb-4">
      <div className="flex items-center gap-2 mb-3">
        <Target className="h-4 w-4 text-amber-500" />
        <h3 className="font-semibold text-foreground">Looking For Ideas In</h3>
      </div>
      <div className="flex flex-wrap gap-2">
        {categories.map((item) => (
          <span key={item} className="px-2.5 py-1 rounded-lg bg-amber-500/10 text-xs text-amber-400 border border-amber-500/20">
            {item}
          </span>
        ))}
      </div>
    </div>
  );
}

// What We Offer Section
function WhatWeOfferSection({ whatWeOffer }: { whatWeOffer: any[] }) {
  if (!whatWeOffer || whatWeOffer.length === 0) return null;

  const offerIcons = [IndianRupee, Briefcase, Users, TrendingUp, Award, Lightbulb];

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">What We Offer</h3>
      <div className="space-y-3">
        {whatWeOffer.map((item, idx) => (
          <div key={idx} className="flex items-start gap-3">
            <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
              {(() => {
                const Icon = offerIcons[idx % offerIcons.length];
                return <Icon className="h-4 w-4 text-emerald-400" />;
              })()}
            </div>
            <div>
              <p className="text-sm font-medium text-foreground">{item.title}</p>
              {item.description && <p className="text-xs text-muted-foreground">{item.description}</p>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Key People Section
function KeyPeopleSection({ keyPeople }: { keyPeople: any[] }) {
  if (!keyPeople || keyPeople.length === 0) return null;

  return (
    <div className="bg-card rounded-xl border border-border/50 p-5 mb-4">
      <h3 className="font-semibold text-foreground mb-4">Key People</h3>
      <div className="space-y-3">
        {keyPeople.map((person, idx) => (
          <div key={idx} className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-sm font-medium text-muted-foreground">
              {person.avatar || person.name?.charAt(0)?.toUpperCase() || "?"}
            </div>
            <div>
              <p className="text-sm font-medium text-foreground">{person.name}</p>
              <p className="text-xs text-muted-foreground">{person.role}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Social Links Section
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" rel="noopener noreferrer" className="flex items-center gap-3 p-2 rounded-lg hover:bg-secondary transition-colors">
            <Globe className="h-4 w-4 text-muted-foreground" />
            <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">
            <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">
            <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 transition-colors">
            <Mail className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm text-foreground">{email}</span>
          </a>
        )}
      </div>
    </div>
  );
}

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

export default function PublicBusinessProfile({ profile }: PublicBusinessProfileProps) {
  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("opportunities");
  
  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 isOwnProfile = currentCustomer?.customer?._id === targetUser?._id || currentCustomer?._id === targetUser?._id;

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

  // 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);
      if (response.success && response.posts) {
        const formattedIdeas = response.posts.map((post: any) => ({
          id: post._id,
          title: post.description?.substring(0, 100) || "Untitled",
          description: post.description || "",
          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);
      }
    } catch (error) {
      console.error("Error fetching posts:", error);
    } finally {
      setIdeasLoading(false);
    }
  }, [accessToken, targetUsername]);

  const fetchUserActivity = useCallback(async (pageNum: number = 1, append: boolean = false) => {
  if (!accessToken) return;
  setActivityLoading(true);
  try {
    // ✅ Pass targetUser?._id as userId
    const response = await getRecentActivity(
      accessToken, 
      pageNum, 
      10, 
      targetUser?._id,  // 👈 YAHAN userId pass karo
      process.env.NEXT_PUBLIC_SECURITY_KEY
    );
    
    if (response.success && response.data?.activities) {
      // Activities already filtered by backend, no need to filter again
      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 };
        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="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 md:p-6">
            <div className="lg:col-span-2">
              <LookingForSectionSkeleton />
              <RecentActivitySkeleton />
            </div>
            <div className="lg:col-span-1">
              <CompanyOverviewSkeleton />
              <WhatWeOfferSectionSkeleton />
              <KeyPeopleSectionSkeleton />
              <ContactSectionSkeleton />
            </div>
          </div>
        </main>
      </div>
    );
  }

  const userData = userProfile;
  const businessData = userData?.businessProfile || userData;
  const personalInfoData = profile?.personalInfo || profile;
  
  const badges = [
    userData?.isVerified ? "Verified Business" : null,
    businessData?.subscription?.status === 'active' ? "Premium Business" : null,
  ].filter(Boolean);
  
  const userStats = {
    ideas: businessData?.stats?.totalPosts || userData?.totalPost || 0,
    likes: businessData?.stats?.totalLikes || userData?.totalLikes || 0,
    dislikes: businessData?.stats?.totalDislikes || userData?.totalDisLikes || 0,
  };
  
  const location = [
    businessData?.location?.city,
    businessData?.location?.region,
    businessData?.location?.country || userData?.country
  ].filter(Boolean).join(", ");

  const headerData = {
    name: businessData?.organization?.name || userData?.fullName || "Business",
    username: userData?.userName?.replace('@', '') || "username",
      designation: userData?.designation || profile?.personalInfo?.designation || "", // ✅ ADD THIS
   address: businessData.address?.street && businessData.address?.street !== "undefined" 
  ? businessData.address?.street 
  : "",
    avatar: userData?.imageURL ? `${BASE_URL}/uploads/${userData.imageURL}` : "",
    bio: userData?.aboutMe || businessData?.organization?.description || "",
    location: location || "Location not set",
    website: businessData?.organization?.website || userData?.website || "",
    joinedDate: formatDate(userData?.createdAt),
    isVerified: targetUser?.security?.isVerified || targetUser?.personalInfo?.isVerified || false,
    isPremium: businessData?.subscription?.status === 'active',
    userType: "business" as const,
    aiMatchScore: 85,
    stats: userStats,
    badges: badges,
  };

  const tabs = [
    { id: "opportunities", label: "Opportunities", count: businessData?.organization?.whatWeOffer?.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="business"
        />
        <ProfileTabs tabs={tabs} userType="business" onTabChange={(tabId) => setActiveTab(tabId)} />
        
        <div className="p-4 md:p-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
            {/* Main Content */}
            <div className="lg:col-span-2">
              <LookingForSection postCategories={userData?.postCategories || []} />
              <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 === "opportunities" ? "Ideas & Opportunities" : "Recent Activity"}
                  </h2>
                </div>
                
                {activeTab === "opportunities" && (
                  <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">Posted an opportunity</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 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 ? (
                      <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>
                    ) : 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 the business creates ideas or likes 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 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>

            {/* Sidebar */}
            <div className="lg:col-span-1">
              <CompanyOverview organization={businessData?.organization} location={businessData?.location} />
              <WhatWeOfferSection whatWeOffer={businessData?.organization?.whatWeOffer || []} />
              <KeyPeopleSection keyPeople={businessData?.organization?.keyPeople || []} />
              <SocialLinks socialMedia={userData?.socialMedia} email={userData?.email} website={businessData?.organization?.website} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}