<template>
  <div class="form auth-boxed">
    <div class="form-container outer">
      <div class="form-form">
        <div class="form-form-wrap">
          <div class="form-container">
            <div class="form-content p-4">
              <h1 class="mb-4">Seguimiento de orden</h1>

              <div v-if="!folioParam && !cargando" class="alert alert-info">
                Escanee el código QR de su ticket o ingrese el folio en la URL:
                <code>/seguimiento/SU-FOLIO</code>
                <br /><small class="text-muted">Ejemplo: /seguimiento/LMS-20260215-ABC123</small>
              </div>

              <div v-else-if="cargando" class="text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2">Buscando orden...</p>
              </div>

              <div v-else-if="error" class="alert alert-danger">
                {{ error }}
              </div>

              <div v-else-if="orden" class="card shadow-sm">
                <div class="card-body">
                  <h5 class="card-title">Folio: {{ orden.folio_unico }}</h5>
                  <p class="mb-3"><strong>Fecha de registro:</strong> {{ formatFecha(orden.created_at) }}</p>

                  <div class="mb-3">
                    <strong>Estatus:</strong>
                    <span :class="badgeClass">{{ estatusTexto }}</span>
                  </div>
                  <div v-if="orden.current_step" class="mb-2">
                    <strong>Etapa actual:</strong> {{ stepTexto }}
                  </div>
                  <div v-if="orden.priority" class="mb-2 small">
                    <strong>Prioridad:</strong> {{ orden.priority.name || orden.priority.code }}
                  </div>
                  <div v-if="orden.presences && orden.presences.length" class="mb-3">
                    <strong class="d-block mb-2">Avance por área</strong>
                    <ul class="list-unstyled small mb-0">
                      <li v-for="(p, i) in orden.presences" :key="i" class="mb-1">
                        <span class="text-muted">{{ p.area_code || "—" }}</span>:
                        {{ presenceStatusTexto(p.status) }}
                        <span v-if="p.completed_at" class="text-success"> · listo</span>
                      </li>
                    </ul>
                  </div>
                  <div v-if="orden.recent_scans && orden.recent_scans.length" class="mb-3">
                    <strong class="d-block mb-2">Últimos escaneos</strong>
                    <ul class="list-unstyled small mb-0">
                      <li v-for="(s, j) in orden.recent_scans" :key="'s-' + j" class="mb-1">
                        <span class="text-muted">{{ s.area_code || "—" }}</span>
                        · {{ s.scan_sequence === 2 ? "Salida" : "Entrada" }}
                        <span v-if="s.scanned_at" class="text-muted"> · {{ formatFecha(s.scanned_at) }}</span>
                      </li>
                    </ul>
                  </div>
                  <div v-if="orden.shipping" class="mb-2 small">
                    <strong>Entrega:</strong>
                    {{ orden.shipping.is_delivery ? "A domicilio" : "Mostrador" }}
                    <span v-if="orden.shipping.delivery_status" class="text-muted">
                      ({{ orden.shipping.delivery_status }})
                    </span>
                  </div>
                  <div v-if="orden.entregado_at" class="text-muted small">
                    Entregado: {{ formatFecha(orden.entregado_at) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useOrderTracking } from "@/composables/useOrderTracking";

const route = useRoute();

const folioParam = ref("");
const {
  loading: cargando,
  error,
  publicData: orden,
  loadPublicByFolio,
} = useOrderTracking();

const estatusMap = {
  pendiente: "Pendiente",
  en_proceso: "En proceso",
  terminado: "Terminado",
  entregado: "Entregado",
  cancelado: "Cancelado",
};
const stepMap = {
  recepcion: "Recepción",
  lavado: "Lavado",
  secado: "Secado",
  planchado: "Planchado",
  terminado: "Listo para entregar",
  entregado: "Entregado",
};

const estatusTexto = computed(() =>
  orden.value ? estatusMap[orden.value.estatus] || orden.value.estatus : ""
);
const stepTexto = computed(() =>
  orden.value && orden.value.current_step
    ? stepMap[orden.value.current_step] || orden.value.current_step
    : ""
);
const badgeClass = computed(() => {
  if (!orden.value) return "badge bg-secondary";
  const m = {
    pendiente: "badge bg-warning",
    en_proceso: "badge bg-info",
    terminado: "badge bg-primary",
    entregado: "badge bg-success",
    cancelado: "badge bg-danger",
  };
  return m[orden.value.estatus] || "badge bg-secondary";
});

function formatFecha(str) {
  if (!str) return "";
  try {
    const d = new Date(str);
    return d.toLocaleString("es-MX");
  } catch {
    return str;
  }
}

const presenceStatusMap = {
  pending: "Pendiente",
  in_progress: "En proceso",
  completed: "Completado",
  skipped: "Omitido",
};

function presenceStatusTexto(s) {
  return presenceStatusMap[s] || s || "";
}

async function cargarOrden() {
  const folio = (route.params.folio_unico || route.query.folio || "").trim();
  if (!folio) {
    folioParam.value = "";
    return;
  }
  folioParam.value = folio;
  try {
    await loadPublicByFolio(folio);
  } catch {
    /* error ya expuesto en ref `error` del composable */
  }
}

onMounted(cargarOrden);
watch(
  () => [route.params.folio_unico, route.query.folio],
  () => { if (route.params.folio_unico || route.query.folio) cargarOrden(); },
  { deep: true }
);
</script>
