import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Skeleton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useEffect, useState } from "react";
import styled from "styled-components";
import * as XLSX from "xlsx";
import { getClientesExport } from "../../../api/clientes.service";
import { usePermission } from "../../../hooks/usePermission";
import { useAuthStore } from "../../../store/AuthStore";
import {
  useClientesQuery,
  useDeleteClienteMutation,
  useToggleClienteMutation,
} from "../../../tanstack/ClientesStack";
import { TourTrigger } from "../../../tours/components/TourTrigger";
import { clientesListSteps } from "../../../tours/definitions/clientesTour";
import { EmptyState, EntityNameButton, ScreenGuia } from "../../_standards";
import { AccesoRestringido } from "../../common/AccesoRestringido";
import { ClienteDireccionesModal } from "./ClienteDireccionesModal";
import { ClienteFormDialog } from "./ClienteFormDialog";
import { ClienteHistorialDrawer } from "./ClienteHistorialDrawer";
import { sanitizeRecords } from "../../_standards";

const PAGE_SIZE = 20;

const GUIA_PASOS = [
  {
    icon: "lucide:user-plus",
    color: "#3b82f6",
    titulo: "1. Registrá tus clientes",
    desc: "Datos fiscales SIFEN (RUC/cédula), contacto y dirección. La razón social es obligatoria.",
  },
  {
    icon: "lucide:list-checks",
    color: "#f59e0b",
    titulo: "2. Asigná lista de precios",
    desc: "Definí tipo (minorista/mayorista/distribuidor) y lista de precios para automatizar la facturación.",
  },
  {
    icon: "lucide:map-pin",
    color: "#22c55e",
    titulo: "3. Sumá direcciones",
    desc: "Cargá direcciones de envío adicionales para entregas. Usalas en notas de remisión y facturas.",
  },
];

const GUIA_HISTORIAL_PASOS = [
  {
    icon: "lucide:gauge",
    color: "#22c55e",
    titulo: "Score y semáforo (0-100)",
    desc: "Es la nota crediticia ponderada del cliente. VERDE (≥75) = bajo riesgo, apto para ampliar línea. AMARILLO (50-74) = mantener línea y monitorear. ROJO (<50) = no recomendado sin garantías. Combina puntualidad (40%), atraso máximo (20%), uso de línea (20%), cheques rechazados (10%) y antigüedad (10%).",
  },
  {
    icon: "lucide:wallet",
    color: "#3b82f6",
    titulo: "Facturación histórica",
    desc: "Total facturado vs. cobrado de toda la relación. Cuentas canceladas = facturas con saldo cero (cumplió). Una brecha grande entre facturado y cobrado con pocas cuentas canceladas es señal de riesgo.",
  },
  {
    icon: "lucide:clock",
    color: "#f59e0b",
    titulo: "Comportamiento de pago",
    desc: "% Puntualidad = cuotas pagadas en o antes del vencimiento sobre el total pagadas. Atraso promedio y máximo en días. Un cliente con 90%+ de puntualidad y atraso máx ≤ 7 días es excelente; >30 días de atraso máximo enciende alertas.",
  },
  {
    icon: "lucide:layers",
    color: "#ea580c",
    titulo: "Aging de saldos pendientes",
    desc: "Distribución de la deuda actual por antigüedad: Vigente (no vencido), 1-30, 31-60, 61-90 y >90 días vencidos. Cuanto más a la derecha pese el saldo, mayor la mora. Mora > 90 días suele requerir gestión judicial o castigo contable.",
  },
  {
    icon: "lucide:credit-card",
    color: "#7c3aed",
    titulo: "Línea de crédito",
    desc: "Límite asignado vs. saldo pendiente y disponible. % Utilización por encima de 80% sugiere agotamiento y obliga a revisar antes de aprobar nuevas ventas a crédito. Si dice 'sin línea configurada', el cliente opera al contado o no tiene tope definido.",
  },
  {
    icon: "lucide:alert-triangle",
    color: "#dc2626",
    titulo: "Cheques rechazados",
    desc: "Cantidad y monto de cheques del cliente devueltos/rechazados en tesorería. Cualquier cantidad >0 es una señal fuerte; combinada con score AMARILLO o ROJO, evitar nuevas ventas a crédito.",
  },
  {
    icon: "lucide:list",
    color: "#0ea5e9",
    titulo: "Detalle de facturas a crédito",
    desc: "Listado de las últimas 40 facturas a crédito con su estado (CANCELADA/VIGENTE/VENCIDA), cuotas pagadas vs totales, días de mora máxima y saldo. Permite validar el caso por caso detrás de los promedios. Una sola factura VENCIDA con mora alta puede pesar más que un buen promedio.",
  },
];

