'use client'

import { useState } from 'react'
import AvatarSetting from '@/app/(main)/profile/components/AvatarSetting'
import { Button } from '@/components/ui/button'

export default function TestAvatarSettingPage() {
  const [isAvatarSettingOpen, setIsAvatarSettingOpen] = useState(false)
  const [currentAvatar, setCurrentAvatar] = useState<string>('')

  const handleAvatarChange = (avatarUrl: string) => {
    setCurrentAvatar(avatarUrl)
    console.log('Avatar changed:', avatarUrl)
  }

  const handleAvatarDelete = () => {
    setCurrentAvatar('')
    console.log('Avatar deleted')
  }

  const openAvatarSetting = () => {
    setIsAvatarSettingOpen(true)
  }

  const closeAvatarSetting = () => {
    setIsAvatarSettingOpen(false)
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-[#211a2b]">
      {/* 当前头像显示 */}
      <div className="text-center">
        <h1 className="mb-4 text-2xl font-semibold text-white">avatar setup test</h1>
        <div className="mx-auto mb-4 flex h-32 w-32 items-center justify-center overflow-hidden rounded-full bg-[#352e3e]">
          {currentAvatar ? (
            <img src={currentAvatar} alt="Current Avatar" className="h-full w-full object-cover" />
          ) : (
            <i className="iconfont icon-user text-4xl text-white opacity-50" />
          )}
        </div>
        <p className="text-sm text-white opacity-70">
          {currentAvatar ? '已设置头像' : '未设置头像'}
        </p>
      </div>

      {/* 打开头像设置按钮 */}
      <Button
        onClick={openAvatarSetting}
        className="h-12 rounded-full bg-gradient-to-l from-[#f264a4] to-[#c241e6] px-8 py-3 text-base leading-6 font-medium text-white transition-opacity hover:opacity-90"
      >
        Open avatar settings
      </Button>

      {/* 头像设置模态框 */}
      <AvatarSetting
        isOpen={isAvatarSettingOpen}
        onClose={closeAvatarSetting}
        currentAvatar={currentAvatar}
      />
    </div>
  )
}
