import { Landmark, Minus, Plus } from 'lucide-react'
import { type ReactNode, useState } from 'react'
import { useTranslation } from 'react-i18next'
import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
import lengthGreenBtn from '@/assets/system/length-green-btn.webp'
import { SmartBackground } from '@/components/smart-background.tsx'
import { Input } from '@/components/ui/input.tsx'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select.tsx'
import { useWithdrawSubmit } from '@/hooks/use-withdraw-submit'
import { useWithdrawVm } from '@/hooks/use-withdraw-vm'
import { cn } from '@/lib/utils'
import { useModalStore } from '@/store'
import type { FinanceCurrencyConfig, FinanceWithdrawBank } from '@/type'

const PANEL_CLASS =
  'rounded-md border border-[rgba(110,229,243,0.24)] bg-[linear-gradient(180deg,rgba(7,30,43,0.9),rgba(3,15,26,0.94))] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(88,225,238,0.08)]'

function formatNumber(value: number) {
  return new Intl.NumberFormat('en-US').format(value)
}

function getPaymentGlyph(code: string, name: string) {
  if (code.toLowerCase().includes('alipay')) {
    return '支'
  }

  return name.trim().slice(0, 1).toUpperCase() || code.slice(0, 1).toUpperCase()
}

function BankOptionLogo({ bank }: { bank: FinanceWithdrawBank }) {
  if (bank.logo.trim()) {
    return (
      <img
        src={bank.logo}
        alt={bank.label}
        className="h-design-18 w-design-18 shrink-0 rounded-[calc(var(--design-unit)*3)] object-contain"
      />
    )
  }

  return (
    <Landmark className="h-design-15 w-design-15 shrink-0 text-[#8DE4EA]" />
  )
}

function WithdrawField({
  label,
  children,
}: {
  label: string
  children: ReactNode
}) {
  return (
    <div className="flex flex-col gap-design-3">
      <div className="text-design-10 font-medium uppercase leading-none text-[#6FD4DA]">
        {label}
      </div>
      <div className="min-w-0">{children}</div>
    </div>
  )
}

function AmountShell({
  amount,
  availableBalanceText,
  onAmountChange,
  onMinus,
  onPlus,
}: {
  amount: number
  availableBalanceText: string
  onAmountChange: (value: number) => void
  onMinus: () => void
  onPlus: () => void
}) {
  function handleInputChange(value: string) {
    const nextValue = Number(value.replace(/[^\d]/g, ''))

    onAmountChange(Number.isFinite(nextValue) ? nextValue : 0)
  }

  return (
    <div className="flex flex-col gap-design-2">
      <div className="flex h-design-34 items-center gap-design-6 rounded-[calc(var(--design-unit)*5)] border border-[rgba(103,227,239,0.32)] bg-[linear-gradient(180deg,rgba(14,64,74,0.82),rgba(8,36,47,0.78))] px-design-6 shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(93,239,255,0.08)]">
        <button
          type="button"
          onClick={onMinus}
          className="flex h-design-24 w-design-24 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*4)] border border-[rgba(109,232,244,0.44)] bg-[rgba(37,115,123,0.32)] text-[#E1FEFF] transition hover:border-[rgba(170,247,255,0.82)] hover:bg-[rgba(66,146,151,0.35)]"
        >
          <Minus className="h-design-12 w-design-12" />
        </button>

        <input
          value={amount === 0 ? '' : String(amount)}
          onChange={(event) => handleInputChange(event.target.value)}
          inputMode="numeric"
          pattern="[0-9]*"
          className="h-full min-w-0 flex-1 bg-transparent text-center text-design-16 font-medium text-[#A1EBF3] outline-none placeholder:text-[rgba(109,170,176,0.55)]"
          placeholder="0"
        />

        <button
          type="button"
          onClick={onPlus}
          className="flex h-design-24 w-design-24 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*4)] border border-[rgba(109,232,244,0.44)] bg-[rgba(37,115,123,0.32)] text-[#E1FEFF] transition hover:border-[rgba(170,247,255,0.82)] hover:bg-[rgba(66,146,151,0.35)]"
        >
          <Plus className="h-design-12 w-design-12" />
        </button>
      </div>

      <div className="pl-design-2 text-design-10 text-[#6DAAB0]">
        {availableBalanceText}
      </div>
    </div>
  )
}

