"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { supabase } from "@/lib/supabase";
import { getCurrentUser, SessionUser } from "@/lib/session-client";
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";
import Modal from "@/components/ui/Modal";
import Badge from "@/components/ui/Badge";
import { isMobile, abrirPassPrntTrabajo } from "@/lib/print";
import { guardarRemitente } from "@/services/clientes";

type Cliente = {
  id: string | number;
  nombre: string | null;
  telefono: string | null;
  correo: string | null;
  ciudad?: string | null;
  direccion?: string | null;
};

type Guia = {
  id: string | number;
  numero: string;
  cliente: string | null;
  telefono: string | null;
  direccion?: string | null;
};

type Recibo = {
  id: string | number;
  guia_id: string | number | null;
  numero: string | null;
  numero_guia: string | null;
  cliente: string | null;
  telefono: string | null;
  destinatario: string | null;
  telefono_destinatario: string | null;
  pais_destino: string | null;
  observaciones: string | null;
  monto: number | null;
  metodo_pago: string | null;
  estado: string | null;
  fecha: string | null;
  direccion?: string | null;
};

const paises = [
  { value: "Honduras", label: "🇭🇳 Honduras" },
  { value: "Guatemala", label: "🇬🇹 Guatemala" },
  { value: "El Salvador", label: "🇳🇮 El Salvador" },
  { value: "Nicaragua", label: "🇳🇮 Nicaragua" },
];

const estadosPago = [
  { value: "Pendiente", label: "Pendiente" },
  { value: "Pagado", label: "Pagado" },
];

const metodosPago = [
  { value: "", label: "Seleccionar método" },
  { value: "Cash", label: "Cash" },
  { value: "Cheque", label: "Cheque" },
  { value: "Zelle", label: "Zelle" },
  { value: "Transferencia", label: "Transferencia" },
];

