<script setup>
import dayjs from "dayjs"

const toast = useToast()

const loading = ref(true)
const saving = ref(false)
const accounts = ref([])
const customers = ref([])
const vendors = ref([])
const ownaccounts = ref([])
const bookings = ref([])

const form = reactive({
  manualBookingDate: dayjs().format("YYYY-MM-DD"),
  amount: null,
  debit: "",
  credit: "",
  description: ""
})

const entryOptions = computed(() => [
  ...accounts.value.map((item) => ({
    key: `account:${item.id}`,
    label: `${item.number} - ${item.label}`,
    number: item.number,
    name: item.label,
    type: "Sachkonto"
  })),
  ...vendors.value.map((item) => ({
    key: `vendor:${item.id}`,
    label: `${item.vendorNumber || "ohne Nr."} - ${item.name}`,
    number: item.vendorNumber,
    name: item.name,
    type: "Kreditor"
  })),
  ...customers.value.map((item) => ({
    key: `customer:${item.id}`,
    label: `${item.customerNumber || "ohne Nr."} - ${item.name}`,
    number: item.customerNumber,
    name: item.name,
    type: "Debitor"
  })),
  ...ownaccounts.value.map((item) => ({
    key: `ownaccount:${item.id}`,
    label: `${item.number} - ${item.name}`,
    number: item.number,
    name: item.name,
    type: "Zusätzliches Konto"
  }))
])

const selectedDebit = computed(() => entryOptions.value.find((item) => item.key === form.debit))
const selectedCredit = computed(() => entryOptions.value.find((item) => item.key === form.credit))

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

const getBookingSide = (booking, side) => {
  const map = side === "credit"
      ? [
        ["contraAccount", "Sachkonto"],
        ["contraVendor", "Kreditor"],
        ["contraCustomer", "Debitor"],
        ["contraOwnaccount", "Zusätzliches Konto"]
      ]
      : [
        ["account", "Sachkonto"],
        ["vendor", "Kreditor"],
        ["customer", "Debitor"],
        ["ownaccount", "Zusätzliches Konto"]
      ]

  for (const [key, type] of map) {
    const item = booking[key]
    if (!item) continue
    return {
      type,
      number: item.number || item.vendorNumber || item.customerNumber || "",
      name: item.label || item.name || ""
    }
  }

  return { type: "", number: "", name: "" }
}

const buildSidePayload = (sideKey, target) => {
  const [type, id] = String(sideKey || "").split(":")
  if (!type || !id) return

  const numericId = type === "ownaccount" ? id : Number(id)
  if (target === "debit") {
    if (type === "account") return { account: numericId }
    if (type === "customer") return { customer: numericId }
    if (type === "vendor") return { vendor: numericId }
    if (type === "ownaccount") return { ownaccount: numericId }
  }

  if (type === "account") return { contraAccount: numericId }
  if (type === "customer") return { contraCustomer: numericId }
  if (type === "vendor") return { contraVendor: numericId }
  if (type === "ownaccount") return { contraOwnaccount: numericId }
}

const loadData = async () => {
  loading.value = true
  const [accountRows, customerRows, vendorRows, ownaccountRows, bookingRows] = await Promise.all([
    useEntities("accounts").selectSpecial("*", "number", true),
    useEntities("customers").select(),
    useEntities("vendors").select(),
    useEntities("ownaccounts").select(),
    useNuxtApp().$api("/api/banking/manual-bookings")
  ])

  accounts.value = accountRows || []
  customers.value = customerRows || []
  vendors.value = vendorRows || []
  ownaccounts.value = ownaccountRows || []
  bookings.value = (bookingRows || []).sort((a, b) => String(b.manualBookingDate || "").localeCompare(String(a.manualBookingDate || "")))
  loading.value = false
}

const resetForm = () => {
  form.amount = null
  form.debit = ""
  form.credit = ""
  form.description = ""
}

const saveBooking = async () => {
  if (!form.manualBookingDate || !form.amount || !form.debit || !form.credit) {
    toast.add({ title: "Bitte Datum, Betrag, Soll und Haben ausfüllen.", color: "warning" })
    return
  }

  saving.value = true
  const payload = {
    manualBookingDate: form.manualBookingDate,
    amount: Number(form.amount),
    description: form.description || "Manuelle Buchung",
    ...buildSidePayload(form.debit, "debit"),
    ...buildSidePayload(form.credit, "credit")
  }

  await useNuxtApp().$api("/api/banking/statements", {
    method: "POST",
    body: { data: payload }
  })

  toast.add({ title: "Manuelle Buchung erstellt." })
  resetForm()
  await loadData()
  saving.value = false
}