const GUIA_HISTORIAL_NOTAS = [
  {
    icon: "mdi:information-outline",
    text: "Generá este reporte desde la ficha del cliente → botón 'Estado de cuenta' → opción 'Historial'. Es una evaluación interna, no constituye un reporte de buró ni informe legal.",
  },
  {
    icon: "mdi:lightbulb-on-outline",
    text: "Regla de oro: si Score ≥75 y mora >90 = 0 y sin cheques rechazados → aprobar ampliación. Si Score <50 o mora >90 > 0 o cheques rechazados > 0 → no ampliar línea sin garantías adicionales.",
  },
];

// ── Styled ────────────────────────────────────────────────────────
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 1400px;
  margin: 0 auto;
`;
const HeaderBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;

  .title-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    .title { font-size: 1.05rem; font-weight: 700; color: ${(p) => p.theme.text}; line-height: 1.2; }
    .subtitle { font-size: 0.78rem; color: ${(p) => p.theme.textSecondary}; }
  }
`;
const PrimaryBtn = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  white-space: nowrap;
  &:hover { opacity: 0.88; }
`;
const ExportBtn = styled(PrimaryBtn)`
  background: #16a34a;
  &:disabled { opacity: 0.5; cursor: not-allowed; }
`;
const Toolbar = styled.div`
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
`;
const SearchWrap = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
  svg { position: absolute; left: 0.55rem; opacity: 0.5; pointer-events: none; }
  input {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    color: ${(p) => p.theme.text};
    font-size: 0.85rem;
    outline: none;
    width: 100%;
    font-family: inherit;
    &:focus { border-color: ${(p) => p.theme.primary}; }
  }
`;
const ListBox = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  background: ${(p) => p.theme.bg};
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
`;
const Row = styled.div`
  display: grid;
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid ${(p) => p.theme.borderColor};
  background: ${(p) => p.theme.inputBg};
  transition: background 0.12s, border-color 0.12s;
  opacity: ${(p) => (p.$inactive ? 0.55 : 1)};
  &:hover { border-color: ${(p) => p.theme.primary}55; }

  @media (max-width: 900px) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar info badge"
      "meta meta meta"
      "actions actions actions";
    .info { grid-area: info; }
    .meta { grid-area: meta; }
    .badge-col { grid-area: badge; }
    .actions { grid-area: actions; justify-content: flex-end; }
  }
`;
const Avatar = styled.div`
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: ${(p) => p.theme.primary}18;
  color: ${(p) => p.theme.primary};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.85rem;
