<script setup>
import { ref, computed, onMounted, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';

import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
import { toCurrency, dateRange } from 'src/filters';
const DEFAULT_AUTO_REFRESH = 1000;
const { t } = useI18n();
const autoRefresh = ref(false);
const router = useRouter();
const paginateRef = ref(null);
const workersActiveOptions = ref([]);
const provincesOptions = ref([]);
const statesOptions = ref([]);
const zonesOptions = ref([]);
const visibleColumns = ref([]);
const allColumnNames = ref([]);
const { viewSummary } = useSummaryDialog();

function exprBuilder(param, value) {
    switch (param) {
        case 'stateFk':
            return { 'ts.stateFk': value };
        case 'salesPersonFk':
            return { 'c.salesPersonFk': value };
        case 'provinceFk':
            return { 'a.provinceFk': value };
        case 'theoreticalHour':
            return { 'z.hour': value };
        case 'practicalHour':
            return { 'zed.etc': value };
        case 'shippedDate':
            return { 't.shipped': { between: dateRange(value) } };
        case 'nickname':
            return { [`t.nickname`]: { like: `%${value}%` } };
        case 'zoneFk':
        case 'totalWithVat':
            return { [`t.${param}`]: value };
    }
}

const filter = { order: ['totalProblems DESC'] };
let params = reactive({});

const applyColumnFilter = async (col) => {
    try {
        const paramKey = col.columnFilter?.filterParamKey || col.field;
        params[paramKey] = col.columnFilter.filterValue;
        await paginateRef.value.addFilter(null, params);
    } catch (err) {
        console.error('Error applying column filter', err);
    }
};

const getInputEvents = (col) => {
    return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
        ? { 'update:modelValue': () => applyColumnFilter(col) }
        : {
              'keyup.enter': () => applyColumnFilter(col),
          };
};

const fetchParams = ($params = {}) => {
    const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];

    const hasExcludedParams = excludedParams.some((param) => {
        return $params && $params[param] != undefined;
    });
    const hasParams = Object.entries($params).length;
    if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;

    if (typeof $params.scopeDays === 'number') {
        const from = Date.vnNew();
        from.setHours(0, 0, 0, 0);

        const to = new Date(from.getTime());
        to.setDate(to.getDate() + $params.scopeDays);
        to.setHours(23, 59, 59, 999);

        Object.assign($params, { from, to });
    }
    return { tableOrder: 'totalProblems DESC', ...$params };
};

const columns = computed(() => [
    {
        label: t('salesTicketsTable.problems'),
        name: 'problems',
        align: 'left',
        sortable: true,
        columnFilter: null,
    },
    {
        label: t('salesTicketsTable.identifier'),
        name: 'identifier',
        field: 'id',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.client'),
        name: 'client',
        align: 'left',
        field: 'nickname',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.salesPerson'),
        name: 'salesPerson',
        field: 'userName',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'salesPersonFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: workersActiveOptions.value,
                'option-value': 'id',
                'option-label': 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.date'),
        name: 'date',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInputDate,
            filterParamKey: 'shippedDate',
            type: 'date',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.theoretical'),
        name: 'theoretical',
        field: 'zoneLanding',
        align: 'left',
        sortable: true,
        format: (val) => toTimeFormat(val),
    },
    {
        label: t('salesTicketsTable.practical'),
        name: 'practical',
        field: 'practicalHour',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.preparation'),
        name: 'preparation',
        field: 'shipped',
        align: 'left',
        sortable: true,
        format: (val) => toTimeFormat(val),
    },

    {
        label: t('salesTicketsTable.province'),
        name: 'province',
        field: 'province',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'provinceFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: provincesOptions.value,
                'option-value': 'id',
                'option-label': 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.state'),
        name: 'state',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'stateFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: statesOptions.value,
                'option-value': 'id',
                'option-label': 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.isFragile'),
        name: 'isFragile',
        field: 'isFragile',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.zone'),
        name: 'zone',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'zoneFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: zonesOptions.value,
                'option-value': 'id',
                'option-label': 'name',
                dense: true,
            },
        },
    },
    {
        label: t('salesTicketsTable.total'),
        name: 'total',
        field: 'totalWithVat',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        name: 'rowActions',
        align: 'left',
        sortable: true,
    },
]);