const deleteBooking = async (booking) => {
  await useNuxtApp().$api(`/api/banking/statements/${booking.id}`, { method: "DELETE" })
  toast.add({ title: "Manuelle Buchung gelöscht." })
  await loadData()
}

onMounted(loadData)
</script>

<template>
  <UDashboardPanelContent>
    <UDashboardNavbar title="Manuelle Buchungen" :badge="bookings.length" />

    <div class="grid gap-6 lg:grid-cols-[420px_1fr]">
      <UCard>
        <template #header>
          <div>
            <h2 class="font-semibold text-gray-900 dark:text-white">Neue Soll/Haben-Buchung</h2>
            <p class="text-sm text-gray-500">Zum Beispiel: Kreditor 70000 an Konto 2742.</p>
          </div>
        </template>

        <div class="space-y-4">
          <UFormField label="Buchungsdatum">
            <UInput v-model="form.manualBookingDate" type="date" />
          </UFormField>

          <UFormField label="Betrag">
            <UInput v-model="form.amount" type="number" min="0" step="0.01" placeholder="0,00" />
          </UFormField>

          <UFormField label="Soll">
            <USelectMenu
                v-model="form.debit"
                :items="entryOptions"
                value-key="key"
                label-key="label"
                :search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
                placeholder="Soll-Konto auswählen"
            >
              <template #item-label="{ item }">
                <span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
                {{ item.name }}
                <UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
              </template>
            </USelectMenu>
          </UFormField>

          <UFormField label="Haben">
            <USelectMenu
                v-model="form.credit"
                :items="entryOptions"
                value-key="key"
                label-key="label"
                :search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
                placeholder="Haben-Konto auswählen"
            >
              <template #item-label="{ item }">
                <span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
                {{ item.name }}
                <UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
              </template>
            </USelectMenu>
          </UFormField>

          <UAlert
              v-if="selectedDebit && selectedCredit"
              color="primary"
              variant="soft"
              icon="i-heroicons-arrows-right-left"
              :title="`${selectedDebit.number} an ${selectedCredit.number}`"
              :description="`${selectedDebit.name} wird im Soll, ${selectedCredit.name} im Haben gebucht.`"
          />

          <UFormField label="Beschreibung">
            <UTextarea v-model="form.description" placeholder="z. B. Versicherungsentschädigung" autoresize />
          </UFormField>

          <UButton block color="primary" :loading="saving" @click="saveBooking">
            Manuelle Buchung erstellen
          </UButton>
        </div>
      </UCard>

      <UCard>
        <template #header>
          <div>
            <h2 class="font-semibold text-gray-900 dark:text-white">Erfasste manuelle Buchungen</h2>
            <p class="text-sm text-gray-500">Diese Buchungen laufen im DATEV-Export mit.</p>
          </div>
        </template>

        <div v-if="loading" class="py-10 text-center text-gray-500">Lade Buchungen...</div>
        <div v-else-if="bookings.length === 0" class="py-10 text-center text-gray-500">
          Noch keine manuellen Buchungen erfasst.
        </div>
        <div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
          <div v-for="booking in bookings" :key="booking.id" class="py-4 flex items-start justify-between gap-4">
            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2 text-sm">
                <span class="font-medium">{{ dayjs(booking.manualBookingDate).format("DD.MM.YYYY") }}</span>
                <span class="font-mono font-semibold">{{ displayCurrency(booking.amount) }}</span>
              </div>
              <div class="mt-1 text-sm text-gray-700 dark:text-gray-200">
                <span class="font-semibold">Soll:</span>
                {{ getBookingSide(booking, "debit").number }} - {{ getBookingSide(booking, "debit").name }}
              </div>
              <div class="text-sm text-gray-700 dark:text-gray-200">
                <span class="font-semibold">Haben:</span>
                {{ getBookingSide(booking, "credit").number }} - {{ getBookingSide(booking, "credit").name }}
              </div>
              <div v-if="booking.description" class="mt-1 text-xs text-gray-500 truncate">
                {{ booking.description }}
              </div>
            </div>
            <UButton
                icon="i-heroicons-trash"
                color="error"
                variant="ghost"
                size="sm"
                @click="deleteBooking(booking)"
            />
          </div>
        </div>
      </UCard>
    </div>
  </UDashboardPanelContent>
</template>