`;
const Info = styled.div`
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  .name { font-size: 0.92rem; font-weight: 600; color: ${(p) => p.theme.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sub { font-size: 0.72rem; color: ${(p) => p.theme.textSecondary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
`;
const Meta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.74rem;
  color: ${(p) => p.theme.textSecondary};
  .line { display: inline-flex; align-items: center; gap: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
`;
const Tags = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
`;
const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 600;
  color: ${(p) => p.$color};
  background: ${(p) => p.$color}14;
  border: 1px solid ${(p) => p.$color}30;
  white-space: nowrap;
`;
const Actions = styled.div`
  display: flex;
  gap: 0.15rem;
`;
const ActionBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: ${(p) => p.$color || p.theme.textSecondary};
  font-size: 1.05rem;
  &:hover { background: ${(p) => p.theme.bgAlpha}; }
  &:disabled { opacity: 0.35; cursor: not-allowed; }
`;
const Pagination = styled.div`
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0;
  font-size: 0.78rem;
  color: ${(p) => p.theme.textSecondary};

  > span:first-child { justify-self: start; }
  .nav { display: flex; gap: 0.4rem; align-items: center; justify-self: center; }

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    > span:first-child { justify-self: center; }
  }
`;

const initials = (s) => {
  const t = (s || "").trim();
  if (!t) return "?";
  const parts = t.split(/\s+/);
  return ((parts[0]?.[0] || "") + (parts[1]?.[0] || "")).toUpperCase() || t[0].toUpperCase();
};

const tipoClienteColor = (tipo) => {
  switch ((tipo || "").toLowerCase()) {
    case "mayorista":     return "#8b5cf6";
    case "distribuidor":  return "#0ea5e9";
    case "minorista":     return "#22c55e";
    default:              return "#94a3b8";
  }
};

const formatRucDoc = (persona) => {
  if (persona?.ruc) return `${persona.ruc}-${persona.dv || 0}`;
  return persona?.nro_documento || "—";
};

export const ClientesListConfig = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const toggleMutation = useToggleClienteMutation();
  const deleteMutation = useDeleteClienteMutation();
  const hasModule = useAuthStore((s) => s.hasModule);
  const hasEcommerce = hasModule("ECOMMERCE");
  const ventasPerm = usePermission("VENTAS");
  const canRead = ventasPerm.can("VEN_CLI_CLIENTE_VER") || hasEcommerce;
  const canCreate = ventasPerm.can("VEN_CLI_CLIENTE_CREAR") || hasEcommerce;
  const canEdit = ventasPerm.can("VEN_CLI_CLIENTE_EDITAR") || hasEcommerce;
  const canDelete = ventasPerm.can("VEN_CLI_CLIENTE_ELIMINAR");
  const canReadLP = usePermission("INVENTARIO").can("INV_LP_LISTA_VER") || hasEcommerce;

  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedCliente, setSelectedCliente] = useState(null);
  const [searchInput, setSearchInput] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [page, setPage] = useState(1);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const [clienteDirModal, setClienteDirModal] = useState(null);
  const [historialCliente, setHistorialCliente] = useState(null);
  const [isExporting, setIsExporting] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearch(searchInput);
      setPage(1);
    }, 400);
    return () => clearTimeout(timer);
  }, [searchInput]);

  const { data, isLoading, isFetching } = useClientesQuery(page, PAGE_SIZE, debouncedSearch, "");
  const clientes = data?.data || [];
  const total = data?.total || 0;
  const lastPage = data?.lastPage || 1;

  const handleOpenCreate = () => {
    setSelectedCliente(null);
    setDialogOpen(true);
  };

  const handleOpenEdit = (cliente) => {
    setSelectedCliente(cliente);
    setDialogOpen(true);
  };

  const handleCloseDialog = () => {
    setDialogOpen(false);
    setSelectedCliente(null);
  };

  const handleExportExcel = async () => {
    setIsExporting(true);
    try {
      const items = await getClientesExport(debouncedSearch);
      const rows = items.map((c) => {
        const p = c.personas || {};
        const dir = c.cliente_direcciones?.[0] || null;
        const fullName = (person) => person ? `${person.nombre || ""} ${person.apellido || ""}`.trim() : "";
        return {
          "Razón Social":      p.razon_social || "",
          "Nombre Fantasía":   c.nombre_fantasia || "",
          "Cód. Cliente":      c.cod_cliente || "",
          "RUC / Documento":   p.ruc ? `${p.ruc}-${p.dv ?? 0}` : (p.nro_documento || ""),
          "Tipo":              p.naturaleza_receptor?.descripcion || "",
          "Tipo Operación":    c.tipo_operacion?.descripcion || "",
          "Tipo Cliente":      c.tipo_cliente ? c.tipo_cliente.charAt(0).toUpperCase() + c.tipo_cliente.slice(1) : "",
          "Lista de Precios":  c.lista_precios?.nombre || "",
          "Email":             p.email || "",
          "Teléfono":          p.telefono || "",
          "Celular":           p.celular || "",
          "Zona":              c.zona || "",
          "Agente Retención":  c.es_agente_retencion ? "Sí" : "No",
          "Dir. Identificador": dir?.label || "",
          "Dirección":         dir ? `${dir.direccion || ""}${dir.nro ? `, ${dir.nro}` : ""}` : "",
          "Referencia":        dir?.referencia || "",
          "Departamento":      dir?.departamentos?.descripcion || "",
          "Distrito":          dir?.distritos?.descripcion || "",
          "Ciudad":            dir?.ciudades?.descripcion || "",
          "Vendedor":          fullName(dir?.vendedor),
          "Supervisor":        fullName(dir?.supervisor),
          "Estado":            c.active ? "Activo" : "Inactivo",
        };
      });
      const ws = XLSX.utils.json_to_sheet(sanitizeRecords(rows));
      ws["!cols"] = [32,22,12,16,20,14,14,20,28,14,14,14,10,18,28,20,18,18,18,20,20,10].map((w) => ({ wch: w }));
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Clientes");
      XLSX.writeFile(wb, `clientes${debouncedSearch ? `_${debouncedSearch}` : ""}.xlsx`);
    } catch (_) {
    } finally {
      setIsExporting(false);
    }
  };

  if (!canRead) {
    return <AccesoRestringido mensaje="No tienes permisos para ver la lista de clientes." />;
  }

  return (
    <Wrapper>
      <ScreenGuia
        titulo="¿Cómo trabajar con Clientes y leer su Historial Crediticio?"
        intro="Gestioná datos fiscales, listas de precios y direcciones para acelerar la facturación. El Historial Crediticio (PDF descargable desde la ficha) resume el comportamiento de pago del cliente para decidir aprobaciones, ampliaciones o restricciones de crédito."
        pasos={[...GUIA_PASOS, ...GUIA_HISTORIAL_PASOS]}
        notas={GUIA_HISTORIAL_NOTAS}
      />

      <HeaderBar id="clientes-header">
        <div className="title-block">
          <Icon icon="lucide:user" width={22} />
          <div>
            <div className="title">Gestión de Clientes</div>
            <div className="subtitle">
              {debouncedSearch
                ? `${total} resultado${total === 1 ? "" : "s"} para "${debouncedSearch}"`
                : `${total} cliente${total === 1 ? "" : "s"} registrado${total === 1 ? "" : "s"}`}
              {isFetching && !isLoading ? " — cargando..." : ""}
            </div>
          </div>
          <TourTrigger steps={clientesListSteps} tourKey="clientes-lista" autoStart={true} />
        </div>
        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
          <ExportBtn onClick={handleExportExcel} disabled={isExporting}>
            {isExporting
              ? <><CircularProgress size={13} color="inherit" /> Exportando...</>
              : <><Icon icon="mdi:microsoft-excel" /> Exportar Excel</>
            }
          </ExportBtn>
          {canCreate && (
            <PrimaryBtn id="clientes-nuevo-btn" onClick={handleOpenCreate}>
              <Icon icon="lucide:plus" /> Nuevo Cliente
            </PrimaryBtn>
          )}
        </div>
      </HeaderBar>

      <Toolbar id="clientes-busqueda">
        <SearchWrap>
          <Icon icon="lucide:search" width={16} />
          <input
            placeholder="Buscar por nombre, RUC o documento..."
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
          />
        </SearchWrap>
      </Toolbar>

      {isLoading ? (
        <ListBox>
          {[...Array(6)].map((_, i) => (
            <Skeleton key={i} variant="rectangular" height={64} sx={{ borderRadius: 1.5 }} />
          ))}
        </ListBox>
      ) : clientes.length === 0 ? (
        debouncedSearch ? (
          <EmptyState
            icon="lucide:search-x"
            title="Sin coincidencias"
            description={`Ningún cliente coincide con "${debouncedSearch}". Probá con otro criterio.`}
          />
        ) : (
          <EmptyState
            icon="lucide:users"
            title="Aún no hay clientes"
            description="Empezá registrando tu primer cliente para facturar y gestionar cuentas."
            ctaLabel={canCreate ? "Nuevo Cliente" : undefined}
            ctaIcon="lucide:plus"
            onCta={canCreate ? handleOpenCreate : undefined}
          />
        )
      ) : (
        <ListBox id="clientes-tabla">
          {clientes.map((cliente) => {
            const persona = cliente.personas || {};
            const tipoColor = tipoClienteColor(cliente.tipo_cliente);
            return (
              <Row key={cliente.id} $inactive={!cliente.active}>
                <Avatar>{initials(persona.razon_social)}</Avatar>

                <Info className="info">
                  <EntityNameButton
                    className="name"
                    onClick={canEdit ? () => handleOpenEdit(cliente) : undefined}
                  >
                    {persona.razon_social || "Sin nombre"}
                  </EntityNameButton>
                  <span className="sub">
                    {cliente.nombre_fantasia || persona.naturaleza_receptor?.descripcion || "—"}
                  </span>
                </Info>

                <Meta className="meta">
                  <span className="line">
                    <Icon icon="lucide:hash" width={12} />
                    {formatRucDoc(persona)}
                  </span>
                  <span className="line">
                    <Icon icon={persona.email ? "lucide:mail" : "lucide:phone"} width={12} />
                    {persona.email || persona.telefono || persona.celular || "—"}
                  </span>
                </Meta>

                <Tags>
                  {cliente.tipo_cliente && (
                    <Badge $color={tipoColor}>
                      <Icon icon="lucide:user-cog" style={{ fontSize: "0.7rem" }} />
                      {cliente.tipo_cliente.charAt(0).toUpperCase() + cliente.tipo_cliente.slice(1)}
                    </Badge>
                  )}
                  {canReadLP && cliente.lista_precios && (
                    <Badge $color="#8b5cf6">
                      <Icon icon="lucide:list" style={{ fontSize: "0.7rem" }} />
                      {cliente.lista_precios.nombre}
                    </Badge>
                  )}
                  {cliente.zona && (
                    <Badge $color="#6b7280">
                      <Icon icon="lucide:map" style={{ fontSize: "0.7rem" }} />
                      {cliente.zona}
                    </Badge>
                  )}
                  {cliente.mora_estado_activo && (
                    <Badge $color={
                      ["DEMANDA","INCOBRABLE"].includes(cliente.mora_estado_activo) ? "#dc2626"
                        : cliente.mora_estado_activo === "INFORMCONF" ? "#0ea5e9"
                        : ["GESTION_INTERNA","REFINANCIADA"].includes(cliente.mora_estado_activo) ? "#f59e0b"
                        : ["RECUPERADA","AL_DIA"].includes(cliente.mora_estado_activo) ? "#22c55e"
                        : "#94a3b8"
                    }>
                      <Icon icon="mdi:gavel" style={{ fontSize: "0.7rem" }} />
                      {cliente.mora_estado_activo}
                    </Badge>
                  )}
                </Tags>

                <div className="badge-col">
                  <Badge $color={cliente.active ? "#22c55e" : "#94a3b8"}>
                    <Icon icon={cliente.active ? "lucide:check-circle" : "lucide:circle-off"} style={{ fontSize: "0.7rem" }} />
                    {cliente.active ? "Activo" : "Inactivo"}
                  </Badge>
                </div>

                <Actions className="actions">
                  <ActionBtn $color={theme.palette.primary.main} title="Ver historial / cuentas" onClick={() => setHistorialCliente(cliente)}>
                    <Icon icon="lucide:eye" />
                  </ActionBtn>
                  {canEdit && (
                    <ActionBtn $color="#f59e0b" title="Editar" onClick={() => handleOpenEdit(cliente)}>
                      <Icon icon="lucide:edit-3" />
                    </ActionBtn>
                  )}
                  {canEdit && (
                    <ActionBtn $color="#0ea5e9" title="Direcciones" onClick={() => setClienteDirModal(cliente)}>
                      <Icon icon="lucide:map-pin" />
                    </ActionBtn>
                  )}
                  {canDelete && (
                    <ActionBtn
                      $color={cliente.active ? "#94a3b8" : "#22c55e"}
                      title={cliente.active ? "Desactivar" : "Activar"}
                      onClick={() => toggleMutation.mutate(cliente.id)}
                      disabled={toggleMutation.isPending}
                    >
                      <Icon icon="lucide:power" />
                    </ActionBtn>
                  )}
                  {canDelete && (
                    <ActionBtn $color="#ef4444" title="Eliminar" onClick={() => setDeleteConfirm(cliente)} disabled={deleteMutation.isPending}>
                      <Icon icon="lucide:trash-2" />
                    </ActionBtn>
                  )}
                </Actions>
              </Row>
            );
          })}
        </ListBox>
      )}

      {lastPage > 1 && (
        <Pagination id="clientes-paginacion">
          <span>
            {total} cliente{total === 1 ? "" : "s"} encontrado{total === 1 ? "" : "s"}
          </span>
          <div className="nav">
            <Button
              size="small"
              variant="outlined"
              disabled={page <= 1}
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              startIcon={<Icon icon="lucide:chevron-left" width={14} />}
            >
              Anterior
            </Button>
            <span>Pág. {page} de {lastPage}</span>
            <Button
              size="small"
              variant="outlined"
              disabled={page >= lastPage}
              onClick={() => setPage((p) => p + 1)}
              endIcon={<Icon icon="lucide:chevron-right" width={14} />}
            >
              Siguiente
            </Button>
          </div>
        </Pagination>
      )}

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

      <ClienteFormDialog open={dialogOpen} onClose={handleCloseDialog} cliente={selectedCliente} />

      <ClienteDireccionesModal open={!!clienteDirModal} onClose={() => setClienteDirModal(null)} cliente={clienteDirModal} />

      {/* Confirmación eliminar */}
      <Dialog
        open={!!deleteConfirm}
        onClose={() => setDeleteConfirm(null)}
        maxWidth="xs"
        fullWidth
        PaperProps={{ sx: { borderRadius: 2 } }}
      >
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
          <Box
            sx={{
              width: "2.2rem", height: "2.2rem", borderRadius: "10px",
              bgcolor: "error.lighter", display: "flex", alignItems: "center", justifyContent: "center",
              color: "error.main", flexShrink: 0,
            }}
          >
            <Icon icon="lucide:trash-2" width={20} />
          </Box>
          <Typography variant="subtitle1" fontWeight={700}>Eliminar cliente</Typography>
          <IconButton onClick={() => setDeleteConfirm(null)} size="small" sx={{ ml: "auto" }}>
            <Icon icon="lucide:x" width={18} />
          </IconButton>
        </DialogTitle>
        <DialogContent dividers>
          <Typography>
            ¿Estás seguro de eliminar al cliente{" "}
            <strong>&quot;{deleteConfirm?.personas?.razon_social}&quot;</strong>?
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
            RUC/Doc: {formatRucDoc(deleteConfirm?.personas)} · Esta acción no se puede deshacer.
          </Typography>
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button onClick={() => setDeleteConfirm(null)} startIcon={<Icon icon="lucide:x" width={16} />}>
            Cancelar
          </Button>
          <Button
            variant="contained"
            color="error"
            onClick={() => {
              deleteMutation.mutate(deleteConfirm.id);
              setDeleteConfirm(null);
            }}
            disabled={deleteMutation.isPending}
            startIcon={deleteMutation.isPending ? <CircularProgress size={14} /> : <Icon icon="lucide:trash-2" width={16} />}
          >
            {deleteMutation.isPending ? "Eliminando..." : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* FAB en mobile */}
      {isMobile && canCreate && (
        <IconButton
          onClick={handleOpenCreate}
          sx={{
            position: "fixed", bottom: 24, right: 24, zIndex: 10,
            width: 56, height: 56, borderRadius: "50%",
            bgcolor: "primary.main", color: "#fff",
            boxShadow: 4,
            "&:hover": { bgcolor: "primary.dark" },
          }}
        >
          <Icon icon="lucide:plus" width={24} />
        </IconButton>
      )}
    </Wrapper>
  );
};