import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  IconButton,
  InputAdornment,
  LinearProgress,
  MenuItem,
  Pagination,
  Paper,
  Skeleton,
  Stack,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tabs,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import {
  descartarAgendaGestion,
  getMesaGestionResumen,
  getMesaGestionWorklist,
  getMesaGestionWorklistExport,
  getMiAgendaGestiones,
} from "../../api/cobranzas.service";
import * as XLSX from "xlsx";
import { AccesoRestringido } from "../../components/common/AccesoRestringido";
import { ScreenGuia } from "../../components/_standards";
import { fmtMoneda } from "../../components/_standards/enums/monedas";
import { fmtFechaCalendario, fmtFechaHora, hoyISO } from "../../utils/fecha";
import { useConfirmDialog } from "../../hooks/useConfirmDialog";
import { usePermission } from "../../hooks/usePermission";
import { RegistrarGestionModal } from "../../components/cobranzas/gestiones/RegistrarGestionModal";
import { ClienteHistorialDrawer } from "../../components/organismos/ClientesDesign/ClienteHistorialDrawer";
import PromesasListPage from "./PromesasListPage";
import { sanitizeRows } from "../../components/_standards";

const ORDENES = [
  { value: "prioridad", label: "Prioridad (recomendado)" },
  { value: "vencimiento", label: "Más vencidos" },
  { value: "saldo", label: "Mayor saldo" },
  { value: "sin_gestion", label: "Sin gestión hace más tiempo" },
];

const prioridadColor = (p) => {
  if (p >= 70) return "error";
  if (p >= 40) return "warning";
  return "info";
};

const moraColor = (dias) => {
  if (dias > 90) return "error";
  if (dias > 30) return "warning";
  return "default";
};

const sanitizePhone = (raw) => (raw || "").replace(/[^\d+]/g, "");

const buildWhatsAppLink = (telefono, mensaje) => {
  const num = sanitizePhone(telefono);
  if (!num) return null;
  const intl = num.startsWith("+") ? num.slice(1) : num.startsWith("595") ? num : `595${num.replace(/^0+/, "")}`;
  return `https://wa.me/${intl}?text=${encodeURIComponent(mensaje)}`;
};

