<script setup lang="ts">
import { computed } from 'vue';
import { useAdminLocale } from '../composables/useAdminLocale';
import { formatAmount, formatAmountFull, shouldCompactAmount } from '../utils/format-amount';
import {
  maxCreditIncreaseAmount,
  projectedCreditLimit,
  type AgentCreditAdjustContext,
} from '../utils/agent-credit-context';

const props = defineProps<{
  context: AgentCreditAdjustContext | null;
  loading?: boolean;
  adjustAmount?: number;
}>();

const { t } = useAdminLocale();

const maxIncrease = computed(() => maxCreditIncreaseAmount(props.context));
const afterLimit = computed(() => projectedCreditLimit(props.context, props.adjustAmount ?? 0));

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) : '';
}
</script>

<template>
  <div v-loading="loading" class="credit-context">
    <div v-if="context?.target" class="credit-context-section">
      <div class="credit-context-title">{{ t('credit.context.target_section') }}</div>
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item :label="t('user.col.username')">
          {{ context.target.username }}
          <span v-if="context.target.level != null" class="level-tag">L{{ context.target.level }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.available_credit')">
          <span class="c-green">{{ fmt(context.target.availableCredit) }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.credit_limit')">{{ fmt(context.target.creditLimit) }}</el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.used_credit')">{{ fmt(context.target.usedCredit) }}</el-descriptions-item>
        <el-descriptions-item
          v-if="context.target.directPlayerLiability != null"
          :label="t('credit.context.direct_liability')"
        >
          {{ fmt(context.target.directPlayerLiability) }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="context.target.childAgentExposure != null"
          :label="t('credit.context.child_exposure')"
        >
          {{ fmt(context.target.childAgentExposure) }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div v-if="context?.parent" class="credit-context-section">
      <div class="credit-context-title">
        {{ t('credit.context.parent_section', { name: context.parent.username }) }}
      </div>
      <el-descriptions :column="2" size="small" border>
        <el-descriptions-item :label="t('agent.field.credit_limit')">{{ fmt(context.parent.creditLimit) }}</el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.used_credit')">{{ fmt(context.parent.usedCredit) }}</el-descriptions-item>
        <el-descriptions-item :label="t('agent.field.available_credit')" :span="2">
          <span class="c-green">{{ fmt(context.parent.availableCredit) }}</span>
          <span v-if="fmtFull(context.parent.availableCredit)" class="amount-full-hint">
            （{{ fmtFull(context.parent.availableCredit) }}）
          </span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('credit.context.max_increase')" :span="2">
          <span class="c-amber">{{ fmt(String(maxIncrease ?? 0)) }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-alert
      v-else-if="context?.target && !loading"
      type="info"
      :closable="false"
      show-icon
      class="credit-context-alert"
      :title="t('credit.context.no_parent')"
    />

    <div v-if="afterLimit != null && adjustAmount !== 0" class="credit-context-preview">
      {{ t('credit.context.after_adjust') }}：
      <span class="c-amber">{{ fmt(afterLimit) }}</span>
    </div>
  </div>
</template>

<style scoped>
.credit-context {
  margin-bottom: 16px;
  min-height: 48px;
}
.credit-context-section + .credit-context-section {
  margin-top: 12px;
}
.credit-context-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.credit-context-alert {
  margin-top: 0;
}
.credit-context-preview {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.level-tag {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.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;
}
</style>
