<script setup>
const {$api, $dayjs} = useNuxtApp()
const toast = useToast()

defineShortcuts({
  '/': () => document.getElementById("searchinput").focus()
})

const tempStore = useTempStore()
const router = useRouter()
const route = useRoute()

const bankstatements = ref([])
const bankaccounts = ref([])
const filterAccount = ref([])
const isSyncing = ref(false)
const loadingDocs = ref(true) // Startet im Ladezustand

// Zeitraum-Optionen
const periodOptions = [
  {label: 'Aktueller Monat', key: 'current_month'},
  {label: 'Letzter Monat', key: 'last_month'},
  {label: 'Aktuelles Quartal', key: 'current_quarter'},
  {label: 'Letztes Quartal', key: 'last_quarter'},
  {label: 'Benutzerdefiniert', key: 'custom'}
]

// Initialisierungswerte
const selectedPeriod = ref(periodOptions[0])
const dateRange = ref({
  start: $dayjs().startOf('month').format('YYYY-MM-DD'),
  end: $dayjs().endOf('month').format('YYYY-MM-DD')
})

const setupPage = async () => {
  loadingDocs.value = true
  try {
    const [statements, accounts] = await Promise.all([
      useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
      useEntities("bankaccounts").select()
    ])

    bankstatements.value = statements
    bankaccounts.value = accounts

    if (bankaccounts.value.length > 0 && filterAccount.value.length === 0) {
      filterAccount.value = bankaccounts.value
    }

    // Erst nach dem Laden der Daten die Store-Werte anwenden
    const savedBanking = tempStore.settings?.['banking'] || {}
    if (savedBanking.periodKey) {
      const found = periodOptions.find(p => p.key === savedBanking.periodKey)
      if (found) selectedPeriod.value = found
    }
    if (savedBanking.range) {
      dateRange.value = savedBanking.range
    }
  } catch (err) {
    console.error("Setup Error:", err)
  } finally {
    loadingDocs.value = false
  }
}

// Watcher für Schnellwahlen & Persistenz
watch([selectedPeriod, dateRange], ([newPeriod, newRange], [oldPeriod, oldRange]) => {
  const now = $dayjs()

  // Nur berechnen, wenn sich die Periode geändert hat
  if (newPeriod.key !== oldPeriod?.key) {
    switch (newPeriod.key) {
      case 'current_month':
        dateRange.value = {start: now.startOf('month').format('YYYY-MM-DD'), end: now.endOf('month').format('YYYY-MM-DD')}
        break
      case 'last_month':
        const lastMonth = now.subtract(1, 'month')
        dateRange.value = {start: lastMonth.startOf('month').format('YYYY-MM-DD'), end: lastMonth.endOf('month').format('YYYY-MM-DD')}
        break
      case 'current_quarter':
        dateRange.value = {start: now.startOf('quarter').format('YYYY-MM-DD'), end: now.endOf('quarter').format('YYYY-MM-DD')}
        break
      case 'last_quarter':
        const lastQuarter = now.subtract(1, 'quarter')
        dateRange.value = {start: lastQuarter.startOf('quarter').format('YYYY-MM-DD'), end: lastQuarter.endOf('quarter').format('YYYY-MM-DD')}
        break
    }
  }
  // Speichern im Store
  tempStore.modifyBankingPeriod(selectedPeriod.value.key, dateRange.value)
}, { deep: true })

const syncBankStatements = async () => {
  isSyncing.value = true
  try {
    await $api('/api/functions/services/bankstatementsync', {method: 'POST'})
    toast.add({title: 'Erfolg', description: 'Bankdaten synchronisiert.', color: 'green'})
    await setupPage()
  } catch (error) {
    toast.add({title: 'Fehler', description: 'Fehler beim Abruf.', color: 'red'})
  } finally {
    isSyncing.value = false
  }
}

const templateColumns = [
  {key: "account", label: "Konto"},
  {key: "valueDate", label: "Valuta"},
  {key: "amount", label: "Betrag"},
  {key: "openAmount", label: "Offen"},
  {key: "partner", label: "Name"},
  {key: "text", label: "Beschreibung"}
]

const searchString = ref(tempStore.searchStrings["bankstatements"] || '')
const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] || ['Nur offene anzeigen'])

const shouldShowMonthDivider = (row, index) => {
  if (index === 0) return true;
  const prevRow = filteredRows.value[index - 1];
  return $dayjs(row.valueDate).format('MMMM YYYY') !== $dayjs(prevRow.valueDate).format('MMMM YYYY');
}

const calculateOpenSum = (statement) => {
  const allocated = statement.statementallocations?.reduce((acc, curr) => acc + curr.amount, 0) || 0;
  return (statement.amount - allocated).toFixed(2);
}

const filteredRows = computed(() => {
  if (!bankstatements.value.length) return []

  let temp = [...bankstatements.value]

  // Filterung nach Datum
  if (dateRange.value.start) {
    temp = temp.filter(i => $dayjs(i.valueDate).isSameOrAfter($dayjs(dateRange.value.start), 'day'))
  }
  if (dateRange.value.end) {
    temp = temp.filter(i => $dayjs(i.valueDate).isSameOrBefore($dayjs(dateRange.value.end), 'day'))
  }

  // Status Filter
  if (selectedFilters.value.includes("Nur offene anzeigen")) {
    temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
  }
  if (selectedFilters.value.includes("Nur positive anzeigen")) {
    temp = temp.filter(i => i.amount >= 0)
  }
  if (selectedFilters.value.includes("Nur negative anzeigen")) {
    temp = temp.filter(i => i.amount < 0)
  }

  // Konto Filter & Suche
  let results = temp.filter(i => filterAccount.value.find(x => x.id === i.account))

  if (searchString.value) {
    results = useSearch(searchString.value, results)
  }

  return results.sort((a, b) => $dayjs(b.valueDate).unix() - $dayjs(a.valueDate).unix())
})