export default function MesaGestionPage() {
  const navigate = useNavigate();
  const { can } = usePermission("COBRANZAS");
  const canRead = can("COB_MG_WORKLIST_VER");

  const [filtros, setFiltros] = useState({
    search: "",
    zona: "",
    min_dias_vencido: "",
    sin_gestion_dias: "",
    solo_promesas_vencidas: false,
    solo_mis_gestiones: false,
    solo_agenda_hoy: false,
    estado_gestion: "todos",
    orden: "prioridad",
  });
  const [filtrosDebounced, setFiltrosDebounced] = useState(filtros);
  const [page, setPage] = useState(1);
  const [limit] = useState(25);
  const [gestionTarget, setGestionTarget] = useState(null);
  const [historialCliente, setHistorialCliente] = useState(null);
  const [seccion, setSeccion] = useState("worklist");
  const [exportando, setExportando] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => {
      setFiltrosDebounced(filtros);
      setPage(1);
    }, 400);
    return () => clearTimeout(t);
  }, [filtros]);

  const params = useMemo(() => {
    const p = { page, limit, orden: filtrosDebounced.orden };
    if (filtrosDebounced.search.trim()) p.search = filtrosDebounced.search.trim();
    if (filtrosDebounced.zona.trim()) p.zona = filtrosDebounced.zona.trim();
    if (filtrosDebounced.min_dias_vencido) p.min_dias_vencido = Number(filtrosDebounced.min_dias_vencido);
    if (filtrosDebounced.sin_gestion_dias) p.sin_gestion_dias = Number(filtrosDebounced.sin_gestion_dias);
    if (filtrosDebounced.solo_promesas_vencidas) p.solo_promesas_vencidas = "true";
    if (filtrosDebounced.solo_mis_gestiones) p.solo_mis_gestiones = "true";
    if (filtrosDebounced.solo_agenda_hoy) p.solo_agenda_hoy = "true";
    if (filtrosDebounced.estado_gestion && filtrosDebounced.estado_gestion !== "todos") {
      p.estado_gestion = filtrosDebounced.estado_gestion;
    }
    return p;
  }, [filtrosDebounced, page, limit]);

  const worklistQ = useQuery({
    queryKey: ["mesa-gestion-worklist", params],
    queryFn: () => getMesaGestionWorklist(params),
    enabled: canRead,
    keepPreviousData: true,
  });

  const resumenQ = useQuery({
    queryKey: ["mesa-gestion-resumen"],
    queryFn: getMesaGestionResumen,
    enabled: canRead,
    staleTime: 60_000,
  });

  if (!canRead) return <AccesoRestringido modulo="COBRANZAS" />;

  const data = worklistQ.data?.data ?? [];
  const total = worklistQ.data?.total ?? 0;
  const totalPages = worklistQ.data?.totalPages ?? 1;
  const resumen = resumenQ.data;

  const aplicarFiltro = (campo, valor) => {
    setFiltros((f) => ({ ...f, [campo]: valor }));
  };

  const handleWhatsApp = (row) => {
    const telefono = row.celular || row.telefono;
    if (!telefono) {
      toast.warning("El cliente no tiene celular registrado");
      return;
    }
    const saldo = fmtMoneda(row.saldo_vencido, "PYG");
    const nombre = row.razon_social || row.nombre_fantasia || "estimado/a";
    const mensaje = `Hola ${nombre}, le contactamos por su saldo vencido de ${saldo}. ¿Cuándo podría regularizar?`;
    const url = buildWhatsAppLink(telefono, mensaje);
    if (url) window.open(url, "_blank", "noopener");
  };

  const exportarExcel = async () => {
    setExportando(true);
    try {
      const { search, orden, ...rest } = params;
      const data = await getMesaGestionWorklistExport({ ...rest, ...(search ? { search } : {}), orden });
      const rows = data?.data ?? [];
      const cuotas = data?.cuotas ?? [];
      if (!rows.length) {
        toast.warning("No hay filas para exportar con los filtros actuales");
        return;
      }

      const wb = XLSX.utils.book_new();
      const fmtISODate = (d) => (d ? new Date(d).toISOString().slice(0, 10) : "");
      const fmtISODateTime = (d) =>
        d ? new Date(d).toISOString().slice(0, 16).replace("T", " ") : "";

      // ── Hoja 1: Detalle por cuota (lo que el gestor necesita para cobrar) ──
      const detalleHeader = [
        "Cliente", "RUC/CI", "Cobrador", "Zona", "Teléfono", "Celular",
        "N° Factura", "Fecha emisión", "Moneda", "Total factura", "Items facturados",
        "N° Cuota", "Vencimiento", "Días vencidos", "Monto cuota", "Saldo pendiente",
      ];
      const detalleAoa = [detalleHeader];
      // Index por cliente para sumar contacto/zona desde rows
      const clienteIndex = new Map(rows.map((r) => [r.cliente_id, r]));
      for (const c of cuotas) {
        const r = clienteIndex.get(c.cliente_id) || {};
        detalleAoa.push([
          c.cliente || r.razon_social || r.nombre_fantasia || "",
          c.ruc || r.ruc || r.nro_documento || "",
          c.cobrador || "",
          r.zona || "",
          r.telefono || "",
          r.celular || "",
          c.factura || "",
          fmtISODate(c.fecha_emision),
          c.moneda || "PYG",
          Number(c.total_factura || 0),
          c.items || "",
          c.nro_cuota ?? "",
          fmtISODate(c.vencimiento),
          Number(c.dias_vencido || 0),
          Number(c.monto_cuota || 0),
          Number(c.saldo_pendiente || 0),
        ]);
      }
      const wsDetalle = XLSX.utils.aoa_to_sheet(sanitizeRows(detalleAoa));
      wsDetalle["!cols"] = [
        { wch: 32 }, { wch: 14 }, { wch: 22 }, { wch: 14 }, { wch: 14 }, { wch: 14 },
        { wch: 16 }, { wch: 12 }, { wch: 8 }, { wch: 14 }, { wch: 50 },
        { wch: 8 }, { wch: 12 }, { wch: 8 }, { wch: 14 }, { wch: 14 },
      ];
      wsDetalle["!autofilter"] = { ref: XLSX.utils.encode_range({ s: { r: 0, c: 0 }, e: { r: detalleAoa.length - 1, c: detalleHeader.length - 1 } }) };
      XLSX.utils.book_append_sheet(wb, wsDetalle, "Detalle por cuota");

      // ── Hoja 2: Resumen por cliente (lo que ve en la pantalla) ──
      const resumenHeader = [
        "Cliente", "RUC/CI", "Zona", "Teléfono", "Celular", "Email",
        "Saldo vencido", "Facturas vencidas", "Más antiguo (desde)", "Días vencidos",
        "Última gestión", "Días sin gestión", "Promesas vigentes", "Promesas incumplidas",
        "Prioridad", "Gestionado por mí",
      ];
      const resumenAoa = [resumenHeader];
      for (const r of rows) {
        resumenAoa.push([
          r.razon_social || r.nombre_fantasia || "",
          r.ruc || r.nro_documento || "",
          r.zona || "",
          r.telefono || "",
          r.celular || "",
          r.email || "",
          Number(r.saldo_vencido || 0),
          Number(r.facturas_vencidas || 0),
          fmtISODate(r.oldest_overdue),
          Number(r.dias_max_vencido || 0),
          r.ultima_gestion_at ? fmtISODateTime(r.ultima_gestion_at) : "Nunca",
          r.dias_sin_gestion ?? "",
          Number(r.promesas_vigentes || 0),
          Number(r.promesas_incumplidas || 0),
          Number(r.prioridad || 0),
          r.gestionado_por_mi ? "Sí" : "No",
        ]);
      }
      const wsResumen = XLSX.utils.aoa_to_sheet(sanitizeRows(resumenAoa));
      wsResumen["!cols"] = [
        { wch: 32 }, { wch: 14 }, { wch: 14 }, { wch: 14 }, { wch: 14 }, { wch: 22 },
        { wch: 14 }, { wch: 10 }, { wch: 12 }, { wch: 10 },
        { wch: 18 }, { wch: 10 }, { wch: 12 }, { wch: 12 },
        { wch: 10 }, { wch: 14 },
      ];
      wsResumen["!autofilter"] = { ref: XLSX.utils.encode_range({ s: { r: 0, c: 0 }, e: { r: resumenAoa.length - 1, c: resumenHeader.length - 1 } }) };
      XLSX.utils.book_append_sheet(wb, wsResumen, "Resumen por cliente");

      const fecha = hoyISO();
      XLSX.writeFile(wb, `mesa-gestion-${fecha}.xlsx`);
      toast.success(`Exportado: ${rows.length} clientes · ${cuotas.length} cuotas vencidas`);
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo exportar");
    } finally {
      setExportando(false);
    }
  };

  const handleLlamar = (row) => {
    const telefono = row.celular || row.telefono;
    if (!telefono) {
      toast.warning("Sin teléfono registrado");
      return;
    }
    window.location.href = `tel:${sanitizePhone(telefono)}`;
  };

  return (
    <Box sx={{ maxWidth: 1600, mx: "auto", p: { xs: 2, md: 3 } }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1, flexWrap: "wrap" }}>
        <Box>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <Icon icon="mdi:headset" width={24} />
            <Typography variant="h6" fontWeight={700}>
              Mesa de Gestión
            </Typography>
          </Box>
          <Typography variant="caption" color="text.secondary">
            Bandeja priorizada de clientes morosos para llamado/WhatsApp desde oficina
          </Typography>
        </Box>
        <Box sx={{ flex: 1 }} />
        <Button
          size="small"
          variant="outlined"
          startIcon={<Icon icon={exportando ? "lucide:loader-2" : "lucide:download"} width={16} className={exportando ? "spin" : undefined} />}
          onClick={exportarExcel}
          disabled={exportando || worklistQ.isLoading}
        >
          {exportando ? "Exportando…" : "Exportar Excel"}
        </Button>
        <Button
          size="small"
          variant="outlined"
          startIcon={<Icon icon="lucide:gavel" width={16} />}
          onClick={() => navigate("/cobranzas/gestion-mora")}
        >
          Mora avanzada
        </Button>
      </Box>

      <Tabs
        value={seccion}
        onChange={(_, v) => setSeccion(v)}
        sx={{ borderBottom: 1, borderColor: "divider", mb: 2, minHeight: 40, "& .MuiTab-root": { minHeight: 40, textTransform: "none", fontWeight: 600 } }}
      >
        <Tab value="worklist" icon={<Icon icon="mdi:headset" width={16} />} iconPosition="start" label="Bandeja de gestión" />
        <Tab
          value="agenda"
          icon={<Icon icon="lucide:calendar-clock" width={16} />}
          iconPosition="start"
          label={
            <Box sx={{ display: "inline-flex", alignItems: "center", gap: 0.75 }}>
              Mi agenda
              <AgendaBadge />
            </Box>
          }
        />
        <Tab value="promesas" icon={<Icon icon="lucide:handshake" width={16} />} iconPosition="start" label="Promesas de pago" />
      </Tabs>

      {seccion === "promesas" && <PromesasListPage />}
      {seccion === "agenda" && <MiAgendaTab />}

      {seccion === "worklist" && <>
      <ScreenGuia
        titulo="Cómo trabajar la mesa de gestión"
        moduloPadre="Cobranzas"
        intro="Bandeja priorizada para el gestor de oficina: contactar morosos, registrar la gestión y derivar a cobrador de ruta cuando corresponda."
        pasos={[
          { icon: "lucide:filter", color: "#60a5fa", titulo: "Filtrá por prioridad", desc: "Empezá por los de mayor score: combina mora, sin gestión reciente y promesas incumplidas." },
          { icon: "lucide:phone", color: "#22c55e", titulo: "Contactá", desc: "Botones rápidos de llamada y WhatsApp con mensaje precargado." },
          { icon: "mdi:clipboard-check-outline", color: "#a855f7", titulo: "Registrá la gestión", desc: "Tipo, resultado y si hay promesa de pago, fecha y monto comprometidos." },
          { icon: "lucide:gavel", color: "#f97316", titulo: "Derivá si es necesario", desc: "Mora severa pasa a Gestión de Mora; visitas físicas, al cobrador de ruta." },
        ]}
      />

      {/* KPIs */}
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "repeat(2, 1fr)", md: "repeat(6, 1fr)" },
          gap: 1.5,
          my: 2,
        }}
      >
        <KpiCard icon="lucide:users" label="Clientes morosos" value={resumen?.total_clientes} loading={resumenQ.isLoading} />
        <KpiCard
          icon="lucide:wallet"
          label="Saldo vencido"
          value={resumen ? fmtMoneda(resumen.saldo_total, "PYG") : null}
          loading={resumenQ.isLoading}
          color="error.main"
        />
        <KpiCard icon="lucide:user-x" label="Sin gestión" value={resumen?.sin_gestion} loading={resumenQ.isLoading} color="warning.main" />
        <KpiCard icon="lucide:clock-1" label="+30 días" value={resumen?.mas_30} loading={resumenQ.isLoading} />
        <KpiCard icon="lucide:clock-3" label="+60 días" value={resumen?.mas_60} loading={resumenQ.isLoading} color="warning.main" />
        <KpiCard icon="lucide:clock-9" label="+90 días" value={resumen?.mas_90} loading={resumenQ.isLoading} color="error.main" />
      </Box>

      {/* Filtros */}
      <Paper variant="outlined" sx={{ p: 2, mb: 2, borderRadius: 2 }}>
        <Stack direction={{ xs: "column", md: "row" }} spacing={1.5} flexWrap="wrap" useFlexGap>
          <TextField
            size="small"
            placeholder="Buscar por nombre, RUC o CI…"
            value={filtros.search}
            onChange={(e) => aplicarFiltro("search", e.target.value)}
            sx={{ minWidth: 280, flex: 1 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="lucide:search" width={16} />
                </InputAdornment>
              ),
            }}
          />
          <TextField
            size="small"
            label="Zona"
            value={filtros.zona}
            onChange={(e) => aplicarFiltro("zona", e.target.value)}
            sx={{ minWidth: 140 }}
          />
          <TextField
            size="small"
            type="number"
            label="Mora ≥ días"
            value={filtros.min_dias_vencido}
            onChange={(e) => aplicarFiltro("min_dias_vencido", e.target.value)}
            sx={{ minWidth: 120 }}
            inputProps={{ min: 0 }}
          />
          <TextField
            size="small"
            type="number"
            label="Sin gestión ≥ días"
            value={filtros.sin_gestion_dias}
            onChange={(e) => aplicarFiltro("sin_gestion_dias", e.target.value)}
            sx={{ minWidth: 140 }}
            inputProps={{ min: 0 }}
          />
          <TextField
            size="small"
            select
            label="Ordenar por"
            value={filtros.orden}
            onChange={(e) => aplicarFiltro("orden", e.target.value)}
            sx={{ minWidth: 220 }}
          >
            {ORDENES.map((o) => (
              <MenuItem key={o.value} value={o.value}>
                {o.label}
              </MenuItem>
            ))}
          </TextField>
          <Button
            size="small"
            variant={filtros.solo_promesas_vencidas ? "contained" : "outlined"}
            color="warning"
            startIcon={<Icon icon="lucide:handshake" width={16} />}
            onClick={() => aplicarFiltro("solo_promesas_vencidas", !filtros.solo_promesas_vencidas)}
          >
            Promesas incumplidas
          </Button>
          <Button
            size="small"
            variant={filtros.solo_mis_gestiones ? "contained" : "outlined"}
            color="primary"
            startIcon={<Icon icon="lucide:user-check" width={16} />}
            onClick={() => aplicarFiltro("solo_mis_gestiones", !filtros.solo_mis_gestiones)}
          >
            Mis gestiones
          </Button>
          <Button
            size="small"
            variant={filtros.solo_agenda_hoy ? "contained" : "outlined"}
            color="info"
            startIcon={<Icon icon="lucide:calendar-clock" width={16} />}
            onClick={() => aplicarFiltro("solo_agenda_hoy", !filtros.solo_agenda_hoy)}
          >
            Cobros de hoy
          </Button>
        </Stack>
      </Paper>

      <Tabs
        value={filtros.estado_gestion}
        onChange={(_, v) => aplicarFiltro("estado_gestion", v)}
        variant="scrollable"
        scrollButtons="auto"
        sx={{ mb: 1, minHeight: 36, "& .MuiTab-root": { minHeight: 36, py: 0.5, textTransform: "none" } }}
      >
        <Tab value="todos" icon={<Icon icon="lucide:list" width={14} />} iconPosition="start" label="Todos" />
        <Tab value="por_contactar" icon={<Icon icon="lucide:phone-outgoing" width={14} />} iconPosition="start" label="Por contactar" />
        <Tab value="en_gestion" icon={<Icon icon="mdi:clipboard-check" width={14} />} iconPosition="start" label="En gestión" />
        <Tab value="con_promesa_vigente" icon={<Icon icon="lucide:handshake" width={14} />} iconPosition="start" label="Con promesa vigente" />
      </Tabs>

      {worklistQ.isFetching && <LinearProgress sx={{ mb: 1, borderRadius: 1 }} />}

      <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <TableCell sx={{ fontWeight: 600 }}>Cliente</TableCell>
              <TableCell sx={{ fontWeight: 600 }}>Contacto</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="right">Saldo vencido</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="center">Mora</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="center">Última gestión</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="center">Promesas</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="center">Prioridad</TableCell>
              <TableCell sx={{ fontWeight: 600 }} align="center">Acciones</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {worklistQ.isLoading ? (
              [...Array(8)].map((_, i) => (
                <TableRow key={i}>
                  {[...Array(8)].map((__, j) => (
                    <TableCell key={j}><Skeleton variant="text" /></TableCell>
                  ))}
                </TableRow>
              ))
            ) : data.length === 0 ? (
              <TableRow>
                <TableCell colSpan={8} sx={{ p: 6, textAlign: "center" }}>
                  <Icon icon="lucide:inbox" width={48} style={{ opacity: 0.3 }} />
                  <Typography color="text.secondary" sx={{ mt: 1 }}>
                    Sin clientes morosos en este filtro
                  </Typography>
                </TableCell>
              </TableRow>
            ) : (
              data.map((row) => (
                <TableRow key={row.cliente_id} hover>
                  <TableCell>
                    <Typography variant="body2" fontWeight={600}>
                      {row.razon_social || row.nombre_fantasia || "— Sin nombre"}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      {row.ruc || row.nro_documento || ""}{row.zona ? ` · ${row.zona}` : ""}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <Stack spacing={0.25}>
                      {row.celular && (
                        <Typography variant="caption">
                          <Icon icon="lucide:phone" width={11} style={{ verticalAlign: "middle", marginRight: 4 }} />
                          {row.celular}
                        </Typography>
                      )}
                      {row.telefono && row.telefono !== row.celular && (
                        <Typography variant="caption" color="text.secondary">
                          {row.telefono}
                        </Typography>
                      )}
                      {!row.celular && !row.telefono && (
                        <Typography variant="caption" color="text.disabled">Sin teléfono</Typography>
                      )}
                    </Stack>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2" fontWeight={600} color="error.main">
                      {fmtMoneda(row.saldo_vencido, "PYG")}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      {row.facturas_vencidas} fact.
                    </Typography>
                  </TableCell>
                  <TableCell align="center">
                    <Chip
                      size="small"
                      label={`${row.dias_max_vencido} d`}
                      color={moraColor(row.dias_max_vencido)}
                      variant={row.dias_max_vencido > 30 ? "filled" : "outlined"}
                      sx={{ fontWeight: 600 }}
                    />
                    <Typography variant="caption" color="text.secondary" display="block">
                      desde {fmtFechaCalendario(row.oldest_overdue)}
                    </Typography>
                  </TableCell>
                  <TableCell align="center">
                    {row.ultima_gestion_at ? (
                      <>
                        <Typography variant="caption">{fmtFechaHora(row.ultima_gestion_at)}</Typography>
                        <Stack direction="row" spacing={0.5} justifyContent="center" alignItems="center">
                          <Typography variant="caption" color="text.secondary">
                            hace {row.dias_sin_gestion}d
                          </Typography>
                          {row.gestionado_por_mi && (
                            <Tooltip title="Gestionado por vos">
                              <Chip size="small" label="Yo" color="primary" sx={{ height: 16, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.6 } }} />
                            </Tooltip>
                          )}
                        </Stack>
                      </>
                    ) : (
                      <Chip size="small" label="Nunca" color="warning" variant="outlined" />
                    )}
                  </TableCell>
                  <TableCell align="center">
                    <Stack direction="row" spacing={0.5} justifyContent="center" alignItems="center">
                      {row.promesas_vigentes > 0 && (
                        <Tooltip title="Promesas vigentes">
                          <Chip
                            size="small"
                            icon={<Icon icon="lucide:handshake" width={12} />}
                            label={row.promesas_vigentes}
                            color="success"
                            variant="outlined"
                          />
                        </Tooltip>
                      )}
                      {row.promesas_incumplidas > 0 && (
                        <Tooltip title="Promesas incumplidas">
                          <Chip
                            size="small"
                            icon={<Icon icon="lucide:alert-triangle" width={12} />}
                            label={row.promesas_incumplidas}
                            color="warning"
                          />
                        </Tooltip>
                      )}
                      {row.promesas_vigentes === 0 && row.promesas_incumplidas === 0 && (
                        <Typography variant="caption" color="text.disabled">—</Typography>
                      )}
                    </Stack>
                  </TableCell>
                  <TableCell align="center">
                    <Chip
                      size="small"
                      label={row.prioridad}
                      color={prioridadColor(row.prioridad)}
                      sx={{ fontWeight: 700, minWidth: 44 }}
                    />
                  </TableCell>
                  <TableCell align="center">
                    <Stack direction="row" spacing={0.5} justifyContent="center">
                      <Tooltip title="Llamar">
                        <span>
                          <IconButton size="small" onClick={() => handleLlamar(row)} disabled={!row.celular && !row.telefono}>
                            <Icon icon="lucide:phone" width={16} />
                          </IconButton>
                        </span>
                      </Tooltip>
                      <Tooltip title="WhatsApp">
                        <span>
                          <IconButton size="small" onClick={() => handleWhatsApp(row)} disabled={!row.celular && !row.telefono} sx={{ color: "#25D366" }}>
                            <Icon icon="mdi:whatsapp" width={18} />
                          </IconButton>
                        </span>
                      </Tooltip>
                      <Tooltip title="Registrar gestión">
                        <IconButton
                          size="small"
                          color="primary"
                          onClick={() =>
                            setGestionTarget({
                              cliente: {
                                id: row.cliente_id,
                                razon_social: row.razon_social,
                                nombre_fantasia: row.nombre_fantasia,
                                ruc: row.ruc,
                                nro_documento: row.nro_documento,
                                saldo_vencido: row.saldo_vencido,
                              },
                              cobrador: row.cobrador_id ? { id: row.cobrador_id } : null,
                            })
                          }
                        >
                          <Icon icon="mdi:clipboard-check-outline" width={18} />
                        </IconButton>
                      </Tooltip>
                      <Tooltip title="Ver historial del cliente">
                        <IconButton
                          size="small"
                          onClick={() =>
                            setHistorialCliente({
                              id: row.cliente_id,
                              razon_social: row.razon_social,
                              nombre_fantasia: row.nombre_fantasia,
                              personas: {
                                razon_social: row.razon_social,
                                ruc: row.ruc,
                                nro_documento: row.nro_documento,
                                telefono: row.telefono,
                                celular: row.celular,
                                email: row.email,
                                direccion: row.direccion,
                              },
                            })
                          }
                        >
                          <Icon icon="lucide:eye" width={16} />
                        </IconButton>
                      </Tooltip>
                    </Stack>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </TableContainer>

      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", sm: "1fr auto 1fr" },
          alignItems: "center",
          mt: 2,
          gap: 1,
        }}
      >
        <Typography variant="caption" color="text.secondary" sx={{ justifySelf: { xs: "center", sm: "start" } }}>
          {total > 0 ? `Mostrando ${data.length} de ${total} clientes` : ""}
        </Typography>
        <Box sx={{ justifySelf: "center" }}>
          {totalPages > 1 && (
            <Pagination
              count={totalPages}
              page={page}
              onChange={(_, v) => setPage(v)}
              size="small"
              color="primary"
            />
          )}
        </Box>
        <Box />
      </Box>
      </>}

      <ClienteHistorialDrawer
        cliente={historialCliente}
        onClose={() => setHistorialCliente(null)}
      />

      {gestionTarget && (
        <RegistrarGestionModal
          open={!!gestionTarget}
          onClose={() => setGestionTarget(null)}
          cliente={gestionTarget.cliente}
          factura={null}
          cobrador={gestionTarget.cobrador}
          onSuccess={() => {
            setGestionTarget(null);
            worklistQ.refetch();
            resumenQ.refetch();
            toast.success("Gestión registrada");
          }}
        />
      )}
    </Box>
  );
}

