<template>
  <Layout>
    <h2 class="page-title">User &amp; Role Management</h2>
    <p class="page-sub">Add, edit, or deactivate users.</p>

    <div class="toolbar">
      <button class="btn-primary" @click="openCreate">+ New user</button>
    </div>

    <div class="panel">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Department</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="u in users" :key="u.id">
            <td>{{ u.name }}</td>
            <td>{{ roleLabel(u.role) }}</td>
            <td>{{ u.department }}</td>
            <td>
              <span v-if="u.active" class="badge b-green">Active</span>
              <span v-else class="badge b-grey">Inactive</span>
            </td>
            <td class="row-actions">
              <button class="btn-sm" @click="openEdit(u)">Edit</button>
              <button class="btn-sm" :class="u.active ? 'red' : 'green'" @click="toggleActive(u)">
                {{ u.active ? 'Deactivate' : 'Activate' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <Modal :show="showModal" :title="form.id ? 'Edit User' : 'New User'" @close="showModal = false">
       <form @submit.prevent="submit">
         <div class="field">
           <label>Name</label>
           <input v-model="form.name" required />
         </div>
         <div class="field">
           <label>Role</label>
           <select v-model="form.role" required>
             <option value="technician">Technician</option>
             <option value="supervisor">Supervisor</option>
             <option value="management">Management</option>
             <option value="administrator">Administrator</option>
           </select>
         </div>
         <div class="field">
           <label>Department</label>
           <input v-model="form.department" />
         </div>
         <div class="modal-actions">
           <button type="button" class="btn-sm" @click="showModal = false">Cancel</button>
           <button type="submit" class="btn-primary" :disabled="form.processing">Save</button>
         </div>
       </form>
    </Modal>
  </Layout>
</template>

<script setup>
import { ref } from 'vue'
import { router, useForm } from '@inertiajs/vue3'
import Layout from '../../Shared/Layout.vue'
import Modal from '../../Shared/Modal.vue'

defineProps({
  users: Array
})

const showModal = ref(false)
const form = useForm({
  id: null,
  name: '',
  role: 'technician',
  department: 'Telecom & Navigation'
})

const roleLabel = (role) => {
  const map = { technician: 'Technician', supervisor: 'Supervisor', management: 'Management', administrator: 'Administrator' }
  return map[role] || role
}

const openCreate = () => {
  form.reset()
  form.id = null
  showModal.value = true
}

const openEdit = (u) => {
  form.id = u.id
  form.name = u.name
  form.role = u.role
  form.department = u.department
  showModal.value = true
}

const submit = () => {
  if (form.id) {
    form.put(window.route('users.update', form.id), {
      onSuccess: () => showModal.value = false
    })
  } else {
    form.post(window.route('users.store'), {
      onSuccess: () => showModal.value = false
    })
  }
}

const toggleActive = (user) => {
  if (user.active) {
    if (confirm('Deactivate this user?')) router.delete(window.route('users.destroy', user.id))
  } else {
    router.put(window.route('users.update', user.id), { active: true })
  }
}
</script>
