<template>
    <div class="mt-6">
        <table class="min-w-full border-collapse border border-slate-300">
            <thead class="gap-4 bg-slate-100 px-4 py-3 uppercase tracking-wide">
            <tr>
                <th
                    v-for="column in normalizedColumns"
                    :key="column.key"
                    class="border border-slate-300 px-3 py-2 text-left"
                >
                    <span>{{ column.label }}</span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="loading">
                <td
                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
                    :colspan="normalizedColumns.length || 1"
                >
                    Chargement...
                </td>
            </tr>
            <tr v-else-if="rows.length === 0">
                <td
                    class="border border-slate-300 px-3 py-2 text-center text-slate-500"
                    :colspan="normalizedColumns.length || 1"
                >
                    Aucune donnée
                </td>
            </tr>
            <template v-else>
                <tr
                    v-for="(row, rowIndex) in rows"
                    :key="rowIndex"
                    class="cursor-pointer"
                    @click="onRowClick(row)"
                >
                    <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">
            <p class="text-sm text-slate-600">
                {{ pageLabel }}
            </p>
            <div class="flex items-center gap-2 mt-4">
                <button
                    type="button"
                    class="rounded border border-slate-300 px-3 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-3 py-1 disabled:cursor-default"
                    :class="typeof item === 'number' && 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-3 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">
type Row = Record<string, unknown>

type ColumnConfig = {
    key: string
    label?: string
    format?: (value: unknown, row: Row) => string
}
type HydraCollection<T> = {
    'hydra:member': T[]
    'hydra:totalItems': number
}
type AnyCollection<T> = HydraCollection<T> & {
    member?: T[]
    items?: T[]
    totalItems?: number
}

const props = withDefaults(defineProps<{
    url: string
    columns?: ColumnConfig[]
    query?: Record<string, unknown>
    itemsPerPage?: number
}>(), {
    columns: () => [],
    query: () => ({}),
    itemsPerPage: 10
})

const api = useApi()
const emit = defineEmits<{
    rowClick: [row: Row]
}>()
const loading = ref(false)
const currentPage = ref(1)
const rows = ref<Row[]>([])
const total = ref(0)

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

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

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

const totalPages = computed(() => Math.max(1, Math.ceil(total.value / props.itemsPerPage)))
const paginationItems = computed<Array<number | '...'>>(() => {
    const totalPagesValue = totalPages.value
    const page = currentPage.value

    if (totalPagesValue <= 7) {
        return Array.from({ length: totalPagesValue }, (_, index) => index + 1)
    }

    const pages = new Set<number>([1, totalPagesValue, page - 1, page, page + 1])
    const sortedPages = Array.from(pages)
        .filter((value) => value >= 1 && value <= totalPagesValue)
        .sort((a, b) => a - b)

    const items: Array<number | '...'> = []
    for (let i = 0; i < sortedPages.length; i++) {
        const value = sortedPages[i]
        const previousValue = sortedPages[i - 1]
        if (previousValue != null && value - previousValue > 1) {
            items.push('...')
        }
        items.push(value)
    }

    return items
})
const pageLabel = computed(() => {
    if (total.value === 0) {
        return '0 resultat'
    }
    const start = (currentPage.value - 1) * props.itemsPerPage + 1
    const end = Math.min(currentPage.value * props.itemsPerPage, total.value)
    return `${start}-${end} sur ${total.value}`
})

// Surveille pagination et filtres pour recharger la liste ; si les filtres changent, revient d'abord à la page 1.
watch(
    () => ({
        page: currentPage.value,
        query: props.query,
        url: props.url,
        itemsPerPage: props.itemsPerPage
    }),
    async (state, previousState) => {
        const queryChanged = JSON.stringify(state.query ?? {}) !== JSON.stringify(previousState?.query ?? {})

        if (queryChanged && state.page !== 1) {
            currentPage.value = 1
            return
        }

        await loadPage()
    },
    {immediate: true, deep: true}
)

// Construit la requête, charge les données et normalise la réponse, puis met à jour rows et total
async function loadPage(): Promise<void> {
    loading.value = true

    try {
        const requestQuery: Record<string, unknown> = {
            ...props.query,
            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)
}

// Résout la valeur de colonne pour une ligne et applique un formateur personnalisé s'il existe.
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>
