<template>
    <div class="mt-6 mx-[6px]">
        <table class="w-full border border-slate-300 table-fixed">
            <thead class="bg-slate-100 capitalize tracking-wide">
            <tr>
                <th
                    v-for="column in normalizedColumns"
                    :key="column.key"
                    class="border border-slate-300 px-2 py-1"
                >
                    <div class="flex flex-col gap-1">
                        <UiSelect
                            v-if="column.isSearchable && column.type === 'selectTypeReception'"
                            v-model="searchValues[column.key]"
                            :placeholder="column.label"
                            select-class="w-full !text-sm !py-1"
                            :options="[
                                    { value: '__all__', label: 'Tous' },
                                    ...receptionTypes.map((type) => ({
                                        value: type.label,
                                        label: type.label
                                    }))
                                ]"
                        />
                        <UiSelect
                            v-else-if="column.isSearchable && column.type === 'selectTypeShipment'"
                            v-model="searchValues[column.key]"
                            :placeholder="column.label"
                            select-class="w-full !text-sm !py-1"
                            :options="[
                                    { value: '__all__', label: 'Tous' },
                                    ...shipmentTypes.map((type) => ({
                                        value: type.label,
                                        label: type.label
                                    }))
                                ]"
                        />
                        <div v-else-if="column.isSearchable" class="relative">
                            <UiTextInput
                                v-model="searchValues[column.key]"
                                :placeholder="column.label"
                                input-class="min-w-full !text-sm !py-1 !pr-7"
                            />
                            <Icon
                                name="gg:search"
                                class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-slate-400"
                            />
                        </div>
                        <span v-else>{{ column.label }}</span>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="loading">
                <td
                    class="border border-slate-300 px-2 py-2 whitespace-pre-line"
                    :colspan="normalizedColumns.length || 1"
                >
                    Chargement...
                </td>
            </tr>
            <tr v-else-if="displayedRows.length === 0">
                <td
                    class="border border-slate-300 px-3 py-2 text-left text-slate-500"
                    :colspan="normalizedColumns.length || 1"
                >
                    Aucune donnée
                </td>
            </tr>
            <template v-else>
                <tr
                    v-for="(row, rowIndex) in displayedRows"
                    class="hover:bg-primary-500 hover:bg-opacity-15"
                    :key="rowIndex"
                    :class="props.rowClickable ? 'cursor-pointer' : ''"
                    @click="props.rowClickable ? onRowClick(row) : null"
                >
                    <td
                        v-for="column in normalizedColumns"
                        :key="column.key"
                        class="border border-slate-300 px-2 py-2 whitespace-pre-line "
                    >
                        {{ formatColumnValue(row, column) }}
                    </td>
                </tr>
            </template>
            </tbody>
        </table>

        <div class="flex items-center justify-between mt-4">
            <p class="text-slate-600">
                {{ pageLabel }}
            </p>
            <div class="flex items-center gap-2">
                <button
                    type="button"
                    class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
                    :disabled="currentPage <= 1 || loading"
                    @click="currentPage = currentPage - 1"
                >
                    Précédent
                </button>
                <button
                    v-for="(item, index) in paginationItems"
                    :key="`${item}-${index}`"
                    type="button"
                    class="min-w-9 rounded border px-2 py-1"
                    :class="item === currentPage
                            ? 'border-primary-500 bg-primary-500 text-white'
                            : 'border-slate-300'"
                    :disabled="loading || item === '...'"
                    @click="typeof item === 'number' ? (currentPage = item) : null"
                >
                    {{ item }}
                </button>

                <button
                    type="button"
                    class="rounded border border-slate-300 px-2 py-1 disabled:cursor-not-allowed disabled:opacity-50"
                    :disabled="currentPage >= totalPages || loading"
                    @click="currentPage = currentPage + 1"
                >
                    Suivant
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Row, ColumnConfig, AnyCollection, PaginationItem} from '~/services/dto/datatable-data'
import {useApi} from '~/composables/useApi'
import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
import {getReceptionTypeList} from '~/services/reception-type'
import type {ShipmentTypeData} from "~/services/dto/shipment-data";
import {getShipmentTypeList} from "~/services/shipment-type";

