'use client'

import { useGetSevenDaysSignList, useSignIn } from '@/hooks/useHome'
import { SignInListOutput } from '@/services/home/types'
import { useQueryClient } from '@tanstack/react-query'
import { homeKeys } from '@/lib/query-keys'
import { CheckInCard } from './CheckInCard'
import { useEffect, useRef } from 'react'
import { toast } from 'sonner'

export function CheckInGrid() {
  const queryClient = useQueryClient()
  const { data: signListData, isLoading } = useGetSevenDaysSignList()
  const signInMutation = useSignIn()
  const hasSignRef = useRef(false)

  useEffect(() => {
    const initializeCheckIn = async () => {
      if (hasSignRef.current) return
      hasSignRef.current = true
      try {
        // 先进行签到
        const resp = await signInMutation.mutateAsync()
        if (resp) {
          toast.success('Check-in Successful！')
        }
        // 签到成功后再获取列表数据
        await queryClient.invalidateQueries({
          queryKey: homeKeys.getSevenDaysSignList(),
        })
        await queryClient.invalidateQueries({
          queryKey: ['wallet'],
        })
      } catch (error) {
        console.error('初始化签到失败:', error)
        // 即使签到失败，也要获取列表数据显示界面
        queryClient.invalidateQueries({
          queryKey: homeKeys.getSevenDaysSignList(),
        })
        queryClient.invalidateQueries({
          queryKey: ['wallet'],
        })
      }
    }

    if (signListData) {
      initializeCheckIn()
    }
  }, [signListData])

  if (isLoading) {
    return (
      <div className="grid h-[328px] grid-cols-3 grid-rows-2 gap-4">
        {Array.from({ length: 6 }).map((_, index) => (
          <div
            key={index}
            className="animate-pulse rounded-[16px] border border-[rgba(251,222,255,0.2)] bg-[#282233]"
          />
        ))}
      </div>
    )
  }

  const signList = signListData?.list || []
  const today = new Date()
  const todayStr = today.toISOString().split('T')[0] // yyyy-MM-dd 格式

  // 确保有7天的数据，如果不足则补充默认数据
  const fullSignList: (SignInListOutput & { day: number })[] = Array.from(
    { length: 7 },
    (_, index) => {
      const day = index + 1
      const existingData = signList.find((item, itemIndex) => itemIndex === index)

      return {
        day,
        coinNum: existingData?.coinNum || [5, 10, 15, 20, 30, 50, 80][index],
        dayStr: existingData?.dayStr || '',
        signIn: existingData?.signIn || false,
      }
    }
  )

  // 找到今天应该签到的是第几天
  const todayIndex = fullSignList.findIndex((item) => {
    if (!item.dayStr) return false
    return item.dayStr === todayStr
  })

  // 如果没有找到今天的数据，假设是按顺序签到，找到第一个未签到的
  const currentDayIndex =
    todayIndex >= 0 ? todayIndex : fullSignList.findIndex((item) => !item.signIn)

  return (
    <div className="grid grid-cols-4 grid-rows-2 gap-4">
      {fullSignList.map((item, index) => {
        if (index === 3) {
          return (
            <CheckInCard
              key={fullSignList[6].day}
              day={fullSignList[6].day}
              coinNum={fullSignList[6].coinNum || 0}
              signIn={fullSignList[6].signIn || false}
              isToday={fullSignList[6].dayStr === todayStr}
              loading={signInMutation.isPending}
              className="col-span-1 row-span-2"
            />
          )
        }
        if (index < 3) {
          return (
            <CheckInCard
              key={item.day}
              day={item.day}
              coinNum={item.coinNum || 0}
              signIn={item.signIn || false}
              isToday={index === currentDayIndex}
              loading={signInMutation.isPending}
              className="col-span-1 row-span-1"
            />
          )
        } else {
          return (
            <CheckInCard
              key={fullSignList[index - 1].day}
              day={fullSignList[index - 1].day}
              coinNum={fullSignList[index - 1].coinNum || 0}
              signIn={fullSignList[index - 1].signIn || false}
              isToday={fullSignList[index - 1].dayStr === todayStr}
              loading={signInMutation.isPending}
              className="col-span-1 row-span-1"
            />
          )
        }
      })}
    </div>
  )
}

export default CheckInGrid