const getBadgeAttrs = (date) => {
    let today = Date.vnNew();
    today.setHours(0, 0, 0, 0);
    let timeTicket = new Date(date);
    timeTicket.setHours(0, 0, 0, 0);

    let comparation = today - timeTicket;

    if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
    if (comparation < 0) return { color: 'success', 'text-color': 'black' };
    return { color: 'transparent', 'text-color': 'white' };
};
let refreshTimer = null;
const autoRefreshHandler = (value) => {
    if (value)
        refreshTimer = setInterval(() => paginateRef.value.fetch(), DEFAULT_AUTO_REFRESH);
    else {
        clearInterval(refreshTimer);
        refreshTimer = null;
    }
};
const redirectToTicketSummary = (id) => {
    router.push({ name: 'TicketSummary', params: { id } });
};

const stateColors = {
    notice: 'info',
    success: 'positive',
    warning: 'warning',
    alert: 'negative',
};

const totalPriceColor = (ticket) => {
    const total = parseInt(ticket.totalWithVat);
    if (total > 0 && total < 50) return 'warning';
};

const formatShippedDate = (date) => {
    if (!date) return '-';
    const split1 = date.split('T');
    const [year, month, day] = split1[0].split('-');
    const _date = new Date(year, month - 1, day);
    return toDateFormat(_date);
};

onMounted(async () => {
    const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
    allColumnNames.value = filteredColumns.map((col) => col.name);
    params = fetchParams();
    await paginateRef.value.addFilter(null, params);
});
</script>

