'use client'
import { Checkbox } from '@/components/ui/checkbox'
import { cn } from '@/lib/utils'
import Image from 'next/image'

interface CheckInCardProps {
  day: number
  coinNum: number
  signIn: boolean
  isToday: boolean
  loading?: boolean
  className?: string
}

export function CheckInCard({
  day,
  coinNum,
  signIn,
  isToday,
  loading,
  className,
}: CheckInCardProps) {
  const isChecked = signIn
  const canCheckIn = isToday && !signIn

  // 根据状态决定样式
  const getCardStyles = () => {
    if (isChecked) {
      // 已签到 - 灰色背景
      return 'bg-[#282233] border-outline-normal'
    } else {
      // 未来日期 - 渐变背景
      return 'bg-gradient-to-bl from-[#f157ff] to-[#3337ff] border-[#ffd7b8]'
    }
  }

  const getDayLabelStyles = () => {
    if (isChecked) {
      return 'bg-surface-nest-disabled'
    } else {
      return 'bg-gradient-to-b from-[#ff9156] to-[#bf00ff]'
    }
  }

  return (
    <div
      className={cn(
        `relative overflow-hidden rounded-lg border ${getCardStyles()} flex items-center justify-center transition-all duration-300`,
        className
      )}
    >
      {/* 背景装饰图案 */}
      <div className="absolute right-[-6px] bottom-0 flex h-[96px] w-[112px] items-center justify-center">
        <img src="/images/crushcoin/checked-diamond.svg" className="h-full w-full" />
      </div>

      {/* 天数标签 */}
      <div className={`absolute top-0 left-0 rounded-br-lg px-2 py-1 ${getDayLabelStyles()}`}>
        <div className="txt-label-s text-center">{`Day ${day}`}</div>
      </div>

      {/* 内容区域 */}
      <div className="relative box-border flex w-full flex-col items-center justify-center gap-2 px-6 py-[22px]">
        {/* 奖励显示 */}
        <div className="relative flex shrink-0 items-center justify-center gap-2">
          <div className="relative size-8 shrink-0">
            <Image
              src={isChecked ? '/icons/diamond_dark.svg' : '/icons/diamond.svg'}
              alt="Diamond"
              width={32}
              height={32}
              className="h-full w-full"
            />
          </div>
          <div className={cn('txt-numDisplay-m', isChecked && 'text-txt-primary-specialmap-disable')}>{coinNum / 100}</div>
          {/* 装饰星星 */}
          <div className="absolute top-[-4px] right-[-28px] h-7 w-6">
            <Image
              src="/images/crushcoin/icon-star.svg"
              className="h-full w-full"
              fill
              alt="Star"
            />
          </div>
        </div>

        {/* 状态显示 */}
        {isChecked ? (
          <div className="mt-2 flex items-center gap-2">
            <Checkbox checked disabled />
            <div className="txt-label-s text-txt-primary-specialmap-disable">Checked</div>
          </div>
        ) : (
          <div className="txt-label-s text-txt-primary-specialmap-disable mt-2 text-center">
            Not Started
          </div>
        )}
      </div>
    </div>
  )
}
