"use client";

import { useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";
import PageLayout from "@/components/layout/PageLayout";
import Card from "@/components/ui/Card";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import Button from "@/components/ui/Button";

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;
};

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

const estadoOpciones = estadosContenedor.map((e) => ({ value: e, label: e }));

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);

  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 (
    <PageLayout>
      {/* Encabezado */}
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
          Contenedores
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Administración logística de contenedores y guías
        </p>
      </section>

      {/* Formulario */}
      <Card className="mb-4" padding="sm">
        <h2 className="text-sm font-black text-[var(--text-primary)]">Nuevo contenedor</h2>

        <form onSubmit={crearContenedor} className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
          <Input
            label="Número del contenedor *"
            placeholder="Número del contenedor"
            value={numero}
            onChange={(e) => setNumero(e.target.value)}
          />
          <Input
            label="Naviera"
            placeholder="Naviera"
            value={naviera}
            onChange={(e) => setNaviera(e.target.value)}
          />
          <Input
            label="Fecha de salida"
            type="date"
            value={fechaSalida}
            onChange={(e) => setFechaSalida(e.target.value)}
          />
          <Input
            label="Llegada estimada"
            type="date"
            value={fechaLlegada}
            onChange={(e) => setFechaLlegada(e.target.value)}
          />
          <div className="md:col-span-2">
            <Select
              label="Estado"
              options={estadoOpciones}
              value={estado}
              onChange={(e) => setEstado(e.target.value)}
            />
          </div>

          <div className="md:col-span-2">
            <Button type="submit" size="sm" disabled={guardando}>
              {guardando ? "Creando contenedor..." : "Crear contenedor"}
            </Button>
          </div>
        </form>
      </Card>

      {/* Lista */}
      <section className="mb-3">
        <h2 className="text-sm font-black text-[var(--text-primary)]">Contenedores registrados</h2>
      </section>

      {cargando ? (
        <Card className="p-6 text-center text-sm text-[var(--text-muted)]">
          Cargando contenedores...
        </Card>
      ) : contenedores.length === 0 ? (
        <Card className="p-6 text-center text-sm text-[var(--text-muted)]">
          No hay contenedores registrados todavía.
        </Card>
      ) : (
        <div className="space-y-4">
          {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 (
              <Card key={contenedor.id} padding="sm">
                <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
                  <div className="min-w-0">
                    <h2 className="text-lg font-black text-[var(--accent)]">{contenedor.numero}</h2>
                    <div className="mt-1 space-y-0.5 text-xs text-[var(--text-secondary)]">
                      <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-2 sm:flex-row lg:flex-col">
                    <Select
                      value={contenedor.estado || "📦 Preparando carga"}
                      onChange={(e) => cambiarEstadoContenedor(contenedor.id, e.target.value)}
                      options={estadoOpciones}
                    />
                    <Button
                      variant="danger"
                      size="sm"
                      onClick={() => eliminarContenedor(contenedor.id, contenedor.numero)}
                    >
                      Eliminar
                    </Button>
                  </div>
                </div>

                <div className="mt-4 grid grid-cols-2 gap-3">
                  <Card padding="sm" className="bg-[var(--bg-primary)]">
                    <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                      Guías dentro
                    </p>
                    <p className="mt-1 text-2xl font-black text-[var(--text-primary)]">
                      {guiasContenedor.length}
                    </p>
                  </Card>
                  <Card padding="sm" className="bg-[var(--bg-primary)]">
                    <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                      Cajas registradas
                    </p>
                    <p className="mt-1 text-2xl font-black text-[var(--text-primary)]">
                      {totalCajas}
                    </p>
                  </Card>
                </div>

                <div className="mt-4">
                  <h3 className="text-xs font-black text-[var(--text-primary)]">
                    Guías dentro del contenedor
                  </h3>

                  {guiasContenedor.length === 0 ? (
                    <div className="mt-2 rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3 text-xs text-[var(--text-muted)]">
                      Este contenedor todavía no tiene guías.
                    </div>
                  ) : (
                    <div className="mt-2 space-y-2">
                      {guiasContenedor.map((guia) => (
                        <div
                          key={guia.id}
                          className="flex flex-col justify-between gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3 sm:flex-row sm:items-center"
                        >
                          <div className="min-w-0">
                            <p className="text-sm font-bold text-[var(--accent)]">{guia.numero}</p>
                            <p className="text-xs text-[var(--text-secondary)]">
                              👤 {guia.cliente || "Sin cliente"} · 📍{" "}
                              {guia.ciudad || "Sin ciudad"}
                            </p>
                            <p className="text-xs text-[var(--text-muted)]">
                              {guia.estado || "Sin estado"} · 📦 {Number(guia.cajas || 0)} cajas
                            </p>
                          </div>
                          <Button
                            variant="danger"
                            size="sm"
                            onClick={() => quitarGuia(guia.id)}
                          >
                            Quitar
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                <div className="mt-4 border-t border-[var(--border)] pt-4">
                  <h3 className="text-xs font-black text-[var(--text-primary)]">
                    Agregar guía al contenedor
                  </h3>
                  <Select
                    className="mt-2"
                    defaultValue=""
                    onChange={(e) => {
                      const guiaId = Number(e.target.value);
                      if (!guiaId) return;
                      asignarGuia(guiaId, contenedor.id);
                      e.target.value = "";
                    }}
                    options={[
                      { value: "", label: "Seleccionar una guía disponible" },
                      ...guias
                        .filter((guia) => !guia.contenedor_id)
                        .map((guia) => ({
                          value: String(guia.id),
                          label: `${guia.numero} — ${guia.cliente || "Sin cliente"} — ${Number(
                            guia.cajas || 0
                          )} cajas`,
                        })),
                    ]}
                  />
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </PageLayout>
  );
}