import {
  Block,
  CheckCircle,
  Circle,
  Delete,
  Download,
  FactCheck,
  HourglassEmpty,
  Refresh,
  Search,
  Sync,
  WifiOff,
} from "@mui/icons-material";
import {
  Alert,
  Box,
  Button,
  Checkbox,
  Chip,
  Divider,
  FormControl,
  IconButton,
  InputLabel,
  LinearProgress,
  List,
  ListItem,
  MenuItem,
  Paper,
  Select,
  Stack,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tabs,
  Link as MuiLink,
  Tooltip,
  Typography,
} from "@mui/material";
import { Link as RouterLink } from "react-router-dom";
import { useEffect, useMemo, useState } from "react";
import { useMarangatuStore } from "../../store/MarangatuStore";
import {
  useConsultarDocumentosMutation,
  useImportarComprasMutation,
  useImportarNotasCreditoMutation,
  useMarangatuConfigQuery,
  useMarcarElectronicosMutation,
  useImportarVentasMutation,
  useTriggerSyncComprasMutation,
  useTriggerSyncVentasMutation,
} from "../../tanstack/MarangatuStack";

const CURRENT_YEAR = new Date().getFullYear();
const YEARS = Array.from({ length: 5 }, (_, i) => CURRENT_YEAR - i);
const MONTHS = [
  { value: 1, label: "Enero" }, { value: 2, label: "Febrero" },
  { value: 3, label: "Marzo" }, { value: 4, label: "Abril" },
  { value: 5, label: "Mayo" }, { value: 6, label: "Junio" },
  { value: 7, label: "Julio" }, { value: 8, label: "Agosto" },
  { value: 9, label: "Septiembre" }, { value: 10, label: "Octubre" },
  { value: 11, label: "Noviembre" }, { value: 12, label: "Diciembre" },
];

const BOT_ESTADO_COLOR = {
  QUEUED: "warning",
  PROCESANDO: "info",
  COMPLETADO: "success",
  ERROR: "error",
};

const NIVEL_COLOR = {
  SUCCESS: "success.main",
  ERROR: "error.main",
  WARN: "warning.main",
  WARNING: "warning.main",
  DEBUG: "text.disabled",
  INFO: "text.secondary",
};

const fmtMonto = (v) =>
  v != null ? Number(v).toLocaleString("es-PY") + " Gs." : "—";

const fmtFecha = (v) => {
  if (!v) return "—";
  try {
    // Soporta DD/MM/YYYY (formato del bot) e ISO
    if (typeof v === "string" && v.includes("/")) {
      const [d, m, y] = v.split("/");
      return new Date(Number(y), Number(m) - 1, Number(d)).toLocaleDateString("es-PY");
    }
    const d = new Date(v);
    return isNaN(d.getTime()) ? v : d.toLocaleDateString("es-PY");
  } catch { return v; }
};

const getDocTotal = (doc) =>
  Number(doc.xmlParsed?.DE?.gTotSub?.dTotGralOpe ?? doc.montoTotal ?? doc.total ?? 0);

const isPendienteXml = (doc) =>
  !doc.xmlParsed ||
  (doc.estadoXML ?? doc.estado_xml ?? "").toUpperCase() === "PENDIENTE_XML";

const isEventoCancelacion = (doc) => {
  const ev = doc.xContEv;
  if (!ev) return false;
  return !!(ev.rEve || ev.rRetEnviEventoDe);
};

const getDocCondicion = (doc) => {
  const cod = Number(doc.xmlParsed?.DE?.gDtipDE?.gCamCond?.iCondOpe ?? 1);
  return cod === 2 ? "crédito" : "contado";
};

const isNotaCredito = (doc) => {
  const tipo = String(doc?.tipoComprobante ?? "")
    .toUpperCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");
  if (tipo.includes("NOTA DE CREDITO")) return true;
  return Number(doc?.xmlParsed?.DE?.gTimb?.iTiDE ?? 0) === 5;
};

const getCdcRefAsoc = (doc) => {
  const raw = doc?.xmlParsed?.DE?.gCamDEAsoc;
  const list = Array.isArray(raw) ? raw : raw ? [raw] : [];
  return list[0]?.dCdCDERef ?? null;
};