const displayCurrency = (value) => `${Number(value).toFixed(2).replace(".", ",")} €`

onMounted(() => {
  setupPage()
})
</script>

<template>
  <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
    <template #right>
      <UButton
          label="Bankabruf"
          icon="i-heroicons-arrow-path"
          :loading="isSyncing"
          @click="syncBankStatements"
          class="mr-2"
      />
      <UInput
          id="searchinput"
          v-model="searchString"
          icon="i-heroicons-magnifying-glass"
          placeholder="Suche..."
          @change="tempStore.modifySearchString('bankstatements',searchString)"
      />
    </template>
  </UDashboardNavbar>

  <UDashboardToolbar>
    <template #left>
      <div class="flex items-center gap-3">
        <USelectMenu
            :options="bankaccounts"
            v-model="filterAccount"
            option-attribute="iban"
            multiple
            by="id"
            placeholder="Konten"
            class="w-48"
        />
        <UDivider orientation="vertical" class="h-6"/>
        <div class="flex items-center gap-2">
          <USelectMenu
              v-model="selectedPeriod"
              :options="periodOptions"
              class="w-44"
              icon="i-heroicons-calendar-days"
          />
          <div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
            <UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
            <UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
          </div>
          <div v-else class="text-xs text-gray-400 hidden sm:block italic">
            {{ $dayjs(dateRange.start).format('DD.MM.') }} - {{ $dayjs(dateRange.end).format('DD.MM.YYYY') }}
          </div>
        </div>
      </div>
    </template>

    <template #right>
      <USelectMenu
          icon="i-heroicons-adjustments-horizontal"
          multiple
          v-model="selectedFilters"
          :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
          @change="tempStore.modifyFilter('banking','main',selectedFilters)"
      />
    </template>
  </UDashboardToolbar>

  <div class="overflow-y-auto relative" style="height: calc(100vh - 200px)">
    <div v-if="loadingDocs" class="p-20 flex flex-col items-center justify-center">
      <UProgress animation="carousel" class="w-1/3 mb-4" />
      <span class="text-sm text-gray-500 italic">Bankbuchungen werden geladen...</span>
    </div>

    <table v-else class="w-full text-left border-collapse">
      <thead class="sticky top-0 bg-white dark:bg-gray-900 z-10 shadow-sm">
      <tr class="text-xs font-semibold text-gray-500 uppercase">
        <th v-for="col in templateColumns" :key="col.key" class="p-4 border-b dark:border-gray-800">
          {{ col.label }}
        </th>
      </tr>
      </thead>
      <tbody>
      <template v-for="(row, index) in filteredRows" :key="row.id">
        <tr v-if="shouldShowMonthDivider(row, index)">
          <td colspan="6" class="bg-gray-50 dark:bg-gray-800/50 p-2 pl-4 text-sm font-bold text-primary-600 border-y dark:border-gray-800">
            <div class="flex items-center gap-2">
              <UIcon name="i-heroicons-calendar" class="w-4 h-4"/>
              {{ $dayjs(row.valueDate).format('MMMM YYYY') }}
            </div>
          </td>
        </tr>
        <tr
            class="hover:bg-gray-50 dark:hover:bg-gray-800/30 cursor-pointer border-b dark:border-gray-800 text-sm group"
            @click="router.push(`/banking/statements/edit/${row.id}`)"
        >
          <td class="p-4 text-[10px] text-gray-400 font-mono truncate max-w-[150px]">
            {{ row.account ? bankaccounts.find(i => i.id === row.account)?.iban : "" }}
          </td>
          <td class="p-4 whitespace-nowrap">{{ $dayjs(row.valueDate).format("DD.MM.YY") }}</td>
          <td class="p-4 font-semibold">
              <span :class="row.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-rose-600 dark:text-rose-400'">
                {{ displayCurrency(row.amount) }}
              </span>
          </td>
          <td class="p-4 text-gray-400 italic text-xs">
            {{ Number(calculateOpenSum(row)) !== 0 ? displayCurrency(calculateOpenSum(row)) : '-' }}
          </td>
          <td class="p-4 truncate max-w-[180px] font-medium">
            {{ row.amount < 0 ? row.credName : row.debName }}
          </td>
          <td class="p-4 text-gray-500 truncate max-w-[350px] text-xs">
            {{ row.text }}
          </td>
        </tr>
      </template>
      <tr v-if="filteredRows.length === 0">
        <td colspan="6" class="p-32 text-center text-gray-400">
          <div class="flex flex-col items-center">
            <UIcon name="i-heroicons-magnifying-glass-circle" class="w-12 h-12 mb-3 opacity-20"/>
            <p class="font-medium">Keine Buchungen gefunden</p>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <PageLeaveGuard :when="isSyncing"/>
</template>