<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toPercentage, toDate } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import { getUrl } from 'src/composables/getUrl';
import VnLv from 'src/components/ui/VnLv.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';

const route = useRoute();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const entityId = computed(() => $props.id || route.params.id);
const customer = computed(() => summary.value.entity);
const summary = ref();
const clientUrl = ref();

onMounted(async () => {
    clientUrl.value = (await getUrl('client/')) + entityId.value + '/';
});

const balanceDue = computed(() => {
    return (
        customer.value &&
        customer.value.defaulters.length &&
        customer.value.defaulters[0].amount
    );
});

const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));

const claimRate = computed(() => {
    return customer.value.claimsRatio.claimingRate;
});

const priceIncreasingRate = computed(() => {
    return customer.value.claimsRatio.priceIncreasing / 100;
});

const debtWarning = computed(() => {
    return customer.value?.debt?.debt > customer.value.credit ? 'negative' : '';
});

const creditWarning = computed(() => {
    const data = customer.value;
    const tooMuchInsurance = data.credit > data.creditInsurance;
    const noCreditInsurance = data.credit && data.creditInsurance == null;

    return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
});
</script>

<template>
    <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
        <template #body="{ entity }">
            <QCard class="vn-one">
                <a class="header" :href="`#/customer/${entityId}/basic-data`">
                    {{ t('customer.summary.basicData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                <VnLv :label="t('customer.summary.name')" :value="entity.name" />
                <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
                <VnLv :value="entity.phone">
                    <template #label>
                        {{ t('customer.summary.phone') }}
                        <VnLinkPhone :phone-number="entity.phone" />
                    </template>
                </VnLv>
                <VnLv :value="entity.mobile">
                    <template #label>
                        {{ t('customer.summary.mobile') }}
                        <VnLinkPhone :phone-number="entity.mobile" />
                    </template>
                </VnLv>
                <VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
                <VnLv
                    :label="t('customer.summary.salesPerson')"
                    :value="entity?.salesPersonUser?.name"
                />
                <VnLv
                    :label="t('customer.summary.contactChannel')"
                    :value="entity?.contactChannel?.name"
                />
                <VnLv
                    :label="t('customer.summary.businessType')"
                    :value="entity.businessType.description"
                />
            </QCard>
            <QCard class="vn-one">
                <a class="header" :href="`#/customer/${entityId}/fiscal-data`">
                    {{ t('customer.summary.fiscalAddress') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.socialName')"
                    :value="entity.socialName"
                />
                <VnLv :label="t('customer.summary.fiscalId')" :value="entity.fi" />
                <VnLv :label="t('customer.summary.city')" :value="entity.city" />
                <VnLv :label="t('customer.summary.postcode')" :value="entity.postcode" />

                <VnLv
                    v-if="entity.province"
                    :label="t('customer.summary.province')"
                    :value="entity.province.name"
                />
                <VnLv
                    v-if="entity.country"
                    :label="t('customer.summary.country')"
                    :value="entity.country.country"
                />
                <VnLv :label="t('customer.summary.street')" :value="entity.street" />
            </QCard>
            <QCard class="vn-one">
                <a class="header link" :href="`#/customer/${entityId}/fiscal-data`" link>
                    {{ t('customer.summary.fiscalData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.isEqualizated')"
                    :value="entity.isEqualizated"
                />
                <VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
                <VnLv
                    :label="t('customer.summary.invoiceByAddress')"
                    :value="entity.hasToInvoiceByAddress"
                />
                <VnLv
                    :label="t('customer.summary.verifiedData')"
                    :value="entity.isTaxDataChecked"
                />
                <VnLv
                    :label="t('customer.summary.hasToInvoice')"
                    :value="entity.hasToInvoice"
                />
                <VnLv
                    :label="t('customer.summary.notifyByEmail')"
                    :value="entity.isToBeMailed"
                />
                <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
            </QCard>
            <QCard class="vn-one">
                <a class="header link" :href="`#/customer/${entityId}/billing-data`" link>
                    {{ t('customer.summary.billingData') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.payMethod')"
                    :value="entity.payMethod.name"
                />
                <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
                <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
                <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
                <VnLv
                    :label="t('customer.summary.hasCoreVnl')"
                    :value="entity.hasCoreVnl"
                />
                <VnLv
                    :label="t('customer.summary.hasB2BVnl')"
                    :value="entity.hasSepaVnl"
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.defaultAddress">
                <a class="header link" :href="`#/customer/${entityId}/consignees`" link>
                    {{ t('customer.summary.consignee') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.addressName')"
                    :value="entity.defaultAddress.nickname"
                />
                <VnLv
                    :label="t('customer.summary.addressCity')"
                    :value="entity.defaultAddress.city"
                />
                <VnLv
                    :label="t('customer.summary.addressStreet')"
                    :value="entity.defaultAddress.street"
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
                <a class="header link" :href="`#/customer/${entityId}/web-access`">
                    {{ t('customer.summary.webAccess') }}
                    <QIcon name="open_in_new" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.username')"
                    :value="entity.account.name"
                />
                <VnLv
                    :label="t('customer.summary.webAccess')"
                    :value="entity.account.active"
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
                <div class="header">
                    {{ t('customer.summary.businessData') }}
                </div>
                <VnLv
                    :label="t('customer.summary.totalGreuge')"
                    :value="toCurrency(entity.totalGreuge)"
                />
                <VnLv
                    :label="t('customer.summary.mana')"
                    :value="toCurrency(entity?.mana?.mana)"
                />
                <VnLv
                    v-if="entity.claimsRatio"
                    :label="t('customer.summary.priceIncreasingRate')"
                    :value="toPercentage(priceIncreasingRate)"
                />
                <VnLv
                    :label="t('customer.summary.averageInvoiced')"
                    :value="toCurrency(entity?.averageInvoiced?.invoiced)"
                />
                <VnLv
                    v-if="entity.claimsRatio"
                    :label="t('customer.summary.claimRate')"
                    :value="toPercentage(claimRate)"
                />
            </QCard>
            <QCard class="vn-one" v-if="entity.account">
                <a
                    class="header link"
                    :href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
                    link
                >
                    {{ t('customer.summary.financialData') }}
                    <QIcon name="vn:grafana" color="primary" />
                </a>
                <VnLv
                    :label="t('customer.summary.risk')"
                    :value="toCurrency(entity?.debt?.debt)"
                    :class="debtWarning"
                    :info="t('customer.summary.riskInfo')"
                />

                <VnLv
                    :label="t('customer.summary.credit')"
                    :value="toCurrency(entity.credit)"
                    :class="creditWarning"
                    :info="t('customer.summary.creditInfo')"
                />

                <VnLv
                    v-if="entity.creditInsurance"
                    :label="t('customer.summary.securedCredit')"
                    :value="toCurrency(entity.creditInsurance)"
                    :info="t('customer.summary.securedCreditInfo')"
                />

                <VnLv
                    :label="t('customer.summary.balance')"
                    :value="toCurrency(entity.sumRisk) || toCurrency(0)"
                    :info="t('customer.summary.balanceInfo')"
                />

                <VnLv
                    v-if="entity.defaulters"
                    :label="t('customer.summary.balanceDue')"
                    :value="toCurrency(balanceDue)"
                    :class="balanceDueWarning"
                    :info="t('customer.summary.balanceDueInfo')"
                />
                <VnLv
                    v-if="entity.recovery"
                    :label="t('customer.summary.recoverySince')"
                    :value="toDate(entity.recovery.started)"
                />
                <VnLv
                    :label="t('customer.summary.rating')"
                    :value="entity.rating"
                    :info="t('valueInfo', { min: 1, max: 20 })"
                />

                <VnLv
                    :label="t('customer.summary.recommendCredit')"
                    :value="entity.recommendedCredit"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
@media (min-width: $breakpoint-md) {
    .summary .vn-one {
        min-width: 300px;
    }
}
</style>
<i18n>
en:
    valueInfo: Value from {min} to {max}. The higher the better value
es:
    valueInfo: Valor de {min} a {max}. Cuanto más alto, mejor valor
</i18n>
