"use client";

import { useEffect, useMemo, 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";

type Guia = {
  id: string;
  numero_guia?: string | null;
  numero?: string | null;
  cliente?: string | null;
  ciudad?: string | null;
  direccion?: string | null;
  telefono?: string | null;
  estado?: string | null;
  fecha?: string | null;
  created_at?: string | null;
  contenedor_id?: string | null;
  contenedor?: string | null;
  numero_contenedor?: string | null;
  [key: string]: any;
};

type Recibo = {
  id: string | number;
  guia_id: string | number;
  observaciones?: string | null;
};

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

type Contenedor = {
  id: string;
  numero?: string | null;
  numero_contenedor?: string | null;
  nombre?: string | null;
  codigo?: string | null;
  fecha_salida?: string | null;
  fecha_llegada?: string | null;
  [key: string]: any;
};

function formatearFechaUSA(valor?: string | null) {
  if (!valor) return "";
  const fecha = new Date(valor);
  if (isNaN(fecha.getTime())) return valor;

  const mes = String(fecha.getMonth() + 1).padStart(2, "0");
  const dia = String(fecha.getDate()).padStart(2, "0");
  const anio = String(fecha.getFullYear()).slice(-2);

  return `${mes}/${dia}/${anio}`;
}

function formatearMedida(valor?: number | string | null) {
  if (valor === null || valor === undefined) return "-";
  const texto = String(valor).trim();
  return texto === "" ? "-" : texto;
}

function calcularPiesCubicos(
  largo?: number | string | null,
  ancho?: number | string | null,
  alto?: number | string | null
): number | null {
  const l = Number(largo);
  const a = Number(ancho);
  const h = Number(alto);

  if (
    !Number.isFinite(l) ||
    !Number.isFinite(a) ||
    !Number.isFinite(h) ||
    l <= 0 ||
    a <= 0 ||
    h <= 0
  ) {
    return null;
  }

  return (l * a * h) / 1728;
}

function redondearCostoCaja(costoExacto: number): number {
  const centavos = Math.round(costoExacto * 100);
  return Math.round(centavos / 100);
}

function formatearVolumen(volumen: number): string {
  return `${volumen.toFixed(2)} ft³`;
}

function formatearPago(pago: number): string {
  return `$${pago.toLocaleString("en-US", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  })}`;
}

function obtenerFechaInput(valor?: string | null) {
  if (!valor) return "";
  const fecha = new Date(valor);
  if (isNaN(fecha.getTime())) return "";
  return fecha.toISOString().split("T")[0];
}

function obtenerNombreContenedor(contenedor: Contenedor) {
  return (
    contenedor.numero_contenedor ||
    contenedor.numero ||
    contenedor.nombre ||
    contenedor.codigo ||
    contenedor.id
  );
}

export default function ReportesPage() {
  const [guias, setGuias] = useState<Guia[]>([]);
  const [recibos, setRecibos] = useState<Recibo[]>([]);
  const [cajas, setCajas] = useState<Caja[]>([]);
  const [contenedores, setContenedores] = useState<Contenedor[]>([]);
  const [contenedorSeleccionado, setContenedorSeleccionado] = useState("");
  const [fechaDesde, setFechaDesde] = useState("");
  const [fechaHasta, setFechaHasta] = useState("");
  const [loading, setLoading] = useState(true);
  const [errorCarga, setErrorCarga] = useState("");
  const [seleccionadas, setSeleccionadas] = useState<Set<string>>(new Set());
  const [eliminando, setEliminando] = useState(false);
  const [usuarioSesion, setUsuarioSesion] = useState<SessionUser | null>(null);

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

  async function cargarDatos() {
    setLoading(true);
    setErrorCarga("");

    try {
      const [
        { data: guiasData, error: guiasError },
        { data: recibosData, error: recibosError },
        { data: cajasData, error: cajasError },
      ] = await Promise.all([
        supabase.from("hce_guias").select("*"),
        supabase.from("hce_recibos").select("id, guia_id, observaciones"),
        supabase.from("hce_cajas").select("id, guia_id, largo, ancho, alto"),
      ]);

      if (guiasError) {
        console.error("ERROR CARGANDO GUÍAS HCE:", guiasError);
        setErrorCarga(`Error cargando guías HCE: ${guiasError.message}`);
        setLoading(false);
        return;
      }

      if (recibosError) {
        console.error("ERROR CARGANDO RECIBOS HCE:", recibosError);
      }

      if (cajasError) {
        console.error("ERROR CARGANDO CAJAS HCE:", cajasError);
      }

      const guiasHCE: Guia[] = guiasData || [];
      const recibosHCE: Recibo[] = recibosData || [];
      const cajasHCE: Caja[] = cajasData || [];

      const contenedoresHCE: Contenedor[] = [];
      const vistos = new Set<string>();

      for (const guia of guiasHCE) {
        const identificador = guia.numero_contenedor || guia.contenedor || guia.contenedor_id;
        if (!identificador) continue;

        const clave = String(identificador);
        if (vistos.has(clave)) continue;

        vistos.add(clave);
        contenedoresHCE.push({ id: clave, numero: clave, numero_contenedor: clave });
      }

      setGuias(guiasHCE);
      setRecibos(recibosHCE);
      setCajas(cajasHCE);
      setContenedores(contenedoresHCE);
      setSeleccionadas(new Set());
    } catch (error: any) {
      console.error("ERROR CARGANDO DATOS DEL REPORTE:", error);
      setErrorCarga(error?.message || "Error al cargar los datos del reporte.");
    } finally {
      setLoading(false);
    }
  }

  const guiasFiltradas = useMemo(() => {
    return guias.filter((guia) => {
      if (contenedorSeleccionado) {
        const coincideContenedor =
          guia.contenedor_id === contenedorSeleccionado ||
          guia.contenedor === contenedorSeleccionado ||
          guia.numero_contenedor === contenedorSeleccionado;

        if (!coincideContenedor) return false;
      }

      const fechaGuia = guia.fecha || guia.created_at;
      if (!fechaGuia) {
        return !fechaDesde && !fechaHasta;
      }

      const fecha = new Date(fechaGuia);
      if (isNaN(fecha.getTime())) return true;

      const fechaSolo = fecha.toISOString().split("T")[0];

      if (fechaDesde && fechaSolo < fechaDesde) return false;
      if (fechaHasta && fechaSolo > fechaHasta) return false;

      return true;
    });
  }, [guias, contenedorSeleccionado, fechaDesde, fechaHasta]);

  const totalGuias = guiasFiltradas.length;
  const totalCajas = useMemo(() => {
    return guiasFiltradas.reduce((total, guia) => {
      return total + cajas.filter((c) => String(c.guia_id) === String(guia.id)).length;
    }, 0);
  }, [guiasFiltradas, cajas]);

  const { totalPiesCubicosFacturables, totalAPagar } = useMemo(() => {
    let pago = 0;

    for (const guia of guiasFiltradas) {
      for (const { volumen } of calcularCajasGuia(guia)) {
        if (volumen !== null) {
          const costoExacto = volumen * 10;
          pago += redondearCostoCaja(costoExacto);
        }
      }
    }

    return {
      totalPiesCubicosFacturables: pago / 10,
      totalAPagar: pago,
    };
  }, [guiasFiltradas, cajas]);

  const contenedorActual = contenedores.find(
    (contenedor) =>
      contenedor.id === contenedorSeleccionado ||
      obtenerNombreContenedor(contenedor) === contenedorSeleccionado
  );

  const esAdmin = usuarioSesion?.tipo === "admin" || usuarioSesion?.tipo === "usuario";

  function limpiarFiltros() {
    setContenedorSeleccionado("");
    setFechaDesde("");
    setFechaHasta("");
  }

  function obtenerCajasGuia(guia: Guia) {
    return cajas.filter((c) => String(c.guia_id) === String(guia.id)).length;
  }

  // Medidas reales de cada caja (hce_cajas.largo/ancho/alto) en formato compacto:
  // 25x18x40. Se conserva el orden que devuelve la fuente de datos y no se
  // transforman los valores; una caja sin las tres medidas se muestra como "-".
  function obtenerMedidasGuia(guia: Guia) {
    const medidas = cajas
      .filter((c) => String(c.guia_id) === String(guia.id))
      .map((caja) => {
        const partes = [caja.largo, caja.ancho, caja.alto].map(formatearMedida);
        const sinMedidas = partes.some((parte) => parte === "-");
        return sinMedidas ? "-" : partes.join("x");
      });

    return medidas.length ? medidas.join(" · ") : "-";
  }

  function obtenerObservacionesGuia(guia: Guia) {
    const recibo = recibos.find((r) => String(r.guia_id) === String(guia.id));
    return recibo?.observaciones || "";
  }

  type CajaCalculada = {
    caja: Caja;
    volumen: number | null;
    costo: number | null;
  };

  function calcularCajasGuia(guia: Guia): CajaCalculada[] {
    return cajas
      .filter((c) => String(c.guia_id) === String(guia.id))
      .map((caja) => {
        const volumen = calcularPiesCubicos(caja.largo, caja.ancho, caja.alto);
        const costo = volumen !== null ? volumen * 10 : null;
        return { caja, volumen, costo };
      });
  }



  function toggleSeleccionada(id: string) {
    setSeleccionadas((prev) => {
      const siguiente = new Set(prev);
      if (siguiente.has(id)) {
        siguiente.delete(id);
      } else {
        siguiente.add(id);
      }
      return siguiente;
    });
  }

  function toggleSeleccionarTodas() {
    const idsFiltradas = guiasFiltradas.map((g) => String(g.id));
    const todasSeleccionadas = idsFiltradas.every((id) => seleccionadas.has(id));

    if (todasSeleccionadas) {
      setSeleccionadas((prev) => {
        const siguiente = new Set(prev);
        idsFiltradas.forEach((id) => siguiente.delete(id));
        return siguiente;
      });
    } else {
      setSeleccionadas((prev) => {
        const siguiente = new Set(prev);
        idsFiltradas.forEach((id) => siguiente.add(id));
        return siguiente;
      });
    }
  }

  async function parsearRespuestaApi(respuesta: Response) {
    let resultado: { success?: boolean; error?: string } = {};
    try {
      resultado = await respuesta.json();
    } catch {
      throw new Error(
        respuesta.status >= 500
          ? `Error del servidor (${respuesta.status}). Intenta nuevamente.`
          : `Error inesperado (${respuesta.status}). Contacta al administrador.`
      );
    }

    if (!respuesta.ok || !resultado.success) {
      throw new Error(resultado.error || `Error de la API (${respuesta.status}).`);
    }

    return resultado;
  }

  async function eliminarGuia(guia: Guia) {
    const numero = guia.numero_guia || guia.numero || guia.id || "SIN NÚMERO";

    const confirmar = window.confirm(
      `¿Seguro que deseas eliminar la guía ${numero}?\n\nSe eliminarán también los recibos y cajas asociados a esta guía.`
    );
    if (!confirmar) return;

    setEliminando(true);

    try {
      const respuesta = await fetch(`/cargoerp/api/guias/${guia.id}`, {
        method: "DELETE",
        credentials: "same-origin",
      });

      await parsearRespuestaApi(respuesta);

      setGuias((actuales) => actuales.filter((item) => String(item.id) !== String(guia.id)));
      setSeleccionadas((prev) => {
        const siguiente = new Set(prev);
        siguiente.delete(String(guia.id));
        return siguiente;
      });

      alert("Guía eliminada correctamente.");
    } catch (error: any) {
      console.error("ERROR ELIMINANDO GUÍA HCE:", error);
      alert("No se pudo eliminar la guía: " + (error?.message || "Error desconocido"));
    } finally {
      setEliminando(false);
    }
  }

  async function eliminarSeleccionadas() {
    if (seleccionadas.size === 0) {
      alert("No has seleccionado ninguna guía.");
      return;
    }

    const idsArray = Array.from(seleccionadas);

    const confirmar = window.confirm(
      `⚠️ ATENCIÓN\n\nSe eliminarán ${idsArray.length} guía(s) seleccionada(s) y todos sus recibos y cajas asociados.\n\nEsta acción no se puede deshacer.\n\n¿Deseas continuar?`
    );
    if (!confirmar) return;

    setEliminando(true);

    try {
      const respuesta = await fetch("/cargoerp/api/guias/eliminar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ ids: idsArray }),
      });

      await parsearRespuestaApi(respuesta);

      setGuias((actuales) =>
        actuales.filter((item) => !seleccionadas.has(String(item.id)))
      );
      setSeleccionadas(new Set());

      alert(`${idsArray.length} guía(s) eliminada(s) correctamente.`);
    } catch (error: any) {
      console.error("ERROR ELIMINANDO GUÍAS SELECCIONADAS:", error);
      alert("No se pudieron eliminar las guías: " + (error?.message || "Error desconocido"));
      await cargarDatos();
    } finally {
      setEliminando(false);
    }
  }

  async function eliminarTodo() {
    if (guiasFiltradas.length === 0) {
      alert("No hay guías para eliminar con los filtros actuales.");
      return;
    }

    const idsArray = guiasFiltradas.map((g) => String(g.id));

    const confirmar = window.confirm(
      `⚠️ ATENCIÓN ADMINISTRADOR ⚠️\n\nSe eliminarán TODAS las guías mostradas en el reporte (${idsArray.length}).\n\nTambién se eliminarán todos los recibos y cajas asociados a esas guías.\n\nEsta acción NO se puede deshacer.\n\n¿Deseas continuar?`
    );
    if (!confirmar) return;

    const confirmarFinal = window.confirm(
      `CONFIRMACIÓN FINAL\n\n¿Estás completamente seguro de eliminar ${idsArray.length} guía(s)?`
    );
    if (!confirmarFinal) return;

    setEliminando(true);

    try {
      const respuesta = await fetch("/cargoerp/api/guias/eliminar", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({ ids: idsArray }),
      });

      await parsearRespuestaApi(respuesta);

      setGuias((actuales) =>
        actuales.filter((item) => !idsArray.includes(String(item.id)))
      );
      setSeleccionadas(new Set());
      limpiarFiltros();

      alert(`${idsArray.length} guía(s) eliminada(s) correctamente.`);
    } catch (error: any) {
      console.error("ERROR ELIMINANDO TODAS LAS GUÍAS HCE:", error);
      alert("No se pudieron eliminar todas las guías: " + (error?.message || "Error desconocido"));
      await cargarDatos();
    } finally {
      setEliminando(false);
    }
  }

  function generarPDF() {
    if (guiasFiltradas.length === 0) {
      alert("No hay guías para generar el reporte.");
      return;
    }

    const nombreContenedor = contenedorActual
      ? obtenerNombreContenedor(contenedorActual)
      : contenedorSeleccionado || "TODOS LOS CONTENEDORES";

    const ventana = window.open("", "_blank", "width=1200,height=900");
    if (!ventana) {
      alert("El navegador bloqueó la ventana del reporte. Permite las ventanas emergentes e inténtalo nuevamente.");
      return;
    }

    const filas = guiasFiltradas
      .map((guia, index) => {
        const numeroGuia = guia.numero || guia.numero_guia || "SIN NÚMERO";
        const cliente = guia.cliente || "";
        const ciudad = guia.ciudad || "";
        const direccion = guia.direccion || "";
        const telefono = guia.telefono || "";
        const loQueEnvia = obtenerObservacionesGuia(guia);
        const cajasCount = obtenerCajasGuia(guia);
        const medidasCajas = obtenerMedidasGuia(guia);
        const fecha = formatearFechaUSA(guia.fecha || guia.created_at);

        return `
          <tr>
            <td>${index + 1}</td>
            <td><strong>${numeroGuia}</strong></td>
            <td>${cliente}</td>
            <td>${ciudad}</td>
            <td>${direccion}</td>
            <td>${telefono}</td>
            <td>${loQueEnvia}</td>
            <td style="text-align:center">${cajasCount}</td>
            <td>${medidasCajas}</td>
            <td>${fecha}</td>
          </tr>
        `;
      })
      .join("");

    ventana.document.write(`
      <!DOCTYPE html>
      <html lang="es">
        <head>
          <meta charset="UTF-8" />
          <title>Reporte Honduras Cargo Express</title>
          <style>
            * { box-sizing: border-box; }
            body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #111; font-size: 15px; line-height: 1.28; }
            .header { border-bottom: 2px solid #f97316; padding-bottom: 5px; margin-bottom: 8px; break-after: avoid; page-break-after: avoid; }
            .header .empresa { font-size: 19px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3px; }
            .header .titulo { font-size: 17px; font-weight: bold; color: #f97316; text-transform: uppercase; margin-top: 2px; }
            .info { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-bottom: 8px; font-size: 14px; }
            .info div { white-space: nowrap; }
            .info strong { font-weight: bold; }
            .totales { display: flex; gap: 12px; margin-bottom: 8px; font-size: 14px; }
            .totales strong { color: #f97316; font-size: 15px; }
            table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
            th { background: #111827; color: white; text-align: left; font-weight: bold; break-inside: avoid; page-break-inside: avoid; }
            th, td { border: 1px solid #d1d5db; padding: 4px 5px; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; }
            thead { display: table-header-group; break-inside: avoid; page-break-inside: avoid; }
            thead tr { break-after: avoid; page-break-after: avoid; }
            tbody tr { break-inside: avoid; page-break-inside: avoid; }
            tbody tr:nth-child(even) { background: #f9fafb; }
            .footer { margin-top: 8px; border-top: 1px solid #ddd; padding-top: 4px; font-size: 12px; color: #666; }
            @media print { body { padding: 0; } .no-print { display: none; } @page { size: letter landscape; margin: 8mm; } }
          </style>
        </head>
        <body>
          <div class="header">
            <div class="empresa">HONDURAS CARGO EXPRESS</div>
            <div class="titulo">REPORTE DE CONTENEDOR</div>
          </div>
          <div class="info">
            <div><strong>Contenedor:</strong> ${nombreContenedor}</div>
            <div><strong>Fecha salida:</strong> ${formatearFechaUSA(contenedorActual?.fecha_salida) || "No registrada"}</div>
            <div><strong>Desde:</strong> ${fechaDesde ? formatearFechaUSA(fechaDesde) : "Sin límite"}</div>
            <div><strong>Hasta:</strong> ${fechaHasta ? formatearFechaUSA(fechaHasta) : "Sin límite"}</div>
            <div><strong>Total guías:</strong> ${totalGuias}</div>
            <div><strong>Total cajas:</strong> ${totalCajas}</div>
            <div><strong>Total pies cúbicos facturables:</strong> ${totalPiesCubicosFacturables.toFixed(2)} ft³</div>
            <div><strong>Total a pagar:</strong> ${formatearPago(totalAPagar)}</div>
          </div>
          <table>
            <thead>
              <tr>
                <th style="width:3%">#</th>
                <th style="width:10%">Guía</th>
                <th style="width:12%">Cliente</th>
                <th style="width:9%">Ciudad</th>
                <th style="width:14%">Dirección</th>
                <th style="width:9%">Teléfono</th>
                <th style="width:17%">Manifiesto del cliente</th>
                <th style="width:5%">Cajas</th>
                <th style="width:15%">Medidas por caja (pulg)</th>
                <th style="width:8%">Fecha</th>
              </tr>
            </thead>
            <tbody>${filas}</tbody>
          </table>
          <div class="totales">
            <div><strong>Total guías:</strong> ${totalGuias}</div>
            <div><strong>Total cajas:</strong> ${totalCajas}</div>
            <div><strong>Total pies cúbicos facturables:</strong> ${totalPiesCubicosFacturables.toFixed(2)} ft³</div>
            <div><strong>Total a pagar al proveedor:</strong> ${formatearPago(totalAPagar)}</div>
          </div>
          <div class="footer">
            Reporte generado por Honduras Cargo Express · ${new Date().toLocaleString("es-HN")}
          </div>
          <script>
            window.onload = function () { setTimeout(function () { window.print(); }, 500); };
          </script>
        </body>
      </html>
    `);

    ventana.document.close();
  }

  if (loading) {
    return (
      <PageLayout>
        <div className="flex min-h-[200px] items-center justify-center text-sm text-[var(--text-muted)]">
          Cargando reportes...
        </div>
      </PageLayout>
    );
  }

  const opcionesContenedores = [
    { value: "", label: "Todos los contenedores" },
    ...contenedores.map((contenedor) => ({
      value: contenedor.id,
      label: obtenerNombreContenedor(contenedor),
    })),
  ];

  const idsFiltradas = guiasFiltradas.map((g) => String(g.id));
  const todasSeleccionadas =
    idsFiltradas.length > 0 && idsFiltradas.every((id) => seleccionadas.has(id));

  return (
    <PageLayout>
      {/* Encabezado */}
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">Reportes</h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Reporte de guías y contenedores HCE
        </p>
      </section>

      {errorCarga && (
        <div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-500">
          {errorCarga}
        </div>
      )}

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

        <div className="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
          <Select
            label="Contenedor"
            options={opcionesContenedores}
            value={contenedorSeleccionado}
            onChange={(event) => setContenedorSeleccionado(event.target.value)}
          />
          <Input
            label="Fecha desde"
            type="date"
            value={fechaDesde}
            onChange={(event) => setFechaDesde(event.target.value)}
          />
          <Input
            label="Fecha hasta"
            type="date"
            value={fechaHasta}
            onChange={(event) => setFechaHasta(event.target.value)}
          />
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          <Button size="sm" onClick={generarPDF}>
            📄 Generar PDF
          </Button>
          <Button size="sm" variant="secondary" onClick={limpiarFiltros}>
            Limpiar filtros
          </Button>
          {esAdmin && (
            <>
              <Button
                size="sm"
                variant="danger"
                onClick={eliminarSeleccionadas}
                disabled={eliminando || seleccionadas.size === 0}
              >
                Eliminar seleccionados {seleccionadas.size > 0 ? `(${seleccionadas.size})` : ""}
              </Button>
              <Button
                size="sm"
                variant="danger"
                onClick={eliminarTodo}
                disabled={eliminando}
              >
                Borrar todo HCE
              </Button>
            </>
          )}
        </div>
      </Card>

      {/* Resumen */}
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total de guías
          </p>
          <p className="mt-1 text-3xl font-black text-[var(--accent)]">{totalGuias}</p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total de cajas
          </p>
          <p className="mt-1 text-3xl font-black text-emerald-500">{totalCajas}</p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total de pies cúbicos facturables
          </p>
          <p className="mt-1 text-3xl font-black text-blue-500">
            {totalPiesCubicosFacturables.toFixed(2)} ft³
          </p>
        </Card>
        <Card padding="sm">
          <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
            Total a pagar al proveedor
          </p>
          <p className="mt-1 text-3xl font-black text-orange-500">
            {formatearPago(totalAPagar)}
          </p>
        </Card>
      </div>

      {/* Tabla */}
      <Card padding="none">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1250px] text-left text-[12px]">
            <thead className="bg-[var(--bg-secondary)] text-[11px] font-black uppercase tracking-wider text-[var(--text-secondary)]">
              <tr>
                {esAdmin && (
                  <th className="w-[3%] px-2 py-2 text-center">
                    <input
                      type="checkbox"
                      checked={todasSeleccionadas}
                      onChange={toggleSeleccionarTodas}
                      title="Seleccionar todas"
                      className="h-4 w-4 cursor-pointer accent-[var(--accent)]"
                    />
                  </th>
                )}
                <th className="w-[3%] px-2 py-2">#</th>
                <th className="w-[10%] px-2 py-2">Guía</th>
                <th className="w-[12%] px-2 py-2">Cliente</th>
                <th className="w-[9%] px-2 py-2">Ciudad</th>
                <th className="w-[14%] px-2 py-2">Dirección</th>
                <th className="w-[9%] px-2 py-2">Teléfono</th>
                <th className="w-[15%] px-2 py-2">Manifiesto del cliente</th>
                <th className="w-[5%] px-2 py-2 text-center">Cajas</th>
                <th className="w-[15%] px-2 py-2">Medidas por caja (pulg)</th>
                <th className="w-[8%] px-2 py-2">Fecha</th>
                {esAdmin && <th className="w-[8%] px-2 py-2 text-center">Acción</th>}
              </tr>
            </thead>
            <tbody className="divide-y divide-[var(--border)]">
              {guiasFiltradas.map((guia, index) => {
                const id = String(guia.id);
                const seleccionada = seleccionadas.has(id);
                const medidasGuia = obtenerMedidasGuia(guia);

                return (
                  <tr
                    key={guia.id}
                    className={`transition hover:bg-[var(--bg-secondary)]/50 ${
                      seleccionada ? "bg-[var(--accent)]/5" : ""
                    }`}
                  >
                    {esAdmin && (
                      <td className="px-2 py-2 text-center">
                        <input
                          type="checkbox"
                          checked={seleccionada}
                          onChange={() => toggleSeleccionada(id)}
                          className="h-4 w-4 cursor-pointer accent-[var(--accent)]"
                        />
                      </td>
                    )}
                    <td className="px-2 py-2 text-[var(--text-secondary)]">{index + 1}</td>
                    <td className="whitespace-nowrap px-2 py-2 font-bold text-[var(--accent)]">
                      {guia.numero || guia.numero_guia || "SIN NÚMERO"}
                    </td>
                    <td className="px-2 py-2 text-[var(--text-primary)]">
                      {guia.cliente || "-"}
                    </td>
                    <td className="px-2 py-2 text-[var(--text-secondary)]">
                      {guia.ciudad || "-"}
                    </td>
                    <td className="px-2 py-2 text-[var(--text-secondary)]">
                      {guia.direccion || "-"}
                    </td>
                    <td className="whitespace-nowrap px-2 py-2 text-[var(--text-secondary)]">
                      {guia.telefono || "-"}
                    </td>
                    <td className="px-2 py-2 text-[var(--text-secondary)]">
                      {obtenerObservacionesGuia(guia) || "-"}
                    </td>
                    <td className="px-2 py-2 text-center text-[var(--text-secondary)]">
                      {obtenerCajasGuia(guia)}
                    </td>
                    <td className="px-2 py-2 text-[var(--text-secondary)]">
                      <span
                        title={medidasGuia !== "-" ? medidasGuia : undefined}
                        className="block truncate"
                      >
                        {medidasGuia}
                      </span>
                    </td>
                    <td className="whitespace-nowrap px-2 py-2 text-[var(--text-muted)]">
                      {formatearFechaUSA(guia.fecha || guia.created_at)}
                    </td>
                    {esAdmin && (
                      <td className="px-2 py-2 text-center">
                        <Button
                          variant="danger"
                          size="sm"
                          onClick={() => eliminarGuia(guia)}
                          disabled={eliminando}
                        >
                          Borrar
                        </Button>
                      </td>
                    )}
                  </tr>
                );
              })}

              {guiasFiltradas.length === 0 && (
                <tr>
                  <td
                    colSpan={esAdmin ? 12 : 11}
                    className="px-4 py-8 text-center text-sm text-[var(--text-muted)]"
                  >
                    No hay guías para los filtros seleccionados.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Resumen final */}
      <Card className="mt-4" padding="sm">
        <h2 className="mb-3 text-sm font-black text-[var(--text-primary)]">
          Resumen del reporte
        </h2>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          <div>
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Total de guías
            </p>
            <p className="mt-1 text-2xl font-black text-[var(--accent)]">{totalGuias}</p>
          </div>
          <div>
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Total de cajas
            </p>
            <p className="mt-1 text-2xl font-black text-emerald-500">{totalCajas}</p>
          </div>
          <div>
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Total de pies cúbicos facturables
            </p>
            <p className="mt-1 text-2xl font-black text-blue-500">
              {totalPiesCubicosFacturables.toFixed(2)} ft³
            </p>
          </div>
          <div>
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Total a pagar al proveedor
            </p>
            <p className="mt-1 text-2xl font-black text-orange-500">
              {formatearPago(totalAPagar)}
            </p>
          </div>
        </div>
      </Card>
    </PageLayout>
  );
}