"use client";

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

type Envio = {
  id: number;
  numero_guia: string;
  fecha_registro: string;
  nombre_cliente: string;
  telefono_cliente: string | null;
  pais_destino: string;
  descripcion: string | null;
  cantidad_paquetes: number;
  firma: string | null;
  estado: string;
};

export default function EnviosPage() {
  const [envios, setEnvios] = useState<Envio[]>([]);

  const [numeroGuia, setNumeroGuia] = useState("");

  const [nombreCliente, setNombreCliente] =
    useState("");

  const [telefonoCliente, setTelefonoCliente] =
    useState("");

  const [paisDestino, setPaisDestino] =
    useState("Honduras");

  const [descripcion, setDescripcion] =
    useState("");

  const [cantidadPaquetes, setCantidadPaquetes] =
    useState(1);

  const [firma, setFirma] = useState("");

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

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

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

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

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

  /*
  ==========================================
  CARGAR ENVÍOS
  ==========================================
  */

  async function cargarEnvios() {
    try {
      setCargando(true);

      const { data, error } = await supabase
        .from("hce_envios")
        .select("*")
        .order("id", {
          ascending: false,
        });

      if (error) {
        console.error(
          "ERROR CARGANDO ENVÍOS:",
          error
        );

        setMensaje(
          "Error cargando envíos: " +
            error.message
        );

        return;
      }

      setEnvios(data || []);

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

      setMensaje(
        error?.message ||
          "Ocurrió un error cargando los envíos."
      );

    } finally {
      setCargando(false);
    }
  }

  /*
  ==========================================
  GENERAR PRÓXIMO NÚMERO DE GUÍA
  ==========================================
  */

  async function generarNumeroGuia() {
    try {
      const { data, error } = await supabase
        .from("hce_envios")
        .select("id")
        .order("id", {
          ascending: false,
        })
        .limit(1);

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

        return;
      }

      const ultimoId =
        data && data.length > 0
          ? Number(data[0].id)
          : 0;

      const siguienteNumero =
        ultimoId + 1;

      const guiaGenerada =
        `HCE-${String(
          siguienteNumero
        ).padStart(6, "0")}`;

      setNumeroGuia(
        guiaGenerada
      );

    } catch (error) {
      console.error(
        "ERROR GENERANDO NÚMERO:",
        error
      );
    }
  }

  /*
  ==========================================
  GUARDAR ENVÍO
  ==========================================
  */

  async function guardarEnvio(
    event: React.FormEvent<HTMLFormElement>
  ) {
    event.preventDefault();

    setMensaje("");

    if (!nombreCliente.trim()) {
      setMensaje(
        "Debes ingresar el nombre del cliente."
      );

      return;
    }

    if (!numeroGuia) {
      setMensaje(
        "No se pudo generar el número de guía."
      );

      return;
    }

    if (
      !cantidadPaquetes ||
      Number(cantidadPaquetes) < 1
    ) {
      setMensaje(
        "La cantidad de paquetes debe ser mayor a 0."
      );

      return;
    }

    try {
      setGuardando(true);

      const { data, error } = await supabase
        .from("hce_envios")
        .insert([
          {
            numero_guia:
              numeroGuia,

            nombre_cliente:
              nombreCliente.trim(),

            telefono_cliente:
              telefonoCliente.trim() || null,

            pais_destino:
              paisDestino,

            descripcion:
              descripcion.trim() || null,

            cantidad_paquetes:
              Number(cantidadPaquetes),

            firma:
              firma.trim() || null,

            estado:
              "Registrado",
          },
        ])
        .select()
        .single();

      if (error) {
        console.error(
          "ERROR GUARDANDO ENVÍO:",
          error
        );

        setMensaje(
          "Error guardando el envío: " +
            error.message
        );

        return;
      }

      setMensaje(
        `✅ Envío registrado correctamente. Guía: ${data.numero_guia}`
      );

      setNombreCliente("");
      setTelefonoCliente("");
      setPaisDestino("Honduras");
      setDescripcion("");
      setCantidadPaquetes(1);
      setFirma("");

      await cargarEnvios();
      await generarNumeroGuia();

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

      setMensaje(
        error?.message ||
          "Ocurrió un error guardando el envío."
      );

    } finally {
      setGuardando(false);
    }
  }

  /*
  ==========================================
  FORMATEAR FECHA
  ==========================================
  */

  function formatearFecha(
    fecha: string
  ) {
    return new Intl.DateTimeFormat(
      "es-HN",
      {
        timeZone:
          "America/Chicago",

        day:
          "2-digit",

        month:
          "2-digit",

        year:
          "numeric",

        hour:
          "2-digit",

        minute:
          "2-digit",

        hour12:
          true,
      }
    ).format(
      new Date(fecha)
    );
  }

  /*
  ==========================================
  IMPRIMIR RECIBO
  ==========================================
  */

  function imprimirRecibo(
    envio: Envio
  ) {
    const fecha =
      formatearFecha(
        envio.fecha_registro
      );

    const ventana =
      window.open(
        "",
        "_blank",
        "width=500,height=800"
      );

    if (!ventana) {
      alert(
        "No se pudo abrir la ventana de impresión."
      );

      return;
    }

    ventana.document.write(`
      <!DOCTYPE html>
      <html lang="es">

      <head>

        <meta charset="UTF-8" />

        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0"
        />

        <title>
          Recibo ${envio.numero_guia}
        </title>

        <style>

          * {
            box-sizing: border-box;
          }

          body {
            margin: 0;
            padding: 0;
            background: white;
            color: black;
            font-family:
              Arial,
              Helvetica,
              sans-serif;
          }

          .recibo {
            width: 80mm;
            max-width: 80mm;
            margin: 0 auto;
            padding: 5mm;
          }

          .logo {
            width: 100%;
            max-width: 70mm;
            display: block;
            margin:
              0 auto
              5mm auto;
          }

          .titulo {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 4mm;
          }

          .guia {
            border: 2px solid black;
            text-align: center;
            padding: 8px;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 4mm;
          }

          .linea {
            border-top:
              1px dashed black;
            margin:
              4mm 0;
          }

          .fila {
            margin-bottom: 8px;
            font-size: 14px;
          }

          .label {
            font-weight: bold;
            display: block;
            margin-bottom: 2px;
          }

          .valor {
            word-break: break-word;
          }

          .firma {
            margin-top: 8mm;
            text-align: center;
          }

          .firma-linea {
            border-top:
              1px solid black;
            margin:
              15mm auto
              3mm auto;
            width: 60mm;
          }

          .footer {
            text-align: center;
            font-size: 12px;
            margin-top: 5mm;
            line-height: 1.6;
          }

          .gracias {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            margin-top: 5mm;
          }

          @media print {

            body {
              width: 80mm;
            }

            .recibo {
              width: 80mm;
              margin: 0;
              padding: 4mm;
            }

          }

        </style>

      </head>

      <body>

        <div class="recibo">

          <img
            src="/LOGO HONDURAS CARGO 2.png"
            alt="Honduras Cargo Express"
            class="logo"
          />

          <div class="titulo">
            RECIBO DE ENVÍO
          </div>

          <div class="guia">
            ${envio.numero_guia}
          </div>

          <div class="fila">

            <span class="label">
              Fecha:
            </span>

            <span class="valor">
              ${fecha}
            </span>

          </div>

          <div class="linea"></div>

          <div class="fila">

            <span class="label">
              Cliente en Estados Unidos:
            </span>

            <span class="valor">
              ${envio.nombre_cliente}
            </span>

          </div>

          <div class="fila">

            <span class="label">
              Número de celular:
            </span>

            <span class="valor">
              ${
                envio.telefono_cliente ||
                "No registrado"
              }
            </span>

          </div>

          <div class="linea"></div>

          <div class="fila">

            <span class="label">
              País de destino:
            </span>

            <span class="valor">
              ${envio.pais_destino}
            </span>

          </div>

          <div class="fila">

            <span class="label">
              Cantidad de paquetes:
            </span>

            <span class="valor">
              ${envio.cantidad_paquetes}
            </span>

          </div>

          <div class="fila">

            <span class="label">
              Descripción:
            </span>

            <span class="valor">
              ${
                envio.descripcion ||
                "Sin descripción"
              }
            </span>

          </div>

          <div class="firma">

            <div class="firma-linea"></div>

            <strong>
              ${
                envio.firma ||
                "Firma del cliente"
              }
            </strong>

          </div>

          <div class="linea"></div>

          <div class="footer">

            <strong>
              HONDURAS CARGO EXPRESS
            </strong>

            <br />

            📞 Empresa:
            (865) 361-3045

            <br />

            ☎️ Servicio al cliente:
            (865) 361-8964

            <br />

            📧
            atencion-cliente@hondurascargoexpress.com

            <br />

            🌐
            hondurascargoexpress.com

          </div>

          <div class="gracias">

            ¡Gracias por confiar en nosotros!

          </div>

        </div>

        <script>

          window.onload = function () {

            window.focus();

            setTimeout(
              function () {

                window.print();

              },
              500
            );

          };

        </script>

      </body>

      </html>
    `);

    ventana.document.close();
  }

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

      {/* INICIO */}

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

      {/* ENCABEZADO */}

      <div className="mb-10">

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

        <p className="mt-3 text-lg text-slate-400">
          Honduras Cargo Express
        </p>

      </div>

      {/* MENSAJE */}

      {mensaje && (

        <div className="mb-8 rounded-2xl border border-orange-500/40 bg-orange-500/10 p-5 text-orange-300">

          {mensaje}

        </div>

      )}

      {/* FORMULARIO */}

      <div className="mb-10 rounded-3xl border border-slate-800 bg-slate-900 p-6 md:p-8">

        <h2 className="mb-6 text-2xl font-bold md:text-3xl">
          ➕ Nuevo Envío
        </h2>

        <form
          onSubmit={guardarEnvio}
          className="grid grid-cols-1 gap-6 md:grid-cols-2"
        >

          {/* GUÍA */}

          <div>

            <label className="mb-2 block font-medium">
              🔢 Número de guía
            </label>

            <input
              type="text"
              value={numeroGuia}
              readOnly
              className="w-full rounded-xl border border-orange-500 bg-slate-800 px-4 py-4 font-bold text-orange-400 outline-none"
            />

          </div>

          {/* PAÍS */}

          <div>

            <label className="mb-2 block font-medium">
              🌎 País de destino *
            </label>

            <select
              value={paisDestino}
              onChange={(event) =>
                setPaisDestino(
                  event.target.value
                )
              }
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            >

              <option value="Honduras">
                🇭🇳 Honduras
              </option>

              <option value="Guatemala">
                🇬🇹 Guatemala
              </option>

              <option value="El Salvador">
                🇸🇻 El Salvador
              </option>

              <option value="Nicaragua">
                🇳🇮 Nicaragua
              </option>

            </select>

          </div>

          {/* CLIENTE */}

          <div>

            <label className="mb-2 block font-medium">
              👤 Nombre del cliente en Estados Unidos *
            </label>

            <input
              type="text"
              value={nombreCliente}
              onChange={(event) =>
                setNombreCliente(
                  event.target.value
                )
              }
              placeholder="Nombre completo"
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            />

          </div>

          {/* TELÉFONO */}

          <div>

            <label className="mb-2 block font-medium">
              📱 Número de celular
            </label>

            <input
              type="text"
              value={telefonoCliente}
              onChange={(event) =>
                setTelefonoCliente(
                  event.target.value
                )
              }
              placeholder="(865) 000-0000"
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            />

          </div>

          {/* PAQUETES */}

          <div>

            <label className="mb-2 block font-medium">
              📦 Cantidad de paquetes *
            </label>

            <input
              type="number"
              min="1"
              value={cantidadPaquetes}
              onChange={(event) =>
                setCantidadPaquetes(
                  Number(
                    event.target.value
                  )
                )
              }
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            />

          </div>

          {/* DESCRIPCIÓN */}

          <div>

            <label className="mb-2 block font-medium">
              📝 Descripción
            </label>

            <input
              type="text"
              value={descripcion}
              onChange={(event) =>
                setDescripcion(
                  event.target.value
                )
              }
              placeholder="Ejemplo: Caja con ropa"
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            />

          </div>

          {/* FIRMA */}

          <div className="md:col-span-2">

            <label className="mb-2 block font-medium">
              ✍️ Nombre para firma
            </label>

            <input
              type="text"
              value={firma}
              onChange={(event) =>
                setFirma(
                  event.target.value
                )
              }
              placeholder="Nombre de quien firma"
              className="w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-4 text-white outline-none focus:border-orange-500"
            />

          </div>

          {/* BOTÓN */}

          <div className="md:col-span-2">

            <button
              type="submit"
              disabled={guardando}
              className="w-full rounded-xl bg-orange-500 px-6 py-4 text-lg font-bold transition hover:bg-orange-600 disabled:bg-slate-600"
            >

              {guardando
                ? "Guardando envío..."
                : "💾 Registrar envío y generar guía"}

            </button>

          </div>

        </form>

      </div>

      {/* LISTA */}

      <div className="rounded-3xl border border-slate-800 bg-slate-900">

        <div className="border-b border-slate-800 p-6">

          <h2 className="text-2xl font-bold md:text-3xl">
            📋 Envíos registrados
          </h2>

        </div>

        {cargando ? (

          <div className="p-10 text-center text-slate-400">
            🔄 Cargando envíos...
          </div>

        ) : envios.length === 0 ? (

          <div className="p-10 text-center text-slate-400">
            Todavía no hay envíos registrados.
          </div>

        ) : (

          <div className="divide-y divide-slate-800">

            {envios.map(
              (envio) => (

                <div
                  key={envio.id}
                  className="flex flex-col justify-between gap-5 p-6 lg:flex-row lg:items-center"
                >

                  <div>

                    <h3 className="text-xl font-bold text-orange-400">

                      📦 {envio.numero_guia}

                    </h3>

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

                      👤 {envio.nombre_cliente}

                    </p>

                    <p className="mt-1 text-slate-400">

                      📱{" "}

                      {envio.telefono_cliente ||
                        "Sin teléfono"}

                    </p>

                  </div>

                  <div className="flex flex-col gap-3 text-left lg:items-end lg:text-right">

                    <div>

                      <p className="font-bold">

                        🌎 {envio.pais_destino}

                      </p>

                      <p className="mt-1 text-slate-400">

                        📦{" "}

                        {envio.cantidad_paquetes}{" "}

                        paquete
                        {envio.cantidad_paquetes !== 1
                          ? "s"
                          : ""}

                      </p>

                      <p className="mt-1 text-sm text-slate-500">

                        🕒{" "}

                        {formatearFecha(
                          envio.fecha_registro
                        )}

                      </p>

                    </div>

                    <button
                      onClick={() =>
                        imprimirRecibo(
                          envio
                        )
                      }
                      className="rounded-xl bg-orange-500 px-6 py-3 font-bold text-white transition hover:bg-orange-600"
                    >

                      🖨️ Imprimir recibo

                    </button>

                  </div>

                </div>

              )
            )}

          </div>

        )}

      </div>

    </main>
  );
}