'use client'

export interface ArtistHeaderProps {
  name: string
  avatarUrl?: string
  bannerUrl?: string
  bio?: string
  followers?: number
  monthlyListeners?: number
  verified?: boolean
  isFollowing?: boolean
  onFollowToggle?: () => void
}

export function ArtistHeader({
  name,
  avatarUrl,
  bannerUrl,
  bio,
  followers = 0,
  monthlyListeners = 0,
  verified = false,
  isFollowing = false,
  onFollowToggle
}: ArtistHeaderProps) {
  const formatNumber = (num: number) => {
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
    return num.toString()
  }

  return (
    <div className="relative">
      {/* Banner */}
      <div className="h-64 bg-gradient-to-b from-purple-900/50 to-zinc-900 relative overflow-hidden">
        {bannerUrl && (
          <img
            src={bannerUrl}
            alt={name}
            className="w-full h-full object-cover opacity-40"
          />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent" />
      </div>

      {/* Content */}
      <div className="relative -mt-32 px-8">
        <div className="flex items-end gap-6 mb-6">
          {/* Avatar */}
          <div className="relative flex-shrink-0">
            <div className="w-48 h-48 rounded-full overflow-hidden bg-zinc-800 border-4 border-zinc-900 shadow-2xl">
              {avatarUrl ? (
                <img
                  src={avatarUrl}
                  alt={name}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center">
                  <svg className="w-24 h-24 text-zinc-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
                  </svg>
                </div>
              )}
            </div>

            {/* Verified Badge */}
            {verified && (
              <div className="absolute bottom-2 right-2 w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center border-4 border-zinc-900 shadow-lg">
                <svg className="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
              </div>
            )}
          </div>

          {/* Info */}
          <div className="flex-1 pb-4">
            <div className="flex items-center gap-3 mb-2">
              <h1 className="text-5xl font-bold text-white">{name}</h1>
            </div>

            {/* Stats */}
            <div className="flex items-center gap-6 text-sm text-zinc-300">
              {followers > 0 && (
                <div>
                  <span className="font-semibold">{formatNumber(followers)}</span> followers
                </div>
              )}
              {monthlyListeners > 0 && (
                <div>
                  <span className="font-semibold">{formatNumber(monthlyListeners)}</span> monthly listeners
                </div>
              )}
            </div>

            {/* Bio */}
            {bio && (
              <p className="mt-4 text-zinc-400 max-w-2xl line-clamp-3">
                {bio}
              </p>
            )}

            {/* Follow Button */}
            {onFollowToggle && (
              <button
                onClick={onFollowToggle}
                className={`mt-6 px-8 py-3 rounded-full font-semibold transition ${
                  isFollowing
                    ? 'bg-zinc-800 text-white hover:bg-zinc-700 border border-zinc-700'
                    : 'bg-purple-500 text-white hover:bg-purple-600'
                }`}
              >
                {isFollowing ? 'Following' : 'Follow'}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}