// components/profile/profile-activity.tsx
"use client"

import { cn } from "@/lib/utils"
import { 
  Lightbulb, 
  ThumbsUp, 
  Bookmark,
  TrendingUp,
  DollarSign,
  Handshake,
  MoreHorizontal,
  ThumbsDown
} from "lucide-react"

interface Activity {
  id: string
  type: "idea" | "like" | "dislike" | "comment" | "save" | "invest" | "collaborate"
  title: string
  description?: string
  timestamp: string
  category?: string
  engagement?: {
    likes?: number
    comments?: number
  }
}

interface ProfileActivityProps {
  activities: Activity[]
  userType: "individual" | "business" | "investor"
}

const activityIcons = {
  idea: Lightbulb,
  like: ThumbsUp,
  dislike: ThumbsDown,
  save: Bookmark,
  invest: DollarSign,
  collaborate: Handshake,
  comment: Lightbulb, // fallback
}

const activityLabels = {
  idea: "Posted an idea",
  like: "Liked an idea",
  dislike: "Disliked an idea",
  save: "Saved an idea",
  invest: "Interested in investing",
  collaborate: "Started collaboration",
  comment: "Commented on an idea",
}

const userTypeConfig = {
  individual: {
    iconBg: "bg-primary/10",
    iconColor: "text-primary",
  },
  business: {
    iconBg: "bg-amber-500/10",
    iconColor: "text-amber-400",
  },
  investor: {
    iconBg: "bg-emerald-500/10",
    iconColor: "text-emerald-400",
  },
}

export function ProfileActivity({ activities, userType }: ProfileActivityProps) {
  const config = userTypeConfig[userType]

  if (!activities || activities.length === 0) {
    return (
      <div className="py-12 text-center">
        <div className={cn("w-16 h-16 rounded-2xl mx-auto mb-4 flex items-center justify-center", config.iconBg)}>
          <TrendingUp className={cn("h-8 w-8", config.iconColor)} />
        </div>
        <h3 className="text-lg font-semibold text-foreground mb-2">No activity yet</h3>
        <p className="text-muted-foreground text-sm">Activities will appear here as they happen</p>
      </div>
    )
  }

  return (
    <div className="divide-y divide-border/50">
      {activities.map((activity) => {
        const Icon = activityIcons[activity.type] || Lightbulb // fallback to Lightbulb if icon not found
        const label = activityLabels[activity.type] || "Activity"
        
        return (
          <div key={activity.id} className="p-4 hover:bg-secondary/20 transition-colors">
            <div className="flex gap-4">
              <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center shrink-0", config.iconBg)}>
                <Icon className={cn("h-5 w-5", config.iconColor)} />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-muted-foreground mb-1">
                  {label}
                </p>
                <h4 className="font-medium text-foreground truncate">{activity.title}</h4>
                {activity.description && (
                  <p className="text-sm text-muted-foreground mt-1 line-clamp-2">{activity.description}</p>
                )}
                <div className="flex items-center gap-4 mt-2">
                  {activity.category && (
                    <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-muted-foreground">
                      {activity.category}
                    </span>
                  )}
                  {activity.engagement && activity.engagement.likes !== undefined && (
                    <div className="flex items-center gap-3 text-xs text-muted-foreground">
                      <span className="flex items-center gap-1">
                        <ThumbsUp className="h-3 w-3" />
                        {activity.engagement.likes}
                      </span>
                    </div>
                  )}
                  <span className="text-xs text-muted-foreground ml-auto">{activity.timestamp}</span>
                </div>
              </div>
              <button className="p-2 rounded-lg hover:bg-secondary/50 text-muted-foreground hover:text-foreground transition-colors self-start">
                <MoreHorizontal className="h-4 w-4" />
              </button>
            </div>
          </div>
        )
      })}
    </div>
  )
}