"use client";

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

type Contenedor = {
  id: number;
  numero: string;
  naviera: string | null;
  fecha_salida: string | null;
  fecha_llegada_estimada: string | null;
  estado: string | null;
};

type Guia = {
  id: number;
  numero: string;
  cliente: string | null;
  ciudad: string | null;
  estado: string | null;
  contenedor_id: number | null;
  cajas: number | null;
  fecha_ingreso_contenedor: string | null;
};

export default function ContenedoresPage() {
  const [contenedores, setContenedores] = useState<
    Contenedor[]
  >([]);

  const [guias, setGuias] = useState<
    Guia[]
  >([]);

  const [numero, setNumero] = useState("");
  const [naviera, setNaviera] = useState("");
  const [fechaSalida, setFechaSalida] =
    useState("");

  const [fechaLlegada, setFechaLlegada] =
    useState("");

  const [estado, setEstado] = useState(
    "📦 Preparando carga"
  );

  const [guardando, setGuardando] =
    useState(false);

  const [cargando, setCargando] =
    useState(true);

  const estadosContenedor = [
    "📦 Preparando carga",
    "🚢 En tránsito",
    "🇭🇳 Llegó a Honduras",
    "🏢 En bodega",
  ];

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

  async function cargarTodo() {
    setCargando(true);

    const [
      contenedoresResult,
      guiasResult,
    ] = await Promise.all([
      supabase
        .from("contenedores")
        .select("*")
        .order("id", {
          ascending: false,
        }),

      supabase
        .from("guias")
        .select("*")
        .order("id", {
          ascending: false,
        }),
    ]);

    if (contenedoresResult.error) {
      console.error(
        "ERROR CARGANDO CONTENEDORES:",
        contenedoresResult.error
      );

      alert(
        "Error cargando contenedores: " +
          contenedoresResult.error.message
      );
    } else {
      setContenedores(
        contenedoresResult.data || []
      );
    }

    if (guiasResult.error) {
      console.error(
        "ERROR CARGANDO GUÍAS:",
        guiasResult.error
      );

      alert(
        "Error cargando guías: " +
          guiasResult.error.message
      );
    } else {
      setGuias(
        guiasResult.data || []
      );
    }

    setCargando(false);
  }

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

    if (!numero.trim()) {
      alert(
        "Debes ingresar el número del contenedor."
      );

      return;
    }

    setGuardando(true);

    const { error } = await supabase
      .from("contenedores")
      .insert({
        numero: numero.trim(),
        naviera:
          naviera.trim() || null,
        fecha_salida:
          fechaSalida || null,
        fecha_llegada_estimada:
          fechaLlegada || null,
        estado,
      });

    setGuardando(false);

    if (error) {
      console.error(
        "ERROR CREANDO CONTENEDOR:",
        error
      );

      alert(
        "Error creando contenedor: " +
          error.message
      );

      return;
    }

    alert(
      "🚛 Contenedor creado correctamente."
    );

    setNumero("");
    setNaviera("");
    setFechaSalida("");
    setFechaLlegada("");

    setEstado(
      "📦 Preparando carga"
    );

    await cargarTodo();
  }

  async function cambiarEstadoContenedor(
    contenedorId: number,
    nuevoEstado: string
  ) {
    const { error } = await supabase
      .from("contenedores")
      .update({
        estado: nuevoEstado,
      })
      .eq(
        "id",
        contenedorId
      );

    if (error) {
      console.error(
        "ERROR ACTUALIZANDO CONTENEDOR:",
        error
      );

      alert(
        "Error actualizando contenedor: " +
          error.message
      );

      return;
    }

    let estadoGuia: string | null =
      null;

    if (
      nuevoEstado ===
      "📦 Preparando carga"
    ) {
      estadoGuia =
        "📦 Ingreso en el contenedor";
    }

    if (
      nuevoEstado ===
      "🚢 En tránsito"
    ) {
      estadoGuia =
        "🚢 En tránsito";
    }

    if (
      nuevoEstado ===
      "🇭🇳 Llegó a Honduras"
    ) {
      estadoGuia =
        "🇭🇳 Llegó a Honduras";
    }

    if (
      nuevoEstado ===
      "🏢 En bodega"
    ) {
      estadoGuia =
        "🟢 En Bodega";
    }

    if (estadoGuia) {
      const {
        error: errorGuias,
      } = await supabase
        .from("guias")
        .update({
          estado: estadoGuia,
        })
        .eq(
          "contenedor_id",
          contenedorId
        );

      if (errorGuias) {
        console.error(
          "ERROR ACTUALIZANDO GUÍAS:",
          errorGuias
        );

        alert(
          "El contenedor fue actualizado, pero ocurrió un error actualizando las guías: " +
            errorGuias.message
        );
      }
    }

    await cargarTodo();
  }

  async function asignarGuia(
    guiaId: number,
    contenedorId: number
  ) {
    const fechaIngreso =
      new Date().toISOString();

    const { error } = await supabase
      .from("guias")
      .update({
        contenedor_id:
          contenedorId,

        estado:
          "📦 Ingreso en el contenedor",

        fecha_ingreso_contenedor:
          fechaIngreso,
      })
      .eq(
        "id",
        guiaId
      );

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

      alert(
        "Error agregando guía al contenedor: " +
          error.message
      );

      return;
    }

    await cargarTodo();
  }

  async function quitarGuia(
    guiaId: number
  ) {
    const confirmar =
      window.confirm(
        "¿Deseas quitar esta guía del contenedor?\n\nLa guía volverá a estar disponible en bodega."
      );

    if (!confirmar) {
      return;
    }

    const { error } = await supabase
      .from("guias")
      .update({
        contenedor_id: null,

        estado:
          "🟢 En Bodega",

        fecha_ingreso_contenedor:
          null,
      })
      .eq(
        "id",
        guiaId
      );

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

      alert(
        "Error quitando guía: " +
          error.message
      );

      return;
    }

    await cargarTodo();
  }

  async function eliminarContenedor(
    contenedorId: number,
    numeroContenedor: string
  ) {
    const confirmar =
      window.confirm(
        `¿Eliminar el contenedor ${numeroContenedor}?\n\nLas guías no se eliminarán. Solamente quedarán nuevamente disponibles en bodega.`
      );

    if (!confirmar) {
      return;
    }

    const {
      error: errorGuias,
    } = await supabase
      .from("guias")
      .update({
        contenedor_id: null,

        estado:
          "🟢 En Bodega",

        fecha_ingreso_contenedor:
          null,
      })
      .eq(
        "contenedor_id",
        contenedorId
      );

    if (errorGuias) {
      console.error(
        "ERROR LIBERANDO GUÍAS:",
        errorGuias
      );

      alert(
        "No se pudieron liberar las guías: " +
          errorGuias.message
      );

      return;
    }

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

    if (error) {
      console.error(
        "ERROR ELIMINANDO CONTENEDOR:",
        error
      );

      alert(
        "Error eliminando contenedor: " +
          error.message
      );

      return;
    }

    alert(
      "🚛 Contenedor eliminado correctamente."
    );

    await cargarTodo();
  }

  return (
    <main className="min-h-screen bg-slate-950 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-orange-500"
        >
          🏠 Inicio
        </Link>
      </div>

      <div className="mb-10">
        <h1 className="text-4xl font-bold md:text-5xl">
          🚛 Contenedores
        </h1>

        <p className="mt-2 text-slate-400">
          Administración logística de contenedores y guías.
        </p>
      </div>

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

        <h2 className="mb-6 text-2xl font-bold">
          ➕ Nuevo Contenedor
        </h2>

        <form onSubmit={crearContenedor}>

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

            <input
              type="text"
              placeholder="Número del contenedor *"
              value={numero}
              onChange={(e) =>
                setNumero(e.target.value)
              }
              className="rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500"
            />

            <input
              type="text"
              placeholder="Naviera"
              value={naviera}
              onChange={(e) =>
                setNaviera(e.target.value)
              }
              className="rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500"
            />

            <input
              type="date"
              value={fechaSalida}
              onChange={(e) =>
                setFechaSalida(e.target.value)
              }
              className="rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500"
            />

            <input
              type="date"
              value={fechaLlegada}
              onChange={(e) =>
                setFechaLlegada(e.target.value)
              }
              className="rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500"
            />

            <select
              value={estado}
              onChange={(e) =>
                setEstado(e.target.value)
              }
              className="rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500 md:col-span-2"
            >
              {estadosContenedor.map(
                (estadoItem) => (
                  <option
                    key={estadoItem}
                    value={estadoItem}
                  >
                    {estadoItem}
                  </option>
                )
              )}
            </select>

          </div>

          <button
            type="submit"
            disabled={guardando}
            className="mt-5 w-full rounded-xl bg-orange-500 p-4 font-bold transition hover:bg-orange-600 disabled:bg-slate-600"
          >
            {guardando
              ? "Creando contenedor..."
              : "🚛 Crear Contenedor"}
          </button>

        </form>

      </div>

      <h2 className="mb-6 text-3xl font-bold">
        🚛 Contenedores registrados
      </h2>

      {cargando ? (

        <div className="rounded-2xl border border-slate-800 bg-slate-900 p-8 text-slate-400">
          Cargando contenedores...
        </div>

      ) : contenedores.length === 0 ? (

        <div className="rounded-2xl border border-slate-800 bg-slate-900 p-8 text-slate-400">
          No hay contenedores registrados todavía.
        </div>

      ) : (

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

          {contenedores.map(
            (contenedor) => {

              const guiasContenedor =
                guias.filter(
                  (guia) =>
                    guia.contenedor_id ===
                    contenedor.id
                );

              const totalCajas =
                guiasContenedor.reduce(
                  (total, guia) =>
                    total +
                    Number(
                      guia.cajas || 0
                    ),
                  0
                );

              return (

                <div
                  key={contenedor.id}
                  className="rounded-2xl border border-slate-800 bg-slate-900 p-6 md:p-8"
                >

                  <div className="flex flex-col justify-between gap-6 lg:flex-row">

                    <div>

                      <h2 className="text-3xl font-bold text-orange-400">
                        🚛 {contenedor.numero}
                      </h2>

                      <div className="mt-3 space-y-1 text-slate-400">

                        <p>
                          🚢 Naviera:{" "}
                          {contenedor.naviera ||
                            "No especificada"}
                        </p>

                        <p>
                          📅 Salida:{" "}
                          {contenedor.fecha_salida ||
                            "-"}
                        </p>

                        <p>
                          🇭🇳 Llegada estimada:{" "}
                          {contenedor.fecha_llegada_estimada ||
                            "-"}
                        </p>

                      </div>

                    </div>

                    <div className="flex flex-col gap-3">

                      <select
                        value={
                          contenedor.estado ||
                          "📦 Preparando carga"
                        }
                        onChange={(e) =>
                          cambiarEstadoContenedor(
                            contenedor.id,
                            e.target.value
                          )
                        }
                        className="rounded-xl border border-slate-700 bg-slate-800 px-5 py-3 outline-none focus:border-orange-500"
                      >
                        {estadosContenedor.map(
                          (estadoItem) => (
                            <option
                              key={estadoItem}
                              value={estadoItem}
                            >
                              {estadoItem}
                            </option>
                          )
                        )}
                      </select>

                      <button
                        onClick={() =>
                          eliminarContenedor(
                            contenedor.id,
                            contenedor.numero
                          )
                        }
                        className="rounded-xl bg-red-600 px-5 py-3 font-bold transition hover:bg-red-700"
                      >
                        🗑 Eliminar
                      </button>

                    </div>

                  </div>

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

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

                      <p className="text-slate-400">
                        📄 Guías dentro
                      </p>

                      <p className="mt-2 text-3xl font-bold">
                        {guiasContenedor.length}
                      </p>

                    </div>

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

                      <p className="text-slate-400">
                        📦 Cajas registradas
                      </p>

                      <p className="mt-2 text-3xl font-bold">
                        {totalCajas}
                      </p>

                    </div>

                  </div>

                  <div className="mt-8">

                    <h3 className="mb-4 text-xl font-bold">
                      📦 Guías dentro del contenedor
                    </h3>

                    {guiasContenedor.length ===
                    0 ? (

                      <div className="rounded-xl bg-slate-800 p-5 text-slate-400">
                        Este contenedor todavía no tiene guías.
                      </div>

                    ) : (

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

                        {guiasContenedor.map(
                          (guia) => (

                            <div
                              key={guia.id}
                              className="flex flex-col justify-between gap-4 rounded-xl bg-slate-800 p-4 md:flex-row md:items-center"
                            >

                              <div>

                                <p className="font-bold text-orange-400">
                                  📦 {guia.numero}
                                </p>

                                <p className="mt-1 text-sm text-slate-400">
                                  👤{" "}
                                  {guia.cliente ||
                                    "Sin cliente"}
                                  {" · "}
                                  📍{" "}
                                  {guia.ciudad ||
                                    "Sin ciudad"}
                                </p>

                                <p className="mt-1 text-sm text-slate-500">
                                  {guia.estado ||
                                    "Sin estado"}
                                  {" · "}
                                  📦{" "}
                                  {Number(
                                    guia.cajas || 0
                                  )}{" "}
                                  cajas
                                </p>

                              </div>

                              <button
                                onClick={() =>
                                  quitarGuia(
                                    guia.id
                                  )
                                }
                                className="rounded-xl bg-red-600 px-5 py-3 font-medium transition hover:bg-red-700"
                              >
                                Quitar
                              </button>

                            </div>

                          )
                        )}

                      </div>

                    )}

                  </div>

                  <div className="mt-8 border-t border-slate-800 pt-6">

                    <h3 className="mb-4 text-xl font-bold">
                      ➕ Agregar guía al contenedor
                    </h3>

                    <select
                      defaultValue=""
                      onChange={(e) => {

                        const guiaId =
                          Number(
                            e.target.value
                          );

                        if (!guiaId) {
                          return;
                        }

                        asignarGuia(
                          guiaId,
                          contenedor.id
                        );

                        e.target.value =
                          "";

                      }}
                      className="w-full rounded-xl border border-slate-700 bg-slate-800 p-4 outline-none focus:border-orange-500"
                    >

                      <option value="">
                        Seleccionar una guía disponible
                      </option>

                      {guias
                        .filter(
                          (guia) =>
                            !guia.contenedor_id
                        )
                        .map(
                          (guia) => (

                            <option
                              key={guia.id}
                              value={guia.id}
                            >
                              {guia.numero}
                              {" — "}
                              {guia.cliente ||
                                "Sin cliente"}
                              {" — "}
                              {Number(
                                guia.cajas || 0
                              )} cajas
                            </option>

                          )
                        )}

                    </select>

                  </div>

                </div>

              );

            }
          )}

        </div>

      )}

    </main>
  );
}