import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Collapse,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  Grid,
  IconButton,
  InputAdornment,
  InputLabel,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  Pagination,
  Paper,
  Select,
  Skeleton,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { useEffect, useMemo, useState } from "react";
import { cancelarSolicitud, generarPDFSolicitud, getSolicitudesCredito } from "../../api/solicitud-credito.service";
import { toast } from "sonner";
import { usePermission } from "../../hooks/usePermission";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { formatMoney } from "../../utils/formatMoney";
import { SolicitudCreditoDetalleDialog } from "./SolicitudCreditoDetalleDialog";
import { EmptyState } from "../_standards/EmptyState";
import { fmtFechaHora, fmtFechaHoraSoloFecha } from "../../utils/fecha";
import { useNavigate } from "react-router-dom";

dayjs.locale("es");

const ESTADOS = [
  { value: "", label: "Todos los estados" },
  { value: "borrador", label: "Borrador", color: "default" },
  { value: "pendiente_aprobacion", label: "Pendiente Aprobación", color: "warning" },
  { value: "aprobada", label: "Aprobada", color: "success" },
  { value: "rechazada", label: "Rechazada", color: "error" },
  { value: "facturada", label: "Facturada", color: "info" },
  { value: "cancelada", label: "Cancelada", color: "error" },
];

const FILTROS_RAPIDOS = [
  { label: "Hoy", value: "hoy" },
  { label: "Ayer", value: "ayer" },
  { label: "Esta semana", value: "semana" },
  { label: "Este mes", value: "mes" },
  { label: "Mes anterior", value: "mes_anterior" },
];

const COLUMNAS_DISPONIBLES = [
  { id: "numero", label: "Nro. Solicitud", default: true },
  { id: "fecha", label: "Fecha", default: true },
  { id: "cliente", label: "Cliente", default: true },
  { id: "vendedor", label: "Vendedor", default: false },
  { id: "items", label: "Items", default: true },
  { id: "cuotas", label: "Cuotas", default: true },
  { id: "total", label: "Total", default: true },
  { id: "estado", label: "Estado", default: true },
  { id: "creador", label: "Creado por", default: true },
  { id: "acciones", label: "Acciones", default: true },
];

const COLUMNAS_DEFAULT = COLUMNAS_DISPONIBLES.filter((c) => c.default).map(
  (c) => c.id,
);

const ESTADO_COLOR = {
  borrador: "default",
  pendiente_aprobacion: "warning",
  aprobada: "success",
  rechazada: "error",
  facturada: "info",
  cancelada: "error",
};

