"use client";

import { useEffect, useState } from "react";

type Guia = {
  id?: string | number;
  numero?: string;
  numero_guia?: string;
  cliente?: string;
  telefono?: string;
  ciudad?: string;
  estado?: string;
  fecha?: string;
  created_at?: string;
  fecha_entrega?: string;
  foto_entrega?: string;
  evidencia_entrega?: string;
  foto?: string;
  [key: string]: any;
};

const estados = [
  {
    nombre: "Recibida",
    icono: "📥",
    descripcion:
      "Su envío ha sido recibido correctamente.",
  },
  {
    nombre: "En Bodega",
    icono: "🟢",
    descripcion:
      "Su envío se encuentra en bodega.",
  },
  {
    nombre: "Ingreso en el contenedor",
    icono: "📦",
    descripcion:
      "Su envío ha ingresado al contenedor.",
  },
  {
    nombre: "En tránsito",
    icono: "🚢",
    descripcion:
      "Su envío se encuentra en tránsito.",
  },
  {
    nombre: "Llegó a Honduras",
    icono: "🇭🇳",
    descripcion:
      "Su envío ha llegado a Honduras.",
  },
  {
    nombre: "Ruta de entrega",
    icono: "🚚",
    descripcion:
      "Su envío está en proceso de entrega.",
  },
  {
    nombre: "Entregada",
    icono: "✅",
    descripcion:
      "Su envío ha sido entregado correctamente.",
  },
];

function normalizar(valor: any) {
  return String(valor || "")
    .trim()
    .toUpperCase()
    .replace(/\s+/g, "");
}

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

function estadoParaRastreo(valor: any) {
  const estado = normalizarEstado(valor);

  if (
    estado === "recolectada" ||
    estado === "en bodega"
  ) {
    return "en bodega";
  }

  if (
    estado === "en entrega" ||
    estado === "ruta de entrega"
  ) {
    return "ruta de entrega";
  }

  return estado;
}

function obtenerNumero(guia: Guia | null) {
  return guia?.numero || guia?.numero_guia || "";
}

function obtenerFotoEntrega(guia: Guia | null) {
  if (!guia) {
    return null;
  }

  return (
    guia.foto_entrega ||
    guia.evidencia_entrega ||
    guia.foto ||
    null
  );
}

function obtenerFotoStorage(guia: Guia | null) {
  if (
    !guia?.id ||
    estadoParaRastreo(guia.estado) !== "entregada"
  ) {
    return null;
  }

  /*
    La foto de entrega se guarda en:

    Bucket:
    evidencias-entrega

    Ruta:
    guias/ID_DE_GUIA.jpg
  */

  const supabaseUrl =
    process.env.NEXT_PUBLIC_SUPABASE_URL;

  if (!supabaseUrl) {
    return null;
  }

  return (
    supabaseUrl.replace(/\/$/, "") +
    "/storage/v1/object/public/evidencias-entrega/guias/" +
    encodeURIComponent(String(guia.id)) +
    ".jpg"
  );
}