const getDocNumero = (doc) => {
  if (doc.numeroComprobante) return doc.numeroComprobante;
  const t = doc.xmlParsed?.DE?.gTimb ?? {};
  return [t.dEst, t.dPunExp, t.dNumDoc].filter(Boolean).join("-") || "—";
};

const getDocContraparte = (doc, tipo) => {
  if (tipo === "COMPRAS") {
    return {
      ruc: doc.rucEmisor ?? doc.rucVendedor ?? "—",
      nombre: doc.razonSocialEmisor ?? doc.razonSocialVendedor ?? "—",
    };
  }
  return {
    ruc: doc.rucReceptor ?? doc.rucVendedor ?? "—",
    nombre: doc.razonSocialReceptor ?? doc.razonSocialVendedor ?? "—",
  };
};

const SIFEN_COLOR = {
  Aprobado: "success",
  Aprobado_con_observacion: "warning",
  Rechazado: "error",
  Cancelado: "error",
  PENDIENTE_XML: "warning",
};

const fmtDuracion = (seg) => {
  const s = Math.max(0, Math.floor(Number(seg) || 0));
  if (s < 60) return `${s}s`;
  const m = Math.floor(s / 60);
  const r = s % 60;
  return r ? `${m}m ${r}s` : `${m}m`;
};

// El bot manda nextCapture/nextEnrich como objeto { status, reason, at, remainingSec }.
// Renderizarlo directo rompe React (error #31). Lo convertimos a texto legible.
// Acepta también string (compatibilidad) y null.
// "hace 2 min" para el último snapshot. El estado del bot no se actualiza solo:
// si el dato quedó viejo hay que poder verlo.
const fmtAntiguedad = (fecha) => {
  if (!fecha) return null;
  const seg = Math.max(0, Math.round((Date.now() - fecha.getTime()) / 1000));
  if (seg < 60) return "recién";
  const min = Math.floor(seg / 60);
  if (min < 60) return `hace ${min} min`;
  const hs = Math.floor(min / 60);
  return hs < 24 ? `hace ${hs} h` : `hace ${Math.floor(hs / 24)} d`;
};

const fmtProximaEjecucion = (info) => {
  if (info == null) return null;
  if (typeof info === "string") return info;
  const { status, reason, remainingSec } = info;
  switch (status) {
    case "COUNTDOWN":
      return remainingSec != null ? `en ${fmtDuracion(remainingSec)}` : "programado";
    case "POR_EJECUTAR":
      return "por ejecutar";
    case "INACTIVO":
      return reason ? `pausado — ${reason}` : "pausado";
    case "SIN_CICLO_PREVIO":
      return "sin ciclo previo";
    default:
      return reason || status || "—";
  }
};

