<script setup lang="ts">

import { computed } from 'vue'
import { type Invoice } from '@/types'
import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils'
import { StatusBadge, statusBadgeLabels, statusTextStyle, castToStatusVariant } from '@/components/ui/status-badge'
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'


const props = defineProps<{
    invoices: Invoice[],
    onItemClicked(invoice: Invoice): void
}>()

const totalPaid = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'paid') amount += invoice.totalAmount
    })
    return amount
})

const totalTaxPaid = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'paid') amount += calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalGrossPaid = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'paid') amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalDue = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += invoice.totalAmount
    })
    return amount
})

const totalTaxDue = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalGrossDue = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (['issued', 'due', 'reminded'].includes(invoice.paymentStatus)) amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalNotIssued = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'draft') amount += invoice.totalAmount
    })
    return amount
})

const totalTaxNotIssued = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'draft') amount += calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalGrossNotIssued = computed(() => {
    let amount = 0;
    props.invoices.forEach(invoice => {
        if (invoice.paymentStatus == 'draft') amount += invoice.totalAmount + calcTaxes(invoice.totalAmount)
    })
    return amount
})

const totalAmount = computed(() => {
    return totalPaid.value + totalDue.value + totalNotIssued.value
})

const totalTax = computed(() => {
    return totalTaxPaid.value + totalTaxDue.value + totalTaxNotIssued.value
})

const totalGross = computed(() => {
    return totalGrossPaid.value + totalGrossDue.value + totalGrossNotIssued.value
})

const calcTaxes = (amount: number) => {
    return toFixedRounded(Number(0.19 * amount), 2)
}

</script>


<template>
    <Table class="relative document-table bg-none">
        <TableHeader>
            <TableRow class="hover:bg-transparent border-none">
                <TableHead class="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
                <TableHead class="w-1/100 lg:w-1/20 text-center">Status</TableHead>
                <TableHead class="w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
                </TableHead>
                <TableHead class="w-1/5 text-right lg:hidden">Rechnung</TableHead>
                <TableHead class="w-1/5 hidden lg:table-cell">Kunde</TableHead>
                <TableHead colspan="2" class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
                <TableHead class="w-1/12 text-right">Netto</TableHead>
                <TableHead class="w-1/12 text-right hidden lg:table-cell">Ust.</TableHead>
                <TableHead class="w-1/12 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
            </TableRow>
        </TableHeader>

        <TableBody class="overflow-clip rounded-lg shadow">
            <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
                class="select-none md:select-auto cursor-default bg-background"
                :class="statusTextStyle(invoice.paymentStatus)">
                <TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
                </TableCell>
                <TableCell class="w-1/100 text-center">
                    <StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
                        statusBadgeLabels[invoice.paymentStatus] }}
                    </StatusBadge>
                </TableCell>
                <TableCell class="pr-5 hidden md:table-cell lg:px-5 text-right tabular-nums">{{
                    toLocalDate(invoice.invoiceDate) }}
                </TableCell>
                <TableCell class="lg:hidden max-w-[220px] md:max-w-[320px] overflow-hidden text-ellipsis">
                    <span class="font-semibold">{{ invoice.billingData?.companyName }}</span><br />
                    {{ invoice.title }}
                </TableCell>
                <TableCell
                    class="hidden lg:table-cell max-w-[100px] md:max-w-[120px] lg:max-w-auto overflow-hidden text-ellipsis font-semibold">
                    {{ invoice.billingData?.companyName }}</TableCell>
                <TableCell colspan="2"
                    class="hidden lg:table-cell max-w-[120px] md:max-w-[160px] lg:max-w-auto overflow-hidden text-ellipsis">
                    {{
                        invoice.title }}</TableCell>
                <TableCell class="text-right tabular-nums">{{ toCurrency(invoice.totalAmount) }}
                </TableCell>
                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{
                    toCurrency(calcTaxes(invoice.totalAmount)) }}</TableCell>
                <TableCell class="text-right tabular-nums hidden lg:pr-4 lg:table-cell">{{
                    toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
            </TableRow>
        </TableBody>

        <TableFooter class="border-none bg-transparent">
            <!-- Summe -->
            <TableRow class="border-none hover:bg-transparent">
                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                <TableCell colspan="1"></TableCell>
                <TableCell class="py-4 text-right tabular-nums w-1/100 font-bold">Summe</TableCell>
                <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalAmount) }}</TableCell>
                <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}
                </TableCell>
                <TableCell class="py-4 lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                    toCurrency(totalGross) }}</TableCell>
            </TableRow>
            <!-- Bezahlt -->
            <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                <TableCell colspan="1"></TableCell>
                <TableCell class=" w-1/100 text-right tabular-nums font-bold">Bezahlt</TableCell>
                <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalPaid) }}</TableCell>
                <TableCell class=" text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxPaid) }}
                </TableCell>
                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
                }}</TableCell>
            </TableRow>

            <TableRow v-if="totalDue > 0" class="border-none text-destructive hover:bg-transparent">
                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                <TableCell colspan="1"></TableCell>
                <TableCell class="text-right tabular-nums w-1/100 font-bold">Offen</TableCell>
                <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</TableCell>
                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}
                </TableCell>
                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
                    }}</TableCell>
            </TableRow>

            <TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                <TableCell colspan="1"></TableCell>
                <TableCell class="text-right tabular-nums w-1/100 font-bold">Nicht gestellt</TableCell>
                <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalNotIssued) }}</TableCell>
                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}
                </TableCell>
                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                    toCurrency(totalGrossNotIssued) }}</TableCell>
            </TableRow>

        </TableFooter>
    </Table>
</template>

<style>
.document-table {
    font-size: 0.833rem;
}

.document-table th {

}
.document-table td {
    padding-top: 1.125em !important;
    padding-bottom: 1.125em !important;
}

.document-table tfoot tr:first-child td {
    padding-top: 2em !important;
}

.document-table tfoot td {
    padding-top: 0.64em !important;
    padding-bottom: 0.64em !important;
}
</style>