export default function Rastreo() {
  const [numeroGuia, setNumeroGuia] =
    useState("");

  const [guia, setGuia] =
    useState<Guia | null>(null);

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

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

  const [fotoStorage, setFotoStorage] =
    useState<string | null>(null);

  async function buscarGuiaPorNumero(
    valor: string
  ) {
    const numeroBuscado =
      normalizar(valor);

    if (!numeroBuscado) {
      setMensaje(
        "Ingrese un número de guía."
      );

      setGuia(null);
      setFotoStorage(null);

      return;
    }

    setBuscando(true);
    setMensaje("");
    setGuia(null);
    setFotoStorage(null);

    try {
      /*
        La búsqueda se realiza mediante la API
        del ERP.

        No hacemos consultas directas a
        columnas que no existen en hce_guias.
      */

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

      const texto =
        await respuesta.text();

      let resultado: any = null;

      try {
        resultado = JSON.parse(texto);
      } catch {
        console.error(
          "RESPUESTA INVÁLIDA DEL SERVIDOR:",
          texto
        );

        setMensaje(
          "No se pudo consultar la guía."
        );

        return;
      }

      if (!respuesta.ok) {
        console.error(
          "ERROR API RASTREO:",
          resultado
        );

        setMensaje(
          resultado?.error ||
            "No se pudo consultar la guía."
        );

        return;
      }

      if (
        !resultado?.encontrada ||
        !resultado?.guia
      ) {
        setMensaje(
          "No encontramos ninguna guía con ese número."
        );

        return;
      }

      const guiaEncontrada =
        resultado.guia as Guia;

      setGuia(guiaEncontrada);

      /*
        Primero intentamos utilizar la URL
        que esté guardada en la guía.
      */

      const fotoGuardada =
        obtenerFotoEntrega(
          guiaEncontrada
        );

      if (fotoGuardada) {
        setFotoStorage(
          `${fotoGuardada}${
            fotoGuardada.includes("?")
              ? "&"
              : "?"
          }v=${guiaEncontrada.id || Date.now()}`
        );

        return;
      }

      /*
        Si la URL no está guardada en la tabla,
        usamos directamente la ubicación
        conocida de Storage.
      */

      const fotoStorageUrl =
        obtenerFotoStorage(
          guiaEncontrada
        );

      if (fotoStorageUrl) {
        setFotoStorage(
          `${fotoStorageUrl}?v=${
            guiaEncontrada.id || Date.now()
          }`
        );
      }
    } catch (error: any) {
      console.error(
        "ERROR GENERAL RASTREANDO:",
        error
      );

      setMensaje(
        error?.message ||
          "Ocurrió un error al consultar el envío."
      );
    } finally {
      setBuscando(false);
    }
  }

  async function buscarGuia(
    e: React.FormEvent<HTMLFormElement>
  ) {
    e.preventDefault();

    await buscarGuiaPorNumero(
      numeroGuia
    );
  }

  /*
    Si la página recibe:

    /cargoerp/rastreo-publico?guia=HCE000007

    busca automáticamente la guía.
  */

  useEffect(() => {
    const parametros =
      new URLSearchParams(
        window.location.search
      );

    const guiaURL =
      parametros.get("guia");

    if (
      guiaURL &&
      guiaURL.trim()
    ) {
      const numero =
        normalizar(guiaURL);

      setNumeroGuia(numero);

      void buscarGuiaPorNumero(
        numero
      );
    }

    // La función es estable durante la vida
    // de este componente y este efecto solo
    // debe ejecutarse al cargar la página.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const estadoActual =
    estadoParaRastreo(
      guia?.estado
    );

  const estadoActualIndex =
    estados.findIndex(
      (estado) =>
        estadoParaRastreo(
          estado.nombre
        ) === estadoActual
    );

  const numeroMostrado =
    obtenerNumero(guia);

  return (
    <main className="min-h-screen bg-slate-950 text-white p-6 md:p-10">

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

        {/* ENCABEZADO */}

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

          <h1 className="text-4xl md:text-5xl font-bold">
            📍 Rastreo de Envíos
          </h1>

          <p className="text-slate-400 mt-4 text-lg">
            Consulte el estado de su envío utilizando
            su número de guía.
          </p>

        </div>

        {/* BUSCADOR */}

        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl mb-8">

          <form onSubmit={buscarGuia}>

            <div className="flex flex-col md:flex-row gap-4">

              <input
                type="text"
                value={numeroGuia}
                onChange={(e) =>
                  setNumeroGuia(
                    e.target.value.toUpperCase()
                  )
                }
                placeholder="Ingrese su número de guía"
                className="flex-1 bg-slate-800 border border-slate-700 rounded-xl px-5 py-4 text-white outline-none focus:border-orange-500"
              />

              <button
                type="submit"
                disabled={buscando}
                className="bg-orange-500 hover:bg-orange-600 disabled:bg-slate-600 px-8 py-4 rounded-xl font-bold transition"
              >
                {buscando
                  ? "🔄 Buscando..."
                  : "🔎 Rastrear"}
              </button>

            </div>

          </form>

          {mensaje && (
            <div className="mt-5 bg-red-500/10 border border-red-500/30 text-red-400 p-4 rounded-xl">
              {mensaje}
            </div>
          )}

        </div>

        {/* BUSCANDO */}

        {buscando && (
          <div className="text-center py-10 text-slate-400 text-lg">
            🔎 Buscando información de su envío...
          </div>
        )}

        {/* RESULTADO */}

        {guia && !buscando && (

          <div>

            {/* INFORMACIÓN DE GUÍA */}

            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 mb-8">

              <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-6">

                <div>

                  <p className="text-slate-400 mb-2">
                    Número de guía
                  </p>

                  <h2 className="text-4xl font-bold text-orange-400">
                    📦 {numeroMostrado}
                  </h2>

                </div>

                <div className="bg-orange-500/10 border border-orange-500/30 px-5 py-3 rounded-xl">

                  <p className="text-sm text-slate-400">
                    Estado actual
                  </p>

                  <p className="font-bold text-lg mt-1">
                    {guia.estado ||
                      "Recibida"}
                  </p>

                </div>

              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8 border-t border-slate-800 pt-6">

                <div>

                  <p className="text-slate-400 text-sm">
                    Cliente
                  </p>

                  <p className="text-lg font-semibold mt-1">
                    👤 {guia.cliente || "-"}
                  </p>

                </div>

                <div>

                  <p className="text-slate-400 text-sm">
                    Destino
                  </p>

                  <p className="text-lg font-semibold mt-1">
                    📍 {guia.ciudad || "-"}
                  </p>

                </div>

                <div>

                  <p className="text-slate-400 text-sm">
                    Fecha de registro
                  </p>

                  <p className="text-lg font-semibold mt-1">

                    📅{" "}

                    {guia.fecha ||
                    guia.created_at
                      ? new Date(
                          guia.fecha ||
                            guia.created_at ||
                            ""
                        ).toLocaleDateString(
                          "es-HN"
                        )
                      : "-"}

                  </p>

                </div>

                {guia.fecha_entrega && (

                  <div>

                    <p className="text-slate-400 text-sm">
                      Fecha de entrega
                    </p>

                    <p className="text-lg font-semibold mt-1">

                      🚚{" "}

                      {new Date(
                        guia.fecha_entrega
                      ).toLocaleDateString(
                        "es-HN"
                      )}

                    </p>

                  </div>

                )}

              </div>

            </div>

            {/* EVIDENCIA DE ENTREGA */}

            {estadoActual ===
              "entregada" &&
              fotoStorage && (

              <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 mb-8">

                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">

                  <div>

                    <h2 className="text-3xl font-bold">
                      📸 Evidencia de entrega
                    </h2>

                    <p className="text-slate-400 mt-2">
                      Fotografía registrada al momento
                      de entregar su envío.
                    </p>

                  </div>

                  <a
                    href={fotoStorage}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center bg-orange-500 hover:bg-orange-600 text-white px-5 py-3 rounded-xl font-bold transition"
                  >
                    🔍 Ver foto
                  </a>

                </div>

                <a
                  href={fotoStorage}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="block"
                >

                  <img
                    src={fotoStorage}
                    alt="Evidencia de entrega"
                    className="w-full max-h-[650px] object-contain rounded-xl border border-slate-700 bg-slate-950"
                  />

                </a>

              </div>

            )}

            {/* ENTREGADA SIN FOTO */}

            {estadoActual ===
              "entregada" &&
              !fotoStorage && (

              <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 mb-8">

                <h2 className="text-3xl font-bold">
                  📸 Evidencia de entrega
                </h2>

                <p className="text-slate-400 mt-3">
                  La guía aparece como entregada.
                </p>

              </div>

            )}

            {/* PROGRESO */}

            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8">

              <h2 className="text-3xl font-bold mb-8">
                🚚 Progreso del envío
              </h2>

              <div className="space-y-4">

                {estados.map(
                  (estado, index) => {

                    const completado =
                      estadoActualIndex >=
                      index;

                    const actual =
                      estadoParaRastreo(
                        estado.nombre
                      ) === estadoActual;

                    return (

                      <div
                        key={
                          estado.nombre
                        }
                        className={`flex items-center gap-5 p-5 rounded-xl border ${
                          actual
                            ? "bg-orange-500/10 border-orange-500"
                            : completado
                            ? "bg-green-500/10 border-green-500/40"
                            : "bg-slate-800 border-slate-700 opacity-50"
                        }`}
                      >

                        <div
                          className={`w-12 h-12 shrink-0 rounded-full flex items-center justify-center text-xl font-bold ${
                            completado
                              ? "bg-green-500 text-white"
                              : "bg-slate-700 text-slate-400"
                          }`}
                        >

                          {completado
                            ? "✓"
                            : index + 1}

                        </div>

                        <div className="flex-1">

                          <h3 className="font-bold text-lg">

                            {estado.icono}{" "}

                            {estado.nombre}

                          </h3>

                          <p className="text-slate-400 text-sm mt-1">
                            {estado.descripcion}
                          </p>

                        </div>

                        {actual && (

                          <span className="bg-orange-500 text-white px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap">
                            Estado actual
                          </span>

                        )}

                      </div>

                    );
                  }
                )}

              </div>

            </div>

          </div>

        )}

      </div>

    </main>
  );
}