<template>
  <div>
    <div class="flex items-center justify-between pb-12">
      <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
      <button
        type="button"
        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
        @click="isDrawerOpen = true"
      >
        Ajouter un employé
      </button>
    </div>

    <div
      v-if="!isLoading && employees.length === 0"
      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
    >
      Aucun employé pour le moment.
    </div>

    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
      <div class="grid grid-cols-[120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
        <span class="text-left">Prénom</span>
        <span class="text-left">Nom</span>
        <span class="text-right">Actions</span>
      </div>
      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
        Chargement...
      </div>
      <div v-else>
        <div
          v-for="employee in employees"
          :key="employee.id"
          class="grid grid-cols-[120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
        >
          <span>{{ employee.firstName }}</span>
          <span>{{ employee.lastName }}</span>
          <div class="flex items-center justify-end gap-2">
            <button
              type="button"
              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
              @click="openEdit(employee)"
            >
              Modifier
            </button>
            <button
              type="button"
              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
              @click="confirmDelete(employee)"
            >
              Supprimer
            </button>
          </div>
        </div>
      </div>
    </div>

    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
      <form class="space-y-4" @submit.prevent="handleSubmit">
        <div>
          <label class="text-md font-semibold text-neutral-700" for="first-name">Prénom</label>
          <input
            id="first-name"
            v-model="form.firstName"
            type="text"
            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
          />
        </div>
        <div>
          <label class="text-md font-semibold text-neutral-700" for="last-name">Nom</label>
          <input
            id="last-name"
            v-model="form.lastName"
            type="text"
            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
          />
        </div>
        <div class="flex justify-end gap-3 pt-2">
          <button
            type="button"
            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
            @click="isDrawerOpen = false"
          >
            Annuler
          </button>
          <button
            type="submit"
            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
            :disabled="isSubmitting"
          >
            Enregistrer
          </button>
        </div>
      </form>
    </AppDrawer>
  </div>
</template>

<script setup lang="ts">
import type { Employee } from '~/services/dto/employee'
import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'

const isDrawerOpen = ref(false)
const isSubmitting = ref(false)
const isLoading = ref(false)
const editingEmployee = ref<Employee | null>(null)
const drawerTitle = computed(() =>
  editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
)

const employees = ref<Employee[]>([])

const form = reactive({
  firstName: '',
  lastName: ''
})

const loadEmployees = async () => {
  isLoading.value = true
  try {
    employees.value = await listEmployees()
  } finally {
    isLoading.value = false
  }
}

onMounted(loadEmployees)

const handleSubmit = async () => {
  if (isSubmitting.value) return

  isSubmitting.value = true
  try {
    if (editingEmployee.value) {
      await updateEmployee(editingEmployee.value.id, {
        firstName: form.firstName,
        lastName: form.lastName
      })
    } else {
      await createEmployee({
        firstName: form.firstName,
        lastName: form.lastName
      })
    }

    form.firstName = ''
    form.lastName = ''
    editingEmployee.value = null
    isDrawerOpen.value = false
    await loadEmployees()
  } finally {
    isSubmitting.value = false
  }
}

const openEdit = (employee: Employee) => {
  editingEmployee.value = employee
  form.firstName = employee.firstName
  form.lastName = employee.lastName
  isDrawerOpen.value = true
}

const confirmDelete = async (employee: Employee) => {
  const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
  if (!ok) return

  await deleteEmployee(employee.id)
  await loadEmployees()
}
</script>