export function SolicitudesCreditoTab() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const navigate = useNavigate();
  const { can: canVentas } = usePermission("VENTAS");
  const canRead = canVentas("VEN_SOL_SOLICITUD_VER");
  const canCreate = canVentas("VEN_SOL_SOLICITUD_CREAR");

  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [estado, setEstado] = useState("");
  const [fechaDesde, setFechaDesde] = useState(dayjs().startOf("week"));
  const [fechaHasta, setFechaHasta] = useState(dayjs().endOf("day"));
  const [filtroRapido, setFiltroRapido] = useState("semana");
  const [showFilters, setShowFilters] = useState(false);
  const [soloRefinanciaciones, setSoloRefinanciaciones] = useState(false);
  const [page, setPage] = useState(1);
  const [limit] = useState(20);

  const [columnasVisibles, setColumnasVisibles] = useState(COLUMNAS_DEFAULT);
  const [columnMenuAnchor, setColumnMenuAnchor] = useState(null);

  const [solicitudDetalle, setSolicitudDetalle] = useState(null);
  const [pdfSolicitudId, setPdfSolicitudId] = useState(null);
  const [pdfUrl, setPdfUrl] = useState(null);
  const [pdfLoading, setPdfLoading] = useState(false);
  const [cancelConfirm, setCancelConfirm] = useState(null);

  const queryClient = useQueryClient();

  const cancelarMutation = useMutation({
    mutationFn: (id) => cancelarSolicitud(id),
    onSuccess: () => {
      toast.success("Solicitud cancelada");
      queryClient.invalidateQueries({ queryKey: ["solicitudes-credito"] });
      setCancelConfirm(null);
    },
    onError: (err) => toast.error(err?.response?.data?.message || "Error al cancelar"),
  });

  const handleOpenPdf = (id) => {
    setPdfSolicitudId(id);
    setPdfUrl(null);
    setPdfLoading(true);
    generarPDFSolicitud(id)
      .then((response) => {
        const blob = new Blob([response], { type: "application/pdf" });
        setPdfUrl(URL.createObjectURL(blob));
      })
      .catch(() => toast.error("Error al generar el PDF"))
      .finally(() => setPdfLoading(false));
  };

  const handleClosePdf = () => {
    if (pdfUrl) URL.revokeObjectURL(pdfUrl);
    setPdfUrl(null);
    setPdfSolicitudId(null);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      setSearchDebounced(search);
      setPage(1);
    }, 500);
    return () => clearTimeout(timer);
  }, [search]);

  const toggleColumna = (columnaId) => {
    setColumnasVisibles((prev) =>
      prev.includes(columnaId)
        ? prev.filter((c) => c !== columnaId)
        : [...prev, columnaId],
    );
  };

  const isColumnaVisible = (id) => columnasVisibles.includes(id);

  const aplicarFiltroRapido = (filtro) => {
    const hoy = dayjs();
    setFiltroRapido(filtro);
    setPage(1);
    switch (filtro) {
      case "hoy":
        setFechaDesde(hoy.startOf("day"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "ayer":
        setFechaDesde(hoy.subtract(1, "day").startOf("day"));
        setFechaHasta(hoy.subtract(1, "day").endOf("day"));
        break;
      case "semana":
        setFechaDesde(hoy.startOf("week"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "mes":
        setFechaDesde(hoy.startOf("month"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "mes_anterior":
        setFechaDesde(hoy.subtract(1, "month").startOf("month"));
        setFechaHasta(hoy.subtract(1, "month").endOf("month"));
        break;
      default:
        break;
    }
  };

  const limpiarFiltros = () => {
    setSearch("");
    setSearchDebounced("");
    setEstado("");
    setFechaDesde(null);
    setFechaHasta(null);
    setFiltroRapido("");
    setPage(1);
  };

  const hayFiltrosActivos = !!(searchDebounced || estado || fechaDesde || fechaHasta);

  const queryParams = useMemo(
    () => ({
      page,
      limit,
      search: searchDebounced || undefined,
      estado: estado || undefined,
      fecha_desde: fechaDesde ? fechaDesde.format("YYYY-MM-DD") : undefined,
      fecha_hasta: fechaHasta ? fechaHasta.format("YYYY-MM-DD") : undefined,
    }),
    [page, limit, searchDebounced, estado, fechaDesde, fechaHasta],
  );

  const {
    data: solicitudesData,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["solicitudes-credito", queryParams],
    queryFn: () => getSolicitudesCredito(queryParams),
    keepPreviousData: true,
  });

  const solicitudesRaw = solicitudesData?.dataFormat || solicitudesData?.data || [];
  const solicitudes = soloRefinanciaciones
    ? solicitudesRaw.filter((s) => s.tipo_origen === "REFINANCIACION")
    : solicitudesRaw;
  const pagination = solicitudesData?.pagination || {};
  const totalPages = pagination.totalPages || 1;

  const resumen = useMemo(() => {
    const all = solicitudes || [];
    return {
      total: pagination.total || all.length,
      borradores: all.filter((s) => s.estado === "borrador").length,
      pendientes: all.filter((s) => s.estado === "pendiente_aprobacion").length,
      aprobadas: all.filter((s) => s.estado === "aprobada").length,
      rechazadas: all.filter((s) => s.estado === "rechazada").length,
      facturadas: all.filter((s) => s.estado === "facturada").length,
    };
  }, [solicitudes, pagination]);

  const getEstadoLabel = (estado) => {
    const found = ESTADOS.find((e) => e.value === estado);
    return found ? found.label : estado;
  };

  if (!canRead) {
    return <AccesoRestringido modulo="VENTA_SOLICITUD_CREDITO" />;
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
      <Box>
        {/* Filtros rápidos + búsqueda */}
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: 1,
            mb: 2,
            alignItems: "center",
          }}
        >
          <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap", order: { xs: 2, sm: 1 } }}>
            {FILTROS_RAPIDOS.map((f) => (
              <Chip
                key={f.value}
                label={f.label}
                size="small"
                variant={filtroRapido === f.value ? "filled" : "outlined"}
                color={filtroRapido === f.value ? "primary" : "default"}
                onClick={() => aplicarFiltroRapido(f.value)}
              />
            ))}
            {hayFiltrosActivos && (
              <Chip
                label="Limpiar filtros"
                size="small"
                color="error"
                variant="outlined"
                onDelete={limpiarFiltros}
                onClick={limpiarFiltros}
              />
            )}
            <Chip
              icon={<Icon icon="mdi:file-restore-outline" width={14} />}
              label="Solo refinanciaciones"
              size="small"
              color={soloRefinanciaciones ? "primary" : "default"}
              variant={soloRefinanciaciones ? "filled" : "outlined"}
              onClick={() => setSoloRefinanciaciones((v) => !v)}
            />
          </Box>

          <TextField
            size="small"
            placeholder="Buscar por número, cliente..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            sx={{ minWidth: { xs: "100%", sm: 200 }, order: { xs: 1, sm: 2 }, flex: { sm: 1 }, maxWidth: 300 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="mdi:magnify" width={20} />
                </InputAdornment>
              ),
              ...(search && {
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton size="small" onClick={() => setSearch("")}>
                      <Icon icon="mdi:close" width={16} />
                    </IconButton>
                  </InputAdornment>
                ),
              }),
            }}
          />

          <Box sx={{ display: "flex", gap: 0.5, order: 3, ml: "auto" }}>
            <Tooltip title={showFilters ? "Ocultar filtros" : "Más filtros"}>
              <Chip
                icon={<Icon icon="mdi:filter-variant" width={16} />}
                label={`Filtros${hayFiltrosActivos ? ` (${[searchDebounced, estado, fechaDesde, fechaHasta].filter(Boolean).length})` : ""}`}
                size="small"
                variant={showFilters ? "filled" : "outlined"}
                color={hayFiltrosActivos ? "primary" : "default"}
                onClick={() => setShowFilters((v) => !v)}
              />
            </Tooltip>
            <Tooltip title="Refrescar">
              <IconButton size="small" onClick={() => refetch()}>
                <Icon icon="mdi:refresh" width={20} />
              </IconButton>
            </Tooltip>
            <Tooltip title="Columnas">
              <IconButton size="small" onClick={(e) => setColumnMenuAnchor(e.currentTarget)}>
                <Icon icon="mdi:view-column" width={20} />
              </IconButton>
            </Tooltip>
          </Box>
        </Box>

        {/* Panel de filtros avanzados */}
        <Collapse in={showFilters}>
          <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
            <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center" }}>
              <DatePicker
                label="Desde"
                value={fechaDesde}
                onChange={(v) => { setFechaDesde(v); setFiltroRapido(""); setPage(1); }}
                slotProps={{ textField: { size: "small", sx: { minWidth: 150 } } }}
              />
              <DatePicker
                label="Hasta"
                value={fechaHasta}
                onChange={(v) => { setFechaHasta(v); setFiltroRapido(""); setPage(1); }}
                slotProps={{ textField: { size: "small", sx: { minWidth: 150 } } }}
              />
              <FormControl
                sx={{ flex: 1, minWidth: { xs: "100%", sm: 180 } }}
                size="small"
              >
                <InputLabel>Estado</InputLabel>
                <Select
                  value={estado}
                  label="Estado"
                  onChange={(e) => { setEstado(e.target.value); setPage(1); }}
                >
                  {ESTADOS.map((e) => (
                    <MenuItem key={e.value} value={e.value}>
                      {e.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
              <Chip
                label="Limpiar todo"
                variant="outlined"
                color="error"
                size="small"
                onClick={limpiarFiltros}
                onDelete={limpiarFiltros}
              />
            </Box>
          </Paper>
        </Collapse>

        {/* Resumen */}
        <Box sx={{ display: "flex", gap: 1, mb: 2, flexWrap: "wrap" }}>
          {[
            { label: "Total", value: resumen.total, icon: "mdi:file-document-multiple", color: "#64748b" },
            { label: "Borradores", value: resumen.borradores, icon: "mdi:pencil", color: "#94a3b8" },
            { label: "Pendientes", value: resumen.pendientes, icon: "mdi:clock-outline", color: "#f59e0b" },
            { label: "Aprobadas", value: resumen.aprobadas, icon: "mdi:check-circle", color: "#10b981" },
            { label: "Facturadas", value: resumen.facturadas, icon: "mdi:receipt", color: "#3b82f6" },
          ].map((item) => (
            <Paper
              key={item.label}
              variant="outlined"
              sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 1, flex: "1 1 0", minWidth: 100 }}
            >
              <Icon icon={item.icon} width={22} color={item.color} />
              <Box>
                <Typography variant="caption" color="text.secondary">
                  {item.label}
                </Typography>
                <Typography variant="h6" fontWeight={700} lineHeight={1}>
                  {item.value}
                </Typography>
              </Box>
            </Paper>
          ))}
        </Box>

        {/* Tabla */}
        {isLoading ? (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {[...Array(5)].map((_, i) => (
              <Skeleton key={i} variant="rounded" height={48} />
            ))}
          </Box>
        ) : solicitudes.length === 0 ? (
          <EmptyState
            icon="lucide:file-search"
            title={
              hayFiltrosActivos
                ? "No se encontraron solicitudes"
                : "Aún no hay solicitudes de crédito"
            }
            description={
              hayFiltrosActivos
                ? "Ajustá los filtros o probá con otro rango de fechas."
                : "Creá la primera solicitud desde el botón de arriba."
            }
            ctaLabel={
              hayFiltrosActivos
                ? "Limpiar filtros"
                : canCreate
                  ? "Nueva solicitud"
                  : undefined
            }
            ctaIcon={hayFiltrosActivos ? "lucide:x" : "lucide:plus"}
            onCta={
              hayFiltrosActivos
                ? limpiarFiltros
                : canCreate
                  ? () => navigate("/solicitudes-credito/nueva")
                  : undefined
            }
          />
        ) : isMobile ? (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {solicitudes.map((sol) => (
              <Paper
                key={sol.id}
                variant="outlined"
                sx={{ p: 1.5, cursor: "pointer", "&:hover": { borderColor: "primary.main" } }}
                onClick={() => setSolicitudDetalle(sol)}
              >
                <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5 }}>
                  <Typography variant="body2" fontWeight={600} fontFamily="monospace">
                    {sol.numero_solicitud || "Borrador"}
                  </Typography>
                  <Chip
                    label={getEstadoLabel(sol.estado)}
                    size="small"
                    color={ESTADO_COLOR[sol.estado] || "default"}
                    sx={{ fontWeight: 600 }}
                  />
                </Box>
                <Typography variant="body2" color="text.secondary" noWrap>
                  {sol.cliente?.personas?.razon_social || sol.cliente?.nombre_fantasia || "-"}
                </Typography>
                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 0.5 }}>
                  <Typography variant="caption" color="text.secondary">
                    {fmtFechaHora(sol.fecha_solicitud, "-")}
                  </Typography>
                  <Typography variant="body2" fontWeight={700}>
                    {formatMoney(sol.monto_total, sol.moneda)}
                  </Typography>
                </Box>
              </Paper>
            ))}
          </Box>
        ) : (
          <TableContainer component={Paper} variant="outlined">
            <Table size="small">
              <TableHead>
                <TableRow>
                  {isColumnaVisible("numero") && (
                    <TableCell sx={{ fontWeight: 600 }}>Nro. Solicitud</TableCell>
                  )}
                  {isColumnaVisible("fecha") && (
                    <TableCell sx={{ fontWeight: 600 }}>Fecha</TableCell>
                  )}
                  {isColumnaVisible("cliente") && (
                    <TableCell sx={{ fontWeight: 600 }}>Cliente</TableCell>
                  )}
                  {isColumnaVisible("vendedor") && (
                    <TableCell sx={{ fontWeight: 600 }}>Vendedor</TableCell>
                  )}
                  {isColumnaVisible("items") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">Items</TableCell>
                  )}
                  {isColumnaVisible("cuotas") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">Cuotas</TableCell>
                  )}
                  {isColumnaVisible("total") && (
                    <TableCell sx={{ fontWeight: 600 }} align="right">Total</TableCell>
                  )}
                  {isColumnaVisible("estado") && (
                    <TableCell sx={{ fontWeight: 600 }}>Estado</TableCell>
                  )}
                  {isColumnaVisible("creador") && (
                    <TableCell sx={{ fontWeight: 600 }}>Creado por</TableCell>
                  )}
                  {isColumnaVisible("acciones") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">Acciones</TableCell>
                  )}
                </TableRow>
              </TableHead>
              <TableBody>
                {solicitudes.map((sol) => {
                  const cliente = sol.cliente;
                  const razonSocial =
                    cliente?.personas?.razon_social || cliente?.nombre_fantasia || "-";
                  const vendedor = sol.vendedor;
                  const cantItems = sol._count?.detalle || sol.detalle?.length || 0;

                  return (
                    <TableRow
                      key={sol.id}
                      hover
                      sx={{ cursor: "pointer" }}
                      onClick={() => setSolicitudDetalle(sol)}
                    >
                      {isColumnaVisible("numero") && (
                        <TableCell>
                          <Stack direction="row" spacing={0.5} alignItems="center" flexWrap="wrap">
                            <Typography variant="body2" fontWeight={600} fontFamily="monospace">
                              {sol.numero_solicitud || "Borrador"}
                            </Typography>
                            {sol.tipo_origen === "REFINANCIACION" && (
                              <Chip
                                size="small"
                                label="Refinanciación"
                                color="info"
                                variant="outlined"
                                icon={<Icon icon="mdi:file-restore-outline" width={12} />}
                                sx={{ fontSize: "0.6rem", height: 18 }}
                              />
                            )}
                          </Stack>
                        </TableCell>
                      )}
                      {isColumnaVisible("fecha") && (
                        <TableCell>
                          <Typography variant="body2">
                            {sol.fecha_solicitud
                              ? dayjs(sol.fecha_solicitud).format("DD/MM/YY HH:mm")
                              : "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("cliente") && (
                        <TableCell>
                          <Typography variant="body2" noWrap sx={{ maxWidth: 200 }}>
                            {razonSocial}
                          </Typography>
                          {cliente?.personas?.ruc && (
                            <Typography variant="caption" color="text.secondary">
                              {cliente.personas.ruc}
                            </Typography>
                          )}
                        </TableCell>
                      )}
                      {isColumnaVisible("vendedor") && (
                        <TableCell>
                          <Typography variant="body2">
                            {vendedor
                              ? `${vendedor.nombre || ""} ${vendedor.apellido || ""}`.trim()
                              : "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("items") && (
                        <TableCell align="center">
                          <Chip label={cantItems} size="small" variant="outlined" />
                        </TableCell>
                      )}
                      {isColumnaVisible("cuotas") && (
                        <TableCell align="center">
                          <Typography variant="body2">
                            {sol.cant_cuotas_total || "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("total") && (
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={600}>
                            {formatMoney(sol.monto_total, sol.moneda)}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("estado") && (
                        <TableCell>
                          <Chip
                            label={getEstadoLabel(sol.estado)}
                            size="small"
                            color={ESTADO_COLOR[sol.estado] || "default"}
                            sx={{ fontWeight: 600 }}
                          />
                        </TableCell>
                      )}
                      {isColumnaVisible("creador") && (
                        <TableCell>
                          <Typography variant="body2">
                            {`${sol.creador?.nombres || ""} ${sol.creador?.apellidos || ""}`.trim() ||
                              sol.creador?.username ||
                              "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("acciones") && (
                        <TableCell align="center">
                          <Box sx={{ display: "flex", gap: 0.5, justifyContent: "center" }}>
                            <Tooltip title="Ver detalle">
                              <IconButton size="small" onClick={(e) => { e.stopPropagation(); setSolicitudDetalle(sol); }}>
                                <Icon icon="mdi:eye" width={18} />
                              </IconButton>
                            </Tooltip>
                            <Tooltip title="Ver PDF">
                              <IconButton
                                size="small"
                                color="primary"
                                onClick={(e) => { e.stopPropagation(); handleOpenPdf(sol.id); }}
                              >
                                <Icon icon="mdi:file-pdf-box" width={18} />
                              </IconButton>
                            </Tooltip>
                            {!["facturada", "cancelada"].includes(sol.estado) && (
                              <Tooltip title="Cancelar solicitud">
                                <IconButton size="small" color="error" onClick={(e) => { e.stopPropagation(); setCancelConfirm(sol); }}>
                                  <Icon icon="mdi:cancel" width={18} />
                                </IconButton>
                              </Tooltip>
                            )}
                          </Box>
                        </TableCell>
                      )}
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
        )}

        {/* Paginación */}
        {totalPages > 1 && (
          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
            <Pagination
              count={totalPages}
              page={page}
              onChange={(_, v) => setPage(v)}
              color="primary"
              size={isMobile ? "small" : "medium"}
            />
          </Box>
        )}

        {/* Menú de columnas */}
        <Menu
          anchorEl={columnMenuAnchor}
          open={Boolean(columnMenuAnchor)}
          onClose={() => setColumnMenuAnchor(null)}
        >
          {COLUMNAS_DISPONIBLES.map((col) => (
            <MenuItem key={col.id} onClick={() => toggleColumna(col.id)} dense>
              <ListItemIcon>
                {columnasVisibles.includes(col.id) ? (
                  <Icon icon="mdi:checkbox-marked" width={20} color={theme.palette.primary.main} />
                ) : (
                  <Icon icon="mdi:checkbox-blank-outline" width={20} />
                )}
              </ListItemIcon>
              <ListItemText>{col.label}</ListItemText>
            </MenuItem>
          ))}
        </Menu>

        {/* Diálogo de detalle */}
        <SolicitudCreditoDetalleDialog
          open={!!solicitudDetalle}
          onClose={() => setSolicitudDetalle(null)}
          solicitud={solicitudDetalle}
          onRefresh={refetch}
        />

        {/* PDF Viewer */}
        <Dialog open={!!pdfSolicitudId} onClose={handleClosePdf} maxWidth="lg" fullWidth PaperProps={{ sx: { height: "90vh" } }}>
          <DialogTitle sx={{ py: 1, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Typography variant="subtitle1" fontWeight={600}>Solicitud de Crédito — PDF</Typography>
            <IconButton size="small" onClick={handleClosePdf}><Icon icon="mdi:close" width={20} /></IconButton>
          </DialogTitle>
          <DialogContent sx={{ p: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {pdfLoading && (
              <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
                <CircularProgress size={36} />
                <Typography variant="body2" color="text.secondary">Generando PDF...</Typography>
              </Box>
            )}
            {pdfUrl && <iframe src={pdfUrl} style={{ width: "100%", height: "100%", border: "none" }} title="PDF" />}
          </DialogContent>
        </Dialog>

        {/* Cancelar confirm */}
        <Dialog open={!!cancelConfirm} onClose={() => setCancelConfirm(null)} maxWidth="xs" fullWidth>
          <DialogTitle>Cancelar solicitud</DialogTitle>
          <DialogContent>
            <Typography>
              ¿Confirma cancelar la solicitud <strong>{cancelConfirm?.numero_solicitud}</strong>? Esta acción no se puede deshacer.
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setCancelConfirm(null)} disabled={cancelarMutation.isPending}>Volver</Button>
            <Button
              color="error"
              variant="contained"
              disabled={cancelarMutation.isPending}
              onClick={() => cancelarMutation.mutate(cancelConfirm.id)}
            >
              {cancelarMutation.isPending ? "Cancelando..." : "Cancelar solicitud"}
            </Button>
          </DialogActions>
        </Dialog>
      </Box>
    </LocalizationProvider>
  );
}