<script setup>
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(["update:modelValue"])
const toast = useToast()

const accounts = ref([])
const ibanSearch = ref("")
const showCreate = ref(false)
const resolvingIban = ref(false)

const createPayload = ref({
  iban: "",
  bic: "",
  bankName: "",
  description: ""
})

const normalizeIban = (value) => String(value || "").replace(/\s+/g, "").toUpperCase()

const loadAccounts = async () => {
  accounts.value = await useEntities("entitybankaccounts").select()
}

const assignedIds = computed(() => {
  return Array.isArray(props.modelValue) ? props.modelValue : []
})

const assignedAccounts = computed(() => {
  return accounts.value.filter((a) => assignedIds.value.includes(a.id))
})

const updateAssigned = (ids) => {
  emit("update:modelValue", ids)
}

const assignByIban = async () => {
  const search = normalizeIban(ibanSearch.value)
  if (!search) return

  const match = accounts.value.find((a) => normalizeIban(a.iban) === search)
  if (!match) {
    toast.add({ title: "Kein Bankkonto mit dieser IBAN gefunden.", color: "error" })
    return
  }

  if (assignedIds.value.includes(match.id)) {
    toast.add({ title: "Dieses Bankkonto ist bereits zugewiesen.", color: "amber" })
    return
  }

  updateAssigned([...assignedIds.value, match.id])
  ibanSearch.value = ""
}

const removeAssigned = (id) => {
  updateAssigned(assignedIds.value.filter((i) => i !== id))
}

const createAndAssign = async () => {
  if (!createPayload.value.iban || !createPayload.value.bic || !createPayload.value.bankName) {
    toast.add({ title: "IBAN, BIC und Bankinstitut sind Pflichtfelder.", color: "error" })
    return
  }

  const created = await useEntities("entitybankaccounts").create(createPayload.value, true)
  await loadAccounts()
  updateAssigned([...assignedIds.value, created.id])
  createPayload.value = { iban: "", bic: "", bankName: "", description: "" }
  showCreate.value = false
}

const resolveCreatePayloadFromIban = async () => {
  const normalized = normalizeIban(createPayload.value.iban)
  if (!normalized) return

  resolvingIban.value = true
  try {
    const data = await useFunctions().useBankingResolveIban(normalized)
    if (!data) return

    createPayload.value.iban = data.iban || normalized
    if (data.bic) createPayload.value.bic = data.bic
    if (data.bankName) createPayload.value.bankName = data.bankName
  } catch (e) {
    // intentionally ignored: user can still enter fields manually
  } finally {
    resolvingIban.value = false
  }
}

loadAccounts()
</script>

<template>
  <div class="flex flex-col gap-2 w-full">
    <div class="flex flex-wrap gap-2" v-if="assignedAccounts.length > 0">
      <UBadge
          v-for="account in assignedAccounts"
          :key="account.id"
          color="primary"
          variant="subtle"
      >
        {{ account.displayLabel || account.iban }}
        <UButton
            v-if="!disabled"
            variant="ghost"
            color="gray"
            size="2xs"
            icon="i-heroicons-x-mark"
            class="ml-1"
            @click="removeAssigned(account.id)"
        />
      </UBadge>
    </div>

    <InputGroup class="w-full">
      <UInput
          v-model="ibanSearch"
          class="flex-auto"
          placeholder="IBAN eingeben und zuweisen"
          :disabled="disabled"
          @keydown.enter.prevent="assignByIban"
      />
      <UButton :disabled="disabled" @click="assignByIban">
        Zuweisen
      </UButton>
      <UButton :disabled="disabled" color="gray" variant="outline" @click="showCreate = true">
        Neu
      </UButton>
    </InputGroup>
  </div>

  <UModal v-model:open="showCreate">
    <template #content>
      <UCard>
        <template #header>Neue Bankverbindung erstellen</template>
        <div class="space-y-3">
          <UFormField label="IBAN">
            <InputGroup>
              <UInput
                  v-model="createPayload.iban"
                  @blur="resolveCreatePayloadFromIban"
                  @keydown.enter.prevent="resolveCreatePayloadFromIban"
              />
              <UButton
                  color="gray"
                  variant="outline"
                  :loading="resolvingIban"
                  @click="resolveCreatePayloadFromIban"
              >
                Ermitteln
              </UButton>
            </InputGroup>
          </UFormField>
          <UFormField label="BIC">
            <UInput v-model="createPayload.bic" />
          </UFormField>
          <UFormField label="Bankinstitut">
            <UInput v-model="createPayload.bankName" />
          </UFormField>
          <UFormField label="Beschreibung (optional)">
            <UInput v-model="createPayload.description" />
          </UFormField>
        </div>
        <template #footer>
          <div class="flex justify-end gap-2">
            <UButton color="gray" variant="outline" @click="showCreate = false">Abbrechen</UButton>
            <UButton @click="createAndAssign">Erstellen und zuweisen</UButton>
          </div>
        </template>
      </UCard>
    </template>
  </UModal>
</template>
