import { useCallback, useEffect, useState } from "react"
import { Users, User, Crown, RefreshCw } from "lucide-react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface Friend {
  uin: string
  userName: string
  headPic: string
  yellowLevel: number
  exp: number
  money: number
}

export function FriendList({ email, onVisit }: { email: string, onVisit: (uid: string, name: string) => void }) {
  const [friends, setFriends] = useState<Friend[]>([])
  const [isLoading, setIsLoading] = useState(false)

  const fetchFriends = useCallback(async () => {
    if (!email) return
    setIsLoading(true)
    try {
      const res = await fetch(`/api/friends?email=${email}`)
      const json = await res.json()
      if (json.friends) {
        setFriends(json.friends)
      }
    } catch (e) {
      console.error(e)
    } finally {
      setIsLoading(false)
    }
  }, [email])

  useEffect(() => {
    fetchFriends()
  }, [fetchFriends])

  return (
    <div className="bg-white/60 backdrop-blur-md rounded-[2.5rem] p-6 shadow-sm border border-white/50 h-[600px] flex flex-col">
      <div className="flex items-center justify-between mb-6 px-2">
        <h2 className="text-xl font-bold text-slate-700 flex items-center gap-2">
          <span className="p-2 bg-pink-100 text-pink-600 rounded-xl">
            <Users className="h-5 w-5" />
          </span>
          好友列表
          <span className="text-sm font-normal text-slate-400 ml-2 bg-white/50 px-2 py-0.5 rounded-full">
            {friends.length}
          </span>
        </h2>
        <button 
          onClick={fetchFriends}
          className="p-2 hover:bg-white/50 rounded-full transition-colors text-slate-400 hover:text-slate-600"
        >
          <RefreshCw className={cn("h-5 w-5", isLoading && "animate-spin")} />
        </button>
      </div>

      <ScrollArea className="flex-1 -mr-4 pr-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {friends.map((friend) => (
            <div 
              key={friend.uin}
              className="flex items-center gap-4 p-3 rounded-2xl bg-white/40 hover:bg-white/70 border border-transparent hover:border-pink-100 transition-all group cursor-pointer"
              onClick={() => onVisit(friend.uin, friend.userName)}
            >
              <div className="relative">
                <Avatar className="h-12 w-12 border-2 border-white shadow-sm ring-2 ring-transparent group-hover:ring-pink-200 transition-all">
                  <AvatarImage src={friend.headPic} />
                  <AvatarFallback className="bg-slate-100 text-slate-400">
                    <User className="h-6 w-6" />
                  </AvatarFallback>
                </Avatar>
                {friend.yellowLevel > 0 && (
                   <div className="absolute -top-1 -right-1 bg-yellow-400 text-white text-[10px] px-1 rounded-full flex items-center shadow-sm border border-white">
                     <Crown className="h-2 w-2 mr-0.5" /> Lv{friend.yellowLevel}
                   </div>
                )}
              </div>
              
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <span className="font-bold text-slate-700 truncate">{friend.userName}</span>
                </div>
                <div className="flex items-center gap-3 text-xs text-slate-500 mt-1">
                  <span className="bg-yellow-50 text-yellow-600 px-1.5 py-0.5 rounded">
                    💰 {friend.money.toLocaleString()}
                  </span>
                  <span className="bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded">
                    Exp {friend.exp}
                  </span>
                </div>
              </div>
            </div>
          ))}
          
          {friends.length === 0 && !isLoading && (
            <div className="col-span-full h-40 flex flex-col items-center justify-center text-slate-400 gap-2">
              <Users className="h-10 w-10 opacity-20" />
              <span className="text-sm">暂无好友数据</span>
            </div>
          )}
        </div>
      </ScrollArea>
    </div>
  )
}