export const MarangatuSyncPanel = ({ tipo = "COMPRAS" }) => {
  const storeKey = tipo === "COMPRAS" ? "compras" : "ventas";

  const [anho, setAnho] = useState(CURRENT_YEAR);
  const [mes, setMes] = useState(new Date().getMonth() + 1);
  const [documentosPreview, setDocumentosPreview] = useState(null);
  const [ventasSubTab, setVentasSubTab] = useState("FACTURA"); // "FACTURA" | "NC"
  const [seleccionados, setSeleccionados] = useState(() => new Set());

  const wsConnected = useMarangatuStore((s) => s.wsConnected);
  // Sin credenciales cargadas el bot no conoce a la empresa y la captura
  // termina en error: mejor decirlo antes de habilitar el botón.
  const { data: config, isSuccess: configCargada } = useMarangatuConfigQuery();
  const sinCredenciales = configCargada && !config;
  const { setSyncing, clearEvents } = useMarangatuStore();
  const { progress, estado, eventos, ultimaSync, documentosSincronizados, botEstado, botEtapa, totalRecuperados, proximaAutoCaptura, proximoEnrich, snapshotAt } =
    useMarangatuStore((s) => s[storeKey]);
  const solicitarSnapshot = useMarangatuStore((s) => s.solicitarSnapshot);

  // Al abrir la pestaña se pide el estado actual del bot: el backend guarda el
  // último snapshot y sin este pedido el panel muestra el de cuando arrancó.
  useEffect(() => {
    solicitarSnapshot?.();
  }, [solicitarSnapshot]);

  // Redibuja el "hace X" cada 30s sin tocar el resto del panel.
  const [, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 30_000);
    return () => clearInterval(id);
  }, []);

  const syncCompras = useTriggerSyncComprasMutation();
  const syncVentas = useTriggerSyncVentasMutation();
  const importarCompras = useImportarComprasMutation();
  const marcarElectronicos = useMarcarElectronicosMutation();
  const importarVentas = useImportarVentasMutation();
  const importarNC = useImportarNotasCreditoMutation();
  const consultarMut = useConsultarDocumentosMutation();

  const isPending = syncCompras.isPending || syncVentas.isPending;
  const isBusy = isPending || estado === "procesando";
  const isImporting =
    tipo === "COMPRAS"
      ? importarCompras.isPending
      : ventasSubTab === "NC"
        ? importarNC.isPending
        : importarVentas.isPending;
  const isConsultando = consultarMut.isPending;

  const handleSync = () => {
    clearEvents(storeKey);
    setSyncing(storeKey, true);
    setDocumentosPreview(null);
    setSeleccionados(new Set());
    if (tipo === "COMPRAS") syncCompras.mutate({ anho, mes });
    else syncVentas.mutate({ anho, mes });
  };

  const handleConsultar = () => {
    // Las NC que la empresa EMITE vienen del feed con tipoRegistro=COMPRA;
    // las facturas y otros documentos de VENTAS quedan en VENTAS.
    const tipoRegistro = tipo === "VENTAS" && ventasSubTab === "NC" ? "COMPRAS" : tipo;
    consultarMut.mutate(
      { tipoRegistro, anho, mes },
      {
        onSuccess: (data) => {
          const docs = Array.isArray(data?.data)
            ? data.data
            : Array.isArray(data?.documentos)
              ? data.documentos
              : Array.isArray(data)
                ? data
                : [];
          setDocumentosPreview(docs);
          setSeleccionados(new Set());
        },
      },
    );
  };

  const handleImportar = () => {
    const cdcs = seleccionados.size > 0 ? Array.from(seleccionados) : undefined;
    if (tipo === "COMPRAS") importarCompras.mutate({ anho, mes, cdcs });
    else if (ventasSubTab === "NC") importarNC.mutate({ anho, mes, cdcs });
    else importarVentas.mutate({ anho, mes, cdcs });
  };

  const importResult =
    tipo === "COMPRAS"
      ? importarCompras
      : ventasSubTab === "NC"
        ? importarNC
        : importarVentas;
  const entityLabel = tipo === "COMPRAS" ? "proveedor" : "cliente";

  // Filtrado por sub-tab en VENTAS (Facturas vs NC)
  const docsFiltrados = useMemo(() => {
    if (documentosPreview === null) return null;
    if (tipo !== "VENTAS") return documentosPreview;
    return documentosPreview.filter((d) => (ventasSubTab === "NC" ? isNotaCredito(d) : !isNotaCredito(d)));
  }, [documentosPreview, tipo, ventasSubTab]);

  const counts = useMemo(() => {
    if (!documentosPreview || tipo !== "VENTAS") return null;
    let f = 0;
    let nc = 0;
    for (const d of documentosPreview) {
      if (isNotaCredito(d)) nc++;
      else f++;
    }
    return { f, nc };
  }, [documentosPreview, tipo]);

  return (
    <Paper variant="outlined" sx={{ overflow: "hidden" }}>
      {/* Header */}
      <Box sx={{ px: 2.5, py: 1.5, display: "flex", alignItems: "center", justifyContent: "space-between", bgcolor: "background.default" }}>
        <Typography variant="subtitle2" fontWeight={600}>
          Importar desde Marangatu — {tipo}
        </Typography>
        <Stack direction="row" spacing={1} alignItems="center">
          {botEstado && (
            <Chip
              size="small"
              color={BOT_ESTADO_COLOR[botEstado] ?? "default"}
              label={`Estado: ${botEstado}`}
              sx={{ fontSize: "0.7rem" }}
            />
          )}
          <Chip
            size="small"
            icon={wsConnected
              ? <Circle sx={{ fontSize: "10px !important" }} />
              : <WifiOff sx={{ fontSize: "14px !important" }} />
            }
            label={wsConnected ? "WS conectado" : "WS desconectado"}
            color={wsConnected ? "success" : "default"}
            variant={wsConnected ? "filled" : "outlined"}
            sx={{ fontSize: "0.7rem" }}
          />
          <Tooltip title="Volver a consultarle el estado al bot">
            <span>
              <IconButton size="small" onClick={() => solicitarSnapshot?.()} disabled={!wsConnected} aria-label="Actualizar estado del bot">
                <Refresh sx={{ fontSize: 18 }} />
              </IconButton>
            </span>
          </Tooltip>
        </Stack>
      </Box>

      <Divider />

      {sinCredenciales && (
        <Alert severity="warning" sx={{ borderRadius: 0, py: 0.5 }}>
          Esta empresa no tiene credenciales de Marangatu cargadas: la captura manual va a fallar.{" "}
          <MuiLink component={RouterLink} to="/configuracion?seccion=datos-empresa">
            Cargarlas en Configuración → Datos de empresa
          </MuiLink>
          .
        </Alert>
      )}

      {/* Info secundaria */}
      {(botEtapa || ultimaSync || totalRecuperados != null || proximaAutoCaptura || proximoEnrich) && (
        <Box sx={{ px: 2.5, py: 0.75, bgcolor: "action.hover", display: "flex", gap: 3, flexWrap: "wrap" }}>
          {botEtapa && (
            <Typography variant="caption" color="text.secondary">
              Etapa: <strong>{botEtapa}</strong>
            </Typography>
          )}
          {totalRecuperados != null && (
            <Typography variant="caption" color="text.secondary">
              CDC recuperados: <strong>{totalRecuperados}</strong>
            </Typography>
          )}
          {proximaAutoCaptura && (
            <Typography variant="caption" color="text.secondary">
              Próxima captura: <strong>{fmtProximaEjecucion(proximaAutoCaptura)}</strong>
            </Typography>
          )}
          {proximoEnrich && (
            <Typography variant="caption" color="text.secondary">
              Próximo enrich: <strong>{fmtProximaEjecucion(proximoEnrich)}</strong>
            </Typography>
          )}
          {ultimaSync && (
            <Typography variant="caption" color="text.secondary">
              Última sync: <strong>{ultimaSync.toLocaleString()}</strong> · {documentosSincronizados} doc{documentosSincronizados !== 1 ? "s" : ""}
            </Typography>
          )}
          {snapshotAt && (
            <Tooltip title={`Estado del bot recibido el ${snapshotAt.toLocaleString()}`}>
              <Typography variant="caption" color="text.secondary">
                Estado del bot: <strong>{fmtAntiguedad(snapshotAt)}</strong>
              </Typography>
            </Tooltip>
          )}
        </Box>
      )}

      {/* Controles */}
      <Box sx={{ px: 2.5, py: 2, display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
        <FormControl size="small" sx={{ minWidth: 100 }}>
          <InputLabel>Año</InputLabel>
          <Select value={anho} label="Año" onChange={(e) => setAnho(e.target.value)}>
            {YEARS.map((y) => <MenuItem key={y} value={y}>{y}</MenuItem>)}
          </Select>
        </FormControl>

        <FormControl size="small" sx={{ minWidth: 130 }}>
          <InputLabel>Mes</InputLabel>
          <Select value={mes} label="Mes" onChange={(e) => setMes(e.target.value)}>
            {MONTHS.map((m) => <MenuItem key={m.value} value={m.value}>{m.label}</MenuItem>)}
          </Select>
        </FormControl>

        <Button
          variant="contained"
          startIcon={<Sync sx={isBusy ? {
            animation: "spin 1s linear infinite",
            "@keyframes spin": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } },
          } : {}} />}
          onClick={handleSync}
          disabled={isBusy || !wsConnected || sinCredenciales}
          size="small"
        >
          {isBusy ? "Sincronizando…" : "Captura Manual"}
        </Button>

        <Button
          variant="outlined"
          startIcon={<Search />}
          onClick={handleConsultar}
          disabled={isConsultando || isBusy}
          size="small"
        >
          {isConsultando ? "Consultando…" : "Ver documentos"}
        </Button>

        {eventos.length > 0 && (
          <Button size="small" color="inherit" startIcon={<Delete />} onClick={() => clearEvents(storeKey)}>
            Limpiar log
          </Button>
        )}
      </Box>

      {/* Progress bar */}
      {progress && (
        <Box sx={{ px: 2.5, pb: 1.5 }}>
          <LinearProgress
            variant="determinate"
            value={progress.porcentaje}
            sx={{ borderRadius: 1, height: 6, mb: 0.5 }}
          />
          <Typography variant="caption" color="text.secondary">
            {progress.procesados} / {progress.total} documentos · {progress.porcentaje}%
          </Typography>
        </Box>
      )}

      {/* Sub-tabs para VENTAS (Facturas / NC) */}
      {tipo === "VENTAS" && documentosPreview !== null && (
        <>
          <Divider />
          <Tabs
            value={ventasSubTab}
            onChange={(_, v) => {
              setVentasSubTab(v);
              setDocumentosPreview(null);
            }}
            sx={{ px: 2.5, minHeight: 36, "& .MuiTab-root": { minHeight: 36, fontSize: "0.75rem", textTransform: "none" } }}
          >
            <Tab
              value="FACTURA"
              label={
                <Stack direction="row" spacing={1} alignItems="center">
                  <span>Facturas</span>
                  {counts && <Chip size="small" label={counts.f} sx={{ height: 16, fontSize: "0.65rem" }} />}
                </Stack>
              }
            />
            <Tab
              value="NC"
              label={
                <Stack direction="row" spacing={1} alignItems="center">
                  <span>Notas de Crédito</span>
                  {counts && <Chip size="small" color={counts.nc > 0 ? "warning" : "default"} label={counts.nc} sx={{ height: 16, fontSize: "0.65rem" }} />}
                </Stack>
              }
            />
          </Tabs>
        </>
      )}

      {/* Preview de documentos */}
      {docsFiltrados !== null && (() => {
        const pendientesXml = docsFiltrados.filter((d) => isPendienteXml(d));
        const yaImportados = docsFiltrados.filter((d) => d.yaImportado && !isPendienteXml(d));
        const nuevos = docsFiltrados.filter((d) => !d.yaImportado && !isPendienteXml(d));
        const esNCTab = tipo === "VENTAS" && ventasSubTab === "NC";
        const cdcsNuevos = nuevos.map((d) => d.cdc).filter(Boolean);
        const seleccionadosVisibles = cdcsNuevos.filter((c) => seleccionados.has(c)).length;
        const aImportar = seleccionados.size > 0 ? seleccionadosVisibles : nuevos.length;
        const labelImport = esNCTab
          ? `Importar ${aImportar} NC al ERP`
          : `Importar ${aImportar} nuevo${aImportar !== 1 ? "s" : ""} al ERP`;
        const toggleCdc = (cdc) => {
          setSeleccionados((prev) => {
            const next = new Set(prev);
            if (next.has(cdc)) next.delete(cdc);
            else next.add(cdc);
            return next;
          });
        };
        const toggleAll = () => {
          setSeleccionados((prev) => {
            const todosMarcados = cdcsNuevos.length > 0 && cdcsNuevos.every((c) => prev.has(c));
            const next = new Set(prev);
            if (todosMarcados) cdcsNuevos.forEach((c) => next.delete(c));
            else cdcsNuevos.forEach((c) => next.add(c));
            return next;
          });
        };
        const allChecked = cdcsNuevos.length > 0 && cdcsNuevos.every((c) => seleccionados.has(c));
        const someChecked = !allChecked && cdcsNuevos.some((c) => seleccionados.has(c));
        return (
        <>
          <Divider />
          <Box sx={{ px: 2.5, pt: 1.5, pb: 1, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 1 }}>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
              <Typography variant="caption" color="text.disabled" fontWeight={600} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
                {esNCTab ? "Notas de crédito capturadas" : "Documentos capturados"}
              </Typography>
              <Chip size="small" label={`${docsFiltrados.length} total`} />
              {nuevos.length > 0 && <Chip size="small" color="primary" label={`${nuevos.length} nuevo${nuevos.length !== 1 ? "s" : ""}`} />}
              {seleccionados.size > 0 && (
                <Chip size="small" color="info" label={`${seleccionadosVisibles} marcado${seleccionadosVisibles !== 1 ? "s" : ""}`} onDelete={() => setSeleccionados(new Set())} />
              )}
              {yaImportados.length > 0 && <Chip size="small" color="success" icon={<CheckCircle sx={{ fontSize: "12px !important" }} />} label={`${yaImportados.length} ya importado${yaImportados.length !== 1 ? "s" : ""}`} />}
              {pendientesXml.length > 0 && <Chip size="small" color="warning" icon={<HourglassEmpty sx={{ fontSize: "12px !important" }} />} label={`${pendientesXml.length} XML pendiente${pendientesXml.length !== 1 ? "s" : ""}`} />}
            </Box>
            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
              {tipo === "COMPRAS" && (
                <Tooltip
                  title="Marca los comprobantes del período que la DNIT ya tiene, para que el Libro IVA Compras no los vuelva a declarar. No importa nada ni toca montos."
                  arrow
                  enterDelay={300}
                >
                  <span>
                    <Button
                      variant="outlined"
                      startIcon={<FactCheck />}
                      onClick={() => marcarElectronicos.mutate({ anho, mes })}
                      disabled={marcarElectronicos.isPending}
                      size="small"
                    >
                      {marcarElectronicos.isPending ? "Marcando…" : "Marcar electrónicos"}
                    </Button>
                  </span>
                </Tooltip>
              )}
              <Button
                variant="contained"
                color="secondary"
                startIcon={<Download />}
                onClick={handleImportar}
                disabled={isImporting || aImportar === 0}
                size="small"
              >
                {isImporting ? "Importando…" : labelImport}
              </Button>
            </Box>
          </Box>

          {esNCTab && (
            <Box sx={{ px: 2.5, pb: 1 }}>
              <Alert severity="info" sx={{ py: 0.5, fontSize: "0.75rem" }}>
                Importá primero las facturas. Las NC se vinculan a la factura asociada vía CDC; si la factura no está importada, la NC se omitirá.
              </Alert>
            </Box>
          )}

          {docsFiltrados.length === 0 ? (
            <Box sx={{ px: 2.5, pb: 2 }}>
              <Alert severity="info" sx={{ py: 0.5 }}>
                {esNCTab
                  ? "No hay notas de crédito en este período."
                  : "No se encontraron documentos para este período."}
              </Alert>
            </Box>
          ) : (
            <TableContainer sx={{ maxHeight: 360, borderTop: "1px solid", borderColor: "divider" }}>
              <Table size="small" stickyHeader>
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ width: 36, px: 0.5 }} padding="checkbox">
                      <Checkbox
                        size="small"
                        checked={allChecked}
                        indeterminate={someChecked}
                        disabled={cdcsNuevos.length === 0}
                        onChange={toggleAll}
                        inputProps={{ "aria-label": "Seleccionar todos los nuevos" }}
                      />
                    </TableCell>
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600, width: 28, px: 1 }} />
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>Número</TableCell>
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>Fecha</TableCell>
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>{tipo === "COMPRAS" ? "Proveedor" : "Cliente"}</TableCell>
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>RUC</TableCell>
                    {esNCTab ? (
                      <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>CDC factura asociada</TableCell>
                    ) : (
                      <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>Condición</TableCell>
                    )}
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }} align="right">Total</TableCell>
                    <TableCell sx={{ fontSize: "0.72rem", fontWeight: 600 }}>Estado SIFEN</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {docsFiltrados.map((doc, i) => {
                    const { ruc, nombre } = getDocContraparte(doc, tipo);
                    const condicion = getDocCondicion(doc);
                    const cancelado = isEventoCancelacion(doc);
                    const sifen = cancelado ? "Cancelado" : (doc.estadoSifen ?? doc.estado_sifen ?? "—");
                    const importado = !!doc.yaImportado && !isPendienteXml(doc);
                    const pendXml = isPendienteXml(doc);
                    const dimmed = importado || pendXml;
                    const seleccionable = !importado && !pendXml && !!doc.cdc;
                    const checked = seleccionable && seleccionados.has(doc.cdc);
                    return (
                      <TableRow
                        key={doc.cdc ?? i}
                        hover
                        sx={
                          pendXml
                            ? { opacity: 0.45 }
                            : importado
                              ? { opacity: 0.5 }
                              : cancelado
                                ? { borderLeft: "3px solid", borderColor: "error.main" }
                                : {}
                        }
                      >
                        <TableCell padding="checkbox" sx={{ px: 0.5 }}>
                          <Checkbox
                            size="small"
                            checked={checked}
                            disabled={!seleccionable}
                            onChange={() => seleccionable && toggleCdc(doc.cdc)}
                            inputProps={{ "aria-label": `Seleccionar ${getDocNumero(doc)}` }}
                          />
                        </TableCell>
                        <TableCell sx={{ px: 1, py: 0.5 }}>
                          {importado && <CheckCircle sx={{ fontSize: 16, color: "success.main", display: "block" }} />}
                          {pendXml && (
                            <HourglassEmpty
                              sx={{ fontSize: 16, color: "warning.main", display: "block" }}
                              titleAccess="XML aún no disponible — el bot no pudo recuperarlo todavía"
                            />
                          )}
                          {cancelado && !pendXml && (
                            <Block
                              sx={{ fontSize: 16, color: "error.main", display: "block" }}
                              titleAccess="Evento de cancelación aprobado en SIFEN — se importará como Anulado"
                            />
                          )}
                        </TableCell>
                        <TableCell sx={{ fontSize: "0.72rem", fontFamily: "monospace", color: dimmed ? "text.secondary" : "inherit" }}>
                          {getDocNumero(doc)}
                        </TableCell>
                        <TableCell sx={{ fontSize: "0.72rem", color: dimmed ? "text.secondary" : "inherit" }}>{fmtFecha(doc.fechaEmision)}</TableCell>
                        <TableCell sx={{ fontSize: "0.72rem", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: dimmed ? "text.secondary" : "inherit" }}>
                          {nombre}
                        </TableCell>
                        <TableCell sx={{ fontSize: "0.72rem", fontFamily: "monospace", color: dimmed ? "text.secondary" : "inherit" }}>{ruc}</TableCell>
                        {esNCTab ? (
                          <TableCell sx={{ fontSize: "0.68rem", fontFamily: "monospace", color: dimmed ? "text.secondary" : "inherit", maxWidth: 220, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                            {getCdcRefAsoc(doc) ?? <em style={{ color: "#c62828" }}>sin CDC asociado</em>}
                          </TableCell>
                        ) : (
                          <TableCell sx={{ fontSize: "0.72rem" }}>
                            <Chip
                              size="small"
                              label={condicion}
                              color={condicion === "crédito" ? "warning" : "default"}
                              sx={{ fontSize: "0.65rem", height: 18 }}
                            />
                          </TableCell>
                        )}
                        <TableCell sx={{ fontSize: "0.72rem", fontFamily: "monospace", color: dimmed ? "text.secondary" : "inherit" }} align="right">
                          {fmtMonto(getDocTotal(doc))}
                        </TableCell>
                        <TableCell sx={{ fontSize: "0.72rem" }}>
                          <Chip
                            size="small"
                            label={sifen}
                            color={SIFEN_COLOR[sifen] ?? "default"}
                            sx={{ fontSize: "0.65rem", height: 18 }}
                          />
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </>
        );
      })()}

      {/* Resultado de importación */}
      {importResult.isSuccess && importResult.data && (() => {
        const d = importResult.data;
        const esNC = tipo === "VENTAS" && ventasSubTab === "NC";
        if (esNC) {
          const importadas = d.importadas ?? 0;
          const omitidas = d.omitidas ?? 0;
          const omitidasDet = Array.isArray(d.omitidasDetalle) ? d.omitidasDetalle : [];
          const hasErrors = omitidas > 0;
          return (
            <Box sx={{ px: 2.5, pb: 1.5, pt: documentosPreview !== null ? 0 : undefined }}>
              <Alert severity={hasErrors ? "warning" : "success"} sx={{ py: 0.5 }}>
                NC importadas: <strong>{importadas}</strong> de <strong>{d.total}</strong>
                {(d.yaExistentes ?? 0) > 0 && <> · <strong>{d.yaExistentes}</strong> ya existía{d.yaExistentes !== 1 ? "n" : ""}</>}
                {(d.sinXml ?? 0) > 0 && <> · <strong>{d.sinXml}</strong> sin XML disponible</>}
                {hasErrors && <> · <strong>{omitidas}</strong> omitida{omitidas !== 1 ? "s" : ""}</>}
              </Alert>
              {omitidasDet.length > 0 && (
                <Box sx={{ mt: 1, p: 1, bgcolor: "warning.lighter", borderRadius: 1, maxHeight: 140, overflow: "auto" }}>
                  <Typography variant="caption" fontWeight={600} color="warning.dark">
                    Detalle de NC con observaciones:
                  </Typography>
                  {omitidasDet.map((o, i) => (
                    <Typography key={i} variant="caption" component="div" sx={{ fontFamily: "monospace", fontSize: "0.65rem" }}>
                      · {o.numero ?? o.cdc ?? "—"} — {o.motivo}
                    </Typography>
                  ))}
                </Box>
              )}
            </Box>
          );
        }
        const ent = tipo === "COMPRAS" ? "proveedoresCreados" : "clientesCreados";
        const entPlural = tipo === "COMPRAS" ? "proveedores" : "clientes";
        const hasErrors = (d.omitidos ?? 0) > 0;
        return (
          <Box sx={{ px: 2.5, pb: 1.5, pt: documentosPreview !== null ? 0 : undefined }}>
            <Alert severity={hasErrors ? "warning" : "success"} sx={{ py: 0.5 }}>
              Importados: <strong>{d.importados}</strong> de <strong>{d.total}</strong> documentos
              {(d.yaExistentes ?? 0) > 0 && <> · <strong>{d.yaExistentes}</strong> ya existía{d.yaExistentes !== 1 ? "n" : ""}</>}
              {(d.sinXml ?? 0) > 0 && <> · <strong>{d.sinXml}</strong> sin XML disponible</>}
              {hasErrors && <> · <strong>{d.omitidos}</strong> error{d.omitidos !== 1 ? "es" : ""} al procesar</>}
              {(d[ent] ?? 0) > 0 && (
                <> · <strong>{d[ent]}</strong> {entPlural} creado{d[ent] !== 1 ? "s" : ""} automáticamente</>
              )}
            </Alert>
          </Box>
        );
      })()}

      {/* Log de eventos */}
      {eventos.length > 0 && (
        <>
          <Divider />
          <Box sx={{ px: 2.5, py: 0.75, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Typography variant="caption" color="text.disabled" fontWeight={600} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
              Ejecución en tiempo real
            </Typography>
            <Typography variant="caption" color="text.disabled">
              {eventos.length} evento{eventos.length !== 1 ? "s" : ""}
            </Typography>
          </Box>
          <Box sx={{ maxHeight: 250, overflow: "auto", bgcolor: "background.default", borderTop: "1px solid", borderColor: "divider" }}>
            <List dense disablePadding>
              {eventos.map((ev, i) => (
                <ListItem key={i} disableGutters sx={{ px: 2, py: 0.3, borderBottom: "1px solid", borderColor: "divider" }}>
                  <Box sx={{ display: "flex", gap: 1.5, alignItems: "baseline", width: "100%" }}>
                    <Typography component="span" variant="caption" fontFamily="monospace" color="text.disabled" sx={{ flexShrink: 0 }}>
                      {ev.ts}
                    </Typography>
                    {ev.nivel && ev.nivel !== "INFO" && (
                      <Typography component="span" variant="caption" fontFamily="monospace" fontWeight={600} color={NIVEL_COLOR[ev.nivel] ?? "text.secondary"} sx={{ flexShrink: 0 }}>
                        {ev.nivel}
                      </Typography>
                    )}
                    <Typography component="span" variant="caption" fontFamily="monospace" color={NIVEL_COLOR[ev.nivel] ?? "text.primary"} sx={{ wordBreak: "break-word" }}>
                      {ev.mensaje}
                    </Typography>
                  </Box>
                </ListItem>
              ))}
            </List>
          </Box>
        </>
      )}
    </Paper>
  );
};