const api = useApi()
const receptionTypes = ref<ReceptionTypeData[]>([])
const shipmentTypes = ref<ShipmentTypeData[]>([])
const loading = ref(false)
const currentPage = ref(1)
const rows = ref<Row[]>([])
const total = ref(0)
const searchValues = reactive<Record<string, string>>({})
const isNestedMode = computed(() => Boolean(props.responsePath))
const effectiveTotal = computed(() => total.value)
const emit = defineEmits<{
    rowClick: [row: Row]
}>()

const props = withDefaults(defineProps<{
    url?: string
    responsePath?: string
    columns?: ColumnConfig[]
    query?: Record<string, unknown>
    itemsPerPage?: number
    rowClickable?: boolean
}>(), {
    url: '',
    responsePath: '',
    columns: () => [],
    query: () => ({}),
    itemsPerPage: 10,
    rowClickable: true
})
const displayedRows = computed<Row[]>(() => {
    if (!isNestedMode.value) return rows.value

    const startIndex = (currentPage.value - 1) * props.itemsPerPage
    const endIndex = startIndex + props.itemsPerPage
    return rows.value.slice(startIndex, endIndex)
})
onMounted(async () => {
    receptionTypes.value = await getReceptionTypeList()
    shipmentTypes.value = await getShipmentTypeList()

})
const normalizedColumns = computed(() => {
    if (props.columns.length > 0) {
        return props.columns.map((column) => ({
            key: column.key,
            label: column.label ?? column.key,
            format: column.format,
            isSearchable: column.isSearchable ?? false,
            type: column.type
        }))
    }

    if (displayedRows.value.length === 0) {
        return []
    }

    return Object.keys(displayedRows.value[0])
        .filter((key) => !key.startsWith('@'))
        .map((key) => ({
            key,
            label: key
        }))
})

const totalPages = computed(() => Math.max(1, Math.ceil(effectiveTotal.value / props.itemsPerPage)))

function getVisiblePages(page: number, lastPage: number): number[] {
    const candidates = new Set([1, page - 1, page, page + 1, lastPage])
    return Array.from(candidates)
        .filter((p) => p >= 1 && p <= lastPage)
        .sort((a, b) => a - b)
}

function insertEllipses(sortedPages: number[]): PaginationItem[] {
    const items: PaginationItem[] = []

    for (let i = 0; i < sortedPages.length; i++) {
        const current = sortedPages[i]
        const previous = sortedPages[i - 1]
        if (previous != null && current - previous > 1) {
            items.push('...')
        }
        items.push(current)
    }
    return items
}

const paginationItems = computed<PaginationItem[]>(() => {
    const pages = getVisiblePages(currentPage.value, totalPages.value)
    return insertEllipses(pages)
})

const pageLabel = computed(() => {
    if (!effectiveTotal.value) return '0 résultat'

    const start = (currentPage.value - 1) * props.itemsPerPage + 1
    const end = Math.min(currentPage.value * props.itemsPerPage, effectiveTotal.value)

    return `${start}-${end} sur ${effectiveTotal.value}`
})

watch(
    () => [props.url, props.itemsPerPage, JSON.stringify(props.query ?? {}), props.responsePath],
    async () => {
        if (currentPage.value !== 1) {
            currentPage.value = 1
            if (!isNestedMode.value) return
        }
        await loadPage()
    },
    {immediate: true}
)

let timeout: ReturnType<typeof setTimeout>

watch(
    () => ({...searchValues}),
    () => {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
            currentPage.value = 1
            if (!isNestedMode.value) loadPage()
        }, 750)
    },
    {deep: true}
)

watch(
    () => currentPage.value,
    async () => {
        if (isNestedMode.value) return
        await loadPage()
    }
)

watch(
    () => [totalPages.value, currentPage.value],
    () => {
        if (currentPage.value > totalPages.value) {
            currentPage.value = totalPages.value
        }
    },
    {immediate: true}
)

