import { History } from 'lucide-react'
import { useCallback, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import historyBg from '@/assets/system/history-bg.png'
import { SmartBackground } from '@/components/smart-background.tsx'
import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
import { RewardSpriteImage } from '@/features/game/components/shared/reward-sprite-image'
import { useGameHistoryVm } from '@/hooks/use-game-history-vm.ts'

function HistoryRewardNumber({
  className,
  number,
}: {
  className?: string
  number: number
}) {
  const label = String(number).padStart(2, '0')

  if (!Number.isInteger(number) || number < 1 || number > 36) {
    return (
      <span
        className={`inline-flex h-design-38 min-w-design-38 shrink-0 items-center justify-center px-design-5 text-design-15 font-bold text-[#D5FBFF] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(75,233,255,0.12),0_0_calc(var(--design-unit)*10)_rgba(75,233,255,0.1)] align-middle ${className ?? ''}`}
      >
        {label}
      </span>
    )
  }

  return (
    <span
      className={`inline-flex h-design-38 w-design-38 shrink-0 items-center justify-center p-design-1 align-middle ${className ?? ''}`}
      title={label}
    >
      <RewardSpriteImage
        rewardId={number}
        alt={label}
        className="h-full w-full"
      />
    </span>
  )
}

function HistoryEmptyState({ label }: { label: string }) {
  return (
    <div className="flex min-h-full w-full flex-1 items-center justify-center px-design-10 py-design-10">
      <div className="flex w-fit max-w-full flex-col items-center rounded-[calc(var(--design-unit)*8)] border border-[rgba(94,212,230,0.14)] bg-[rgba(5,23,33,0.3)] px-design-14 py-design-12 text-center">
        <div className="mb-design-8 flex h-design-42 w-design-42 items-center justify-center rounded-full border border-[#56EFFF]/18 bg-[#061D29]/55 shadow-[0_0_calc(var(--design-unit)*10)_rgba(86,239,255,0.08)]">
          <History
            aria-hidden="true"
            className="h-design-20 w-design-20 text-[#A8EAF1]"
            strokeWidth={1.8}
          />
        </div>
        <div className="whitespace-nowrap text-design-16 font-semibold text-[#9CCFD4]">
          {label}
        </div>
      </div>
    </div>
  )
}

export function DesktopGameHistory() {
  const { t } = useTranslation()
  const {
    emptyText,
    endText,
    fetchNextPage,
    hasNextPage,
    isEmpty,
    isFetchingNextPage,
    isInitialLoading,
    items,
    loadingText,
  } = useGameHistoryVm()
  const parentRef = useRef<HTMLDivElement | null>(null)

  const handleScroll = useCallback(() => {
    const element = parentRef.current

    if (!element || !hasNextPage || isFetchingNextPage) {
      return
    }

    const distanceToBottom =
      element.scrollHeight - element.scrollTop - element.clientHeight

    if (distanceToBottom <= 120) {
      void fetchNextPage()
    }
  }, [fetchNextPage, hasNextPage, isFetchingNextPage])

  return (
    <SmartBackground
      src={historyBg}
      size="100% 100%"
      className="desktop-game-history-glow flex h-full min-h-0 w-full flex-col items-center overflow-hidden bg-center bg-no-repeat py-2"
    >
      <div
        className={
          'relative z-20 flex h-design-50 shrink-0 items-center justify-center text-design-28 font-bold text-[#D5FBFF]'
        }
      >
        {t('gameDesktop.history.title')}
      </div>
      <div
        ref={parentRef}
        onScroll={handleScroll}
        className={
          'history-scroll-hidden z-10 flex min-h-0 flex-1 w-full flex-col gap-design-6 overflow-y-auto overflow-x-hidden px-design-14 py-design-14'
        }
      >
        {isInitialLoading ? (
          <DataLoadingIndicator
            label={loadingText}
            className="min-h-full flex-1"
          />
        ) : isEmpty ? (
          <HistoryEmptyState label={emptyText} />
        ) : (
          <>
            {items.map((item) => {
              const isWin = item.resultState === 'win'
              const statusLabel =
                item.resultState === 'pending'
                  ? t('gameDesktop.history.pending')
                  : isWin
                    ? t('gameDesktop.history.win')
                    : t('gameDesktop.history.lost')
              const statusColor =
                item.resultState === 'pending'
                  ? '#D5FBFF'
                  : isWin
                    ? '#FFE375'
                    : '#8DFF98'
              const statusTextShadow =
                item.resultState === 'pending'
                  ? '0 0 calc(var(--design-unit)*10) rgba(213,251,255,0.85), 0 0 calc(var(--design-unit)*22) rgba(213,251,255,0.32)'
                  : isWin
                    ? '0 0 calc(var(--design-unit)*10) #FFE375, 0 0 calc(var(--design-unit)*22) rgba(255,227,117,0.48)'
                    : '0 0 calc(var(--design-unit)*10) #8DFF98, 0 0 calc(var(--design-unit)*22) rgba(141,255,152,0.48)'
              const statusBorderColor =
                item.resultState === 'pending'
                  ? 'rgba(143,241,255,0.34)'
                  : isWin
                    ? 'rgba(255,227,117,0.5)'
                    : 'rgba(141,255,152,0.36)'
              const statusBg =
                item.resultState === 'pending'
                  ? 'linear-gradient(180deg,rgba(28,106,126,0.38),rgba(5,25,36,0.9))'
                  : isWin
                    ? 'linear-gradient(180deg,rgba(127,92,14,0.5),rgba(29,22,8,0.92))'
                    : 'linear-gradient(180deg,rgba(31,111,54,0.38),rgba(6,28,20,0.92))'

              return (
                <div key={item.id} className="w-full pb-design-4 last:pb-0">
                  <div
                    className={
                      'relative isolate flex w-full flex-col overflow-hidden rounded-[calc(var(--design-unit)*8)] border bg-[linear-gradient(180deg,rgba(6,33,45,0.95),rgba(3,14,23,0.92))] text-[#FFE375] shadow-[0_0_calc(var(--design-unit)*10)_rgba(63,226,255,0.1),inset_0_1px_0_rgba(218,255,255,0.1)] transition-colors duration-200'
                    }
                    style={{
                      borderColor: statusBorderColor,
                    }}
                  >
                    <span
                      aria-hidden="true"
                      className="pointer-events-none absolute inset-x-design-8 top-0 h-px opacity-70"
                      style={{
                        background: `linear-gradient(90deg, transparent, ${statusColor}, transparent)`,
                      }}
                    />
                    <span
                      aria-hidden="true"
                      className="pointer-events-none absolute -right-design-24 -top-design-28 h-design-72 w-design-72 rounded-full blur-[24px]"
                      style={{
                        background: statusColor,
                        opacity: isWin ? 0.14 : 0.08,
                      }}
                    />
                    <div
                      className="relative z-10 grid min-h-design-32 w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-design-8 border-b px-design-9 py-design-4"
                      style={{
                        background: statusBg,
                        borderColor: statusBorderColor,
                      }}
                    >
                      <span className="min-w-0 truncate text-design-12 font-medium text-[#8DBCC2]">
                        {item.createdAtLabel}
                      </span>
                      <span
                        className="inline-flex min-w-design-72 items-center justify-center gap-design-5 text-design-15 font-bold"
                        style={{
                          borderColor: statusBorderColor,
                          color: statusColor,
                          textShadow: statusTextShadow,
                        }}
                      >
                        <span
                          aria-hidden="true"
                          className="h-design-6 w-design-6 rounded-full shadow-[0_0_calc(var(--design-unit)*8)_currentColor]"
                          style={{ backgroundColor: statusColor }}
                        />
                        {statusLabel}
                      </span>
                      <span className="min-w-0 truncate text-right text-design-12 font-medium text-[#C0E7EB]">
                        {t('gameDesktop.history.roundId')}: {item.periodNo}
                      </span>
                    </div>
                    <div
                      className={
                        'relative z-10 flex w-full flex-col gap-design-5 px-design-8 py-design-7 text-design-13'
                      }
                    >
                      <div className="flex min-h-design-34 items-start justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(94,212,230,0.12)] bg-[rgba(5,23,33,0.52)] px-design-7 py-design-4">
                        <span className={'shrink-0 pt-design-5 text-[#84A2A2]'}>
                          {t('gameDesktop.history.numbers')}
                        </span>
                        {item.numbers.length === 0 ? (
                          <span className="pt-design-5 text-right">
                            {item.numbersLabel}
                          </span>
                        ) : (
                          <span className="inline-flex min-w-0 flex-1 flex-wrap items-center justify-end gap-design-3 align-middle">
                            {item.numbers.map((number) => (
                              <HistoryRewardNumber
                                className="!h-design-28 !min-w-design-28 !w-design-28 !p-0"
                                key={`${item.id}-${number}`}
                                number={number}
                              />
                            ))}
                          </span>
                        )}
                      </div>
                      <div className="grid grid-cols-[1fr_1fr] gap-design-5">
                        <div className="flex min-h-design-28 items-center justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(255,227,117,0.14)] bg-[linear-gradient(90deg,rgba(5,23,33,0.54),rgba(84,57,8,0.14))] px-design-7 py-design-4">
                          <span className="shrink-0 text-[#84A2A2]">
                            {t('gameDesktop.history.payout')}
                          </span>
                          <span className="min-w-0 truncate text-right text-design-14 font-bold text-[#FFE375] [text-shadow:0_0_calc(var(--design-unit)*8)_rgba(255,227,117,0.2)]">
                            {item.winAmountLabel}
                          </span>
                        </div>
                        <div className="flex min-h-design-28 items-center justify-between gap-design-6 rounded-[calc(var(--design-unit)*6)] border border-[rgba(255,117,117,0.16)] bg-[linear-gradient(90deg,rgba(5,23,33,0.54),rgba(88,20,28,0.14))] px-design-7 py-design-4">
                          <span className={'shrink-0 text-[#84A2A2]'}>
                            {t('gameDesktop.history.winningResult')}
                          </span>
                          <span className="flex min-w-0 items-center justify-end">
                            {item.resultNumber === null ? (
                              <span
                                className={
                                  'text-right font-bold text-[#FF7575] [text-shadow:0_0_calc(var(--design-unit)*8)_rgba(255,117,117,0.24)]'
                                }
                              >
                                {item.resultNumberLabel}
                              </span>
                            ) : (
                              <HistoryRewardNumber
                                className="!h-design-28 !min-w-design-28 !w-design-28 !p-0 text-[#FF7575]"
                                number={item.resultNumber}
                              />
                            )}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
            <div className="flex min-h-[calc(var(--design-unit)*40)] items-center justify-center text-design-16 text-[#84A2A2]">
              {isFetchingNextPage ? (
                <DataLoadingIndicator compact label={loadingText} />
              ) : hasNextPage ? (
                ''
              ) : (
                endText
              )}
            </div>
          </>
        )}
      </div>
    </SmartBackground>
  )
}