"use client"

import { cn } from "@/lib/utils"
import { 
  MapPin, 
  Link as LinkIcon, 
  Calendar, 
  BadgeCheck, 
  UserPlus,
  MoreHorizontal,
  Share2,
  Flag,
  Sparkles,
  Lock
} from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface ProfileHeaderProps {
  name: string
  username: string
  avatar: string
  bio: string
  location?: string
  website?: string
  joinedDate: string
  isVerified?: boolean
  isPremium?: boolean
  userType: "individual" | "business" | "investor"
  aiMatchScore?: number // 0-100, only show collaboration if > 70 and user is premium
  stats: {
    ideas?: number
    investments?: number
    deals?: number
    followers: number
    following: number
  }
  badges?: string[]
}

const userTypeConfig = {
  individual: {
    label: "Individual",
    color: "bg-primary",
    textColor: "text-primary",
    borderColor: "border-primary/30",
    bgGlow: "bg-primary/10",
  },
  business: {
    label: "Business",
    color: "bg-amber-500",
    textColor: "text-amber-400",
    borderColor: "border-amber-500/30",
    bgGlow: "bg-amber-500/10",
  },
  investor: {
    label: "Investor",
    color: "bg-emerald-500",
    textColor: "text-emerald-400",
    borderColor: "border-emerald-500/30",
    bgGlow: "bg-emerald-500/10",
  },
}

export function ProfileHeader({
  name,
  username,
  avatar,
  bio,
  location,
  website,
  joinedDate,
  isVerified,
  isPremium = false,
  userType,
  aiMatchScore = 0,
  stats,
  badges,
}: ProfileHeaderProps) {
  const config = userTypeConfig[userType]
  const showCollaboration = isPremium && aiMatchScore >= 70

  return (
    <div className="px-4 md:px-6 pt-6 pb-4 border-b border-border/50">
      {/* Top Row: Avatar + Name + Actions */}
      <div className="flex items-start gap-4 md:gap-6">
        {/* Avatar */}
        <div className="shrink-0">
          <div className={cn("relative rounded-2xl", config.bgGlow)}>
            <div className={cn("rounded-xl border-2 overflow-hidden", config.borderColor)}>
              <div className="w-20 h-20 md:w-28 md:h-28 bg-secondary flex items-center justify-center text-2xl md:text-3xl font-bold text-muted-foreground">
                {avatar ? (
                  <img src={avatar} alt={name} className="w-full h-full object-cover" />
                ) : (
                  name.charAt(0).toUpperCase()
                )}
              </div>
            </div>
            {/* Premium badge */}
            {isPremium && (
              <div className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
                <Sparkles className="h-3 w-3 text-white" />
              </div>
            )}
          </div>
        </div>

        {/* Name, Username, Type Badge */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h1 className="text-xl md:text-2xl font-bold text-foreground truncate">{name}</h1>
            {isVerified && (
              <BadgeCheck className={cn("h-5 w-5 shrink-0", config.textColor)} />
            )}
            <span className={cn(
              "px-2.5 py-0.5 rounded-full text-xs font-semibold shrink-0",
              config.color,
              "text-white"
            )}>
              {config.label}
            </span>
          </div>
          <p className="text-muted-foreground text-sm">@{username}</p>
          
          {/* Meta Info */}
          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-xs text-muted-foreground">
            {location && (
              <span className="flex items-center gap-1">
                <MapPin className="h-3 w-3" />
                {location}
              </span>
            )}
            {website && (
              <a 
                href={website} 
                target="_blank" 
                rel="noopener noreferrer"
                className={cn("flex items-center gap-1 hover:underline", config.textColor)}
              >
                <LinkIcon className="h-3 w-3" />
                {website.replace(/^https?:\/\//, '')}
              </a>
            )}
            <span className="flex items-center gap-1">
              <Calendar className="h-3 w-3" />
              Joined {joinedDate}
            </span>
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-2 shrink-0">
          <Button size="sm" className="gap-1.5">
            <UserPlus className="h-4 w-4" />
            <span className="hidden sm:inline">Follow</span>
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm" className="px-2">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Share2 className="h-4 w-4 mr-2" />
                Share Profile
              </DropdownMenuItem>
              <DropdownMenuItem className="text-destructive">
                <Flag className="h-4 w-4 mr-2" />
                Report
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* Bio */}
      <p className="mt-4 text-foreground/90 text-sm leading-relaxed max-w-3xl">{bio}</p>

      {/* Badges */}
      {badges && badges.length > 0 && (
        <div className="flex flex-wrap gap-2 mt-3">
          {badges.map((badge) => (
            <span 
              key={badge}
              className={cn(
                "px-2.5 py-1 rounded-full text-xs font-medium border",
                config.borderColor,
                config.bgGlow,
                config.textColor
              )}
            >
              {badge}
            </span>
          ))}
        </div>
      )}

      {/* Stats Row */}
      <div className="flex flex-wrap items-center gap-4 md:gap-6 mt-4 pt-4 border-t border-border/30">
        {stats.ideas !== undefined && (
          <div>
            <span className="font-bold text-foreground">{stats.ideas}</span>
            <span className="text-muted-foreground text-sm ml-1">Ideas</span>
          </div>
        )}
        {stats.investments !== undefined && (
          <div>
            <span className="font-bold text-foreground">{stats.investments}</span>
            <span className="text-muted-foreground text-sm ml-1">Investments</span>
          </div>
        )}
        {stats.deals !== undefined && (
          <div>
            <span className="font-bold text-foreground">{stats.deals}</span>
            <span className="text-muted-foreground text-sm ml-1">Deals</span>
          </div>
        )}
        <div>
          <span className="font-bold text-foreground">{stats.followers.toLocaleString()}</span>
          <span className="text-muted-foreground text-sm ml-1">Followers</span>
        </div>
        <div>
          <span className="font-bold text-foreground">{stats.following.toLocaleString()}</span>
          <span className="text-muted-foreground text-sm ml-1">Following</span>
        </div>

        {/* AI Match & Collaboration Button */}
        <div className="ml-auto">
          <TooltipProvider>
            {showCollaboration ? (
              <div className="flex items-center gap-2">
                <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30">
                  <Sparkles className="h-3 w-3 text-emerald-400" />
                  <span className="text-xs font-medium text-emerald-400">{aiMatchScore}% AI Match</span>
                </div>
                <Button size="sm" className="bg-emerald-500 hover:bg-emerald-600 text-white">
                  Request Collaboration
                </Button>
              </div>
            ) : (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button size="sm" variant="outline" disabled className="gap-1.5 opacity-60">
                    <Lock className="h-3 w-3" />
                    Collaborate
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="left" className="max-w-xs">
                  <p className="text-xs">
                    {!isPremium 
                      ? "Upgrade to Premium to send collaboration requests when AI finds a match."
                      : "AI match score needs to be 70% or higher to collaborate."
                    }
                  </p>
                </TooltipContent>
              </Tooltip>
            )}
          </TooltipProvider>
        </div>
      </div>
    </div>
  )
}