function QuickAmountCard({
  amount,
  preview,
  active,
  onClick,
}: {
  amount: number
  preview: string
  active: boolean
  onClick: () => void
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'group relative flex h-design-42 min-w-0 w-full cursor-pointer flex-col items-start justify-center overflow-hidden rounded-[calc(var(--design-unit)*6)] border px-design-6 text-left transition-[border-color,background-color,box-shadow,filter] duration-150',
        active
          ? 'border-[#D18A43] bg-[linear-gradient(180deg,rgba(88,54,28,0.96),rgba(56,33,18,0.92))] shadow-[0_0_calc(var(--design-unit)*10)_rgba(209,138,67,0.2),inset_0_0_calc(var(--design-unit)*10)_rgba(255,217,120,0.08)]'
          : 'border-[rgba(103,227,239,0.26)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] hover:border-[rgba(170,247,255,0.62)] hover:brightness-110',
      )}
    >
      <span
        className={cn(
          'absolute right-design-6 top-design-6 h-design-5 w-design-5 rounded-full transition',
          active
            ? 'bg-[#FFD15E] shadow-[0_0_8px_rgba(255,209,94,0.8)]'
            : 'bg-[rgba(122,220,230,0.26)]',
        )}
      />
      <div className="max-w-full truncate text-design-13 font-semibold leading-none text-[#FFE229]">
        {amount}
      </div>
      <div
        className={cn(
          'max-w-full truncate pt-design-3 text-design-10 leading-none',
          active ? 'text-[#FFDFA4]' : 'text-[#63AEB6]',
        )}
      >
        {preview}
      </div>
    </button>
  )
}

function PaymentCard({
  active,
  label,
  glyph,
  onClick,
}: {
  active: boolean
  label: string
  glyph: string
  onClick: () => void
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'group relative flex h-design-42 min-w-0 cursor-pointer items-center gap-design-6 rounded-[calc(var(--design-unit)*6)] border px-design-6 text-left transition-[border-color,background-color,box-shadow,filter] duration-150',
        active
          ? 'border-[#D18A43] bg-[linear-gradient(180deg,rgba(88,54,28,0.96),rgba(56,33,18,0.92))] shadow-[0_0_calc(var(--design-unit)*10)_rgba(209,138,67,0.18),inset_0_0_calc(var(--design-unit)*10)_rgba(255,217,120,0.08)]'
          : 'border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] hover:border-[rgba(170,247,255,0.62)] hover:brightness-110',
      )}
    >
      <span
        className={cn(
          'absolute right-design-6 top-design-6 h-design-5 w-design-5 rounded-full transition',
          active
            ? 'bg-[#FFD15E] shadow-[0_0_8px_rgba(255,209,94,0.8)]'
            : 'bg-[rgba(122,220,230,0.26)]',
        )}
      />
      <div
        className={cn(
          'flex h-design-26 w-design-26 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*5)] border text-design-12 font-semibold leading-none transition-colors',
          active
            ? 'border-[rgba(255,218,132,0.45)] bg-[rgba(255,211,113,0.16)] text-[#FFD97A]'
            : 'border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] text-[#8DE4EA]',
        )}
      >
        {glyph}
      </div>
      <div className="min-w-0 flex-1 pr-design-7">
        <div
          className={cn(
            'truncate !text-design-12 font-medium leading-none',
            active ? 'text-[#FFF1C9]' : 'text-[#D7FBFF]',
          )}
        >
          {label}
        </div>
        <div
          className={cn(
            'pt-design-2 !text-design-10 uppercase leading-none tracking-[0.03em]',
            active ? 'text-[#FFDFA4]' : 'text-[#63AEB6]',
          )}
        >
          Channel
        </div>
      </div>
    </button>
  )
}

