<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 debitSearch = ref("")
const creditSearch = ref("")

const DATEV_TAX_KEY_ITEMS = [
  { value: "", label: "Ohne Steuerschlüssel" },
  { value: "9", label: "9 - Vorsteuer 19 %" },
  { value: "8", label: "8 - Vorsteuer 7 %" },
  { value: "19", label: "19 - EU Vorsteuer 19 %" },
  { value: "18", label: "18 - EU Vorsteuer 7 %" }
]

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

const displayCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} €`
const normalizeSearch = (value) => String(value || "").toLowerCase().trim()
const matchesSearch = (entry, query) => {
  const search = normalizeSearch(query)
  if (!search) return true

  return [
    entry.number,
    entry.name,
    entry.label,
    entry.typeLabel
  ].some((value) => normalizeSearch(value).includes(search))
}

const buildEntries = (rows, type, labelBuilder) =>
    (rows || []).map((item) => ({
      key: `${type}:${item.id}`,
      id: item.id,
      type,
      number: item.number || item.vendorNumber || item.customerNumber || "",
      name: item.label || item.name || "",
      label: labelBuilder(item),
      typeLabel:
          type === "account"
              ? "Sachkonten"
              : type === "vendor"
                  ? "Kreditoren"
                  : type === "customer"
                      ? "Debitoren"
                      : "Zusätzliche Konten"
    }))

const entryGroups = computed(() => ([
  {
    key: "account",
    label: "Sachkonten",
    entries: buildEntries(accounts.value, "account", (item) => `${item.number} - ${item.label}`)
  },
  {
    key: "vendor",
    label: "Kreditoren",
    entries: buildEntries(vendors.value, "vendor", (item) => `${item.vendorNumber || "ohne Nr."} - ${item.name}`)
  },
  {
    key: "customer",
    label: "Debitoren",
    entries: buildEntries(customers.value, "customer", (item) => `${item.customerNumber || "ohne Nr."} - ${item.name}`)
  },
  {
    key: "ownaccount",
    label: "Zusätzliche Konten",
    entries: buildEntries(ownaccounts.value, "ownaccount", (item) => `${item.number} - ${item.name}`)
  }
]))

const groupedDebitEntries = computed(() =>
    entryGroups.value.map((group) => ({
      ...group,
      entries: group.entries.filter((entry) => matchesSearch(entry, debitSearch.value))
    })).filter((group) => group.entries.length > 0)
)

const groupedCreditEntries = computed(() =>
    entryGroups.value.map((group) => ({
      ...group,
      entries: group.entries.filter((entry) => matchesSearch(entry, creditSearch.value))
    })).filter((group) => group.entries.length > 0)
)

const allEntries = computed(() => entryGroups.value.flatMap((group) => group.entries))
const selectedDebit = computed(() => allEntries.value.find((item) => item.key === form.debit))
const selectedCredit = computed(() => allEntries.value.find((item) => item.key === form.credit))
const selectedTaxKey = computed(() => DATEV_TAX_KEY_ITEMS.find((item) => item.value === form.datevTaxKey))

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.datevTaxKey = ""
  form.description = ""
  debitSearch.value = ""
  creditSearch.value = ""
}

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
  try {
    const payload = {
      manualBookingDate: form.manualBookingDate,
      amount: Number(form.amount),
      datevTaxKey: form.datevTaxKey || null,
      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()
  } finally {
    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">
      <UCard>
        <template #header>
          <div class="flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <h2 class="font-semibold text-gray-900 dark:text-white">Neue Soll/Haben-Buchung</h2>
              <p class="text-sm text-gray-500">Kontenarten sind jetzt getrennt nach Sachkonten, Kreditoren, Debitoren und zusätzlichen Konten auswählbar.</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-3">
              <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="DATEV-Steuerschlüssel">
                <USelectMenu
                    v-model="form.datevTaxKey"
                    :items="DATEV_TAX_KEY_ITEMS"
                    value-key="value"
                    label-key="label"
                />
              </UFormField>
            </div>
          </div>
        </template>

        <div class="grid gap-6 xl:grid-cols-2">
          <div class="rounded-xl border border-emerald-200 bg-emerald-50/60 p-4 dark:border-emerald-900 dark:bg-emerald-950/20">
            <div class="mb-4 flex items-center justify-between gap-3">
              <div>
                <h3 class="font-semibold text-emerald-900 dark:text-emerald-200">Soll</h3>
                <p class="text-sm text-emerald-700/80 dark:text-emerald-300/80">Linke Buchungsseite</p>
              </div>
              <UInput v-model="debitSearch" icon="i-heroicons-magnifying-glass" placeholder="Soll durchsuchen..." class="max-w-xs" />
            </div>

            <div class="space-y-4">
              <div v-for="group in groupedDebitEntries" :key="`debit-${group.key}`" class="space-y-2">
                <div class="text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-300">{{ group.label }}</div>
                <div class="grid gap-2">
                  <button
                      v-for="entry in group.entries"
                      :key="entry.key"
                      type="button"
                      class="rounded-lg border px-3 py-2 text-left transition"
                      :class="form.debit === entry.key
                        ? 'border-emerald-500 bg-white dark:bg-emerald-900/30 shadow-sm'
                        : 'border-emerald-200/80 bg-white/80 hover:border-emerald-300 dark:border-emerald-900 dark:bg-gray-900'"
                      @click="form.debit = entry.key"
                  >
                    <div class="flex items-center gap-2">
                      <span class="font-mono text-sm">{{ entry.number }}</span>
                      <span class="text-sm">{{ entry.name }}</span>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="rounded-xl border border-sky-200 bg-sky-50/60 p-4 dark:border-sky-900 dark:bg-sky-950/20">
            <div class="mb-4 flex items-center justify-between gap-3">
              <div>
                <h3 class="font-semibold text-sky-900 dark:text-sky-200">Haben</h3>
                <p class="text-sm text-sky-700/80 dark:text-sky-300/80">Rechte Buchungsseite</p>
              </div>
              <UInput v-model="creditSearch" icon="i-heroicons-magnifying-glass" placeholder="Haben durchsuchen..." class="max-w-xs" />
            </div>

            <div class="space-y-4">
              <div v-for="group in groupedCreditEntries" :key="`credit-${group.key}`" class="space-y-2">
                <div class="text-xs font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300">{{ group.label }}</div>
                <div class="grid gap-2">
                  <button
                      v-for="entry in group.entries"
                      :key="entry.key"
                      type="button"
                      class="rounded-lg border px-3 py-2 text-left transition"
                      :class="form.credit === entry.key
                        ? 'border-sky-500 bg-white dark:bg-sky-900/30 shadow-sm'
                        : 'border-sky-200/80 bg-white/80 hover:border-sky-300 dark:border-sky-900 dark:bg-gray-900'"
                      @click="form.credit = entry.key"
                  >
                    <div class="flex items-center gap-2">
                      <span class="font-mono text-sm">{{ entry.number }}</span>
                      <span class="text-sm">{{ entry.name }}</span>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt-6 grid gap-4 lg:grid-cols-[1fr_auto] lg:items-end">
          <div class="space-y-4">
            <UAlert
                v-if="selectedDebit && selectedCredit"
                color="primary"
                variant="soft"
                icon="i-heroicons-arrows-right-left"
                :title="`${selectedDebit.number} an ${selectedCredit.number}`"
                :description="`${selectedDebit.typeLabel.slice(0, -1)} ${selectedDebit.name} wird im Soll, ${selectedCredit.typeLabel.slice(0, -1)} ${selectedCredit.name} im Haben gebucht.`"
            />

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

          <div class="flex flex-col items-stretch gap-2">
            <UBadge v-if="selectedTaxKey?.value" color="warning" variant="subtle">
              Steuerschlüssel: {{ selectedTaxKey.label }}
            </UBadge>
            <UButton color="primary" :loading="saving" @click="saveBooking">
              Manuelle Buchung erstellen
            </UButton>
          </div>
        </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">Übersicht mit getrennter Soll- und Haben-Seite inklusive DATEV-Steuerschlüssel.</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">
            <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
              <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>
                <UBadge v-if="booking.datevTaxKey" size="xs" color="warning" variant="subtle">
                  St.-Schlüssel {{ booking.datevTaxKey }}
                </UBadge>
              </div>
              <UButton
                  icon="i-heroicons-trash"
                  color="error"
                  variant="ghost"
                  size="sm"
                  @click="deleteBooking(booking)"
              />
            </div>

            <div class="grid gap-3 md:grid-cols-2">
              <div class="rounded-lg border border-emerald-200 bg-emerald-50/60 p-3 dark:border-emerald-900 dark:bg-emerald-950/20">
                <div class="text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:text-emerald-300">Soll</div>
                <div class="mt-1 flex items-center gap-2">
                  <span class="font-mono">{{ getBookingSide(booking, 'debit').number }}</span>
                  <span>{{ getBookingSide(booking, "debit").name }}</span>
                </div>
                <div class="mt-1 text-xs text-gray-500">{{ getBookingSide(booking, "debit").type }}</div>
              </div>

              <div class="rounded-lg border border-sky-200 bg-sky-50/60 p-3 dark:border-sky-900 dark:bg-sky-950/20">
                <div class="text-xs font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300">Haben</div>
                <div class="mt-1 flex items-center gap-2">
                  <span class="font-mono">{{ getBookingSide(booking, 'credit').number }}</span>
                  <span>{{ getBookingSide(booking, "credit").name }}</span>
                </div>
                <div class="mt-1 text-xs text-gray-500">{{ getBookingSide(booking, "credit").type }}</div>
              </div>
            </div>

            <div v-if="booking.description" class="mt-3 text-sm text-gray-600 dark:text-gray-300">
              {{ booking.description }}
            </div>
          </div>
        </div>
      </UCard>
    </div>
  </UDashboardPanelContent>
</template>
