<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:;">Lavandería</a></li>
                <li class="breadcrumb-item active" aria-current="page">
                  <span>Entrada de operador</span>
                </li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row layout-top-spacing">
      <div class="col-12">
        <div class="panel lavanderia-panel p-4">
          <h4 class="mb-2">Panel de entrada de operador</h4>
          <p class="text-muted small mb-3">
            Esta vista valida tus permisos y te lleva al área correcta para escaneo operativo.
          </p>

          <div class="alert" :class="canOperateAnyArea ? 'alert-success' : 'alert-warning'">
            <strong>Diagnóstico de acceso:</strong>
            <div class="small mt-1">
              - Permiso <code>lavanderia.operador</code>: {{ hasOperatorPermission ? "OK" : "FALTA" }}<br />
              - Áreas operables (<code>area.*.operate</code>): {{ operableAreas.length }}
            </div>
          </div>

          <div v-if="operableAreas.length" class="mb-3">
            <p class="small text-muted mb-2">Áreas disponibles para este usuario:</p>
            <div class="small mb-2">
              <strong>{{ operableAreas.length }}</strong> área(s):
              <span class="text-muted">{{ operableAreas.map((code) => areaLabel(code)).join(", ") }}</span>
            </div>
            <div class="d-flex flex-wrap gap-2">
              <router-link
                v-for="code in operableAreas"
                :key="code"
                class="btn btn-outline-primary btn-sm"
                :to="{ name: 'lavanderia-area-router', params: { areaCode: code } }"
              >
                {{ areaLabel(code) }}
              </router-link>
            </div>
          </div>

          <div class="d-flex flex-wrap gap-2">
            <button
              type="button"
              class="btn btn-primary btn-sm"
              :disabled="!firstOperableArea"
              @click="goToFirstArea"
            >
              Ir a mi primera área operable
            </button>
            <router-link to="/lavanderia/operador/lavado" class="btn btn-outline-secondary btn-sm">
              Panel operador legacy
            </router-link>
          </div>

          <div v-if="!canOperateAnyArea" class="alert alert-danger mt-3 mb-0">
            No se detectaron permisos <code>area.*.operate</code>. Solicite a un administrador ejecutar/validar
            <code>AreaPermissionSeeder</code> y la asignación de área del usuario.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { usePermissions } from "@/composables/use-permissions";
import { TIBU_AREA_CODES } from "@/constants/tibuAreas";

const router = useRouter();
const { t } = useI18n();
const { loadPermissions, hasPermission } = usePermissions();

const hasOperatorPermission = computed(() => hasPermission("lavanderia.operador"));
const operableAreas = computed(() =>
  TIBU_AREA_CODES.filter((code) => hasPermission(`area.${code}.operate`))
);
const firstOperableArea = computed(() => operableAreas.value[0] ?? null);
const canOperateAnyArea = computed(() => operableAreas.value.length > 0);

function areaLabel(code) {
  const key = `lavanderia.area.codes.${code}`;
  const translated = t(key);
  return translated === key ? code : translated;
}

async function goToFirstArea() {
  if (!firstOperableArea.value) return;
  await router.push({ name: "lavanderia-area-router", params: { areaCode: firstOperableArea.value } });
}

onMounted(async () => {
  await loadPermissions();
});
</script>
