<script setup>
const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()
const url = useRequestURL()
const toast = useToast()

const showAddBankRequisition = ref(false)
const bicBankToAdd = ref("")
const bankData = ref({})
const showAlert = ref(false)
const reqData = ref({})

const bankaccounts = ref([])

const showReqData = ref(false)

const setupPage = async () => {
  if(route.query.ref) {
    reqData.value = await useFunctions().useBankingListRequisitions(route.query.ref)
    if(reqData.value.accounts.length > 0){
      showReqData.value = true
    }
  }

  bankaccounts.value = await useEntities("bankaccounts").select()
}

const checkBIC = async () => {
  bankData.value = await useFunctions().useBankingCheckInstitutions(bicBankToAdd.value)
  showAlert.value = true
}

const generateLink = async (bankId) => {
  try {

    const link = await useFunctions().useBankingGenerateLink(bankId || bankData.value.id)

    await navigateTo(link, {
      open: {
        target: "_blank"
      }
    })
  } catch (error) {
    console.log(error)
  }
}

const addAccount = async (account) => {
  let accountData = {
    accountId: account.id,
    ownerName: account.owner_name,
    iban: account.iban,
    tenant: profileStore.currentTenant,
    bankId: account.institution_id
  }

  try {
    // Nutzung von useEntities statt direktem DB-Call
    // true als 2. Parameter verhindert den Redirect, da wir im Modal sind
    const res = await useEntities("bankaccounts").create(accountData, true)

    if(res) {
      // useEntities feuert bereits einen Success-Toast ("X hinzugefügt")
      // Wir laden die Seite neu, um die Buttons im Modal zu aktualisieren (Hinzufügen -> Aktualisieren)
      await setupPage()
    }
  } catch (error) {
    console.error(error)
    toast.add({title: "Es gab einen Fehler beim Hinzufügen des Accounts", color:"rose"})
  }
}

const updateAccount = async (account) => {

  let bankaccountId = bankaccounts.value.find(i => i.iban === account.iban).id

  // Fehlerbehandlung analog zu addAccount verbessert
  try {
    const res = await useEntities("bankaccounts").update(bankaccountId, {accountId: account.id, expired: false}, true)

    // useEntities feuert bereits einen Success-Toast
    // reqData.value = null // Das würde das Modal leeren, ggf. gewünscht? Im Original war es drin.
    setupPage()
  } catch (error) {
    console.log(error)
    toast.add({title: "Es gab einen Fehler beim Aktualisieren des Accounts", color:"rose"})
  }
}

setupPage()
</script>

<template>
  <UDashboardNavbar title="Bankkonten">
    <template #right>
      <UButton
          @click="showAddBankRequisition = true"
      >
        + Bankverbindung
      </UButton>
      <USlideover
          v-model="showAddBankRequisition"
      >
        <UCard
            class="h-full"
        >
          <template #header>
            <p>Bankverbindung hinzufügen</p>
          </template>

          <UFormGroup
              label="BIC:"
              class="flex-auto"
          >
            <InputGroup class="w-full">
              <UInput
                  v-model="bicBankToAdd"
                  class="flex-auto"
                  @keydown.enter="checkBIC"
              />
              <UButton
                  @click="checkBIC"
              >
                Check
              </UButton>
            </InputGroup>

          </UFormGroup>
          <UAlert
              v-if="showAlert && bankData.id && bankData.countries.includes('DE')"
              title="Bank gefunden"
              icon="i-heroicons-check-circle"
              color="primary"
              variant="outline"
              class="mt-3"
              :actions="[{ variant: 'solid', color: 'primary', label: 'Verbinden',click: generateLink }]"
          />
          <UAlert
              v-else-if="showAlert && !bankData.id"
              title="Bank nicht gefunden"
              icon="i-heroicons-x-circle"
              color="rose"
              variant="outline"
              class="mt-3"
          />

        </UCard>
      </USlideover>
    </template>
  </UDashboardNavbar>

  <UModal v-model:open="showReqData">
    <UCard>
      <template #header>
        Verfügbare Bankkonten
      </template>
      <div
          v-for="account in reqData.accounts"
          :key="account.id"
          class="p-2 m-3 flex justify-between"
      >
        {{account.iban}} - {{account.owner_name}}

        <UButton
            @click="addAccount(account)"
            v-if="!bankaccounts.find(i => i.iban === account.iban)"
        >
          Hinzufügen
        </UButton>
        <UButton
            @click="updateAccount(account)"
            v-else
        >
          Aktualisieren
        </UButton>
      </div>
    </UCard>
  </UModal>

  <UTable
      :rows="bankaccounts"
      :columns="normalizeTableColumns([
        {
          key: 'expired',
          label: 'Aktiv'
        },{
          key: 'iban',
          label: 'IBAN'
        },{
          key: 'bankId',
          label: 'Bank'
        },{
          key: 'ownerName',
          label: 'Kontoinhaber'
        },{
          key: 'balance',
          label: 'Saldo'
        },
      ])"
  >
    <template #expired-data="{row}">
      <span v-if="row.expired" class="text-rose-600">Ausgelaufen</span>
      <span v-else class="text-primary">Aktiv</span>
      <UButton
          v-if="row.expired"
          variant="outline"
          class="ml-2"
          @click="generateLink(row.bankId)"
      >Aktualisieren</UButton>
    </template>
    <template #balance-data="{row}">
      {{row.balance ? row.balance.toFixed(2).replace(".",",") + ' €' : '-'}}
    </template>
    <template #iban-data="{row}">
      {{row.iban.match(/.{1,5}/g).join(" ")}}
    </template>
  </UTable>

</template>

<style scoped>

</style>
