"use client";

import {
  useEffect,
  useRef,
  useState,
  type ChangeEvent,
} from "react";

type Guia = {
  id?: string | number;
  estado?: string;
  numero?: string;
  numero_guia?: string;
  [key: string]: any;
};

type UsuarioSesion = {
  usuario?: string;
  tipo?: "admin" | "usuario" | "entregas";
  nombre?: string;
  accesoCompleto?: boolean;
};

const ESTADOS = [
  "Recibida",
  "En Bodega",
  "Ingreso en el contenedor",
  "En tránsito",
  "Llegó a Honduras",
  "Ruta de entrega",
  "Entregada",
] as const;

function normalizarEstado(valor?: string) {
  return String(valor || "")
    .trim()
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/\s+/g, " ");
}

function estadoCanonico(valor?: string) {
  const n = normalizarEstado(valor);

  if (n === "recibida" || n === "recibida en bodega") return "Recibida";
  if (n === "recolectada" || n === "en bodega") return "En Bodega";
  if (n === "ingreso en el contenedor") return "Ingreso en el contenedor";
  if (n === "en transito") return "En tránsito";
  if (n === "llego a honduras") return "Llegó a Honduras";
  if (n === "en entrega" || n === "ruta de entrega") return "Ruta de entrega";
  if (n === "entregada") return "Entregada";

  return null;
}

function obtenerSiguienteEstado(estadoActual?: string) {
  const canonico = estadoCanonico(estadoActual);

  if (canonico === "Recibida") return "En Bodega";
  if (!canonico) return "En Bodega";

  const indice = ESTADOS.indexOf(canonico as (typeof ESTADOS)[number]);
  if (indice < 0 || indice >= ESTADOS.length - 1) return null;

  return ESTADOS[indice + 1];
}

