<script lang="ts" setup>
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import type { UserBankDetail, UserDetail } from '../types/user.types'

defineProps<{
  user: UserDetail
  embedded?: boolean
}>()

const ACCOUNT_TYPE_LABEL: Record<string, string> = {
  Saving: 'Simpanan',
  Current: 'Semasa',
}

function bankLabel(bankDetail: UserBankDetail): string {
  if (bankDetail.bank) {
    return `${bankDetail.bank.name} (${bankDetail.bank.code})`
  }
  return bankDetail.bank_id
}
</script>

<template>
  <div :class="embedded ? '' : 'mt-5'">
    <Box raised="single" class="p-6">
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-slate-900">Akaun Bank</h3>
        <p class="mt-1 text-sm text-slate-500">Senarai akaun bank pengguna.</p>
      </div>

      <div v-if="user.bank_details?.length" class="space-y-3">
        <div
          v-for="bankDetail in user.bank_details"
          :key="bankDetail.id"
          class="rounded-lg border border-foreground/10 p-4"
        >
          <div class="flex flex-wrap items-center gap-2">
            <span class="font-medium text-slate-900">{{ bankLabel(bankDetail) }}</span>
            <Badge look="outline">
              {{ ACCOUNT_TYPE_LABEL[bankDetail.account_type] ?? bankDetail.account_type }}
            </Badge>
          </div>
          <p class="mt-1 text-sm font-medium text-slate-700">{{ bankDetail.account_name }}</p>
          <p class="mt-1 text-sm text-slate-500">{{ bankDetail.account_number }}</p>
        </div>
      </div>

      <div
        v-else
        class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500"
      >
        Tiada akaun bank direkodkan.
      </div>
    </Box>
  </div>
</template>