function KpiCard({ icon, label, value, loading, color }) {
  return (
    <Card variant="outlined" sx={{ borderRadius: 2 }}>
      <CardContent sx={{ p: "12px !important", display: "flex", alignItems: "center", gap: 1.25 }}>
        <Icon icon={icon} width={20} style={{ opacity: 0.65 }} />
        <Box sx={{ minWidth: 0 }}>
          <Typography variant="caption" color="text.secondary" noWrap>
            {label}
          </Typography>
          {loading ? (
            <Skeleton variant="text" width={60} />
          ) : (
            <Typography variant="subtitle1" fontWeight={700} color={color || "text.primary"} noWrap>
              {value ?? "—"}
            </Typography>
          )}
        </Box>
      </CardContent>
    </Card>
  );
}

// ── Badge del tab "Mi agenda" — muestra cantidad de vencidas + hoy ──────────
function AgendaBadge() {
  const { data } = useQuery({
    queryKey: ["mi-agenda-resumen"],
    queryFn: () => getMiAgendaGestiones("mias"),
    staleTime: 60_000,
    refetchInterval: 120_000,
  });
  const n = data?.totales?.urgentes ?? 0;
  if (!n) return null;
  return (
    <Chip
      size="small"
      color="error"
      label={n}
      sx={{ height: 18, minWidth: 22, fontSize: "0.7rem", fontWeight: 700, "& .MuiChip-label": { px: 0.75 } }}
    />
  );
}