function buildDateInterval(value: string): { after: string; before: string } | null {
    const trimmed = value.trim()

    // YYYY
    if (/^\d{4}$/.test(trimmed)) {
        const year = Number(trimmed)
        return {
            after: `${year}-01-01`,
            before: `${year + 1}-01-01`
        }
    }

    // YYYY-MM
    if (/^\d{4}-\d{2}$/.test(trimmed)) {
        const [year, month] = trimmed.split('-').map(Number)

        const nextMonth = month === 12 ? 1 : month + 1
        const nextYear = month === 12 ? year + 1 : year

        return {
            after: `${year}-${String(month).padStart(2, '0')}-01`,
            before: `${nextYear}-${String(nextMonth).padStart(2, '0')}-01`
        }
    }

    // YYYY-MM-DD
    if (/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) {
        const date = new Date(`${trimmed}T00:00:00`)
        const nextDay = new Date(date)
        nextDay.setDate(date.getDate() + 1)

        const yyyy = nextDay.getFullYear()
        const mm = String(nextDay.getMonth() + 1).padStart(2, '0')
        const dd = String(nextDay.getDate()).padStart(2, '0')

        return {
            after: trimmed,
            before: `${yyyy}-${mm}-${dd}`
        }
    }

    return null
}


// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
async function loadPage(): Promise<void> {
    if (!props.url) {
        rows.value = []
        total.value = 0
        return
    }

    loading.value = true

    try {
        if (isNestedMode.value) {
            const response = await api.get<Row>(props.url, props.query, {
                headers: {
                    Accept: 'application/ld+json'
                }
            })
            const nestedRows = readPath(response, props.responsePath)
            rows.value = Array.isArray(nestedRows) ? nestedRows as Row[] : []
            total.value = rows.value.length
            return
        }
        const searchQuery: Record<string, string> = {}

        for (const column of normalizedColumns.value) {
            if (!column.isSearchable) continue

            const rawValue = searchValues[column.key] ?? ''
            const raw = rawValue === '__all__' ? '' : rawValue.trim()
            if (!raw) continue

            const paramBase = column.key

            if (column.type === 'date') {
                const interval = buildDateInterval(raw)

                if (interval) {
                    searchQuery[`${paramBase}[after]`] = interval.after
                    searchQuery[`${paramBase}[before]`] = interval.before
                }

                continue
            }

            searchQuery[paramBase] = raw
        }

        const requestQuery: Record<string, unknown> = {
            ...props.query,
            ...searchQuery,
            page: currentPage.value,
            itemsPerPage: props.itemsPerPage,
        }

        const response = await api.get<AnyCollection<Row> | Row[]>(props.url, requestQuery, {
            headers: {
                Accept: 'application/ld+json'
            }
        })

        if (Array.isArray(response)) {
            rows.value = response
            total.value = response.length
            return
        }

        const mappedRows = response['hydra:member'] ?? response.member ?? response.items ?? []
        rows.value = Array.isArray(mappedRows) ? mappedRows : []
        total.value = Number(response['hydra:totalItems'] ?? response.totalItems ?? rows.value.length)
    } finally {
        loading.value = false
    }
}

function onRowClick(row: Row): void {
    emit('rowClick', row)
}

// Lit une valeur imbriquée dans une ligne à partir d'un chemin de type "objet.sousObjet.cle".
function readPath(source: Row, path: string): unknown {
    return path.split('.').reduce<unknown>((acc, key) => (acc as Row | undefined)?.[key], source)
}

// Formate une valeur brute pour l'affichage dans une cellule (vide, tableau, objet ou valeur simple).
function formatCell(value: unknown): string {
    if (value == null || value === '') return '-'

    if (Array.isArray(value)) return value.length ? value.map(formatCell).join(', ') : '-'

    if (typeof value === 'object') {
        const objectValue = value as Row
        return String(objectValue.label ?? objectValue.name ?? objectValue.code ?? objectValue.id ?? '[object]')
    }
    return String(value)
}

function formatColumnValue(
    row: Row,
    column: { key: string; format?: (value: unknown, row: Row) => string }
): string {
    const value = readPath(row, column.key)
    if (column.format) {
        return column.format(value, row)
    }

    return formatCell(value)
}
</script>