function InputShell({
  value,
  onChange,
  placeholder,
  error,
  errorMessage,
  uppercase = false,
  type = 'text',
}: {
  value: string
  onChange: (value: string) => void
  placeholder: string
  error?: boolean
  errorMessage?: string
  uppercase?: boolean
  type?: 'text' | 'email' | 'tel'
}) {
  return (
    <div className="flex w-full flex-col gap-design-3">
      <Input
        type={type}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className={cn(
          'h-design-30 rounded-[calc(var(--design-unit)*5)] border px-design-8 !text-design-10 placeholder:!text-design-10',
          uppercase && 'uppercase',
          error
            ? 'border-[#B93F44] bg-[rgba(34,13,16,0.78)] text-[#FCEEEE]'
            : 'border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(10,47,57,0.84),rgba(5,23,32,0.92))] text-[#ACF1F6]',
        )}
      />
      {error && errorMessage ? (
        <div className="pl-design-2 text-design-10 text-[#F44F4F]">
          {errorMessage}
        </div>
      ) : null}
    </div>
  )
}

function PreviewRow({
  label,
  value,
  highlight = false,
}: {
  label: string
  value: ReactNode
  highlight?: boolean
}) {
  return (
    <div className="flex border-b border-[rgba(89,209,223,0.2)] last:border-b-0">
      <div className="flex w-[46%] shrink-0 items-center border-r border-[rgba(89,209,223,0.2)] px-design-6 py-design-7 text-design-10 font-medium uppercase leading-[1.15] text-[#7CE3E8]">
        {label}
      </div>
      <div
        className={cn(
          'flex min-w-0 flex-1 items-center justify-end px-design-6 py-design-7 text-right text-design-10 text-[#E6FFFF]',
          highlight && 'text-design-11 font-semibold text-[#6DFF83]',
        )}
      >
        {value}
      </div>
    </div>
  )
}

