"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
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;
  direccion?: string;
  correo?: string;
  email?: string;
};

type Caja = {
  id: number | string;
  guia_id?: number | string;
  numero_caja?: number | string;
  largo?: number | string;
  ancho?: number | string;
  alto?: number | string;
  peso?: number | string;
  descripcion?: string;
};

export default function DetalleGuiaPage() {
  const params = useParams();

  const id = Array.isArray(params?.id)
    ? params.id[0]
    : params?.id;

  const [guia, setGuia] = useState<Guia | null>(null);
  const [cajas, setCajas] = useState<Caja[]>([]);
  const [loading, setLoading] = useState(true);
  const [errorCarga, setErrorCarga] = useState("");

  useEffect(() => {
    if (!id) {
      setLoading(false);
      setErrorCarga("No se recibió un ID válido para la guía.");
      return;
    }

    cargarGuia();
  }, [id]);

  async function cargarGuia() {
    try {
      setLoading(true);
      setErrorCarga("");

      const {
        data: guiaData,
        error: guiaError,
      } = await supabase
        .from("hce_guias")
        .select("*")
        .eq("id", id)
        .maybeSingle();

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

      if (!guiaData) {
        throw new Error(
          `No se encontró ninguna guía con el ID ${id}.`
        );
      }

      setGuia(guiaData);

      const {
        data: cajasData,
        error: cajasError,
      } = await supabase
        .from("hce_cajas")
        .select("*")
        .eq("guia_id", id)
        .order("numero_caja", {
          ascending: true,
        });

      if (cajasError) {
        console.warn(
          "No se pudieron cargar las cajas:",
          cajasError.message
        );

        setCajas([]);
      } else {
        setCajas(cajasData || []);
      }
    } catch (error: any) {
      setErrorCarga(
        error?.message ||
          "Ocurrió un error al cargar la guía."
      );

      setGuia(null);
      setCajas([]);
    } finally {
      setLoading(false);
    }
  }

  function obtenerNumeroGuia() {
    if (!guia) {
      return "SIN-NUMERO";
    }

    return (
      guia.numero_guia ||
      guia.numero ||
      `HCE-${guia.id}`
    );
  }

  function obtenerFecha() {
    if (!guia) {
      return "";
    }

    const fecha =
      guia.fecha ||
      guia.created_at;

    if (!fecha) {
      return "";
    }

    try {
      return new Date(fecha).toLocaleString();
    } catch {
      return fecha;
    }
  }

  function imprimirEtiqueta() {
    if (!guia) {
      return;
    }

    window.open(
      `/cargoerp/etiquetas/${guia.id}`,
      "_blank"
    );
  }

  function enviarPorCorreo() {
    if (!guia) {
      return;
    }

    const numeroGuia = obtenerNumeroGuia();

    const correo =
      guia.correo ||
      guia.email ||
      "";

    if (!correo) {
      alert(
        "Esta guía no tiene un correo electrónico registrado para el cliente."
      );

      return;
    }

    const asunto = encodeURIComponent(
      `Información de envío - ${numeroGuia}`
    );

    const mensaje = encodeURIComponent(
`Hola ${guia.cliente || ""},

Le compartimos la información de su envío con Honduras Cargo Express.

Número de guía: ${numeroGuia}
Estado: ${guia.estado || "Recibida"}
Ciudad: ${guia.ciudad || "-"}
Dirección: ${guia.direccion || "-"}
Teléfono: ${guia.telefono || "-"}

Puede comunicarse con nosotros para cualquier consulta sobre su envío.

Honduras Cargo Express`
    );

    window.location.href =
      `mailto:${correo}?subject=${asunto}&body=${mensaje}`;
  }

  if (loading) {
    return (
      <main className="min-h-screen bg-[#020817] p-6 text-white md:p-10">
        <div className="mx-auto max-w-7xl">
          <div className="rounded-2xl border border-blue-500 bg-blue-950 p-5 text-blue-200">
            <strong>Cargando guía...</strong>
          </div>
        </div>
      </main>
    );
  }

  if (errorCarga) {
    return (
      <main className="min-h-screen bg-[#020817] p-6 text-white md:p-10">
        <div className="mx-auto max-w-7xl">
          <Link
            href="/guias"
            className="mb-6 inline-flex rounded-xl border border-slate-700 bg-slate-800 px-5 py-3 font-bold text-white transition hover:bg-slate-700"
          >
            ← Volver a Guías
          </Link>

          <div className="rounded-2xl border border-red-500 bg-red-950 p-6 text-red-200">
            <h2 className="text-xl font-bold">
              Error al cargar la guía
            </h2>

            <p className="mt-3">
              {errorCarga}
            </p>

            <button
              type="button"
              onClick={cargarGuia}
              className="mt-5 rounded-xl bg-red-600 px-5 py-3 font-bold text-white transition hover:bg-red-700"
            >
              Reintentar
            </button>
          </div>
        </div>
      </main>
    );
  }

  if (!guia) {
    return null;
  }

  const numeroGuia = obtenerNumeroGuia();

  const correoCliente =
    guia.correo ||
    guia.email ||
    "";

  return (
    <main className="min-h-screen bg-[#020817] p-6 text-white md:p-10">
      <div className="mx-auto max-w-7xl">

        <div className="mb-8 flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">

          <div>
            <Link
              href="/guias"
              className="mb-6 inline-flex rounded-xl border border-slate-700 bg-slate-800 px-5 py-3 font-bold text-white transition hover:bg-slate-700"
            >
              ← Volver a Guías
            </Link>

            <h1 className="text-4xl font-bold md:text-5xl">
              {numeroGuia}
            </h1>

            <p className="mt-2 text-lg text-slate-400">
              Detalle completo del envío
            </p>
          </div>

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

            <button
              type="button"
              onClick={enviarPorCorreo}
              className="inline-flex items-center justify-center rounded-2xl bg-blue-600 px-6 py-4 font-bold text-white shadow-lg transition hover:bg-blue-700"
            >
              ENVIAR CORREO
            </button>

            <button
              type="button"
              onClick={imprimirEtiqueta}
              className="inline-flex items-center justify-center rounded-2xl bg-orange-500 px-6 py-4 font-bold text-white shadow-lg transition hover:bg-orange-600"
            >
              IMPRIMIR ETIQUETA
            </button>

            <Link
              href={`/guias/${guia.id}/editar`}
              className="inline-flex items-center justify-center rounded-2xl bg-yellow-500 px-6 py-4 font-bold text-white transition hover:bg-yellow-600"
            >
              EDITAR
            </Link>

          </div>
        </div>

        <section className="mb-8 rounded-3xl border border-slate-700 bg-slate-900 p-7">

          <h2 className="mb-8 text-2xl font-bold">
            Información del envío
          </h2>

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

            <div>
              <p className="text-sm text-slate-400">
                Cliente
              </p>

              <p className="mt-1 text-xl font-bold">
                {guia.cliente || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Teléfono
              </p>

              <p className="mt-1 text-xl font-bold">
                {guia.telefono || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Correo electrónico
              </p>

              <p className="mt-1 text-xl font-bold">
                {correoCliente || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Ciudad
              </p>

              <p className="mt-1 text-xl font-bold">
                {guia.ciudad || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Dirección
              </p>

              <p className="mt-1 text-xl font-bold">
                {guia.direccion || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Estado
              </p>

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

            <div>
              <p className="text-sm text-slate-400">
                Fecha
              </p>

              <p className="mt-1 text-xl font-bold">
                {obtenerFecha() || "-"}
              </p>
            </div>

            <div>
              <p className="text-sm text-slate-400">
                Cantidad de cajas
              </p>

              <p className="mt-1 text-xl font-bold">
                {cajas.length}
              </p>
            </div>

          </div>
        </section>

        <section>

          <div className="mb-6">

            <h2 className="text-3xl font-bold">
              Cajas
            </h2>

            <p className="mt-1 text-slate-400">
              {cajas.length} caja(s) registrada(s)
            </p>

          </div>

          {cajas.length === 0 ? (

            <div className="rounded-3xl border border-slate-700 bg-slate-900 p-8 text-center text-slate-400">
              No hay cajas registradas para esta guía.
            </div>

          ) : (

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">

              {cajas.map((caja, index) => {

                const numeroCaja =
                  caja.numero_caja ||
                  index + 1;

                return (
                  <div
                    key={String(caja.id)}
                    className="rounded-3xl border border-slate-700 bg-slate-900 p-6"
                  >

                    <h3 className="mb-6 text-xl font-bold text-orange-400">
                      Caja #{numeroCaja}
                    </h3>

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

                      <div className="rounded-xl bg-slate-800 p-4">
                        <p className="text-sm text-slate-400">
                          Largo
                        </p>

                        <p className="mt-1 text-xl font-bold">
                          {caja.largo || '-'}"
                        </p>
                      </div>

                      <div className="rounded-xl bg-slate-800 p-4">
                        <p className="text-sm text-slate-400">
                          Ancho
                        </p>

                        <p className="mt-1 text-xl font-bold">
                          {caja.ancho || '-'}"
                        </p>
                      </div>

                      <div className="rounded-xl bg-slate-800 p-4">
                        <p className="text-sm text-slate-400">
                          Alto
                        </p>

                        <p className="mt-1 text-xl font-bold">
                          {caja.alto || '-'}"
                        </p>
                      </div>

                      <div className="rounded-xl bg-slate-800 p-4">
                        <p className="text-sm text-slate-400">
                          Peso
                        </p>

                        <p className="mt-1 text-xl font-bold">
                          {caja.peso || "-"}
                        </p>
                      </div>

                      {caja.descripcion && (
                        <div className="rounded-xl bg-slate-800 p-4">

                          <p className="text-sm text-slate-400">
                            Descripción
                          </p>

                          <p className="mt-1 font-medium">
                            {caja.descripcion}
                          </p>

                        </div>
                      )}

                    </div>
                  </div>
                );
              })}

            </div>
          )}

        </section>

      </div>
    </main>
  );
}