<script setup lang="ts">
import { computed } from 'vue';
import { useAdminLocale } from '../composables/useAdminLocale';
import { formatAmount, formatAmountFull, shouldCompactAmount } from '../utils/format-amount';
import { depositAmountCap, type WalletTransferContext } from '../utils/wallet-transfer-context';

const props = defineProps<{
  context: WalletTransferContext | null;
  mode: 'deposit' | 'withdraw';
  loading?: boolean;
}>();

const { t } = useAdminLocale();

const credit = computed(() => props.context?.credit ?? null);
const player = computed(() => props.context?.player ?? null);

const depositCapText = computed(() => {
  if (!props.context?.credit) return '—';
  const cap = depositAmountCap(props.context);
  if (cap === undefined) return t('transfer.context.unlimited');
  return formatAmount(String(cap));
});

function fmt(value: string | null | undefined) {
  if (value == null || value === '') return '—';
  return formatAmount(value);
}

function fmtFull(value: string | null | undefined) {
  if (value == null || value === '') return '';
  return shouldCompactAmount(value) ? formatAmountFull(value) : '';
}

function limitLabel(value: string | null) {
  return value ? fmt(value) : t('transfer.context.unlimited');
}
</script>

<template>
  <div v-loading="loading" class="transfer-context">
    <div v-if="player" class="transfer-context-section">
      <div class="transfer-context-title">{{ t('transfer.context.player_section') }}</div>
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item :label="t('user.col.username')">{{ player.username }}</el-descriptions-item>
        <el-descriptions-item :label="t('user.field.available')">
          <span class="c-green">{{ fmt(player.availableBalance) }}</span>
          <span v-if="fmtFull(player.availableBalance)" class="amount-full-hint">
            （{{ fmtFull(player.availableBalance) }}）
          </span>
        </el-descriptions-item>
        <el-descriptions-item v-if="mode === 'withdraw'" :label="t('transfer.context.withdrawable')" :span="2">
          {{ fmt(player.availableBalance) }}
        </el-descriptions-item>
        <el-descriptions-item v-if="Number(player.frozenBalance) > 0" :label="t('user.field.frozen_balance')">
          {{ fmt(player.frozenBalance) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div v-if="mode === 'deposit' && credit" class="transfer-context-section">
      <div class="transfer-context-title">
        {{ t('transfer.context.agent_section', { name: credit.agentUsername, level: credit.agentLevel }) }}
      </div>
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item :label="t('agent.field.credit_limit')">{{ fmt(credit.creditLimit) }}</el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.used_credit')">{{ fmt(credit.usedCredit) }}</el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.available_credit')">
          <span class="c-green">{{ fmt(credit.availableCredit) }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('transfer.context.deposit_cap')">
          <span class="c-amber">{{ depositCapText }}</span>
        </el-descriptions-item>
        <template v-if="credit.appliesDepositLimits">
          <el-descriptions-item :label="t('agent.field.max_single_deposit')">
            {{ limitLabel(credit.maxSingleDeposit) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('agent.field.max_daily_deposit')">
            {{ limitLabel(credit.maxDailyDeposit) }}
          </el-descriptions-item>
          <el-descriptions-item v-if="credit.dailyDepositUsed != null" :label="t('transfer.context.daily_used')" :span="2">
            {{ fmt(credit.dailyDepositUsed) }}
          </el-descriptions-item>
        </template>
        <el-descriptions-item v-else :span="2">
          <span class="field-hint">{{ t('transfer.context.admin_credit_only') }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-alert
      v-else-if="mode === 'deposit' && player && !credit && !loading"
      type="info"
      :closable="false"
      show-icon
      class="transfer-context-alert"
      :title="t('transfer.context.no_agent')"
    />
  </div>
</template>

<style scoped>
.transfer-context { margin-bottom: 16px; min-height: 48px; }
.transfer-context-section + .transfer-context-section { margin-top: 12px; }
.transfer-context-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.transfer-context-alert { margin-bottom: 0; }
.c-green { color: var(--success-text); font-weight: 600; }
.c-amber { color: var(--warning-text); font-weight: 600; }
.amount-full-hint { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.field-hint { font-size: 12px; color: var(--text-muted); }
</style>