export default function RecibosPage() {
  const [busquedaDestinatario, setBusquedaDestinatario] = useState("");
  const [clientesEncontrados, setClientesEncontrados] = useState<Cliente[]>([]);
  const [destinatarioSeleccionado, setDestinatarioSeleccionado] = useState<Cliente | null>(null);
  const [mostrarClientes, setMostrarClientes] = useState(false);
  const [buscandoCliente, setBuscandoCliente] = useState(false);

  const [guiasEncontradas, setGuiasEncontradas] = useState<Guia[]>([]);
  const [guiaSeleccionada, setGuiaSeleccionada] = useState<Guia | null>(null);
  const [cargandoGuias, setCargandoGuias] = useState(false);

  const [clienteEnvia, setClienteEnvia] = useState("");
  const [telefonoEnvia, setTelefonoEnvia] = useState("");
  const [direccionEnvia, setDireccionEnvia] = useState("");
  const [busquedaEnvia, setBusquedaEnvia] = useState("");
  const [clientesEnviaEncontrados, setClientesEnviaEncontrados] = useState<Cliente[]>([]);
  const [mostrarClientesEnvia, setMostrarClientesEnvia] = useState(false);
  const [buscandoClienteEnvia, setBuscandoClienteEnvia] = useState(false);

  const [clienteRecibe, setClienteRecibe] = useState("");
  const [telefonoRecibe, setTelefonoRecibe] = useState("");

  const [paisDestino, setPaisDestino] = useState("Honduras");
  const [observaciones, setObservaciones] = useState("");
  const [monto, setMonto] = useState("");
  const [estado, setEstado] = useState("Pendiente");
  const [metodoPago, setMetodoPago] = useState("");

  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

  const [recibos, setRecibos] = useState<Recibo[]>([]);
  const [reciboGenerado, setReciboGenerado] = useState<Recibo | null>(null);
  const [reciboImprimir, setReciboImprimir] = useState<Recibo | null>(null);
  const [filtroEstadoLista, setFiltroEstadoLista] = useState<"Todos" | "Pendiente" | "Pagado">("Todos");

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

  const [reciboEditando, setReciboEditando] = useState<Recibo | null>(null);
  const [editCliente, setEditCliente] = useState("");
  const [editTelefono, setEditTelefono] = useState("");
  const [editDireccion, setEditDireccion] = useState("");
  const [editDestinatario, setEditDestinatario] = useState("");
  const [editTelefonoDestinatario, setEditTelefonoDestinatario] = useState("");
  const [editPaisDestino, setEditPaisDestino] = useState("Honduras");
  const [editObservaciones, setEditObservaciones] = useState("");
  const [editMonto, setEditMonto] = useState("");
  const [editEstado, setEditEstado] = useState("Pendiente");
  const [editMetodoPago, setEditMetodoPago] = useState("");
  const [guardandoEdicion, setGuardandoEdicion] = useState(false);

  useEffect(() => {
    getCurrentUser().then(setUsuarioSesion).catch(() => setUsuarioSesion(null));
    cargarRecibos();
  }, []);

  const passprntCallbackHandled = useRef(false);

  useEffect(() => {
    if (typeof window === "undefined") return;
    if (passprntCallbackHandled.current) return;

    const params = new URLSearchParams(window.location.search);
    const stage = params.get("stage");
    const reciboId = params.get("recibo_id");
    const code = params.get("passprnt_code");
    const message = params.get("passprnt_message");

    if (!stage || !reciboId) return;

    passprntCallbackHandled.current = true;

    if (stage === "print_copia") {
      if (code && code !== "0") {
        setMensaje(`Impresión del original cancelada o con error (${message || code}).`);
        limpiarParamsImpresion();
        return;
      }
      imprimirCopiaPassPrnt(reciboId);
      return;
    }

    if (stage === "done") {
      if (code && code !== "0") {
        setMensaje(`Impresión de la copia cancelada o con error (${message || code}).`);
      } else {
        setMensaje("Recibo impreso correctamente: Original y Copia.");
      }
      limpiarParamsImpresion();
    }
  }, []);

  // =========================================================
  // MEMOS GLOBALES (deben ejecutarse antes de cualquier return)
  // =========================================================
  const { totalRecibos, totalPendiente, totalPagado } = useMemo(() => {
    const total = recibos.reduce((suma, r) => suma + Number(r.monto || 0), 0);
    const pendiente = recibos
      .filter((r) => r.estado === "Pendiente")
      .reduce((suma, r) => suma + Number(r.monto || 0), 0);
    const pagado = recibos
      .filter((r) => r.estado === "Pagado")
      .reduce((suma, r) => suma + Number(r.monto || 0), 0);

    return { totalRecibos: total, totalPendiente: pendiente, totalPagado: pagado };
  }, [recibos]);

  const recibosFiltrados = useMemo(() => {
    if (filtroEstadoLista === "Todos") return recibos;
    return recibos.filter((r) => r.estado === filtroEstadoLista);
  }, [recibos, filtroEstadoLista]);

  function limpiarParamsImpresion() {
    if (typeof window === "undefined") return;
    const url = new URL(window.location.href);
    url.searchParams.delete("stage");
    url.searchParams.delete("recibo_id");
    url.searchParams.delete("passprnt_code");
    url.searchParams.delete("passprnt_message");
    window.history.replaceState({}, "", url.toString());
  }

  function urlCallbackPassPrnt(stage: string, reciboId: string | number): string {
    return `${window.location.origin}/cargoerp/recibos?stage=${stage}&recibo_id=${reciboId}`;
  }

  async function imprimirCopiaPassPrnt(reciboId: string) {
    try {
      const { data, error } = await supabase
        .from("hce_recibos")
        .select("*")
        .eq("id", reciboId)
        .single();

      if (error || !data) {
        setMensaje("No se pudo recuperar el recibo para imprimir la copia.");
        limpiarParamsImpresion();
        return;
      }

      const recibo = data as Recibo;
      const reciboCompleto = await completarDireccionRecibo(recibo);
      const callback = urlCallbackPassPrnt("done", reciboCompleto.id);

      abrirPassPrntTrabajo({
        recibo: reciboCompleto,
        tipo: "COPIA — CLIENTE",
        backUrl: callback,
        cut: "partial",
      });

      setMensaje("Se abrió PassPRNT para imprimir la copia del cliente.");
    } catch (err: any) {
      setMensaje("Error al imprimir la copia: " + (err?.message || "Error desconocido"));
      limpiarParamsImpresion();
    }
  }

  async function completarDireccionRecibo(recibo: Recibo): Promise<Recibo> {
    if (recibo.direccion || !recibo.guia_id) return recibo;

    try {
      const { data } = await supabase
        .from("hce_guias")
        .select("direccion")
        .eq("id", recibo.guia_id)
        .maybeSingle();

      if (data?.direccion) {
        return { ...recibo, direccion: data.direccion };
      }
    } catch (error) {
      console.warn("No se pudo cargar la dirección de la guía:", error);
    }

    return recibo;
  }

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

    if (error) {
      console.error("ERROR CARGANDO RECIBOS:", error);
      setMensaje("Error al cargar recibos: " + error.message);
      return;
    }

    setRecibos((data || []) as Recibo[]);
  }

  async function buscarDestinatario(texto: string) {
    setBusquedaDestinatario(texto);
    setDestinatarioSeleccionado(null);
    setGuiasEncontradas([]);
    setGuiaSeleccionada(null);
    setClienteRecibe("");
    setTelefonoRecibe("");

    if (texto.trim().length < 2) {
      setClientesEncontrados([]);
      setMostrarClientes(false);
      return;
    }

    setBuscandoCliente(true);

    const { data, error } = await supabase
      .from("hce_clientes")
      .select("id,nombre,telefono,correo")
      .ilike("nombre", `%${texto.trim()}%`)
      .order("nombre", { ascending: true })
      .limit(10);

    setBuscandoCliente(false);

    if (error) {
      console.error("ERROR BUSCANDO DESTINATARIO:", error);
      setMensaje("Error buscando destinatario: " + error.message);
      return;
    }

    setClientesEncontrados((data || []) as Cliente[]);
    setMostrarClientes(true);
  }

  async function seleccionarDestinatario(cliente: Cliente) {
    setDestinatarioSeleccionado(cliente);
    setBusquedaDestinatario(cliente.nombre || "");
    setMostrarClientes(false);
    setClientesEncontrados([]);
    setClienteRecibe(cliente.nombre || "");
    setTelefonoRecibe(cliente.telefono || "");
    setGuiasEncontradas([]);
    setGuiaSeleccionada(null);
    setCargandoGuias(true);
    setMensaje("");

    const { data, error } = await supabase
      .from("hce_guias")
      .select("id,numero,cliente,telefono,direccion")
      .eq("cliente", cliente.nombre || "")
      .order("id", { ascending: false })
      .limit(20);

    setCargandoGuias(false);

    if (error) {
      console.error("ERROR BUSCANDO GUÍAS:", error);
      setMensaje("Error buscando las guías: " + error.message);
      return;
    }

    const guias = (data || []) as Guia[];
    setGuiasEncontradas(guias);

    if (guias.length === 0) {
      setMensaje("El destinatario está registrado, pero no se encontraron guías asociadas.");
      return;
    }

    if (guias.length === 1) {
      seleccionarGuia(guias[0]);
      setMensaje("Destinatario y guía cargados automáticamente.");
      return;
    }

    setMensaje("El cliente tiene varias guías. Selecciona la guía correspondiente.");
  }

  function seleccionarGuia(guia: Guia) {
    setGuiaSeleccionada(guia);
    setClienteRecibe(guia.cliente || destinatarioSeleccionado?.nombre || "");
    setTelefonoRecibe(guia.telefono || destinatarioSeleccionado?.telefono || "");
    setMensaje("Guía seleccionada correctamente.");
  }

  function limpiarTerminoBusqueda(texto: string): string {
    // Reemplaza caracteres que pueden romper el filtro .or() de Supabase/PostgREST
    // y los wildcards de ILIKE para que la búsqueda sea literal.
    return texto
      .replace(/[,%()&|*\\]/g, " ")
      .replace(/%/g, "\\%")
      .replace(/_/g, "\\_")
      .replace(/\s+/g, " ")
      .trim();
  }

  function variantesTelefono(digitos: string): string[] {
    if (digitos.length === 10) {
      const a = digitos.slice(0, 3);
      const b = digitos.slice(3, 6);
      const c = digitos.slice(6);
      return [
        digitos,
        `${a}-${b}-${c}`,
        `(${a}) ${b}-${c}`,
        `${a} ${b} ${c}`,
      ];
    }
    if (digitos.length === 8) {
      const a = digitos.slice(0, 4);
      const b = digitos.slice(4);
      return [digitos, `${a}-${b}`];
    }
    if (digitos.length === 11 && digitos.startsWith("1")) {
      return variantesTelefono(digitos.slice(1));
    }
    if (digitos.length === 11 && digitos.startsWith("504")) {
      return variantesTelefono(digitos.slice(3));
    }
    return [digitos];
  }

  async function buscarRemitente(texto: string) {
    setBusquedaEnvia(texto);
    setClienteEnvia(texto);
    setMostrarClientesEnvia(false);
    setClientesEnviaEncontrados([]);

    const termino = limpiarTerminoBusqueda(texto);
    const soloDigitos = texto.replace(/\D/g, "");

    if (termino.length < 2 && soloDigitos.length < 2) {
      return;
    }

    setBuscandoClienteEnvia(true);

    try {
      const condiciones = [
        `nombre.ilike.%${termino}%`,
        `telefono.ilike.%${termino}%`,
        `ciudad.ilike.%${termino}%`,
        `direccion.ilike.%${termino}%`,
      ];

      // Agrega variantes de formato de teléfono para búsqueda tolerante.
      if (soloDigitos.length >= 2) {
        const telefonos = variantesTelefono(soloDigitos).filter(Boolean);
        for (const tel of telefonos) {
          condiciones.push(`telefono.ilike.%${tel}%`);
        }
      }

      const { data, error } = await supabase
        .from("hce_clientes")
        .select("id,nombre,telefono,correo,ciudad,direccion")
        .or(condiciones.join(","))
        .order("nombre", { ascending: true })
        .limit(10);

      if (error) {
        console.error("ERROR BUSCANDO REMITENTE:", error);
        setMensaje("Error buscando cliente: " + error.message);
        return;
      }

      const resultados = (data || []) as Cliente[];

      setClientesEnviaEncontrados(resultados);
      setMostrarClientesEnvia(resultados.length > 0);
    } catch (error: any) {
      console.error("ERROR BUSCANDO REMITENTE:", error);
      setMensaje("Error buscando cliente: " + (error?.message || "Error desconocido"));
    } finally {
      setBuscandoClienteEnvia(false);
    }
  }

  function seleccionarRemitente(cliente: Cliente) {
    setBusquedaEnvia(cliente.nombre || "");
    setClienteEnvia(cliente.nombre || "");
    setTelefonoEnvia(cliente.telefono || "");
    setDireccionEnvia(cliente.direccion || "");
    setMostrarClientesEnvia(false);
    setClientesEnviaEncontrados([]);
  }

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

    if (error) {
      console.error("ERROR OBTENIENDO ÚLTIMO RECIBO:", error);
      return "REC-" + Date.now();
    }

    if (!data || data.length === 0 || !data[0]?.numero) {
      return "REC-000001";
    }

    const ultimo = String(data[0].numero);
    const match = ultimo.match(/(\d+)$/);

    if (!match) return "REC-" + Date.now();

    const siguiente = Number(match[1]) + 1;
    return "REC-" + String(siguiente).padStart(6, "0");
  }

  async function guardarRecibo(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setMensaje("");

    if (!clienteRecibe.trim()) {
      setMensaje("Primero busca y selecciona quién recibe.");
      return;
    }
    if (!guiaSeleccionada) {
      setMensaje("Selecciona la guía correspondiente.");
      return;
    }
    if (!clienteEnvia.trim()) {
      setMensaje("Ingresa quién envía.");
      return;
    }
    if (!telefonoEnvia.trim()) {
      setMensaje("Ingresa el teléfono de quien envía.");
      return;
    }
    if (!monto || Number(monto) <= 0) {
      setMensaje("Ingresa un monto válido.");
      return;
    }
    if (estado === "Pagado" && !metodoPago) {
      setMensaje("Selecciona el método de pago.");
      return;
    }

    setGuardando(true);

    try {
      const numero = await generarNumeroRecibo();

      const { data, error } = await supabase
        .from("hce_recibos")
        .insert([
          {
            guia_id: guiaSeleccionada.id,
            numero,
            numero_guia: guiaSeleccionada.numero,
            cliente: clienteEnvia.trim(),
            telefono: telefonoEnvia.trim(),
            direccion: direccionEnvia.trim() || null,
            destinatario: clienteRecibe.trim(),
            telefono_destinatario: telefonoRecibe.trim() || null,
            pais_destino: paisDestino,
            observaciones: observaciones.trim() || null,
            monto: Number(monto),
            estado,
            metodo_pago: estado === "Pagado" ? metodoPago : null,
            fecha: new Date().toISOString(),
            creado_por: usuarioSesion?.usuario || null,
          },
        ])
        .select("*")
        .single();

      if (error) {
        console.error("ERROR GUARDANDO RECIBO:", error);
        setMensaje("Error al guardar recibo: " + error.message);
        return;
      }

      const recibo = data as Recibo;

      // Guardar/actualizar remitente reutilizable
      let remitenteGuardadoOk = true;
      try {
        await guardarRemitente(
          {
            nombre: clienteEnvia.trim(),
            telefono: telefonoEnvia.trim(),
            direccion: direccionEnvia.trim(),
          },
          usuarioSesion?.usuario || null
        );
      } catch (remitenteError: any) {
        remitenteGuardadoOk = false;
        console.error("ERROR GUARDANDO REMITENTE:", remitenteError);
        setMensaje(
          "El recibo se guardó, pero no se pudo guardar el remitente: " +
            (remitenteError?.message || "Error desconocido")
        );
      }

      setReciboGenerado(recibo);
      setRecibos((prev) => [recibo, ...prev]);
      if (remitenteGuardadoOk) {
        setMensaje("Recibo generado correctamente.");
      }
    } catch (error: any) {
      console.error("ERROR GENERAL:", error);
      setMensaje("Error: " + (error?.message || "Error desconocido"));
    } finally {
      setGuardando(false);
    }
  }

  function nuevoRecibo() {
    setReciboGenerado(null);
    setBusquedaDestinatario("");
    setClientesEncontrados([]);
    setDestinatarioSeleccionado(null);
    setMostrarClientes(false);
    setGuiasEncontradas([]);
    setGuiaSeleccionada(null);
    setClienteRecibe("");
    setTelefonoRecibe("");
    setClienteEnvia("");
    setTelefonoEnvia("");
    setDireccionEnvia("");
    setBusquedaEnvia("");
    setClientesEnviaEncontrados([]);
    setMostrarClientesEnvia(false);
    setPaisDestino("Honduras");
    setObservaciones("");
    setMonto("");
    setEstado("Pendiente");
    setMetodoPago("");
    setMensaje("");
  }

  function prepararNumeroWhatsApp(telefono: string) {
    let numero = telefono.replace(/\D/g, "");

    if (numero.length === 8) return "504" + numero;
    if (numero.length === 10) return "1" + numero;
    if (numero.startsWith("504") && numero.length === 11) return numero;
    if (numero.startsWith("1") && numero.length === 11) return numero;

    return null;
  }

  function enviarWhatsApp(recibo: Recibo) {
    if (!recibo.telefono) {
      alert("El cliente que envía no tiene teléfono registrado.");
      return;
    }

    const numero = prepararNumeroWhatsApp(recibo.telefono);
    if (!numero) {
      alert(
        "No se pudo reconocer el teléfono de quien envía. Verifica que tenga 8 dígitos si es Honduras o 10 dígitos si es USA."
      );
      return;
    }

    const guia = recibo.numero_guia || "";
    const enlaceRastreo = guia
      ? `https://hondurascargoexpress.com/?guia=${encodeURIComponent(guia)}`
      : "";

    const texto =
      `Hola ${recibo.cliente || "cliente"},\n\n` +
      `Honduras Cargo Express le comparte la información de su envío.\n\n` +
      `📦 Guía: ${guia || "-"}\n` +
      `👤 Recibe: ${recibo.destinatario || "-"}\n` +
      `🌎 Destino: ${recibo.pais_destino || "Honduras"}\n\n` +
      (enlaceRastreo ? `🔎 RASTREAR ENVÍO:\n${enlaceRastreo}\n\n` : "") +
      `Gracias por confiar en Honduras Cargo Express.`;

    const url = `https://wa.me/${numero}?text=` + encodeURIComponent(texto);
    window.open(url, "_blank", "noopener,noreferrer");
  }

  async function imprimirRecibo(recibo: Recibo) {
    const reciboCompleto = await completarDireccionRecibo(recibo);

    if (isMobile()) {
      // En iOS/Android se envía PRIMERO el ORIGINAL a PassPRNT.
      // PassPRNT hará callback a esta misma página con stage=print_copia,
      // donde se lanzará automáticamente la COPIA.
      const callback = urlCallbackPassPrnt("print_copia", reciboCompleto.id);

      abrirPassPrntTrabajo({
        recibo: reciboCompleto,
        tipo: "ORIGINAL — EMPRESA",
        backUrl: callback,
        cut: "partial",
      });

      setMensaje("Se abrió PassPRNT para imprimir el original.");
      return;
    }

    setReciboImprimir(reciboCompleto);
    setTimeout(() => {
      window.print();
    }, 400);
  }

  function abrirEditar(recibo: Recibo) {
    setReciboEditando(recibo);
    setEditCliente(recibo.cliente || "");
    setEditTelefono(recibo.telefono || "");
    setEditDireccion(recibo.direccion || "");
    setEditDestinatario(recibo.destinatario || "");
    setEditTelefonoDestinatario(recibo.telefono_destinatario || "");
    setEditPaisDestino(recibo.pais_destino || "Honduras");
    setEditObservaciones(recibo.observaciones || "");
    setEditMonto(String(recibo.monto || ""));
    setEditEstado(recibo.estado || "Pendiente");
    setEditMetodoPago(recibo.metodo_pago || "");
  }

  async function guardarEdicion() {
    if (!reciboEditando) return;

    if (!editCliente.trim()) {
      alert("Ingresa quién envía.");
      return;
    }
    if (!editTelefono.trim()) {
      alert("Ingresa el teléfono de quien envía.");
      return;
    }
    if (!editDestinatario.trim()) {
      alert("Ingresa quién recibe.");
      return;
    }
    if (!editMonto || Number(editMonto) <= 0) {
      alert("Ingresa un monto válido.");
      return;
    }
    if (editEstado === "Pagado" && !editMetodoPago) {
      alert("Selecciona el método de pago.");
      return;
    }

    setGuardandoEdicion(true);

    const { data, error } = await supabase
      .from("hce_recibos")
      .update({
        cliente: editCliente.trim(),
        telefono: editTelefono.trim(),
        direccion: editDireccion.trim() || null,
        destinatario: editDestinatario.trim(),
        telefono_destinatario: editTelefonoDestinatario.trim() || null,
        pais_destino: editPaisDestino,
        observaciones: editObservaciones.trim() || null,
        monto: Number(editMonto),
        estado: editEstado,
        metodo_pago: editEstado === "Pagado" ? editMetodoPago : null,
      })
      .eq("id", reciboEditando.id)
      .select("*")
      .single();

    setGuardandoEdicion(false);

    if (error) {
      console.error("ERROR EDITANDO RECIBO:", error);
      alert("No se pudo editar el recibo: " + error.message);
      return;
    }

    const actualizado = data as Recibo;
    setRecibos((prev) => prev.map((recibo) => (recibo.id === actualizado.id ? actualizado : recibo)));

    if (reciboGenerado && reciboGenerado.id === actualizado.id) {
      setReciboGenerado(actualizado);
    }

    setReciboEditando(null);
    setMensaje("Recibo actualizado correctamente.");
  }

  async function borrarRecibo(recibo: Recibo) {
    const confirmar = window.confirm(
      `¿Seguro que deseas borrar el recibo ${recibo.numero || ""} de la guía ${
        recibo.numero_guia || "-"
      }?\n\nEsta acción no se puede deshacer.`
    );
    if (!confirmar) return;

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

    if (error) {
      console.error("ERROR BORRANDO RECIBO:", error);
      setMensaje("No se pudo borrar el recibo: " + error.message);
      return;
    }

    setRecibos((prev) => prev.filter((item) => item.id !== recibo.id));

    if (reciboGenerado && reciboGenerado.id === recibo.id) {
      setReciboGenerado(null);
    }

    setMensaje("Recibo eliminado correctamente.");
  }

  function fechaRecibo(fecha: string | null) {
    if (!fecha) return "-";
    return new Date(fecha).toLocaleString("es-HN", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  // =========================================================
  // VISTA DE IMPRESIÓN TÉRMICA
  // =========================================================
  if (reciboImprimir) {
    return (
      <main className="thermal-print-page">
        <style dangerouslySetInnerHTML={{ __html: `
          @page { margin: 0; }
          @media print {
            html, body { margin: 0 !important; padding: 0 !important; width: 80mm !important; min-width: 80mm !important; background: white !important; }
            body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .no-print { display: none !important; }
            .thermal-print-page { background: white !important; padding: 0 !important; min-height: auto !important; }
            .thermal-copy {
              display: block !important;
              width: 80mm !important;
              max-width: 80mm !important;
              box-sizing: border-box !important;
              margin: 0 !important;
              padding: 3mm 2mm !important;
              background: white !important;
              color: black !important;
              font-family: Arial, Helvetica, sans-serif !important;
              font-size: 11px !important;
              line-height: 1.25 !important;
              page-break-after: always !important;
            }
            .thermal-copy:last-child { page-break-after: auto !important; }
            .thermal-title { font-size: 16px !important; line-height: 1.05 !important; }
            .thermal-subtitle { font-size: 12px !important; }
            .thermal-section { margin-top: 7px !important; padding-top: 6px !important; border-top: 1px dashed #000 !important; }
            .thermal-total { margin-top: 8px !important; padding: 7px !important; border: 1px solid #000 !important; font-size: 15px !important; }
            .thermal-footer { margin-top: 12px !important; text-align: center !important; }
          }
          @media screen {
            .thermal-print-page { min-height: 100vh; background: #020617; padding: 90px 20px; }
            .thermal-copy { width: 80mm; max-width: 80mm; margin: 20px auto; padding: 10px; background: white; color: black; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; }
          }
        `}} />

        <div className="no-print fixed left-0 right-0 top-0 z-50 flex flex-wrap items-center justify-center gap-2 bg-slate-900 p-3">
          <button
            type="button"
            onClick={() => window.print()}
            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white hover:bg-blue-500"
          >
            🖨️ Imprimir 2 copias
          </button>
          <button
            type="button"
            onClick={() => enviarWhatsApp(reciboImprimir)}
            className="rounded-lg bg-green-600 px-4 py-2 text-sm font-black text-white hover:bg-green-500"
          >
            🟢 WhatsApp
          </button>
          <button
            type="button"
            onClick={() => setReciboImprimir(null)}
            className="rounded-lg bg-slate-600 px-4 py-2 text-sm font-black text-white hover:bg-slate-500"
          >
            Volver
          </button>
        </div>

        <ThermalCopy recibo={reciboImprimir} tipo="ORIGINAL — EMPRESA" />
        <ThermalCopy recibo={reciboImprimir} tipo="COPIA — CLIENTE" />
      </main>
    );
  }

  // =========================================================
  // RECIBO GENERADO
  // =========================================================
  if (reciboGenerado) {
    return (
      <PageLayout>
        <Card className="border-emerald-500/30 bg-emerald-500/10">
          <h2 className="text-lg font-black text-emerald-500">✅ Recibo generado</h2>
          <p className="mt-1 text-sm text-[var(--text-secondary)]">
            Recibo <strong>{reciboGenerado.numero || "-"}</strong> guardado correctamente.
          </p>

          <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
            <Card padding="sm" className="bg-[var(--bg-primary)]">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Envía
              </p>
              <p className="mt-1 text-base font-black text-[var(--text-primary)]">
                {reciboGenerado.cliente || "-"}
              </p>
              <p className="text-xs text-[var(--text-secondary)]">
                📞 {reciboGenerado.telefono || "-"}
              </p>
              <p className="text-xs text-[var(--text-secondary)]">
                🏠 {reciboGenerado.direccion || "-"}
              </p>
            </Card>
            <Card padding="sm" className="bg-[var(--bg-primary)]">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Recibe
              </p>
              <p className="mt-1 text-base font-black text-[var(--text-primary)]">
                {reciboGenerado.destinatario || "-"}
              </p>
              <p className="text-xs text-[var(--text-secondary)]">
                📞 {reciboGenerado.telefono_destinatario || "-"}
              </p>
            </Card>
          </div>

          <Card padding="sm" className="mt-3 bg-[var(--bg-primary)]">
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Guía
            </p>
            <p className="mt-1 text-2xl font-black text-[var(--accent)]">
              {reciboGenerado.numero_guia || "-"}
            </p>
            <p className="mt-2 text-xs text-[var(--text-secondary)]">
              Destino: <strong>{reciboGenerado.pais_destino || "Honduras"}</strong>
            </p>
            <p className="text-xs text-[var(--text-secondary)]">
              Contenido: <strong>{reciboGenerado.observaciones || "-"}</strong>
            </p>
          </Card>

          <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
            <Button size="sm" onClick={() => imprimirRecibo(reciboGenerado)}>
              Imprimir
            </Button>
            <Button size="sm" variant="secondary" onClick={() => enviarWhatsApp(reciboGenerado)}>
              WhatsApp
            </Button>
            <Button size="sm" variant="outline" onClick={nuevoRecibo}>
              Nuevo recibo
            </Button>
          </div>
        </Card>
      </PageLayout>
    );
  }

  // =========================================================
  // PÁGINA PRINCIPAL
  // =========================================================

  return (
    <PageLayout>
      {/* Encabezado */}
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">Recibos</h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Registro y control de pagos de Honduras Cargo Express
        </p>
      </section>

      {mensaje && (
        <div
          className={`mb-4 rounded-xl border p-3 text-xs font-medium ${
            mensaje.includes("correctamente") || mensaje.includes("automáticamente")
              ? "border-green-500/30 bg-green-500/10 text-green-500"
              : "border-yellow-500/30 bg-yellow-500/10 text-yellow-500"
          }`}
        >
          {mensaje}
        </div>
      )}

      {/* Resumen de pagos */}
      <div className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
        <Card padding="sm" className="bg-[var(--bg-primary)]">
          <p className="text-[10px] font-black uppercase tracking-wider text-[var(--text-muted)]">
            Total recibos
          </p>
          <p className="mt-1 text-lg font-black text-[var(--text-primary)]">
            ${totalRecibos.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
          </p>
          <p className="text-[10px] text-[var(--text-muted)]">{recibos.length} recibo(s)</p>
        </Card>
        <Card padding="sm" className="bg-amber-500/5">
          <p className="text-[10px] font-black uppercase tracking-wider text-amber-600 dark:text-amber-400">
            Pendiente
          </p>
          <p className="mt-1 text-lg font-black text-amber-600 dark:text-amber-400">
            ${totalPendiente.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
          </p>
          <p className="text-[10px] text-[var(--text-muted)]">
            {recibos.filter((r) => r.estado === "Pendiente").length} recibo(s)
          </p>
        </Card>
        <Card padding="sm" className="bg-emerald-500/5">
          <p className="text-[10px] font-black uppercase tracking-wider text-emerald-600 dark:text-emerald-400">
            Pagado
          </p>
          <p className="mt-1 text-lg font-black text-emerald-600 dark:text-emerald-400">
            ${totalPagado.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
          </p>
          <p className="text-[10px] text-[var(--text-muted)]">
            {recibos.filter((r) => r.estado === "Pagado").length} recibo(s)
          </p>
        </Card>
      </div>

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

        <form onSubmit={guardarRecibo} className="mt-4 space-y-4">
          {/* Recibe */}
          <div className="relative">
            <Input
              label="Recibe"
              placeholder="Escribe el nombre de quien recibe..."
              value={busquedaDestinatario}
              onChange={(e) => buscarDestinatario(e.target.value)}
              autoComplete="off"
            />

            {buscandoCliente && (
              <p className="mt-1 text-xs text-[var(--text-muted)]">Buscando destinatario...</p>
            )}

            {mostrarClientes && clientesEncontrados.length > 0 && (
              <div className="absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-xl">
                {clientesEncontrados.map((cliente) => (
                  <button
                    key={String(cliente.id)}
                    type="button"
                    onClick={() => seleccionarDestinatario(cliente)}
                    className="block w-full border-b border-[var(--border)] p-3 text-left transition hover:bg-[var(--bg-primary)]"
                  >
                    <p className="text-sm font-bold text-[var(--text-primary)]">{cliente.nombre}</p>
                    <p className="text-xs text-[var(--text-muted)]">
                      📞 {cliente.telefono || "Sin teléfono"}
                    </p>
                    {cliente.correo && (
                      <p className="text-xs text-[var(--text-muted)]">✉️ {cliente.correo}</p>
                    )}
                  </button>
                ))}
              </div>
            )}
          </div>

          {destinatarioSeleccionado && (
            <div className="rounded-lg border border-blue-500/30 bg-blue-500/10 p-3">
              <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                    Destinatario
                  </p>
                  <p className="text-sm font-black text-blue-500">{destinatarioSeleccionado.nombre}</p>
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                    Teléfono
                  </p>
                  <p className="text-sm font-black text-[var(--text-primary)]">
                    {destinatarioSeleccionado.telefono || "Sin teléfono"}
                  </p>
                </div>
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                    Guías encontradas
                  </p>
                  <p className="text-sm font-black text-[var(--text-primary)]">
                    {cargandoGuias ? "Buscando..." : guiasEncontradas.length}
                  </p>
                </div>
              </div>
            </div>
          )}

          {guiasEncontradas.length > 1 && (
            <div>
              <p className="mb-2 text-xs font-bold text-[var(--text-primary)]">Selecciona la guía</p>
              <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                {guiasEncontradas.map((guia) => {
                  const seleccionada = guiaSeleccionada?.id === guia.id;

                  return (
                    <button
                      key={String(guia.id)}
                      type="button"
                      onClick={() => seleccionarGuia(guia)}
                      className={`rounded-lg border p-3 text-left transition ${
                        seleccionada
                          ? "border-[var(--accent)] bg-[var(--accent)]/10"
                          : "border-[var(--border)] bg-[var(--bg-primary)] hover:border-[var(--accent)]"
                      }`}
                    >
                      <p className="text-sm font-black text-[var(--accent)]">{guia.numero}</p>
                      <p className="text-xs text-[var(--text-muted)]">{guia.cliente}</p>
                      <p className="mt-1 text-xs font-bold">
                        {seleccionada ? "✅ Seleccionada" : "Seleccionar guía"}
                      </p>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {guiaSeleccionada && (
            <div className="rounded-lg border border-[var(--accent)]/30 bg-[var(--accent)]/10 p-3">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Guía
              </p>
              <p className="text-lg font-black text-[var(--accent)]">{guiaSeleccionada.numero}</p>
              <p className="text-xs text-[var(--text-secondary)]">Guía cargada automáticamente.</p>
            </div>
          )}

          <Card padding="sm" className="bg-[var(--bg-primary)]">
            <h3 className="mb-2 text-xs font-black text-[var(--text-primary)]">Envía</h3>
            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
              <div className="relative">
                <Input
                  label="Nombre"
                  placeholder="Buscar o escribir nombre..."
                  value={busquedaEnvia}
                  onChange={(e) => buscarRemitente(e.target.value)}
                  autoComplete="off"
                />

                {buscandoClienteEnvia && (
                  <p className="mt-1 text-xs text-[var(--text-muted)]">Buscando remitente...</p>
                )}

                {mostrarClientesEnvia && clientesEnviaEncontrados.length > 0 && (
                  <div className="absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] shadow-xl">
                    {clientesEnviaEncontrados.map((cliente) => (
                      <button
                        key={String(cliente.id)}
                        type="button"
                        onClick={() => seleccionarRemitente(cliente)}
                        className="block w-full border-b border-[var(--border)] p-3 text-left transition hover:bg-[var(--bg-primary)]"
                      >
                        <p className="text-sm font-bold text-[var(--text-primary)]">{cliente.nombre}</p>
                        <p className="text-xs text-[var(--text-muted)]">
                          📞 {cliente.telefono || "Sin teléfono"}
                        </p>
                        {cliente.ciudad && (
                          <p className="text-xs text-[var(--text-muted)]">📍 {cliente.ciudad}</p>
                        )}
                        {cliente.direccion && (
                          <p className="text-xs text-[var(--text-muted)]">🏠 {cliente.direccion}</p>
                        )}
                      </button>
                    ))}
                  </div>
                )}
              </div>
              <Input
                label="Teléfono"
                placeholder="Ej: 9795-9210"
                value={telefonoEnvia}
                onChange={(e) => setTelefonoEnvia(e.target.value)}
              />
              <Input
                label="Dirección"
                placeholder="Dirección del cliente que envía"
                value={direccionEnvia}
                onChange={(e) => setDireccionEnvia(e.target.value)}
              />
            </div>
          </Card>

          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <Select
              label="País destino"
              options={paises}
              value={paisDestino}
              onChange={(e) => setPaisDestino(e.target.value)}
            />
            <Input
              label="Monto"
              type="number"
              min="0"
              step="0.01"
              placeholder="0.00"
              value={monto}
              onChange={(e) => setMonto(e.target.value)}
            />
            <Select
              label="Estado del pago"
              options={estadosPago}
              value={estado}
              onChange={(e) => {
                setEstado(e.target.value);
                if (e.target.value !== "Pagado") setMetodoPago("");
              }}
            />
            {estado === "Pagado" && (
              <Select
                label="Método de pago"
                options={metodosPago}
                value={metodoPago}
                onChange={(e) => setMetodoPago(e.target.value)}
              />
            )}
          </div>

          <div>
            <label className="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">
              Observaciones
            </label>
            <textarea
              rows={2}
              value={observaciones}
              onChange={(e) => setObservaciones(e.target.value)}
              placeholder="Ejemplo: Ropa & zapatos"
              className="w-full rounded-xl border border-[var(--border)] bg-[var(--input-bg)] px-3 py-2.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:border-[var(--accent)]"
            />
          </div>

          <Button
            type="submit"
            size="sm"
            disabled={guardando || !clienteRecibe || !guiaSeleccionada || !clienteEnvia || !telefonoEnvia}
            fullWidth
            className="sm:w-auto"
          >
            {guardando ? "Guardando recibo..." : "💾 Generar recibo"}
          </Button>
        </form>
      </Card>

      {/* Recibos registrados */}
      <Card padding="none">
        <div className="border-b border-[var(--border)] p-3">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h2 className="text-sm font-black text-[var(--text-primary)]">Recibos registrados</h2>
              <p className="text-xs text-[var(--text-muted)]">
                Imprimir, WhatsApp, editar o borrar recibos.
              </p>
            </div>
            <div className="flex gap-2">
              {(["Todos", "Pendiente", "Pagado"] as const).map((estadoFiltro) => (
                <button
                  key={estadoFiltro}
                  type="button"
                  onClick={() => setFiltroEstadoLista(estadoFiltro)}
                  className={`rounded-lg px-3 py-1.5 text-xs font-bold transition ${
                    filtroEstadoLista === estadoFiltro
                      ? "bg-[var(--accent)] text-white"
                      : "border border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
                  }`}
                >
                  {estadoFiltro}
                </button>
              ))}
            </div>
          </div>
        </div>

        {recibosFiltrados.length === 0 ? (
          <div className="p-6 text-center text-sm text-[var(--text-muted)]">
            No hay recibos registrados todavía.
          </div>
        ) : (
          <>
            {/* Desktop */}
            <div className="hidden w-full overflow-hidden lg:block">
              <div className="overflow-x-auto">
                <table className="w-full table-auto text-left text-xs">
                  <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase tracking-wider text-[var(--text-secondary)]">
                    <tr>
                      <th className="p-3">Recibo</th>
                      <th className="p-3">Guía</th>
                      <th className="p-3">Envía</th>
                      <th className="p-3">Recibe</th>
                      <th className="p-3">Destino</th>
                      <th className="p-3">Monto</th>
                      <th className="p-3">Estado</th>
                      <th className="p-3">Fecha</th>
                      <th className="p-3 text-center">Acciones</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-[var(--border)]">
                    {recibosFiltrados.map((recibo) => (
                      <tr
                        key={String(recibo.id)}
                        className="transition hover:bg-[var(--bg-secondary)]/50"
                      >
                        <td className="break-words p-3 font-black text-[var(--accent)]">
                          {recibo.numero || "-"}
                        </td>
                        <td className="break-words p-3 font-bold text-[var(--text-primary)]">
                          {recibo.numero_guia || "-"}
                        </td>
                        <td className="p-3 align-top">
                          <p className="break-words font-bold text-[var(--text-primary)]">
                            {recibo.cliente || "-"}
                          </p>
                          <p className="text-xs text-[var(--text-muted)]">
                            📞 {recibo.telefono || "-"}
                          </p>
                        </td>
                        <td className="p-3 align-top">
                          <p className="break-words font-bold text-[var(--text-primary)]">
                            {recibo.destinatario || "-"}
                          </p>
                          <p className="text-xs text-[var(--text-muted)]">
                            📞 {recibo.telefono_destinatario || "-"}
                          </p>
                        </td>
                        <td className="break-words p-3 align-top text-[var(--text-secondary)]">
                          {recibo.pais_destino || "-"}
                        </td>
                        <td className="whitespace-nowrap p-3 align-top font-black text-emerald-500">
                          ${Number(recibo.monto || 0).toLocaleString("en-US", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2,
                          })}
                        </td>
                        <td className="p-3 align-top">
                          <Badge variant={recibo.estado === "Pagado" ? "success" : "warning"} size="sm">
                            {recibo.estado || "Pendiente"}
                          </Badge>
                        </td>
                        <td className="break-words p-3 align-top text-xs text-[var(--text-muted)]">
                          {fechaRecibo(recibo.fecha)}
                        </td>
                        <td className="p-3 align-top">
                          <div className="flex flex-wrap gap-1">
                            <Button
                              size="sm"
                              variant="secondary"
                              onClick={() => imprimirRecibo(recibo)}
                            >
                              Imprimir
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => enviarWhatsApp(recibo)}
                            >
                              WhatsApp
                            </Button>
                            <Button size="sm" onClick={() => abrirEditar(recibo)}>
                              Editar
                            </Button>
                            <Button
                              size="sm"
                              variant="danger"
                              onClick={() => borrarRecibo(recibo)}
                            >
                              Borrar
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Mobile */}
            <div className="space-y-2 p-3 lg:hidden">
              {recibosFiltrados.map((recibo) => (
                <div
                  key={String(recibo.id)}
                  className="rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3"
                >
                  <div className="flex items-start justify-between gap-3 border-b border-[var(--border)] pb-2">
                    <div className="min-w-0">
                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Recibo
                      </p>
                      <p className="truncate text-sm font-black text-[var(--accent)]">
                        {recibo.numero || "-"}
                      </p>
                    </div>
                    <div className="min-w-0 text-right">
                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Guía
                      </p>
                      <p className="truncate text-sm font-black text-[var(--text-primary)]">
                        {recibo.numero_guia || "-"}
                      </p>
                    </div>
                  </div>

                  <div className="mt-2 grid gap-2 text-xs">
                    <div>
                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Envía
                      </p>
                      <p className="font-semibold text-[var(--text-primary)]">
                        {recibo.cliente || "-"}
                      </p>
                      <p className="text-[var(--text-muted)]">📞 {recibo.telefono || "-"}</p>
                    </div>
                    <div>
                      <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Recibe
                      </p>
                      <p className="font-semibold text-[var(--text-primary)]">
                        {recibo.destinatario || "-"}
                      </p>
                      <p className="text-[var(--text-muted)]">
                        📞 {recibo.telefono_destinatario || "-"}
                      </p>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                          Destino
                        </p>
                        <p className="text-[var(--text-secondary)]">
                          {recibo.pais_destino || "-"}
                        </p>
                      </div>
                      <div>
                        <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                          Fecha
                        </p>
                        <p className="text-[var(--text-muted)]">{fechaRecibo(recibo.fecha)}</p>
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div>
                        <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                          Monto
                        </p>
                        <p className="font-black text-emerald-500">
                          ${Number(recibo.monto || 0).toLocaleString("en-US", {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2,
                          })}
                        </p>
                      </div>
                      <div>
                        <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                          Estado
                        </p>
                        <Badge
                          variant={recibo.estado === "Pagado" ? "success" : "warning"}
                          size="sm"
                        >
                          {recibo.estado || "Pendiente"}
                        </Badge>
                      </div>
                    </div>
                  </div>

                  <div className="mt-3 grid grid-cols-2 gap-2">
                    <Button size="sm" variant="secondary" onClick={() => imprimirRecibo(recibo)}>
                      Imprimir
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => enviarWhatsApp(recibo)}>
                      WhatsApp
                    </Button>
                    <Button size="sm" onClick={() => abrirEditar(recibo)}>
                      Editar
                    </Button>
                    <Button size="sm" variant="danger" onClick={() => borrarRecibo(recibo)}>
                      Borrar
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </Card>

      {/* Modal editar */}
      <Modal
        isOpen={!!reciboEditando}
        onClose={() => setReciboEditando(null)}
        title="Editar recibo"
        description={
          reciboEditando
            ? `${reciboEditando.numero || "-"} · Guía ${reciboEditando.numero_guia || "-"}`
            : ""
        }
        size="lg"
        footer={
          <div className="flex w-full flex-col gap-2 sm:flex-row">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setReciboEditando(null)}
              disabled={guardandoEdicion}
              fullWidth
            >
              Cancelar
            </Button>
            <Button
              size="sm"
              onClick={guardarEdicion}
              disabled={guardandoEdicion}
              fullWidth
            >
              {guardandoEdicion ? "Guardando..." : "Guardar cambios"}
            </Button>
          </div>
        }
      >
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          <Input
            label="Envía"
            value={editCliente}
            onChange={(e) => setEditCliente(e.target.value)}
          />
          <Input
            label="Teléfono de quien envía"
            value={editTelefono}
            onChange={(e) => setEditTelefono(e.target.value)}
          />
          <Input
            label="Dirección de quien envía"
            value={editDireccion}
            onChange={(e) => setEditDireccion(e.target.value)}
          />
          <Input
            label="Recibe"
            value={editDestinatario}
            onChange={(e) => setEditDestinatario(e.target.value)}
          />
          <Input
            label="Teléfono de quien recibe"
            value={editTelefonoDestinatario}
            onChange={(e) => setEditTelefonoDestinatario(e.target.value)}
          />
          <Select
            label="País destino"
            options={paises}
            value={editPaisDestino}
            onChange={(e) => setEditPaisDestino(e.target.value)}
          />
          <Input
            label="Monto"
            type="number"
            min="0"
            step="0.01"
            value={editMonto}
            onChange={(e) => setEditMonto(e.target.value)}
          />
          <Select
            label="Estado"
            options={estadosPago}
            value={editEstado}
            onChange={(e) => {
              setEditEstado(e.target.value);
              if (e.target.value !== "Pagado") setEditMetodoPago("");
            }}
          />
          {editEstado === "Pagado" && (
            <Select
              label="Método de pago"
              options={metodosPago}
              value={editMetodoPago}
              onChange={(e) => setEditMetodoPago(e.target.value)}
            />
          )}
        </div>

        <div className="mt-3">
          <label className="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">
            Observaciones
          </label>
          <textarea
            rows={3}
            value={editObservaciones}
            onChange={(e) => setEditObservaciones(e.target.value)}
            className="w-full rounded-xl border border-[var(--border)] bg-[var(--input-bg)] px-3 py-2.5 text-sm text-[var(--text-primary)] outline-none focus:border-[var(--accent)]"
          />
        </div>
      </Modal>
    </PageLayout>
  );
}

function IconoProhibido({ className = "" }: { className?: string }) {
  return (
    <svg
      className={className}
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="5" y1="19" x2="19" y2="5" />
    </svg>
  );
}

function AvisoLegal() {
  return (
    <div className="mt-3 text-center">
      <div className="border border-black p-1.5">
        <IconoProhibido className="mx-auto mb-1 h-4 w-4 text-black" />
        <p className="text-[7px] font-black leading-tight text-black">
          TERMINANTEMENTE PROHIBIDO EL ENVÍO DE ARMAS, DINERO, DROGAS Y CUALQUIER
          OTRO ARTÍCULO PROHIBIDO POR LA LEY.
        </p>
      </div>
    </div>
  );
}

function ThermalCopy({ recibo, tipo }: { recibo: Recibo; tipo: string }) {
  return (
    <div className="thermal-copy">
      <div className="text-center">
        <div className="thermal-title font-black">HONDURAS CARGO EXPRESS</div>
        <div className="thermal-subtitle mt-1 font-black">RECIBO DE ENVÍO</div>
        <div className="mt-1 text-xs font-black">{tipo}</div>
      </div>

      <div className="thermal-section">
        <div className="flex justify-between">
          <b>RECIBO:</b>
          <span>{recibo.numero || "-"}</span>
        </div>
        <div className="mt-1 flex justify-between">
          <b>FECHA:</b>
          <span>{recibo.fecha ? new Date(recibo.fecha).toLocaleString("es-HN") : "-"}</span>
        </div>
        <div className="mt-1 flex justify-between">
          <b>GUÍA:</b>
          <b>{recibo.numero_guia || "-"}</b>
        </div>
      </div>

      <div className="thermal-section">
        <b>ENVÍA</b>
        <div className="mt-1 text-sm font-black">{recibo.cliente || "-"}</div>
        <div>Tel: {recibo.telefono || "-"}</div>
        <div>Dir: {recibo.direccion || "-"}</div>
      </div>

      <div className="thermal-section">
        <b>RECIBE</b>
        <div className="mt-1 text-sm font-black">{recibo.destinatario || "-"}</div>
        <div>Tel: {recibo.telefono_destinatario || "-"}</div>
      </div>

      <div className="thermal-section">
        <b>DESTINO</b>
        <div className="mt-1">{recibo.pais_destino || "Honduras"}</div>
      </div>

      <div className="thermal-section">
        <b>CONTENIDO / OBSERVACIONES</b>
        <div className="mt-1">{recibo.observaciones || "-"}</div>
      </div>

      <div className="thermal-section">
        <div className="flex justify-between">
          <b>ESTADO:</b>
          <b>{recibo.estado || "Pendiente"}</b>
        </div>
        <div className="mt-1 flex justify-between">
          <b>MÉTODO:</b>
          <b>{recibo.metodo_pago || "-"}</b>
        </div>
      </div>

      <div className="thermal-total">
        <div className="flex justify-between">
          <b>TOTAL</b>
          <b>
            ${Number(recibo.monto || 0).toLocaleString("en-US", {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })}
          </b>
        </div>
      </div>

      <div className="mt-8 text-center">
        <div className="mx-auto w-40 border-t border-black" />
        <div className="mt-1 text-[9px]">Firma del cliente</div>
      </div>

      <AvisoLegal />

      <div className="thermal-footer">
        <div className="font-bold italic">¡Gracias por preferirnos!</div>
        <div className="mt-1 font-black">HONDURAS CARGO EXPRESS</div>
        <div className="font-bold">TU CARGA, NUESTRO COMPROMISO</div>
      </div>
    </div>
  );
}