<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>Panel de Operador - {{ etiquetaEtapa(areaActual) }}</span>
                </li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
        <div class="panel p-3 text-center">
          <h4 class="mb-3">
            Órdenes pendientes de {{ etiquetaEtapa(areaActual) }}
          </h4>
          <p class="text-muted mb-4">
            Interfaz simplificada para tablets o celulares. Toque una orden para
            avanzar a la siguiente etapa.
          </p>

          <div class="btn-group mb-3" role="group">
            <button
              type="button"
              class="btn"
              :class="areaActual === 'lavado' ? 'btn-primary' : 'btn-outline-primary'"
              @click="cambiarArea('lavado')"
            >
              Lavado
            </button>
            <button
              type="button"
              class="btn"
              :class="areaActual === 'secado' ? 'btn-primary' : 'btn-outline-primary'"
              @click="cambiarArea('secado')"
            >
              Secado
            </button>
            <button
              type="button"
              class="btn"
              :class="areaActual === 'planchado' ? 'btn-primary' : 'btn-outline-primary'"
              @click="cambiarArea('planchado')"
            >
              Planchado
            </button>
          </div>

          <div class="row g-3">
            <div
              v-for="orden in ordenes"
              :key="orden.id"
              class="col-xl-3 col-lg-4 col-md-6 col-sm-12"
            >
              <button
                class="btn btn-lg w-100 operador-btn"
                :class="{
                  'btn-outline-success': orden.minutos_en_etapa <= 30,
                  'btn-outline-danger': orden.minutos_en_etapa > 30,
                }"
                @click="avanzar(orden)"
              >
                <div class="fw-bold">{{ orden.folio_unico }}</div>
                <div class="small">{{ orden.cliente_nombre }}</div>
                <div class="small text-muted">
                  {{ orden.minutos_en_etapa }} min en etapa
                </div>
                <div
                  v-if="orden.instrucciones"
                  class="small text-warning mt-1 text-truncate"
                >
                  {{ orden.instrucciones }}
                </div>
              </button>
            </div>

            <div v-if="!ordenes.length && !isLoading" class="col-12">
              <div class="alert alert-info mb-0">
                No hay órdenes pendientes en esta área.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <loading
      v-model:active="isLoading"
      :can-cancel="false"
      :is-full-page="true"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/css/index.css";
import { useMeta } from "@/composables/use-meta";
import * as OrdenLavanderiaRepository from "@/repositories/OrdenLavanderiaRepository";

useMeta({ title: "Operador Lavandería" });

const route = useRoute();
const router = useRouter();

const areaActual = ref(route.params.area || "lavado");
const ordenes = ref([]);
const isLoading = ref(false);

const etiquetaEtapa = (step) => {
  const map = {
    lavado: "Lavado",
    secado: "Secado",
    planchado: "Planchado",
  };
  return map[step] || step;
};

const showMessage = (msg = "", type = "success") => {
  const toast = window.Swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 2500,
    timerProgressBar: true,
  });

  toast.fire({
    icon: type,
    title: msg,
  });
};

const cargarDatos = async () => {
  isLoading.value = true;
  try {
    // Usamos el dashboard resumen y filtramos por etapa actual
    const response = await OrdenLavanderiaRepository.getDashboardResumen();
    const data = response.data || [];
    ordenes.value = data.filter(
      (o) => o.current_step === areaActual.value
    );
  } catch (error) {
    console.error(error);
    showMessage("Error al cargar órdenes", "error");
  } finally {
    isLoading.value = false;
  }
};

const cambiarArea = async (area) => {
  areaActual.value = area;
  await router.replace({ name: "lavanderia-operador-router", params: { area } });
  await cargarDatos();
};

const avanzar = async (orden) => {
  try {
    isLoading.value = true;
    await OrdenLavanderiaRepository.avanzarOrden(orden.id);
    showMessage("Orden actualizada", "success");
    await cargarDatos();
  } catch (error) {
    console.error(error);
    showMessage("Error al avanzar la orden", "error");
  } finally {
    isLoading.value = false;
  }
};

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

<style scoped>
.operador-btn {
  padding: 1.5rem 1rem;
  font-size: 1.1rem;
  border-width: 2px;
}
</style>