<template>
    <FetchData
        url="Workers/activeWithInheritedRole"
        :filter="{
            fields: ['id', 'nickname'],
            order: 'nickname ASC',
            where: { role: 'salesPerson' },
        }"
        auto-load
        @on-fetch="(data) => (workersActiveOptions = data)"
    />
    <FetchData
        url="Provinces"
        :filter="{
            fields: ['id', 'name'],
            order: 'name ASC',
        }"
        auto-load
        @on-fetch="(data) => (provincesOptions = data)"
    />
    <FetchData
        url="States"
        :filter="{
            fields: ['id', 'name'],
            order: 'name ASC',
        }"
        auto-load
        @on-fetch="(data) => (statesOptions = data)"
    />
    <FetchData
        url="Zones"
        :filter="{
            fields: ['id', 'name'],
            order: 'name ASC',
        }"
        auto-load
        @on-fetch="(data) => (zonesOptions = data)"
    />
    <VnPaginate
        ref="paginateRef"
        data-key="SalesMonitorTickets"
        url="SalesMonitors/salesFilter"
        :filter="filter"
        :limit="20"
        :expr-builder="exprBuilder"
        :user-params="params"
        :offset="50"
    >
        <template #body="{ rows }">
            <QTable
                :rows="rows"
                :columns="columns"
                row-key="id"
                :pagination="{ rowsPerPage: 0 }"
                :visible-columns="visibleColumns"
                :no-data-label="t('globals.noResults')"
                @row-click="(_, row) => redirectToTicketSummary(row.id)"
            >
                <template #top>
                    <TableVisibleColumns
                        :all-columns="allColumnNames"
                        table-code="ticketsMonitor"
                        labels-traductions-path="salesTicketsTable"
                        @on-config-saved="visibleColumns = [...$event, 'rowActions']"
                    />
                    <QCheckbox
                        v-model="autoRefresh"
                        :label="t('salesTicketsTable.autoRefresh')"
                        @update:model-value="autoRefreshHandler"
                    />
                </template>
                <template #top-row="{ cols }">
                    <QTr>
                        <QTd
                            v-for="(col, index) in cols"
                            :key="index"
                            style="max-width: 100px"
                        >
                            <component
                                :is="col.columnFilter.component"
                                v-if="col.columnFilter"
                                v-model="col.columnFilter.filterValue"
                                v-bind="col.columnFilter.attrs"
                                v-on="col.columnFilter.event(col)"
                                dense
                                style="padding-bottom: 0"
                            />
                        </QTd>
                    </QTr>
                </template>
                <template #body-cell-problems="{ row }">
                    <QTd class="q-gutter-x-sm">
                        <QIcon
                            v-if="row.isTaxDataChecked === 0"
                            name="vn:no036"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{
                                t('salesTicketsTable.noVerifiedData')
                            }}</QTooltip>
                        </QIcon>
                        <QIcon
                            v-if="row.hasTicketRequest"
                            name="vn:buyrequest"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{
                                t('salesTicketsTable.purchaseRequest')
                            }}</QTooltip>
                        </QIcon>
                        <QIcon
                            v-if="row.itemShortage"
                            name="vn:unavailable"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{ t('salesTicketsTable.notVisible') }}</QTooltip>
                        </QIcon>
                        <QIcon
                            v-if="row.isFreezed"
                            name="vn:frozen"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{ t('salesTicketsTable.clientFrozen') }}</QTooltip>
                        </QIcon>
                        <QIcon
                            v-if="row.risk"
                            name="vn:risk"
                            :color="row.hasHighRisk ? 'negative' : 'primary'"
                            size="xs"
                        >
                            <QTooltip
                                >{{ t('salesTicketsTable.risk') }}:
                                {{ row.risk }}</QTooltip
                            >
                        </QIcon>
                        <QIcon
                            v-if="row.hasComponentLack"
                            name="vn:components"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{
                                t('salesTicketsTable.componentLack')
                            }}</QTooltip>
                        </QIcon>
                        <QIcon
                            v-if="row.isTooLittle"
                            name="vn:isTooLittle"
                            color="primary"
                            size="xs"
                        >
                            <QTooltip>{{ t('salesTicketsTable.tooLittle') }}</QTooltip>
                        </QIcon>
                    </QTd>
                </template>
                <template #body-cell-identifier="{ row }">
                    <QTd>
                        <span class="link" @click.stop.prevent>{{ row.id }}</span>
                        <TicketDescriptorProxy :id="row.id" />
                    </QTd>
                </template>
                <template #body-cell-client="{ row }">
                    <QTd @click.stop.prevent>
                        <span class="link">{{ row.nickname }}</span>
                        <CustomerDescriptorProxy :id="row.clientFk" />
                    </QTd>
                </template>
                <template #body-cell-salesPerson="{ row }">
                    <QTd @click.stop.prevent>
                        <span class="link">{{ row.userName }}</span>
                        <WorkerDescriptorProxy :id="row.salesPersonFk" />
                    </QTd>
                </template>
                <template #body-cell-date="{ row }">
                    <QTd>
                        <QBadge
                            v-bind="getBadgeAttrs(row.shippedDate)"
                            class="q-ma-none"
                            dense
                            style="font-size: 14px"
                        >
                            {{ formatShippedDate(row.shippedDate) }}
                        </QBadge>
                    </QTd>
                </template>
                <template #body-cell-state="{ row }">
                    <QTd @click.stop.prevent>
                        <div v-if="row.refFk">
                            <span class="link">{{ row.refFk }}</span>
                            <InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
                        </div>
                        <QBadge
                            v-else
                            :color="stateColors[row.classColor] || 'transparent'"
                            :text-color="stateColors[row.classColor] ? 'black' : 'white'"
                            dense
                            style="font-size: 14px"
                        >
                            {{ row.state }}
                        </QBadge>
                    </QTd>
                </template>
                <template #body-cell-isFragile="{ row }">
                    <QTd>
                        <QIcon
                            v-if="row.isFragile"
                            name="local_bar"
                            color="primary"
                            size="sm"
                        >
                            <QTooltip>{{ t('salesTicketsTable.isFragile') }}</QTooltip>
                        </QIcon>
                    </QTd>
                </template>
                <template #body-cell-zone="{ row }">
                    <QTd @click.stop.prevent>
                        <span class="link">{{ row.zoneName }}</span>
                        <ZoneDescriptorProxy :id="row.zoneFk" />
                    </QTd>
                </template>
                <template #body-cell-total="{ row }">
                    <QTd>
                        <QBadge
                            :color="totalPriceColor(row) || 'transparent'"
                            :text-color="totalPriceColor(row) ? 'black' : 'white'"
                            dense
                            style="font-size: 14px"
                        >
                            {{ toCurrency(row.totalWithVat) }}
                        </QBadge>
                    </QTd>
                </template>
                <template #body-cell-rowActions="{ row }">
                    <QTd @click.stop.prevent>
                        <QBtn
                            icon="vn:lines"
                            color="primary"
                            size="md"
                            class="q-mr-sm"
                            flat
                            dense
                            :to="{ name: 'TicketSale', params: { id: row.id } }"
                        >
                            <QTooltip>{{ t('salesTicketsTable.goToLines') }}</QTooltip>
                        </QBtn>
                        <QBtn
                            icon="preview"
                            color="primary"
                            size="md"
                            dense
                            flat
                            @click="viewSummary(row.id, TicketSummary)"
                        >
                            <QTooltip>{{ t('salesTicketsTable.preview') }}</QTooltip>
                        </QBtn>
                    </QTd>
                </template>
            </QTable>
        </template>
    </VnPaginate>
</template>
