<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>Escanear QR</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">
          <div class="row">
            <div class="col-xl-12 col-lg-12 col-sm-12">
              <div class="text-center titulo-dorado">
                <h3 class="pull-left">Escanear Orden de Lavandería</h3>
              </div>
            </div>
          </div>
          <div class="row mt-4">
            <div class="col-md-6 offset-md-3">
              <div class="card">
                <div class="card-body">
                  <div class="form-group mb-3">
                    <label>Código QR o Folio</label>
                    <input
                      type="text"
                      class="form-control form-control-lg text-center"
                      placeholder="Escanee el código QR o ingrese el folio"
                      v-model="codigo"
                      @keyup.enter="escanear"
                      autofocus
                    />
                  </div>
                  <button
                    type="button"
                    class="btn btn-primary btn-lg w-100"
                    @click="escanear"
                    :disabled="!codigo || escaneando"
                  >
                    {{ escaneando ? "Escaneando..." : "Escanear e Iniciar" }}
                  </button>
                </div>
              </div>

              <div v-if="ordenEncontrada" class="card mt-3">
                <div class="card-body">
                  <h5 class="card-title text-success">
                    ✓ Orden encontrada: {{ ordenEncontrada.folio_unico }}
                  </h5>
                  <p class="mb-1">
                    <strong>Cliente:</strong> {{ ordenEncontrada.cliente_nombre }}
                  </p>
                  <p class="mb-1">
                    <strong>Servicio:</strong> {{ ordenEncontrada.tipo_servicio }}
                  </p>
                  <p class="mb-1">
                    <strong>Etapa actual:</strong>
                    <span class="badge bg-info ms-1">
                      {{ etiquetaEtapa(ordenEncontrada.current_step) }}
                    </span>
                  </p>
                  <p v-if="ordenEncontrada.instrucciones" class="mb-2">
                    <strong>Instrucciones:</strong>
                    <span class="text-warning">
                      {{ ordenEncontrada.instrucciones }}
                    </span>
                  </p>
                  <button
                    type="button"
                    class="btn btn-success btn-lg w-100 mt-2"
                    @click="avanzarOrden"
                    :disabled="avanzando"
                  >
                    {{ avanzando ? "Avanzando..." : "Iniciar/Avanzar Etapa" }}
                  </button>
                </div>
              </div>

              <div v-if="errorMensaje" class="alert alert-danger mt-3">
                {{ errorMensaje }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

<script setup>
import { ref } from "vue";
import axios from "axios";
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: "Escanear QR Lavandería" });

const codigo = ref("");
const escaneando = ref(false);
const isLoading = ref(false);
const ordenEncontrada = ref(null);
const errorMensaje = ref("");
const avanzando = ref(false);

const etiquetaEtapa = (step) => {
  const map = {
    recepcion: "Recepción",
    lavado: "Lavado",
    secado: "Secado",
    planchado: "Planchado",
    terminado: "Terminado",
    entregado: "Entregado",
  };
  return map[step] || step;
};

const showMessage = (msg = "", type = "success") => {
  const toast = window.Swal.mixin({
    toast: true,
    position: "top",
    showConfirmButton: false,
    timer: 3000,
  });
  toast.fire({
    icon: type,
    title: msg,
    padding: "10px 20px",
  });
};

const escanear = async () => {
  if (!codigo.value.trim()) {
    showMessage("Ingrese un código QR o folio", "warning");
    return;
  }

  escaneando.value = true;
  isLoading.value = true;
  errorMensaje.value = "";
  ordenEncontrada.value = null;

  try {
    // Intentar primero como QR, luego como folio
    let response;
    try {
      response = await OrdenLavanderiaRepository.escanearQR(codigo.value.trim());
    } catch (e) {
      // Si falla como QR, intentar como folio
      response = await OrdenLavanderiaRepository.escanearFolio(
        codigo.value.trim()
      );
    }

    if (response.data && response.encontrada) {
      ordenEncontrada.value = response.data;
      showMessage("Orden encontrada", "success");
    } else {
      errorMensaje.value =
        response.errors?.orden?.[0] || "Orden no encontrada o inválida";
    }
  } catch (error) {
    if (axios.isAxiosError(error)) {
      const errorData = error.response?.data;
      errorMensaje.value =
        errorData?.errors?.orden?.[0] ||
        errorData?.message ||
        "Error al escanear la orden";
    } else {
      errorMensaje.value = "Error inesperado al escanear";
    }
  } finally {
    escaneando.value = false;
    isLoading.value = false;
  }
};

const avanzarOrden = async () => {
  if (!ordenEncontrada.value) return;

  avanzando.value = true;
  isLoading.value = true;

  try {
    await OrdenLavanderiaRepository.avanzarOrden(ordenEncontrada.value.id);
    showMessage("Orden avanzada correctamente", "success");
    // Limpiar después de 2 segundos
    setTimeout(() => {
      codigo.value = "";
      ordenEncontrada.value = null;
      errorMensaje.value = "";
    }, 2000);
  } catch (error) {
    console.error(error);
    showMessage("Error al avanzar la orden", "error");
  } finally {
    avanzando.value = false;
    isLoading.value = false;
  }
};
</script>

<style scoped>
.card {
  transition: all 0.3s ease;
}
</style>