// ── Tab "Mi agenda": vencidas / hoy / próximos 7 días ───────────────────────
function MiAgendaTab() {
  const [scope, setScope] = useState("mias");
  const [registrarPara, setRegistrarPara] = useState(null);
  const [descartandoId, setDescartandoId] = useState(null);
  const { confirm, dialogs } = useConfirmDialog();
  const { data, isLoading, refetch } = useQuery({
    queryKey: ["mi-agenda", scope],
    queryFn: () => getMiAgendaGestiones(scope),
  });

  const handleDescartar = async (gestionId, clienteRazon) => {
    const ok = await confirm({
      title: `Descartar seguimiento de ${clienteRazon}`,
      message:
        "La gestión queda en el historial del cliente, sólo se le quita el agendamiento para que no aparezca más en tu agenda.",
      confirmText: "Descartar",
      confirmColor: "warning",
    });
    if (!ok) return;
    setDescartandoId(gestionId);
    try {
      await descartarAgendaGestion(gestionId);
      toast.success("Seguimiento descartado");
      refetch();
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo descartar");
    } finally {
      setDescartandoId(null);
    }
  };

  const seccion = (titulo, items, color, icon) => (
    <Paper variant="outlined" sx={{ p: 1.5, borderRadius: 2 }}>
      <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
        <Icon icon={icon} width={18} style={{ color }} />
        <Typography variant="subtitle2" fontWeight={700} sx={{ color }}>
          {titulo}
        </Typography>
        <Chip size="small" label={items?.length ?? 0} variant="outlined" sx={{ height: 20, fontSize: "0.7rem" }} />
      </Stack>
      {items?.length === 0 ? (
        <Typography variant="caption" color="text.secondary" sx={{ display: "block", py: 1, textAlign: "center" }}>
          Sin pendientes en este bloque.
        </Typography>
      ) : (
        <Stack spacing={0.75}>
          {items?.map((g) => (
            <Box
              key={g.id}
              sx={{
                display: "flex",
                alignItems: "flex-start",
                gap: 1,
                p: 1,
                bgcolor: "background.default",
                borderRadius: 1,
                border: "1px solid",
                borderColor: "divider",
              }}
            >
              <Box sx={{ flex: 1, minWidth: 0 }}>
                <Typography variant="body2" fontWeight={600} noWrap>
                  {g.cliente_razon_social}
                </Typography>
                <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
                  {g.proxima_accion || "(sin descripción)"} · {new Date(g.proxima_fecha).toLocaleDateString("es-PY")}
                  {g.factura ? ` · Factura ${g.factura}` : ""}
                </Typography>
                {g.observacion && (
                  <Typography variant="caption" sx={{ display: "block", fontStyle: "italic", color: "text.secondary", mt: 0.25 }}>
                    "{g.observacion}"
                  </Typography>
                )}
                {scope === "oficina" && g.usuario_nombre && (
                  <Typography variant="caption" sx={{ display: "block", color: "primary.main", mt: 0.25 }}>
                    Asignada por {g.usuario_nombre}
                  </Typography>
                )}
              </Box>
              <Stack spacing={0.5} alignItems="flex-end">
                <Button
                  size="small"
                  variant="outlined"
                  startIcon={<Icon icon="mdi:clipboard-check" width={14} />}
                  onClick={() =>
                    setRegistrarPara({
                      id: g.cliente_id,
                      razon_social: g.cliente_razon_social,
                      ruc: g.cliente_ruc,
                    })
                  }
                  sx={{ textTransform: "none", fontSize: "0.72rem" }}
                >
                  Registrar
                </Button>
                <Button
                  size="small"
                  variant="text"
                  color="inherit"
                  disabled={descartandoId === g.id}
                  startIcon={<Icon icon="mdi:archive-outline" width={14} />}
                  onClick={() => handleDescartar(g.id, g.cliente_razon_social)}
                  sx={{
                    textTransform: "none",
                    fontSize: "0.68rem",
                    color: "text.secondary",
                    py: 0.25,
                  }}
                >
                  Descartar
                </Button>
              </Stack>
            </Box>
          ))}
        </Stack>
      )}
    </Paper>
  );

  return (
    <Box>
      <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 2 }}>
        <Typography variant="body2" color="text.secondary" sx={{ flex: 1 }}>
          Seguimientos con próxima acción agendada. Las gestiones cuyo cliente ya tuvo una gestión posterior no aparecen.
        </Typography>
        <Tabs
          value={scope}
          onChange={(_, v) => setScope(v)}
          sx={{ minHeight: 32, "& .MuiTab-root": { minHeight: 32, py: 0, textTransform: "none", fontSize: "0.78rem" } }}
        >
          <Tab value="mias" label="Mías" />
          <Tab value="oficina" label="Toda la oficina" />
        </Tabs>
      </Stack>

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
          <Icon icon="lucide:loader-2" width={28} className="spin" />
        </Box>
      ) : (
        <Stack spacing={1.5}>
          {seccion(`Vencidas (${data?.totales?.vencidas ?? 0})`, data?.vencidas, "#dc2626", "lucide:alert-triangle")}
          {seccion(`Hoy (${data?.totales?.hoy ?? 0})`, data?.hoy, "#d97706", "lucide:calendar")}
          {seccion(`Próximos 7 días (${data?.totales?.proximas ?? 0})`, data?.proximas, "#2563eb", "lucide:calendar-days")}
        </Stack>
      )}

      <RegistrarGestionModal
        open={!!registrarPara}
        cliente={registrarPara}
        onClose={() => setRegistrarPara(null)}
        onSuccess={() => {
          setRegistrarPara(null);
          refetch();
        }}
      />

      {dialogs}
    </Box>
  );
}