import { IconButton } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import Image from 'next/image'
import { useRouter } from 'next/navigation'

const ImageSelector = ({
  value,
  onChange,
  onImageRouter,
}: {
  value: string
  onChange: (value: string | undefined) => void
  onImageRouter?: () => void
}) => {
  const router = useRouter()

  // 处理图片区域点击 - 跳转到图片生成页面
  const handleImageClick = () => {
    if (onImageRouter) {
      onImageRouter()
    } else {
      router.push('/generate/image')
    }
  }

  if (!value) {
    return (
      <div
        className={cn(
          'relative h-[180px] cursor-pointer overflow-hidden rounded-sm transition-all',
          'bg-surface-element-normal hover:bg-surface-element-hover',
          'flex flex-col items-center justify-center gap-3 p-2'
        )}
        onClick={handleImageClick}
      >
        <i className="iconfont icon-uploadimg text-txt-secondary-normal !text-[32px]" />
        <div className="text-txt-secondary-normal txt-body-m">Click to Generate Image</div>
      </div>
    )
  }

  return (
    <div className="relative h-[180px] w-[135px] overflow-hidden rounded-sm">
      <Image
        src={value}
        alt="Character image"
        width={135}
        height={180}
        className="h-full w-full object-cover object-top"
      />
      <div className="absolute top-2 right-2 z-[1] leading-none">
        <IconButton
          iconfont="icon-close"
          variant="tertiaryDark"
          size="mini"
          onClick={() => onChange('')}
        />
      </div>
    </div>
  )
}

export default ImageSelector
