<script setup lang="ts">
import { ref, computed } from 'vue'

const page = ref(1)
const perPage = ref(10)
const filtreNom = ref('')
const filtreVille = ref<string | number | null>(null)

const columns = [
  { key: 'nom', label: 'Nom' },
  { key: 'prenom', label: 'Prénom' },
  { key: 'ville', label: 'Ville' },
  { key: 'montant', label: 'Montant' },
]

const allItems = [
  { id: 1, nom: 'Dupont', prenom: 'Jean', ville: 'Paris', montant: 1200 },
  { id: 2, nom: 'Martin', prenom: 'Marie', ville: 'Lyon', montant: 850 },
  { id: 3, nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille', montant: 2100 },
  { id: 4, nom: 'Petit', prenom: 'Sophie', ville: 'Paris', montant: 950 },
  { id: 5, nom: 'Robert', prenom: 'Paul', ville: 'Lyon', montant: 1800 },
  { id: 6, nom: 'Richard', prenom: 'Claire', ville: 'Marseille', montant: 3200 },
  { id: 7, nom: 'Durand', prenom: 'Luc', ville: 'Paris', montant: 750 },
  { id: 8, nom: 'Moreau', prenom: 'Anne', ville: 'Lyon', montant: 1100 },
  { id: 9, nom: 'Simon', prenom: 'Marc', ville: 'Marseille', montant: 2400 },
  { id: 10, nom: 'Laurent', prenom: 'Julie', ville: 'Paris', montant: 1650 },
  { id: 11, nom: 'Lefebvre', prenom: 'Thomas', ville: 'Lyon', montant: 900 },
  { id: 12, nom: 'Leroy', prenom: 'Emma', ville: 'Marseille', montant: 1400 },
  { id: 13, nom: 'Roux', prenom: 'Hugo', ville: 'Paris', montant: 2800 },
  { id: 14, nom: 'David', prenom: 'Léa', ville: 'Lyon', montant: 670 },
  { id: 15, nom: 'Bertrand', prenom: 'Lucas', ville: 'Marseille', montant: 1950 },
]

const filteredItems = computed(() => {
  return allItems.filter((item) => {
    if (filtreNom.value && !item.nom.toLowerCase().includes(filtreNom.value.toLowerCase())) return false
    if (filtreVille.value && item.ville !== filtreVille.value) return false
    return true
  })
})

const paginatedItems = computed(() => {
  const start = (page.value - 1) * perPage.value
  return filteredItems.value.slice(start, start + perPage.value)
})

function onRowClick(item: Record<string, unknown>) {
  alert(`Clic sur ${item.nom} ${item.prenom} (id: ${item.id})`)
}
</script>

<template>
  <div class="space-y-6">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">DataTable avec filtres et pagination</h2>
      <MalioDataTable
        :columns="columns"
        :items="paginatedItems"
        :total-items="filteredItems.length"
        v-model:page="page"
        v-model:per-page="perPage"
        @row-click="onRowClick"
      >
        <template #header-nom>
          <input
            v-model="filtreNom"
            type="text"
            placeholder="Nom"
            class="w-full border-0 border-b border-black bg-transparent px-0 py-1 outline-none text-[20px]"
          >
        </template>

        <template #header-ville>
          <select
            :value="filtreVille ?? ''"
            class="w-full appearance-none border-0 border-b border-black bg-transparent px-0 py-1 text-[20px] outline-none"
            @change="filtreVille = ($event.target as HTMLSelectElement).value || null"
          >
            <option value="">Ville</option>
            <option value="Paris">Paris</option>
            <option value="Lyon">Lyon</option>
            <option value="Marseille">Marseille</option>
          </select>
        </template>

        <template #cell-montant="{ item }">
          <strong>{{ item.montant }} €</strong>
        </template>
      </MalioDataTable>
    </div>
  </div>
</template>
