"use client";

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

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

const estados = [
  {
    value: "Recibida",
    label: "📥 Recibida",
  },
  {
    value: "Recolectada",
    label: "📦 En Bodega",
  },
  {
    value: "Ingreso en el contenedor",
    label: "🚢 Ingreso en el contenedor",
  },
  {
    value: "En tránsito",
    label: "✈️ En tránsito",
  },
  {
    value: "Llegó a Honduras",
    label: "🇭🇳 Llegó a Honduras",
  },
  {
    value: "En entrega",
    label: "🚚 Ruta de entrega",
  },
  {
    value: "Entregada",
    label: "✅ Entregada",
  },
];

function obtenerFecha(guia: Guia) {
  return guia.fecha || guia.created_at || "";
}

function formatearFecha(fecha: string) {
  if (!fecha) {
    return "-";
  }

  const fechaConvertida = new Date(fecha);

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

  return fechaConvertida.toLocaleString("es-HN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export default function GuiasPage() {
  const [guias, setGuias] = useState<Guia[]>([]);
  const [loading, setLoading] = useState(true);
  const [errorCarga, setErrorCarga] = useState("");

  const cargarGuias = useCallback(async () => {
    console.log("========== CARGANDO GUIAS ==========");

    setLoading(true);
    setErrorCarga("");

    try {
      const consulta = supabase
        .from("hce_guias")
        .select("*");

      const timeout = new Promise<never>((_, reject) => {
        setTimeout(() => {
          reject(
            new Error(
              "La consulta tardó demasiado tiempo. Revisa la conexión con Supabase."
            )
          );
        }, 10000);
      });

      const resultado = await Promise.race([
        consulta,
        timeout,
      ]);

      const { data, error } = resultado;

      if (error) {
        throw new Error(error.message);
      }

      const guiasRecibidas: Guia[] = Array.isArray(data)
        ? data
        : [];

      const guiasOrdenadas = [...guiasRecibidas].sort(
        (a, b) => {
          const fechaA = new Date(
            obtenerFecha(a) || 0
          ).getTime();

          const fechaB = new Date(
            obtenerFecha(b) || 0
          ).getTime();

          return fechaB - fechaA;
        }
      );

      setGuias(guiasOrdenadas);

    } catch (error: unknown) {
      console.error(
        "ERROR CARGANDO GUIAS:",
        error
      );

      const mensaje =
        error instanceof Error
          ? error.message
          : "Ocurrió un error desconocido.";

      setErrorCarga(mensaje);
      setGuias([]);

    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    cargarGuias();
  }, [cargarGuias]);

  async function cambiarEstado(
    id: number | string,
    nuevoEstado: string
  ) {
    const estadoAnterior =
      guias.find(
        (guia) =>
          String(guia.id) === String(id)
      )?.estado;

    setGuias((actuales) =>
      actuales.map((guia) =>
        String(guia.id) === String(id)
          ? {
              ...guia,
              estado: nuevoEstado,
            }
          : guia
      )
    );

    const { error } = await supabase
      .from("hce_guias")
      .update({
        estado: nuevoEstado,
      })
      .eq("id", id);

    if (error) {
      console.error(
        "Error actualizando estado:",
        error
      );

      setGuias((actuales) =>
        actuales.map((guia) =>
          String(guia.id) === String(id)
            ? {
                ...guia,
                estado:
                  estadoAnterior ||
                  "Recibida",
              }
            : guia
        )
      );

      alert(
        "No se pudo actualizar el estado: " +
          error.message
      );
    }
  }

  async function eliminarGuia(
    id: number | string,
    numero: string
  ) {
    const confirmar = window.confirm(
      `¿Seguro que deseas eliminar la guía ${numero}?`
    );

    if (!confirmar) {
      return;
    }

    try {
      const { error: errorCajas } = await supabase
        .from("hce_cajas")
        .delete()
        .eq("guia_id", id);

      if (errorCajas) {
        console.warn(
          "Error eliminando cajas:",
          errorCajas
        );
      }

      const { error } = await supabase
        .from("hce_guias")
        .delete()
        .eq("id", id);

      if (error) {
        throw error;
      }

      setGuias((actuales) =>
        actuales.filter(
          (guia) =>
            String(guia.id) !== String(id)
        )
      );

    } catch (error: unknown) {
      const mensaje =
        error instanceof Error
          ? error.message
          : "Error desconocido";

      alert(
        "No se pudo eliminar la guía: " +
          mensaje
      );
    }
  }

  if (loading) {
    return (
      <main className="min-h-screen bg-[#060d1c] p-4 text-white sm:p-6 md:p-8">
        <div className="mx-auto max-w-7xl">
          <div className="rounded-2xl border border-slate-700 bg-[#182235] p-5 shadow-lg">
            <div className="flex items-center gap-3">
              <span className="text-2xl">📦</span>

              <div>
                <strong className="text-base sm:text-lg">
                  Cargando guías...
                </strong>

                <p className="mt-1 text-sm text-slate-400">
                  Consultando Honduras Cargo Express.
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-[#060d1c] p-4 text-white sm:p-6 md:p-8">

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

        {/* NAVEGACIÓN Y ACCIONES */}

        <div className="mb-7 flex flex-col gap-5 sm:mb-8 md:flex-row md:items-center md:justify-between">

          <div>

            <Link
              href="/dashboard"
              className="mb-5 inline-flex items-center gap-2 rounded-lg border border-slate-700 bg-[#182235] px-4 py-2.5 text-sm font-semibold text-white transition duration-200 hover:border-orange-500 hover:bg-[#253247]"
            >
              ← Inicio
            </Link>

            <h1 className="flex items-center gap-3 text-3xl font-bold sm:text-4xl">
              <span className="rounded-xl border border-orange-500/30 bg-orange-500/10 p-2 text-2xl">
                📦
              </span>

              Guías
            </h1>

            <p className="mt-3 text-sm text-slate-400 sm:text-base">
              Administración de envíos de Honduras Cargo Express
            </p>

          </div>

          <Link
            href="/guias/nueva"
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-orange-500 px-5 py-3.5 text-sm font-bold text-white shadow-lg shadow-orange-950/30 transition duration-200 hover:bg-orange-600 hover:shadow-orange-500/20 sm:w-auto sm:px-6 sm:text-base"
          >
            <span className="text-lg">＋</span>
            Nueva Guía
          </Link>

        </div>

        {/* ERROR */}

        {errorCarga && (
          <div className="mb-6 rounded-2xl border border-red-500/50 bg-red-950/40 p-5 text-sm text-red-100 shadow-lg">

            <div className="flex items-start gap-3">

              <span className="text-xl">
                ⚠️
              </span>

              <div className="min-w-0">

                <strong className="text-base">
                  Error al cargar las guías
                </strong>

                <p className="mt-2 break-words text-red-200">
                  {errorCarga}
                </p>

                <button
                  type="button"
                  onClick={cargarGuias}
                  className="mt-4 inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-red-700"
                >
                  🔄 Reintentar
                </button>

              </div>

            </div>

          </div>
        )}

        {/* TABLA */}

        <div className="overflow-hidden rounded-2xl border border-slate-700 bg-[#182235] shadow-xl">

          <div className="flex flex-col gap-1 border-b border-slate-700 bg-[#1d293b] px-5 py-4 sm:hidden">
            <p className="text-sm font-semibold text-white">
              📋 Lista de guías
            </p>

            <p className="text-xs text-slate-400">
              Desliza hacia los lados para ver toda la información.
            </p>
          </div>

          <div className="overflow-x-auto">

            <table className="min-w-[900px] w-full">

              <thead className="bg-[#253247]">

                <tr>

                  <th className="whitespace-nowrap px-5 py-4 text-left text-sm font-bold text-slate-200">
                    Guía
                  </th>

                  <th className="whitespace-nowrap px-5 py-4 text-left text-sm font-bold text-slate-200">
                    Cliente
                  </th>

                  <th className="whitespace-nowrap px-5 py-4 text-left text-sm font-bold text-slate-200">
                    Ciudad
                  </th>

                  <th className="whitespace-nowrap px-5 py-4 text-left text-sm font-bold text-slate-200">
                    Estado
                  </th>

                  <th className="whitespace-nowrap px-5 py-4 text-left text-sm font-bold text-slate-200">
                    Fecha
                  </th>

                  <th className="whitespace-nowrap px-5 py-4 text-center text-sm font-bold text-slate-200">
                    Acciones
                  </th>

                </tr>

              </thead>

              <tbody>

                {guias.map((guia) => {

                  const numeroGuia =
                    guia.numero_guia ||
                    guia.numero ||
                    "Sin número";

                  return (

                    <tr
                      key={String(guia.id)}
                      className="border-t border-slate-700/80 transition duration-150 hover:bg-[#202d40]"
                    >

                      <td className="whitespace-nowrap px-5 py-4 text-sm font-bold text-orange-400">
                        {numeroGuia}
                      </td>

                      <td className="max-w-[220px] truncate px-5 py-4 text-sm text-slate-200">
                        {guia.cliente || "-"}
                      </td>

                      <td className="whitespace-nowrap px-5 py-4 text-sm text-slate-300">
                        {guia.ciudad || "-"}
                      </td>

                      <td className="px-5 py-4">

                        <select
                          value={
                            guia.estado ||
                            "Recibida"
                          }
                          onChange={(event) =>
                            cambiarEstado(
                              guia.id,
                              event.target.value
                            )
                          }
                          className="min-w-[220px] cursor-pointer rounded-lg border border-slate-600 bg-[#253247] px-3 py-2.5 text-sm text-white outline-none transition focus:border-orange-500 focus:ring-2 focus:ring-orange-500/20"
                        >

                          {estados.map(
                            (estado) => (

                              <option
                                key={estado.value}
                                value={estado.value}
                              >
                                {estado.label}
                              </option>

                            )
                          )}

                        </select>

                      </td>

                      <td className="whitespace-nowrap px-5 py-4 text-sm text-slate-400">
                        {formatearFecha(
                          obtenerFecha(guia)
                        )}
                      </td>

                      <td className="px-5 py-4">

                        <div className="flex justify-center gap-2">

                          <Link
                            href={`/guias/${guia.id}`}
                            className="flex h-10 items-center justify-center gap-2 rounded-lg bg-blue-600 px-3 text-sm font-bold text-white transition hover:bg-blue-700"
                            title="Ver guía"
                            aria-label="Ver guía"
                          >
                            👁
                            <span className="hidden lg:inline">
                              Ver
                            </span>
                          </Link>

                          <Link
                            href={`/guias/${guia.id}/editar`}
                            className="flex h-10 items-center justify-center gap-2 rounded-lg bg-amber-500 px-3 text-sm font-bold text-slate-950 transition hover:bg-amber-400"
                            title="Editar guía"
                            aria-label="Editar guía"
                          >
                            ✏️
                            <span className="hidden lg:inline">
                              Editar
                            </span>
                          </Link>

                          <button
                            type="button"
                            onClick={() =>
                              eliminarGuia(
                                guia.id,
                                numeroGuia
                              )
                            }
                            className="flex h-10 items-center justify-center gap-2 rounded-lg bg-red-600 px-3 text-sm font-bold text-white transition hover:bg-red-700"
                            title="Eliminar guía"
                            aria-label="Eliminar guía"
                          >
                            🗑️
                            <span className="hidden lg:inline">
                              Eliminar
                            </span>
                          </button>

                        </div>

                      </td>

                    </tr>

                  );

                })}

                {!errorCarga &&
                  guias.length === 0 && (

                    <tr>

                      <td
                        colSpan={6}
                        className="px-5 py-14 text-center"
                      >

                        <div className="flex flex-col items-center">

                          <span className="text-4xl">
                            📭
                          </span>

                          <strong className="mt-4 text-base text-white">
                            No hay guías registradas
                          </strong>

                          <p className="mt-2 text-sm text-slate-400">
                            Cuando registres una nueva guía aparecerá aquí.
                          </p>

                          <Link
                            href="/guias/nueva"
                            className="mt-5 inline-flex items-center gap-2 rounded-xl bg-orange-500 px-5 py-3 text-sm font-bold text-white transition hover:bg-orange-600"
                          >
                            ＋ Registrar nueva guía
                          </Link>

                        </div>

                      </td>

                    </tr>

                  )}

              </tbody>

            </table>

          </div>

        </div>

      </div>

    </main>
  );
}