<template>
  <div class="layout-px-spacing">
    <teleport to="#breadcrumb">
      <ul class="navbar-nav flex-row">
        <li>
          <div class="page-header">
            <nav class="breadcrumb-one" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:;">{{ $t("common.catalogs_breadcrumb") }}</a></li>
                <li class="breadcrumb-item active" aria-current="page"><span>{{ $t("catalogos.tipos_servicio.breadcrumb") }}</span></li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row">
      <div class="col-12">
        <div class="panel lavanderia-panel p-4">
          <h4 class="mb-1">{{ $t("catalogos.tipos_servicio.page_title") }}</h4>
          <p class="text-muted small mb-3">{{ $t("catalogos.tipos_servicio.subtitle") }}</p>

          <div v-if="loading" class="text-center py-4"><div class="spinner-border text-primary"></div></div>
          <div v-else class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>{{ $t("common.th_id") }}</th>
                  <th>{{ $t("common.th_code") }}</th>
                  <th>{{ $t("common.th_name") }}</th>
                  <th class="text-end">{{ $t("common.th_sort") }}</th>
                  <th v-if="canDelete" class="text-center">{{ $t("catalogos.tipos_servicio.th_actions") }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in rows" :key="row.id">
                  <td>{{ row.id }}</td>
                  <td>{{ row.code }}</td>
                  <td>{{ row.name }}</td>
                  <td class="text-end">{{ row.sort_order }}</td>
                  <td v-if="canDelete" class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-danger" @click="deleteRow(row)">
                      {{ $t("common.delete_btn") }}
                    </button>
                  </td>
                </tr>
                <tr v-if="rows.length === 0">
                  <td :colspan="canDelete ? 5 : 4" class="text-center text-muted">{{ $t("catalogos.tipos_servicio.empty") }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { usePageTitle } from "@/composables/use-meta";
import { useConfirmDelete } from "@/composables/useConfirmDelete";
import { usePermissions } from "@/composables/use-permissions";
import * as CatalogosTiposServicioRepository from "@/repositories/CatalogosTiposServicioRepository";

const { t } = useI18n();
const { confirmDelete } = useConfirmDelete();
const { can } = usePermissions();
usePageTitle(computed(() => t("catalogos.tipos_servicio.page_title")));

const canDelete = computed(() => can("administracion.areas"));
const loading = ref(true);
const rows = ref([]);

async function load() {
  loading.value = true;
  try {
    const res = await CatalogosTiposServicioRepository.listTiposServicio();
    rows.value = Array.isArray(res?.data) ? res.data : [];
  } catch {
    rows.value = [];
  } finally {
    loading.value = false;
  }
}

async function deleteRow(row) {
  await confirmDelete({
    label: row.name,
    onDelete: () => CatalogosTiposServicioRepository.deleteTipoServicio(row.id),
    onSuccess: async () => {
      window.Swal?.fire?.({ icon: "success", title: t("common.deleted_ok"), toast: true, timer: 2000, position: "top-end" });
      await load();
    },
  });
}

onMounted(load);
</script>
