"use client";

import { useState } from "react";
import Link from "next/link";
import { supabase } from "../../lib/supabase";

type Guia = {
  id: number | string;
  numero?: string | null;
  numero_guia?: string | null;
  cliente?: string | null;
  ciudad?: string | null;
  estado?: string | null;
  fecha?: string | null;
  created_at?: string | null;
  fecha_ingreso_contenedor?: string | null;
};

export default function RastreoPage() {
  const [numero, setNumero] = useState("");
  const [guia, setGuia] = useState<Guia | null>(null);
  const [mensaje, setMensaje] = useState("");
  const [buscando, setBuscando] = useState(false);

  function normalizarNumero(valor: string) {
    return String(valor || "")
      .trim()
      .toUpperCase()
      .replace(/[^A-Z0-9]/g, "");
  }

  function formatearFecha(
    fecha: string | null | undefined
  ) {
    if (!fecha) {
      return null;
    }

    const fechaConvertida = new Date(fecha);

    if (
      Number.isNaN(
        fechaConvertida.getTime()
      )
    ) {
      return null;
    }

    return fechaConvertida.toLocaleString(
      "es-HN",
      {
        timeZone: "America/Tegucigalpa",
        dateStyle: "medium",
        timeStyle: "short",
      }
    );
  }

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

    const numeroBuscado =
      normalizarNumero(numero);

    if (!numeroBuscado) {
      setGuia(null);

      setMensaje(
        "Ingresa un número de guía."
      );

      return;
    }

    try {
      setBuscando(true);
      setGuia(null);
      setMensaje("");

      const { data, error } =
        await supabase
          .from("hce_guias")
          .select("*");

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

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

        return;
      }

      const guiaEncontrada =
        (data || []).find(
          (item: Guia) => {
            const numero1 =
              normalizarNumero(
                item.numero || ""
              );

            const numero2 =
              normalizarNumero(
                item.numero_guia || ""
              );

            return (
              numero1 === numeroBuscado ||
              numero2 === numeroBuscado
            );
          }
        );

      if (!guiaEncontrada) {
        setMensaje(
          `No encontramos ninguna guía con el número ${numeroBuscado}.`
        );

        return;
      }

      setGuia(
        guiaEncontrada
      );

    } catch (error: any) {
      console.error(
        "ERROR GENERAL:",
        error
      );

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

    } finally {
      setBuscando(false);
    }
  }

  const numeroGuia =
    guia?.numero ||
    guia?.numero_guia ||
    "";

  const fechaIngresoContenedor =
    formatearFecha(
      guia?.fecha_ingreso_contenedor
    );

  const fechaRegistro =
    formatearFecha(
      guia?.fecha ||
      guia?.created_at
    );

  return (
    <main className="min-h-screen bg-[#020817] p-6 text-white md:p-10">

      <div className="mb-8">
        <Link
          href="/dashboard"
          className="inline-flex items-center gap-2 rounded-xl border border-slate-700 bg-slate-800 px-5 py-3 font-bold transition hover:bg-slate-700"
        >
          ← REGRESAR
        </Link>
      </div>

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

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

          <h1 className="text-4xl font-bold md:text-5xl">
            📦 Rastrea tu envío
          </h1>

          <p className="mt-3 text-slate-400">
            Ingresa tu número de guía para conocer el estado de tu paquete.
          </p>

        </div>

        <form
          onSubmit={rastrear}
          className="rounded-3xl border border-slate-700 bg-slate-900 p-6 shadow-2xl"
        >

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

            <input
              type="text"
              value={numero}
              onChange={(e) =>
                setNumero(
                  e.target.value.toUpperCase()
                )
              }
              placeholder="Ejemplo: HCE000003"
              className="flex-1 rounded-xl border border-orange-500 bg-slate-800 px-5 py-4 font-bold uppercase text-white outline-none focus:border-orange-400"
            />

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

          </div>

        </form>

        {mensaje && (

          <div className="mt-6 rounded-2xl border border-red-700 bg-red-950/40 p-5 text-center text-red-200">
            {mensaje}
          </div>

        )}

        {guia && (

          <div className="mt-6 overflow-hidden rounded-3xl border border-slate-700 bg-slate-900 shadow-2xl">

            <div className="border-b border-slate-700 bg-slate-800 p-6 text-center">

              <p className="text-sm text-slate-400">
                NÚMERO DE GUÍA
              </p>

              <h2 className="mt-2 text-3xl font-bold text-orange-400">
                📦 {numeroGuia}
              </h2>

            </div>

            <div className="space-y-6 p-6">

              <div className="rounded-2xl bg-slate-800 p-5">

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

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

                {guia.estado ===
                  "Ingreso en el contenedor" &&
                  fechaIngresoContenedor && (

                    <div className="mt-4 border-t border-slate-600 pt-4">

                      <p className="text-sm text-slate-400">
                        📅 FECHA DE INGRESO AL CONTENEDOR
                      </p>

                      <p className="mt-2 text-lg font-bold text-orange-400">
                        {fechaIngresoContenedor}
                      </p>

                    </div>

                  )}

              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">

                <div className="rounded-2xl bg-slate-800 p-5">

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

                  <p className="mt-2 text-lg font-bold">
                    {guia.cliente ||
                      "No especificado"}
                  </p>

                </div>

                <div className="rounded-2xl bg-slate-800 p-5">

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

                  <p className="mt-2 text-lg font-bold">
                    {guia.ciudad ||
                      "No especificado"}
                  </p>

                </div>

              </div>

              {fechaRegistro && (

                <div className="rounded-2xl bg-slate-800 p-5">

                  <p className="text-sm text-slate-400">
                    📅 FECHA DE REGISTRO
                  </p>

                  <p className="mt-2 font-bold">
                    {fechaRegistro}
                  </p>

                </div>

              )}

            </div>

          </div>

        )}

      </div>

    </main>
  );
}