import AlbumPriceSetting, { AlbumPriceFormData } from '@/components/features/album-price-setting'
import { IconButton } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { cn } from '@/lib/utils'
import { ContentStatus, GenImageOutput } from '@/services/create'
import Image from 'next/image'
import React from 'react'

type SelectedImage = {
  url: string
  width: number
  height: number
  unlockPrice: number
}

const GenaralImageCardMultiple = ({
  image,
  checked,
  onClick,
  onImageView,
  lockPriceImages,
  setLockPriceImages,
}: {
  image: GenImageOutput
  checked: boolean
  onClick: (image: string) => void
  onImageView?: (imageUrl: string) => void
  lockPriceImages: Array<SelectedImage & { unlockPrice: number }>
  setLockPriceImages: (
    datas:
      | Array<SelectedImage & { unlockPrice: number }>
      | ((
          prev: Array<SelectedImage & { unlockPrice: number }>
        ) => Array<SelectedImage & { unlockPrice: number }>)
  ) => void
}) => {
  const { imageUrl, status } = image

  const currentImage = lockPriceImages.find((item) => item.url === imageUrl)
  const unlockPrice = currentImage?.unlockPrice || 0

  const handleSetAlbumImageUnlockMethod = async (data: AlbumPriceFormData) => {
    setLockPriceImages((p) => {
      if (p.some((item) => item.url === imageUrl)) {
        return p.map((item) => {
          if (item.url === imageUrl) {
            return { ...item, unlockPrice: Number(data.price) || 0 }
          }
          return item
        })
      }
      return [
        ...p,
        {
          url: imageUrl || '',
          width: image.width || 0,
          height: image.height || 0,
          unlockPrice: Number(data.price) || 0,
        },
      ]
    })
  }

  const renderUnlockText = () => {
    if (unlockPrice > 0) {
      return (
        <div className="flex items-center gap-1">
          <div className="txt-label-m">Unlock:</div>
          <div className="flex items-center gap-1">
            <Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
            <div className="txt-numMonotype-s text-txt-primary-normal">{unlockPrice}</div>
          </div>
        </div>
      )
    }
    return <div className="txt-label-m">Unlock: Free</div>
  }

  if (status === ContentStatus.Pending) {
    return (
      <div className="relative pb-[133%]">
        <div className="bg-surface-element-normal rounded-m border-surface-element-normal absolute inset-0 flex flex-col items-center justify-center border border-dashed p-2">
          <Image src="/icons/image-generate-loading.png" alt="image" width={96} height={96} />
          <p className="text-txt-primary-normal txt-label-s">Generating...</p>
        </div>
        <Image
          src="/icons/generate-logo.svg"
          alt="image"
          className="absolute bottom-8 left-1/2 -translate-x-1/2"
          width={104}
          height={32}
        />
      </div>
    )
  }

  return (
    <div className="rounded-m group relative cursor-pointer pb-[133%]">
      <div className={cn('bg-surface-element-normal rounded-m absolute inset-0')}>
        <Image
          src={imageUrl || ''}
          alt="image"
          width={720}
          height={1280}
          className="rounded-m block h-full w-full cursor-pointer object-cover object-top"
          onClick={() => onClick(imageUrl || '')}
        />
      </div>
      <div className="absolute top-2 right-2 z-[1]">
        <Checkbox
          shape="round"
          checked={checked}
          onClick={(e) => {
            e.stopPropagation()
            onClick(imageUrl || '')
          }}
        />
      </div>
      <IconButton
        iconfont="icon-icon-fullImage"
        variant="tertiaryDark"
        size="small"
        className="absolute right-2 bottom-2 z-[1] opacity-0 transition-opacity group-hover:opacity-100"
        onClick={() => onImageView && onImageView(imageUrl || '')}
      />
      <AlbumPriceSetting onConfirm={handleSetAlbumImageUnlockMethod}>
        <div className="bg-surface-element-dark-normal absolute bottom-2 left-2 z-[1] flex items-center gap-2 rounded-lg py-1 pr-1 pl-3">
          {renderUnlockText()}
          <IconButton variant="tertiaryDark" size="xs">
            <i className="iconfont icon-icon-setting" />
          </IconButton>
        </div>
      </AlbumPriceSetting>
    </div>
  )
}

export default GenaralImageCardMultiple