function normalizarCodigo(
  valor: string
) {
  let texto = String(valor || "")
    .trim();

  if (!texto) {
    return "";
  }

  /*
  ==========================================
  SI EL QR CONTIENE UNA URL COMPLETA
  EXTRAEMOS SOLAMENTE EL NÚMERO DE GUÍA

  Ejemplo:
  https://erp.hondurascargoexpress.com/cargoerp/rastreo-publico?guia=HCE000004&caja=1

  Resultado:
  HCE000004
  ==========================================
  */

  const coincidenciaParametro =
    texto.match(
      /[?&](?:guia|numero_guia|codigo|code)=([^&#]+)/i
    );

  if (coincidenciaParametro?.[1]) {
    try {
      const extraido =
        decodeURIComponent(
          coincidenciaParametro[1]
        )
          .trim()
          .toUpperCase()
          .replace(/\s+/g, "");

      if (extraido) {
        return extraido;
      }
    } catch {}
  }

  /*
  ==========================================
  SI EL TEXTO ES UNA URL SIN PARÁMETRO
  BUSCAMOS DIRECTAMENTE UN CÓDIGO HCE
  ==========================================
  */

  const codigoHce =
    texto.match(/HCE\d+/i);

  if (codigoHce?.[0]) {
    return codigoHce[0]
      .toUpperCase();
  }

  /*
  ==========================================
  CÓDIGO NORMAL
  ==========================================
  */

  return texto
    .toUpperCase()
    .replace(/\s+/g, "");
}

export default function EscaneoPage() {

  const [codigo, setCodigo] =
    useState("");

  const [mensaje, setMensaje] =
    useState("");

  const [
    camaraActiva,
    setCamaraActiva,
  ] = useState(false);

  const [
    cargandoCamara,
    setCargandoCamara,
  ] = useState(false);

  const [buscando, setBuscando] =
    useState(false);

  const [
    actualizando,
    setActualizando,
  ] = useState(false);

  const [
    guiaEncontrada,
    setGuiaEncontrada,
  ] = useState<Guia | null>(
    null
  );

  const [usuario, setUsuario] =
    useState<UsuarioSesion | null>(
      null
    );

  const [
    sesionCargada,
    setSesionCargada,
  ] = useState(false);

  /*
  ==========================================
  FOTO DE ENTREGA
  ==========================================
  */

  const [
    fotoEntrega,
    setFotoEntrega,
  ] = useState<File | null>(
    null
  );

  const [
    vistaPreviaFoto,
    setVistaPreviaFoto,
  ] = useState("");

  const scannerRef =
    useRef<any>(null);

  const scannerActivoRef =
    useRef(false);

  const buscandoRef =
    useRef(false);

  const inputFotoRef =
    useRef<HTMLInputElement | null>(
      null
    );

  /*
  ==========================================
  CARGAR SESIÓN
  ==========================================
  */

  useEffect(() => {

    try {

      /*
      ESTA ES LA CLAVE PRINCIPAL
      QUE ESTÁ USANDO EL SISTEMA
      */

      const posiblesSesiones = [
        "dg_cargo_usuario_sesion",
        "usuario_sesion",
        "hce_usuario_sesion",
        "cargo_usuario_sesion",
      ];

      let sesionEncontrada:
        | string
        | null = null;

      for (
        const clave
        of posiblesSesiones
      ) {

        const valor =
          localStorage.getItem(
            clave
          );

        if (valor) {

          sesionEncontrada =
            valor;

          break;

        }

      }

      if (
        sesionEncontrada
      ) {

        const usuarioParseado =
          JSON.parse(
            sesionEncontrada
          );

        console.log(
          "USUARIO CARGADO:",
          usuarioParseado
        );

        setUsuario(
          usuarioParseado
        );

      }

    } catch (error) {

      console.error(
        "ERROR CARGANDO SESIÓN:",
        error
      );

    } finally {

      setSesionCargada(
        true
      );

    }

  }, []);

  /*
  ==========================================
  LIMPIAR FOTO
  ==========================================
  */

  useEffect(() => {

    return () => {

      if (
        vistaPreviaFoto
      ) {

        URL.revokeObjectURL(
          vistaPreviaFoto
        );

      }

    };

  }, [
    vistaPreviaFoto
  ]);

  /*
  ==========================================
  CERRAR SESIÓN
  SOLO PARA ENTREGAS
  ==========================================
  */

  async function cerrarSesion() {

    try {

      await fetch(
        "/cargoerp/api/logout",
        {
          method: "POST",
          credentials: "include",
        }
      );

    } catch (error) {

      console.error(
        "ERROR CERRANDO SESIÓN:",
        error
      );

    }

    const claves = [
      "dg_cargo_usuario_sesion",
      "usuario_sesion",
      "hce_usuario_sesion",
      "cargo_usuario_sesion",
      "dg_cargo_usuario",
      "dg_cargo_password",
      "usuario",
      "password",
    ];

    claves.forEach(
      (clave) => {

        localStorage.removeItem(
          clave
        );

      }
    );

    window.location.href =
      "/cargoerp/login";

  }

  /*
  ==========================================
  DETENER CÁMARA
  ==========================================
  */

  async function detenerCamara() {

    scannerActivoRef.current =
      false;

    const scanner =
      scannerRef.current;

    if (scanner) {

      try {

        await scanner.stop();

      } catch (error) {}

      try {

        await scanner.clear();

      } catch (error) {}

      scannerRef.current =
        null;

    }

    setCamaraActiva(
      false
    );

  }

  /*
  ==========================================
  SELECCIONAR FOTO
  ==========================================
  */

  function seleccionarFoto(
    event: ChangeEvent<HTMLInputElement>
  ) {

    const archivo =
      event.target.files?.[0];

    if (!archivo) {
      return;
    }

    if (
      !archivo.type.startsWith(
        "image/"
      )
    ) {

      setMensaje(
        "❌ Debes seleccionar una imagen."
      );

      return;

    }

    /*
    LÍMITE DE 10 MB
    */

    if (
      archivo.size >
      10 * 1024 * 1024
    ) {

      setMensaje(
        "❌ La imagen es demasiado grande. Máximo 10 MB."
      );

      return;

    }

    if (
      vistaPreviaFoto
    ) {

      URL.revokeObjectURL(
        vistaPreviaFoto
      );

    }

    const url =
      URL.createObjectURL(
        archivo
      );

    setFotoEntrega(
      archivo
    );

    setVistaPreviaFoto(
      url
    );

    setMensaje(
      "📸 Foto de entrega lista."
    );

  }

  /*
  ==========================================
  TOMAR FOTO
  ==========================================
  */

  function tomarFotoEntrega() {

    if (
      !inputFotoRef.current
    ) {
      return;
    }

    inputFotoRef.current.click();

  }

  /*
  ==========================================
  BUSCAR GUÍA
  ==========================================
  */

  async function buscarGuia(
    codigoBuscar?: string
  ) {

    const codigoFinal =
      normalizarCodigo(
        codigoBuscar ||
        codigo
      );

    if (!codigoFinal) {

      setMensaje(
        "⚠️ Ingresa o escanea un código primero."
      );

      return;

    }

    if (
      buscandoRef.current
    ) {
      return;
    }

    try {

      buscandoRef.current =
        true;

      setBuscando(
        true
      );

      setGuiaEncontrada(
        null
      );

      /*
      LIMPIAMOS FOTO
      AL BUSCAR UNA NUEVA GUÍA
      */

      setFotoEntrega(
        null
      );

      if (
        vistaPreviaFoto
      ) {

        URL.revokeObjectURL(
          vistaPreviaFoto
        );

      }

      setVistaPreviaFoto(
        ""
      );

      setMensaje(
        `🔎 Buscando guía: ${codigoFinal}`
      );

      const respuesta =
        await fetch(
          `/cargoerp/api/guias/buscar?codigo=${encodeURIComponent(
            codigoFinal
          )}`,
          {
            method: "GET",
            cache: "no-store",
            credentials: "include",
          }
        );

      let resultado:
        | any
        | null = null;

      try {

        resultado =
          await respuesta.json();

      } catch (error) {

        resultado = null;

      }

      if (
        !respuesta.ok
      ) {

        setMensaje(
          `❌ ${
            resultado?.error ||
            "No se pudo buscar la guía."
          }`
        );

        return;

      }

      if (
        !resultado ||
        !resultado.encontrada ||
        !resultado.guia
      ) {

        setMensaje(
          `❌ No se encontró ninguna guía con el código: ${codigoFinal}`
        );

        return;

      }

      setGuiaEncontrada({
        ...resultado.guia,
      });

      if (esEntregas && esEntregaFinal) {
        setFotoEntrega(null);
        if (vistaPreviaFoto) {
          URL.revokeObjectURL(vistaPreviaFoto);
        }
        setVistaPreviaFoto("");
      }

      setMensaje(
        "✅ Guía encontrada correctamente."
      );

    } catch (error) {

      console.error(
        "ERROR BUSCANDO GUÍA:",
        error
      );

      setMensaje(
        "❌ Ocurrió un error al buscar la guía."
      );

    } finally {

      buscandoRef.current =
        false;

      setBuscando(
        false
      );

    }

  }

  /*
  ==========================================
  SUBIR FOTO DE ENTREGA
  ==========================================
  */

  async function subirFotoEntrega() {

    if (
      !fotoEntrega ||
      !guiaEncontrada?.id
    ) {
      return null;
    }

    const formData =
      new FormData();

    formData.append(
      "foto",
      fotoEntrega
    );

    formData.append(
      "guiaId",
      String(
        guiaEncontrada.id
      )
    );

    const respuesta =
      await fetch(
        "/cargoerp/api/foto-entrega",
        {
          method: "POST",
          body: formData,
          credentials: "include",
        }
      );

    let resultado:
      | any
      | null = null;

    try {

      resultado =
        await respuesta.json();

    } catch (error) {}

    if (
      !respuesta.ok ||
      !resultado?.success
    ) {

      throw new Error(
        resultado?.error ||
        "No se pudo guardar la foto de entrega."
      );

    }

    return resultado;

  }

  /*
  ==========================================
  ACTUALIZAR ESTADO
  ==========================================
  */

  async function actualizarEstado() {

    if (
      !guiaEncontrada
    ) {
      return;
    }

    if (
      guiaEncontrada.id ===
        undefined ||
      guiaEncontrada.id ===
        null
    ) {

      setMensaje(
        "❌ No se encontró el ID de la guía."
      );

      return;

    }

    const siguienteEstado =
      obtenerSiguienteEstado(
        guiaEncontrada.estado
      );

    if (
      !siguienteEstado
    ) {

      setMensaje(
        "ℹ️ Esta guía ya fue entregada."
      );

      return;

    }

    const esEntregas =
      usuario?.tipo ===
      "entregas";

    const esEntregaFinal =
      siguienteEstado
        .trim()
        .toLowerCase() ===
      "entregada";

    /*
    ========================================
    FOTO OBLIGATORIA
    SOLO PARA EL USUARIO ENTREGAS
    CUANDO VA A ENTREGAR
    ========================================
    */

    if (
      esEntregas &&
      esEntregaFinal &&
      !fotoEntrega
    ) {

      setMensaje(
        "📸 Debes tomar una foto de la entrega antes de marcar la guía como entregada."
      );

      return;

    }

    try {

      setActualizando(
        true
      );

      let fotoGuardadaUrl = "";

      /*
      PRIMERO SUBIMOS
      LA FOTO
      */

      if (
        esEntregas &&
        esEntregaFinal &&
        fotoEntrega
      ) {

        setMensaje(
          "📤 Guardando evidencia de entrega..."
        );

        const fotoGuardada = await subirFotoEntrega();
        fotoGuardadaUrl = fotoGuardada?.fotoUrl || "";

        if (fotoGuardadaUrl) {
          setGuiaEncontrada((actual) =>
            actual
              ? {
                  ...actual,
                  foto_entrega: fotoGuardadaUrl,
                }
              : actual
          );
        }

      }

      setMensaje(
        "⏳ Actualizando estado..."
      );

      const respuesta =
        await fetch(
          "/cargoerp/api/actualizar-estado",
          {
            method: "POST",

            headers: {
              "Content-Type":
                "application/json",
            },

            credentials: "include",

            body: JSON.stringify({
              id:
                guiaEncontrada.id,
              estado:
                siguienteEstado,
              fotoUrl:
                fotoGuardadaUrl ||
                guiaEncontrada.foto_entrega ||
                "",
            }),
          }
        );

      const resultado =
        await respuesta.json();

      if (
        !respuesta.ok ||
        !resultado?.success
      ) {

        setMensaje(
          `❌ ${
            resultado?.error ||
            "No se pudo actualizar la guía."
          }`
        );

        return;

      }

      setGuiaEncontrada(
        resultado.guia
      );

      setMensaje(
        `✅ Guía actualizada a: ${resultado.guia.estado}`
      );

    } catch (error: any) {

      console.error(
        "ERROR ACTUALIZANDO ESTADO:",
        error
      );

      setMensaje(
        `❌ ${
          error?.message ||
          "Ocurrió un error al actualizar la guía."
        }`
      );

    } finally {

      setActualizando(
        false
      );

    }

  }

  /*
  ==========================================
  INICIAR CÁMARA
  ==========================================
  */

  async function iniciarCamara() {

    if (
      cargandoCamara ||
      camaraActiva
    ) {
      return;
    }

    try {

      setMensaje(
        ""
      );

      setGuiaEncontrada(
        null
      );

      setCargandoCamara(
        true
      );

      if (
        !navigator.mediaDevices ||
        !navigator.mediaDevices
          .getUserMedia
      ) {

        setMensaje(
          "❌ Tu navegador no permite acceder a la cámara."
        );

        return;

      }

      await detenerCamara();

      const stream =
        await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: {
              ideal:
                "environment",
            },
          },
          audio: false,
        });

      stream
        .getTracks()
        .forEach(
          (track) => {
            track.stop();
          }
        );

      const {
        Html5Qrcode,
        Html5QrcodeSupportedFormats,
      } = await import(
        "html5-qrcode"
      );

      const scanner =
        new Html5Qrcode(
          "reader",
          {
            formatsToSupport: [
              Html5QrcodeSupportedFormats.QR_CODE,
              Html5QrcodeSupportedFormats.CODE_128,
              Html5QrcodeSupportedFormats.CODE_39,
              Html5QrcodeSupportedFormats.EAN_13,
              Html5QrcodeSupportedFormats.EAN_8,
              Html5QrcodeSupportedFormats.UPC_A,
              Html5QrcodeSupportedFormats.UPC_E,
            ],
            verbose: false,
          }
        );

      scannerRef.current =
        scanner;

      const cameras =
        await Html5Qrcode.getCameras();

      if (
        !cameras ||
        cameras.length === 0
      ) {

        setMensaje(
          "❌ No se encontró ninguna cámara."
        );

        return;

      }

      let cameraId =
        cameras[0].id;

      const camaraTrasera =
        cameras.find(
          (camera) => {

            const nombre =
              camera.label
                ?.toLowerCase() ||
              "";

            return (
              nombre.includes(
                "back"
              ) ||
              nombre.includes(
                "rear"
              ) ||
              nombre.includes(
                "environment"
              ) ||
              nombre.includes(
                "trasera"
              )
            );

          }
        );

      if (
        camaraTrasera
      ) {

        cameraId =
          camaraTrasera.id;

      }

      scannerActivoRef.current =
        true;

      await scanner.start(
        cameraId,
        {
          fps: 10,

          qrbox: {
            width: 300,
            height: 200,
          },

          aspectRatio:
            1.7778,
        },

        async (
          decodedText: string
        ) => {

          if (
            !scannerActivoRef.current ||
            buscandoRef.current
          ) {
            return;
          }

          const codigoDetectado =
            normalizarCodigo(
              decodedText
            );

          if (
            !codigoDetectado
          ) {
            return;
          }

          scannerActivoRef.current =
            false;

          setCodigo(
            codigoDetectado
          );

          await detenerCamara();

          await buscarGuia(
            codigoDetectado
          );

        },

        () => {}
      );

      setCamaraActiva(
        true
      );

      setMensaje(
        "📷 Cámara activada. Apunta al código de barras o QR."
      );

    } catch (error) {

      console.error(
        "ERROR COMPLETO DE CÁMARA:",
        error
      );

      scannerActivoRef.current =
        false;

      setCamaraActiva(
        false
      );

      setMensaje(
        "❌ No se pudo activar la cámara. Revisa los permisos."
      );

    } finally {

      setCargandoCamara(
        false
      );

    }

  }

  async function buscarCodigo() {

    await buscarGuia(
      codigo
    );

  }

  async function nuevoEscaneo() {

    await detenerCamara();

    setCodigo(
      ""
    );

    setMensaje(
      ""
    );

    setGuiaEncontrada(
      null
    );

    setFotoEntrega(
      null
    );

    if (
      vistaPreviaFoto
    ) {

      URL.revokeObjectURL(
        vistaPreviaFoto
      );

    }

    setVistaPreviaFoto(
      ""
    );

  }

  async function regresar() {

    await detenerCamara();

    window.location.href =
      "/cargoerp/dashboard";

  }

  useEffect(() => {

    return () => {

      scannerActivoRef.current =
        false;

      const scanner =
        scannerRef.current;

      if (scanner) {

        scanner
          .stop()
          .catch(() => {});

        scanner
          .clear()
          .catch(() => {});

      }

    };

  }, []);

  const siguienteEstado =
    guiaEncontrada
      ? obtenerSiguienteEstado(
          guiaEncontrada.estado
        )
      : null;

  const esEntregas =
    usuario?.tipo ===
    "entregas";

  const esEntregaFinal =
    siguienteEstado
      ?.trim()
      .toLowerCase() ===
    "entregada";

  if (
    !sesionCargada
  ) {

    return (
      <main className="flex min-h-screen items-center justify-center bg-[#0b1424] text-white">
        Cargando...
      </main>
    );

  }

  return (

    <main className="min-h-screen bg-[#0b1424] px-4 py-8 text-white">

      <input
        ref={inputFotoRef}
        type="file"
        accept="image/*"
        capture="environment"
        onChange={
          seleccionarFoto
        }
        className="hidden"
      />

      <div className="mx-auto w-full max-w-2xl">

        {/*
        ======================================
        USUARIO ENTREGAS
        SOLO VE CERRAR SESIÓN
        ======================================
        */}

        {esEntregas ? (

          <button
            type="button"
            onClick={
              cerrarSesion
            }
            className="mb-6 rounded-xl border border-red-500 bg-red-600 px-5 py-3 font-bold text-white transition hover:bg-red-700"
          >
            🚪 CERRAR SESIÓN
          </button>

        ) : (

          <button
            type="button"
            onClick={
              regresar
            }
            className="mb-6 rounded-xl border border-slate-600 bg-[#172236] px-5 py-3 font-bold text-white transition hover:bg-slate-700"
          >
            ← REGRESAR AL DASHBOARD
          </button>

        )}

        <div className="mb-6 text-center">

          <div className="text-5xl">
            📦
          </div>

          <h1 className="mt-3 text-3xl font-black">
            Escanear Guía
          </h1>

          <p className="mt-2 text-slate-400">
            Escanea el código de barras o código QR de la etiqueta.
          </p>

        </div>

        <div className="overflow-hidden rounded-2xl border border-slate-600 bg-black">

          <div
            id="reader"
            className="min-h-[340px] w-full"
          />

          {!camaraActiva &&
            !cargandoCamara && (

              <div className="flex h-[340px] items-center justify-center bg-black text-slate-400">
                📷 Cámara apagada
              </div>

            )}

          {cargandoCamara && (

            <div className="flex h-[340px] items-center justify-center bg-black text-slate-400">
              Activando cámara...
            </div>

          )}

          <div className="border-t border-slate-700 bg-[#172236] p-4">

            {!camaraActiva ? (

              <button
                type="button"
                onClick={
                  iniciarCamara
                }
                disabled={
                  cargandoCamara ||
                  buscando ||
                  actualizando
                }
                className="w-full rounded-xl bg-orange-500 px-5 py-4 text-lg font-bold text-white transition hover:bg-orange-600 disabled:opacity-50"
              >
                {cargandoCamara
                  ? "ACTIVANDO CÁMARA..."
                  : "📷 ESCANEAR CON CÁMARA"}
              </button>

            ) : (

              <button
                type="button"
                onClick={
                  detenerCamara
                }
                className="w-full rounded-xl bg-red-600 px-5 py-4 text-lg font-bold text-white transition hover:bg-red-700"
              >
                DETENER CÁMARA
              </button>

            )}

          </div>

        </div>

        <div className="mt-4 rounded-2xl border border-slate-600 bg-[#172236] p-4">

          <p className="mb-3 text-sm font-semibold text-slate-300">
            También puedes ingresar el código manualmente
          </p>

          <div className="flex gap-2">

            <input
              type="text"
              value={codigo}
              onChange={(e) => {

                setCodigo(
                  e.target.value
                );

                setMensaje(
                  ""
                );

              }}
              onKeyDown={(e) => {

                if (
                  e.key ===
                  "Enter"
                ) {

                  buscarCodigo();

                }

              }}
              placeholder="Ingresa el número de guía"
              disabled={
                buscando ||
                actualizando
              }
              className="min-w-0 flex-1 rounded-xl border border-slate-600 bg-black px-4 py-3 text-white outline-none focus:border-orange-500 disabled:opacity-60"
            />

            <button
              type="button"
              onClick={
                buscarCodigo
              }
              disabled={
                buscando ||
                actualizando
              }
              className="rounded-xl bg-slate-600 px-6 py-3 font-bold transition hover:bg-slate-500 disabled:opacity-50"
            >
              {buscando
                ? "..."
                : "Buscar"}
            </button>

          </div>

        </div>

        {mensaje && (

          <div className="mt-4 rounded-xl border border-slate-600 bg-[#172236] p-4 text-center text-slate-300">
            {mensaje}
          </div>

        )}

        {guiaEncontrada && (

          <div className="mt-4 rounded-2xl border border-green-500/40 bg-green-500/10 p-5">

            <div className="mb-4 text-center">

              <div className="text-3xl">
                📦
              </div>

              <h2 className="mt-2 text-xl font-black text-green-400">
                GUÍA ENCONTRADA
              </h2>

            </div>

            <div className="mb-4 rounded-xl border border-orange-500/40 bg-orange-500/10 p-4 text-center">

              <p className="text-xs font-bold uppercase text-slate-400">
                Estado actual
              </p>

              <p className="mt-1 text-xl font-black text-orange-400">
                {guiaEncontrada.estado ||
                  "Sin estado"}
              </p>

              {siguienteEstado && (

                <>

                  <p className="mt-4 text-xs font-bold uppercase text-slate-400">
                    Siguiente paso
                  </p>

                  <p className="mt-1 text-lg font-bold text-white">
                    {siguienteEstado}
                  </p>

                </>

              )}

            </div>

            <div className="grid gap-3">

              {Object.entries(
                guiaEncontrada
              ).map(
                ([clave, valor]) => {

                  if (
                    clave === "estado" ||
                    valor === null ||
                    valor === undefined ||
                    typeof valor === "object"
                  ) {

                    return null;

                  }

                  return (

                    <div
                      key={clave}
                      className="flex flex-col rounded-xl border border-slate-600 bg-[#172236] p-3 sm:flex-row sm:justify-between"
                    >

                      <span className="font-semibold capitalize text-slate-400">
                        {clave.replace(/_/g, " ")}
                      </span>

                      <span className="mt-1 break-all text-white sm:mt-0">
                        {String(
                          valor
                        )}
                      </span>

                    </div>

                  );

                }
              )}

            </div>

            {/*
            ==================================
            FOTO DE ENTREGA
            SOLO USUARIO ENTREGAS
            SOLO CUANDO EL SIGUIENTE ESTADO
            ES ENTREGADA
            ==================================
            */}

            {esEntregas &&
              esEntregaFinal && (

                <div className="mt-5 rounded-2xl border border-blue-500/50 bg-blue-500/10 p-5">

                  <div className="text-center">

                    <div className="text-4xl">
                      📸
                    </div>

                    <h3 className="mt-2 text-xl font-black text-blue-400">
                      EVIDENCIA DE ENTREGA
                    </h3>

                    <p className="mt-2 text-sm text-slate-300">
                      Debes tomar una fotografía de cómo fue entregada la caja antes de confirmar la entrega.
                    </p>

                  </div>

                  {vistaPreviaFoto && (

                    <div className="mt-4 overflow-hidden rounded-xl border border-slate-600 bg-black">

                      <img
                        src={
                          vistaPreviaFoto
                        }
                        alt="Evidencia de entrega"
                        className="max-h-[400px] w-full object-contain"
                      />

                    </div>

                  )}

                  <button
                    type="button"
                    onClick={
                      tomarFotoEntrega
                    }
                    disabled={
                      actualizando
                    }
                    className="mt-4 w-full rounded-xl bg-blue-600 px-5 py-4 text-lg font-bold text-white transition hover:bg-blue-700 disabled:opacity-50"
                  >
                    {fotoEntrega
                      ? "📷 CAMBIAR FOTO"
                      : "📷 TOMAR FOTO DE ENTREGA"}
                  </button>

                </div>

              )}

            {siguienteEstado && (

              <button
                type="button"
                onClick={
                  actualizarEstado
                }
                disabled={
                  actualizando ||
                  (
                    esEntregas &&
                    esEntregaFinal &&
                    !fotoEntrega
                  )
                }
                className="mt-5 w-full rounded-xl bg-green-600 px-5 py-4 text-lg font-bold text-white transition hover:bg-green-700 disabled:opacity-50"
              >
                {actualizando
                  ? "ACTUALIZANDO..."
                  : esEntregas &&
                    esEntregaFinal
                  ? fotoEntrega
                    ? "✅ CONFIRMAR ENTREGA"
                    : "📸 TOMA LA FOTO PARA CONTINUAR"
                  : `➡️ MOVER A ${siguienteEstado.toUpperCase()}`}
              </button>

            )}

            {!siguienteEstado && (

              <div className="mt-5 rounded-xl border border-green-500/40 bg-green-500/10 p-4 text-center font-bold text-green-400">
                ✅ ESTA GUÍA YA FUE ENTREGADA
              </div>

            )}

            <button
              type="button"
              onClick={
                nuevoEscaneo
              }
              disabled={
                actualizando
              }
              className="mt-3 w-full rounded-xl bg-orange-500 px-5 py-4 text-lg font-bold text-white transition hover:bg-orange-600 disabled:opacity-50"
            >
              📷 ESCANEAR OTRA GUÍA
            </button>

          </div>

        )}

      </div>

    </main>

  );

}