function MobileWithdraw() {
  const { t } = useTranslation()
  const vm = useWithdrawVm()
  const withdrawSubmitMutation = useWithdrawSubmit()
  const setModalOpen = useModalStore((state) => state.setModalOpen)
  const [hasSubmitted, setHasSubmitted] = useState(false)
  const [activeQuickAmountId, setActiveQuickAmountId] = useState<string | null>(
    null,
  )

  function handleAmountChange(nextAmount: number) {
    vm.setAmount(Math.max(0, nextAmount))
    setActiveQuickAmountId(null)
  }

  function handleQuickAmountSelect(optionId: string, amount: number) {
    vm.setAmount(Math.max(0, amount))
    setActiveQuickAmountId(optionId)
  }

  function resetWithdrawFormState() {
    setHasSubmitted(false)
    setActiveQuickAmountId(null)
    vm.resetForm()
  }

  function handleCloseWithdraw() {
    resetWithdrawFormState()
    setModalOpen('desktopWithdrawTopup', false)
  }

  function handleConfirmWithdraw() {
    if (withdrawSubmitMutation.isPending) {
      return
    }

    setHasSubmitted(true)

    if (
      vm.amountRequiredError ||
      vm.amountExceedsBalance ||
      vm.amountBelowPaymentMinimum ||
      vm.amountAbovePaymentMaximum ||
      vm.holderNameError ||
      vm.bankAccountError ||
      vm.paymentChannelCodeError ||
      vm.paymentTypeError ||
      vm.bankCodeError ||
      vm.receiverEmailError ||
      vm.receiverPhoneError
    ) {
      return
    }

    withdrawSubmitMutation.mutate(
      {
        bank_code: vm.bankCode,
        channel_code: vm.paymentChannelCode,
        idempotency_key: String(Date.now()),
        payment_type: vm.paymentType,
        receive_account: vm.bankAccount.trim(),
        receiver_email: vm.receiverEmail.trim(),
        receiver_mobile: vm.receiverPhone.trim(),
        receiver_name: vm.holderName.trim(),
        receive_type: 'bank',
        withdraw_coin: vm.amount,
      },
      {
        onSuccess: () => {
          handleCloseWithdraw()
        },
      },
    )
  }

  return (
    <div className="flex h-full min-h-0 w-full px-design-6 pb-design-6 text-[#D9FFFF]">
      <div
        className={cn(
          PANEL_CLASS,
          'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden',
        )}
      >
        <div className="min-h-0 flex-1 overflow-y-auto px-design-8 py-design-7">
          <div className="flex flex-col !gap-design-10">
            <WithdrawField
              label={t('gameDesktop.withdraw.fields.diamondAmount')}
            >
              <AmountShell
                amount={vm.amount}
                availableBalanceText={t(
                  'gameDesktop.withdraw.availableBalance',
                  { amount: formatNumber(vm.availableBalance) },
                )}
                onAmountChange={handleAmountChange}
                onMinus={() => handleAmountChange(vm.amount - 1)}
                onPlus={() => handleAmountChange(vm.amount + 1)}
              />
              {hasSubmitted && vm.amountRequiredError ? (
                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                  {t('gameDesktop.withdraw.errors.amountRequired')}
                </div>
              ) : null}
              {hasSubmitted && vm.amountExceedsBalance ? (
                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                  {t('gameDesktop.withdraw.errors.amountExceedsBalance')}
                </div>
              ) : null}
              {hasSubmitted && vm.amountBelowPaymentMinimum ? (
                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                  {t('gameDesktop.withdraw.errors.amountBelowPaymentMinimum', {
                    amount: vm.paymentMinimumAmountLabel,
                  })}
                </div>
              ) : null}
              {hasSubmitted && vm.amountAbovePaymentMaximum ? (
                <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                  {t('gameDesktop.withdraw.errors.amountAbovePaymentMaximum', {
                    amount: vm.paymentMaximumAmountLabel,
                  })}
                </div>
              ) : null}
            </WithdrawField>

            <div className="grid min-w-0 grid-cols-3 gap-design-5">
              {vm.quickAmounts.map((option) => (
                <QuickAmountCard
                  key={option.id}
                  amount={option.diamonds}
                  preview={option.preview}
                  active={option.id === activeQuickAmountId}
                  onClick={() =>
                    handleQuickAmountSelect(option.id, option.diamonds)
                  }
                />
              ))}
            </div>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.paymentChannel')}
            >
              <div className="flex w-full flex-col gap-design-3">
                {vm.sortedPayChannels.length > 0 ? (
                  <div className="grid grid-cols-2 gap-design-5">
                    {vm.sortedPayChannels.map((channel) => (
                      <PaymentCard
                        key={channel.code}
                        active={channel.code === vm.paymentChannelCode}
                        label={channel.name}
                        glyph={getPaymentGlyph(channel.code, channel.name)}
                        onClick={() => vm.setPaymentChannelCode(channel.code)}
                      />
                    ))}
                  </div>
                ) : (
                  <div className="flex min-h-design-38 items-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.45)] bg-[rgba(34,13,16,0.6)] px-design-8 text-design-10 text-[#F4B1B1]">
                    {t('gameDesktop.withdraw.errors.paymentChannelUnavailable')}
                  </div>
                )}
                {hasSubmitted && vm.paymentChannelCodeError ? (
                  <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                    {t('gameDesktop.withdraw.errors.paymentChannelRequired')}
                  </div>
                ) : null}
              </div>
            </WithdrawField>

            <WithdrawField label={t('gameDesktop.withdraw.fields.paymentType')}>
              <div className="flex w-full flex-col gap-design-3">
                <Select
                  value={vm.paymentType || undefined}
                  onValueChange={vm.setPaymentType}
                  disabled={vm.availablePaymentMethods.length === 0}
                >
                  <SelectTrigger
                    className={cn(
                      'h-design-30 w-full rounded-[calc(var(--design-unit)*5)] bg-[linear-gradient(180deg,rgba(12,61,72,0.82),rgba(6,28,39,0.9))] px-design-8 text-left !text-design-12 text-[#A5EDF4] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(94,237,255,0.08)] data-[size=default]:h-design-30 data-[placeholder]:text-[rgba(109,170,176,0.55)] [&_svg]:h-design-14 [&_svg]:w-design-14 [&_svg]:text-[#79DFEA]',
                      hasSubmitted && vm.paymentTypeError
                        ? 'border-[#B93F44]'
                        : 'border-[rgba(103,227,239,0.3)]',
                    )}
                    aria-label={t('gameDesktop.withdraw.fields.paymentType')}
                  >
                    <SelectValue
                      placeholder={t(
                        'gameDesktop.withdraw.placeholders.paymentType',
                      )}
                    />
                  </SelectTrigger>
                  <SelectContent>
                    {vm.availablePaymentMethods.map((method) => (
                      <SelectItem key={method.code} value={method.code}>
                        {method.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {hasSubmitted && vm.paymentTypeError ? (
                  <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                    {t('gameDesktop.withdraw.errors.paymentTypeRequired')}
                  </div>
                ) : null}
              </div>
            </WithdrawField>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.currencyType')}
            >
              <Select
                value={vm.currencyCode || undefined}
                onValueChange={vm.setCurrencyCode}
                disabled={vm.availableCurrencies.length === 0}
              >
                <SelectTrigger
                  className="h-design-30 w-full rounded-[calc(var(--design-unit)*5)] border-[rgba(103,227,239,0.3)] bg-[linear-gradient(180deg,rgba(12,61,72,0.82),rgba(6,28,39,0.9))] px-design-8 text-left !text-design-12 text-[#A5EDF4] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(94,237,255,0.08)] data-[size=default]:h-design-30 data-[placeholder]:text-[rgba(109,170,176,0.55)] [&_svg]:h-design-14 [&_svg]:w-design-14 [&_svg]:text-[#79DFEA]"
                  aria-label={t('gameDesktop.withdraw.currencySelection')}
                >
                  <SelectValue
                    placeholder={t('gameDesktop.withdraw.selectCurrency')}
                  />
                </SelectTrigger>
                <SelectContent>
                  {vm.availableCurrencies.map(
                    (option: FinanceCurrencyConfig) => (
                      <SelectItem key={option.code} value={option.code}>
                        {option.label}
                      </SelectItem>
                    ),
                  )}
                </SelectContent>
              </Select>
            </WithdrawField>

            <WithdrawField label={t('gameDesktop.withdraw.fields.bankCode')}>
              <div className="flex w-full flex-col gap-design-3">
                <Select
                  value={vm.bankCode}
                  onValueChange={vm.setBankCode}
                  disabled={vm.sortedBanks.length === 0}
                >
                  <SelectTrigger
                    className={cn(
                      'h-design-30 w-full rounded-[calc(var(--design-unit)*5)] bg-[linear-gradient(180deg,rgba(12,61,72,0.82),rgba(6,28,39,0.9))] px-design-8 text-left !text-design-12 text-[#A5EDF4] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(94,237,255,0.08)] data-[size=default]:h-design-30 data-[placeholder]:text-[rgba(109,170,176,0.55)] [&_svg]:h-design-14 [&_svg]:w-design-14 [&_svg]:text-[#79DFEA]',
                      hasSubmitted && vm.bankCodeError
                        ? 'border-[#B93F44]'
                        : 'border-[rgba(103,227,239,0.3)]',
                    )}
                    aria-label={t('gameDesktop.withdraw.fields.bankCode')}
                  >
                    <SelectValue
                      placeholder={t(
                        'gameDesktop.withdraw.placeholders.bankCode',
                      )}
                    />
                  </SelectTrigger>
                  <SelectContent>
                    {vm.sortedBanks.map((bank) => (
                      <SelectItem key={bank.code} value={bank.code}>
                        <span className="flex min-w-0 items-center gap-design-4">
                          <BankOptionLogo bank={bank} />
                          <span className="min-w-0 truncate">{bank.label}</span>
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {vm.sortedBanks.length === 0 ? (
                  <div className="pl-design-2 text-design-10 text-[#F4B1B1]">
                    {t('gameDesktop.withdraw.errors.bankCodeUnavailable')}
                  </div>
                ) : null}
                {hasSubmitted && vm.bankCodeError ? (
                  <div className="pl-design-2 text-design-10 text-[#F44F4F]">
                    {t('gameDesktop.withdraw.errors.bankCodeRequired')}
                  </div>
                ) : null}
              </div>
            </WithdrawField>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.cardHolderName')}
            >
              <InputShell
                value={vm.holderName}
                onChange={vm.setHolderName}
                placeholder={t(
                  'gameDesktop.withdraw.placeholders.cardHolderName',
                )}
                error={hasSubmitted && vm.holderNameError}
                errorMessage={t(
                  'gameDesktop.withdraw.errors.cardHolderNameRequired',
                )}
              />
            </WithdrawField>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.bankAccountNumber')}
            >
              <InputShell
                value={vm.bankAccount}
                onChange={vm.setBankAccount}
                placeholder={t(
                  'gameDesktop.withdraw.placeholders.bankAccountNumber',
                )}
                error={hasSubmitted && vm.bankAccountError}
                errorMessage={t(
                  'gameDesktop.withdraw.errors.bankAccountRequired',
                )}
              />
            </WithdrawField>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.receiverEmail')}
            >
              <InputShell
                value={vm.receiverEmail}
                onChange={vm.setReceiverEmail}
                placeholder={t(
                  'gameDesktop.withdraw.placeholders.receiverEmail',
                )}
                type="email"
                error={hasSubmitted && vm.receiverEmailError}
                errorMessage={t(
                  'gameDesktop.withdraw.errors.receiverEmailInvalid',
                )}
              />
            </WithdrawField>

            <WithdrawField
              label={t('gameDesktop.withdraw.fields.receiverPhone')}
            >
              <InputShell
                value={vm.receiverPhone}
                onChange={vm.setReceiverPhone}
                placeholder={t(
                  'gameDesktop.withdraw.placeholders.receiverPhone',
                )}
                type="tel"
                error={hasSubmitted && vm.receiverPhoneError}
                errorMessage={t(
                  'gameDesktop.withdraw.errors.receiverPhoneInvalid',
                )}
              />
            </WithdrawField>

            <div className="overflow-hidden rounded-[calc(var(--design-unit)*4)] border border-[rgba(89,209,223,0.22)] bg-[rgba(4,19,28,0.58)]">
              <PreviewRow
                label={t('gameDesktop.withdraw.preview.diamondAmount')}
                value={formatNumber(vm.amount)}
              />
              <PreviewRow
                label={vm.selectedCurrencyPreview.exchangeRateLabel}
                value={vm.selectedCurrencyPreview.exchangeRateValue}
              />
              <PreviewRow
                label={vm.selectedCurrencyPreview.convertibleLabel}
                value={vm.selectedCurrencyPreview.convertibleValue}
                highlight={true}
              />
              <PreviewRow
                label={t(
                  'gameDesktop.withdraw.preview.fixedExchangeDiamondAmount',
                )}
                value="0-0-0 0:0:0"
              />
            </div>

            <div className="rounded-[calc(var(--design-unit)*4)] border border-[rgba(240,175,66,0.2)] bg-[rgba(110,77,26,0.24)] px-design-8 py-design-6 text-design-10 leading-[1.3] text-[#F0B44A]">
              {vm.withdrawCopy.rateHint}
            </div>

            <div className="flex flex-col gap-design-3 px-design-1 text-design-10 uppercase leading-[1.3] text-[#7AD8E0]">
              <div>
                {vm.withdrawCopy.processingLabel}:{' '}
                <span className="text-[#77FF76]">
                  {vm.withdrawCopy.processingValue}
                </span>
              </div>
              <div>
                {vm.withdrawCopy.noticeLabel}:{' '}
                <span className="text-red-700">{vm.withdrawCopy.feeNote}</span>
              </div>
            </div>
          </div>
        </div>

        <div className="flex shrink-0 items-center justify-between gap-design-6 border-t border-[rgba(89,209,223,0.22)] bg-[rgba(3,15,24,0.86)] px-design-8 py-design-5">
          <SmartBackground
            as="button"
            type="button"
            src={lengthGreenBtn}
            size="100% 100%"
            onClick={handleCloseWithdraw}
            className="flex h-design-38 flex-1 cursor-pointer items-center justify-center pb-design-2 text-center !text-design-12 font-bold uppercase text-[#F0FFFF] transition hover:brightness-110 active:scale-[0.98]"
          >
            {t('gameDesktop.withdraw.cancel')}
          </SmartBackground>
          <SmartBackground
            as="button"
            type="button"
            src={lengthBlueBtn}
            size="100% 100%"
            onClick={handleConfirmWithdraw}
            disabled={withdrawSubmitMutation.isPending}
            className={cn(
              'flex h-design-38 flex-1 items-center justify-center whitespace-nowrap pb-design-2 text-center !text-design-12 font-bold uppercase leading-[1.05] text-[#F0FFFF] transition',
              withdrawSubmitMutation.isPending
                ? 'cursor-not-allowed opacity-70'
                : 'cursor-pointer hover:brightness-110 active:scale-[0.98]',
            )}
          >
            {withdrawSubmitMutation.isPending
              ? t('commonUi.action.submitting')
              : `${t('gameDesktop.withdraw.confirm')}`}
          </SmartBackground>
        </div>
      </div>
    </div>
  )
}

export default MobileWithdraw