import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Chip,
  Collapse,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  Grid,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import dayjs from "dayjs";
import { useState } from "react";
import { toast } from "sonner";
import { aprobarSolicitud, cancelarSolicitud, enviarAprobacionSolicitud, generarPDFSolicitud, getSolicitudCredito, rechazarSolicitud } from "../../api/solicitud-credito.service";
import { getCreditInfo } from "../../api/clientes.service";
import { getFacturasCreditoPendientes, getCuotasPendientes } from "../../api/cobros.service";
import { formatMoney } from "../../utils/formatMoney";
import { usePermission } from "../../hooks/usePermission";
import { ClienteHistorialDrawer } from "../organismos/ClientesDesign/ClienteHistorialDrawer";
import { fmtFechaCalendario } from "../../utils/fecha";

const ESTADO_CONFIG = {
  borrador: { color: "default", icon: "mdi:pencil", label: "Borrador" },
  pendiente_aprobacion: { color: "warning", icon: "mdi:clock-outline", label: "Pendiente Aprobación" },
  aprobada: { color: "success", icon: "mdi:check-circle", label: "Aprobada" },
  rechazada: { color: "error", icon: "mdi:close-circle", label: "Rechazada" },
  facturada: { color: "info", icon: "mdi:receipt", label: "Facturada" },
  cancelada: { color: "error", icon: "mdi:cancel", label: "Cancelada" },
};

const InfoField = ({ label, value }) => (
  <Box>
    <Typography variant="caption" color="text.secondary" display="block">
      {label}
    </Typography>
    <Typography variant="body2" fontWeight={500} sx={{ wordBreak: "break-word" }}>
      {value || "-"}
    </Typography>
  </Box>
);

// ═══════════ HISTORIAL CREDITICIO COMPACTO (para supervisor) ═══════════
// Declarado antes del export para evitar problemas de hoisting con Vite HMR
function HistorialCrediticioCompacto({ cliente, moneda }) {
  const clienteId = cliente?.id;
  const [expanded, setExpanded] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);

  const { data: creditInfo } = useQuery({
    queryKey: ["credit-info-detalle", clienteId],
    queryFn: () => getCreditInfo(clienteId),
    enabled: !!clienteId,
    staleTime: 30000,
  });

  const { data: facturasPendientesData } = useQuery({
    queryKey: ["facturas-credito-pendientes-detalle", clienteId],
    queryFn: () => getFacturasCreditoPendientes(clienteId),
    enabled: !!clienteId && expanded,
    staleTime: 30000,
  });

  const { data: cuotasPendientesData } = useQuery({
    queryKey: ["cuotas-pendientes-detalle", clienteId],
    queryFn: () => getCuotasPendientes(clienteId),
    enabled: !!clienteId && expanded,
    staleTime: 30000,
  });

  const info = creditInfo?.data || creditInfo || {};
  const facturas = Array.isArray(facturasPendientesData?.data || facturasPendientesData) ? facturasPendientesData?.data || facturasPendientesData : [];
  const cuotasList = Array.isArray(cuotasPendientesData?.data || cuotasPendientesData) ? cuotasPendientesData?.data || cuotasPendientesData : [];

  const saldoTotal = info.saldo_pendiente || info.saldo_total || facturas.reduce((s, f) => s + Number(f.saldo_pendiente || 0), 0);
  const hoy = new Date();
  const cuotasVencidas = cuotasList.filter((c) => c.fecha_vencimiento && new Date(c.fecha_vencimiento) < hoy);
  const montoVencido = cuotasVencidas.reduce((s, c) => s + Number(c.saldo_pendiente || c.dmoncuota || 0), 0);
  const tieneDeuda = saldoTotal > 0;
  const tieneAtrasos = cuotasVencidas.length > 0;

  const colorBg = tieneAtrasos ? "rgba(239, 68, 68, 0.06)" : tieneDeuda ? "rgba(245, 158, 11, 0.06)" : "rgba(34, 197, 94, 0.06)";
  const colorBorder = tieneAtrasos ? "rgba(239, 68, 68, 0.2)" : tieneDeuda ? "rgba(245, 158, 11, 0.2)" : "rgba(34, 197, 94, 0.2)";

  return (
    <Paper variant="outlined" sx={{ mb: { xs: 1.5, sm: 2 }, bgcolor: colorBg, borderColor: colorBorder }}>
      <Box onClick={() => setExpanded(!expanded)} sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", p: 1.5, cursor: "pointer" }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="mdi:history" width={18} />
          <Typography variant="subtitle2" fontWeight={600}>
            Historial Crediticio
          </Typography>
          <Chip
            size="small"
            label={tieneAtrasos ? `${cuotasVencidas.length} vencidas` : tieneDeuda ? "Al día" : "Sin deudas"}
            color={tieneAtrasos ? "error" : tieneDeuda ? "warning" : "success"}
            variant={tieneAtrasos ? "filled" : "outlined"}
            sx={{ height: 20, fontSize: "0.65rem" }}
          />
        </Box>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          {tieneDeuda && (
            <Typography variant="caption" fontWeight={600} color={tieneAtrasos ? "error.main" : "warning.main"}>
              Deuda: {formatMoney(saldoTotal, moneda)}
            </Typography>
          )}
          <Button
            size="small"
            variant="outlined"
            startIcon={<Icon icon="mdi:account-details-outline" width={14} />}
            onClick={(e) => {
              e.stopPropagation();
              setDrawerOpen(true);
            }}
            sx={{ textTransform: "none", fontWeight: 600, py: 0.25, minHeight: 26 }}
          >
            Ver detalle
          </Button>
          <Icon icon={expanded ? "mdi:chevron-up" : "mdi:chevron-down"} width={18} style={{ opacity: 0.5 }} />
        </Box>
      </Box>
      <Collapse in={expanded}>
        <Divider />
        <Box sx={{ p: 1.5 }}>
          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 1 }}>
            {info.limite_credito !== undefined && (
              <Box>
                <Typography variant="caption" color="text.secondary">
                  Límite
                </Typography>
                <Typography variant="body2" fontWeight={600}>
                  {/* Tope opcional: sin tope no es un monto en 0. */}
                  {Number(info.limite_credito) ? formatMoney(info.limite_credito, moneda) : "Sin tope"}
                </Typography>
              </Box>
            )}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Deuda
              </Typography>
              <Typography variant="body2" fontWeight={600} color={tieneDeuda ? "warning.main" : "text.secondary"}>
                {formatMoney(saldoTotal, moneda)}
              </Typography>
            </Box>
            {tieneAtrasos && (
              <Box>
                <Typography variant="caption" color="text.secondary">
                  Vencido
                </Typography>
                <Typography variant="body2" fontWeight={700} color="error.main">
                  {formatMoney(montoVencido, moneda)}
                </Typography>
              </Box>
            )}
            <Box>
              <Typography variant="caption" color="text.secondary">
                Créditos activos
              </Typography>
              <Typography variant="body2" fontWeight={600}>
                {facturas.length}
              </Typography>
            </Box>
          </Box>
          {tieneAtrasos && (
            <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, p: 1, mb: 1, borderRadius: 1, bgcolor: "rgba(239, 68, 68, 0.1)", border: "1px solid rgba(239, 68, 68, 0.3)" }}>
              <Icon icon="mdi:alert-circle" width={16} color="#ef4444" />
              <Typography variant="caption" fontWeight={600} color="error.main">
                {cuotasVencidas.length} cuota{cuotasVencidas.length > 1 ? "s" : ""} vencida{cuotasVencidas.length > 1 ? "s" : ""} — Total: {formatMoney(montoVencido, moneda)}
              </Typography>
            </Box>
          )}
          {facturas.length > 0 ? (
            <Box sx={{ display: "flex", flexDirection: "column" }}>
              {facturas.slice(0, 5).map((f, idx) => {
                const saldoF = Number(f.saldo_pendiente || 0);
                const totalF = Number(f.factura_subtotales?.[0]?.dtotope || f.total_factura || 0);
                const pct = totalF > 0 ? Math.round(((totalF - saldoF) / totalF) * 100) : 0;
                return (
                  <Box
                    key={f.id || idx}
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      py: 0.5,
                      borderBottom: idx < Math.min(facturas.length, 5) - 1 ? "1px solid" : "none",
                      borderColor: "divider",
                    }}
                  >
                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
                      <Typography variant="caption" fontWeight={600}>
                        {f.numero_factura || f.numero || "S/N"}
                      </Typography>
                      <Chip size="small" label={`${pct}%`} sx={{ height: 16, fontSize: "0.55rem" }} color={pct >= 80 ? "success" : pct >= 50 ? "warning" : "default"} variant="outlined" />
                    </Box>
                    <Typography variant="caption" fontWeight={600}>
                      {formatMoney(saldoF, moneda)}
                    </Typography>
                  </Box>
                );
              })}
            </Box>
          ) : (
            <Typography variant="caption" color="text.secondary" sx={{ textAlign: "center", display: "block" }}>
              Sin créditos activos
            </Typography>
          )}
        </Box>
      </Collapse>
      <ClienteHistorialDrawer
        cliente={drawerOpen ? cliente : null}
        onClose={() => setDrawerOpen(false)}
      />
    </Paper>
  );
}

export function SolicitudCreditoDetalleDialog({ open, onClose, solicitud, onRefresh }) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const queryClient = useQueryClient();
  const { can: canVentas } = usePermission("VENTAS");
  const canCreate = canVentas("VEN_SOL_SOLICITUD_CREAR");
  const canEdit = canVentas("VEN_SOL_SOLICITUD_EDITAR");
  const canApprove = canVentas("VEN_SOL_SOLICITUD_APROBAR");

  const [showRechazo, setShowRechazo] = useState(false);
  const [motivoRechazo, setMotivoRechazo] = useState("");
  const [isPrinting, setIsPrinting] = useState(false);

  const { data: solicitudCompleta } = useQuery({
    queryKey: ["solicitud-credito-detalle", solicitud?.id],
    queryFn: () => getSolicitudCredito(solicitud.id),
    enabled: !!solicitud?.id && open,
  });

  const data = solicitudCompleta || solicitud;

  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: ["solicitudes-credito"] });
    queryClient.invalidateQueries({ queryKey: ["solicitud-credito-detalle", solicitud?.id] });
    onRefresh?.();
  };

  const enviarMutation = useMutation({
    mutationFn: () => enviarAprobacionSolicitud(data.id),
    onSuccess: () => {
      toast.success("Solicitud enviada a aprobación");
      invalidate();
    },
    onError: () => toast.error("Error al enviar a aprobación"),
  });

  const aprobarMutation = useMutation({
    mutationFn: () => aprobarSolicitud(data.id),
    onSuccess: () => {
      toast.success("Solicitud aprobada");
      invalidate();
    },
    onError: () => toast.error("Error al aprobar solicitud"),
  });

  const rechazarMutation = useMutation({
    mutationFn: () => rechazarSolicitud(data.id, motivoRechazo),
    onSuccess: () => {
      toast.success("Solicitud rechazada");
      setShowRechazo(false);
      setMotivoRechazo("");
      invalidate();
    },
    onError: () => toast.error("Error al rechazar solicitud"),
  });

  const cancelarMutation = useMutation({
    mutationFn: () => cancelarSolicitud(data.id),
    onSuccess: () => {
      toast.success("Solicitud cancelada");
      invalidate();
    },
    onError: () => toast.error("Error al cancelar solicitud"),
  });

  const handlePrint = async () => {
    if (!data?.id) return;
    setIsPrinting(true);
    try {
      const response = await generarPDFSolicitud(data.id);
      // Asegurar que sea un Blob con tipo correcto
      const blob = response instanceof Blob ? new Blob([response], { type: "application/pdf" }) : new Blob([response], { type: "application/pdf" });
      const url = URL.createObjectURL(blob);
      window.open(url, "_blank");
    } catch (err) {
      console.error("Error PDF:", err);
      toast.error(err?.response?.data?.message || "Error al generar el PDF");
    } finally {
      setIsPrinting(false);
    }
  };

  if (!data) return null;

  const cliente = data.cliente;
  const razonSocial = cliente?.personas?.razon_social || cliente?.nombre_fantasia || "-";
  const detalle = data.detalle || [];
  const moneda = data.moneda || "PYG";
  const estadoConfig = ESTADO_CONFIG[data.estado] || ESTADO_CONFIG.borrador;

  return (
    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth fullScreen={isMobile} scroll="paper">
      <DialogTitle
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          pb: 1,
          px: { xs: 2, sm: 3 },
          pt: { xs: 1.5, sm: 2 },
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
          <Icon icon="mdi:file-document-check" width={isMobile ? 20 : 24} />
          <Typography variant={isMobile ? "subtitle1" : "h6"} fontWeight={600}>
            Solicitud {data.numero_solicitud || "Borrador"}
          </Typography>
          <Chip icon={<Icon icon={estadoConfig.icon} width={16} />} label={estadoConfig.label} size="small" color={estadoConfig.color} sx={{ fontWeight: 600 }} />
        </Box>
        <IconButton onClick={onClose} size="small">
          <Icon icon="mdi:close" width={20} />
        </IconButton>
      </DialogTitle>

      <DialogContent
        dividers
        sx={{
          p: { xs: 1.5, sm: 2 },
          maxHeight: { xs: "calc(100vh - 180px)", sm: "calc(100vh - 220px)" },
        }}
      >
        {/* Información General */}
        <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mb: { xs: 1.5, sm: 2 } }}>
          <Typography variant="subtitle2" color="primary" gutterBottom>
            <Icon icon="mdi:information" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
            Información General
          </Typography>
          <Grid container spacing={{ xs: 1.5, sm: 2 }}>
            <Grid item xs={6} sm={3}>
              <InfoField label="Fecha Solicitud" value={data.fecha_solicitud ? dayjs(data.fecha_solicitud).format("DD/MM/YYYY HH:mm") : "-"} />
            </Grid>
            <Grid item xs={6} sm={3}>
              <InfoField
                label="Condición de Pago"
                value={(() => {
                  const intSol = data.intervalo_dias || 30;
                  const cuotasSol = data.cant_cuotas_total || 0;
                  const freq = intSol === 7 ? "Semanal" : intSol === 15 ? "Quincenal" : intSol === 30 ? "Mensual" : `Cada ${intSol} días`;
                  return cuotasSol > 0 ? `Crédito ${freq} — ${cuotasSol} cuotas` : data.condicion_pago?.descripcion || freq;
                })()}
              />
            </Grid>
            <Grid item xs={6} sm={3}>
              <InfoField label="Moneda" value={moneda} />
            </Grid>
            <Grid item xs={6} sm={3}>
              <InfoField label="Cuotas Total" value={data.cant_cuotas_total ? `${data.cant_cuotas_total} cuotas` : "-"} />
            </Grid>
            {Number(data.cuota_inicial_total) > 0 && (
              <Grid item xs={6} sm={3}>
                <InfoField label="Entrega Inicial" value={formatMoney(Number(data.cuota_inicial_total))} />
              </Grid>
            )}
            {data.fecha_primera_cuota && (
              <Grid item xs={6} sm={3}>
                <InfoField
                  label="Primera Cuota"
                  value={fmtFechaCalendario(data.fecha_primera_cuota, "-")}
                />
              </Grid>
            )}
            {data.saldo_financiar && Number(data.saldo_financiar) > 0 && Number(data.saldo_financiar) !== Number(data.monto_total) && (
              <Grid item xs={6} sm={3}>
                <InfoField label="A Financiar" value={formatMoney(Number(data.saldo_financiar))} />
              </Grid>
            )}
            {data.fecha_aprobacion && (
              <Grid item xs={6} sm={3}>
                <InfoField label="Fecha Aprobación" value={dayjs(data.fecha_aprobacion).format("DD/MM/YYYY HH:mm")} />
              </Grid>
            )}
            {data.aprobador && (
              <Grid item xs={6} sm={3}>
                <InfoField label="Aprobado por" value={data.aprobador?.username || data.aprobador?.nombre} />
              </Grid>
            )}
            {data.motivo_rechazo && (
              <Grid item xs={12}>
                <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1, p: 1.5, borderRadius: 1, bgcolor: "rgba(239, 68, 68, 0.08)", border: "1px solid rgba(239, 68, 68, 0.2)" }}>
                  <Icon icon="mdi:alert-circle" width={18} color="#ef4444" style={{ marginTop: 2, flexShrink: 0 }} />
                  <Box>
                    <Typography variant="caption" fontWeight={600} color="error.main" sx={{ display: "block" }}>
                      Motivo de Rechazo
                    </Typography>
                    <Typography variant="body2" sx={{ mt: 0.25 }}>
                      {data.motivo_rechazo}
                    </Typography>
                    {data.aprobador && (
                      <Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 0.5 }}>
                        Rechazado por: {data.aprobador?.username || data.aprobador?.nombres || "Supervisor"} — {data.fecha_aprobacion ? dayjs(data.fecha_aprobacion).format("DD/MM/YYYY HH:mm") : ""}
                      </Typography>
                    )}
                  </Box>
                </Box>
              </Grid>
            )}
            {data.observaciones && (
              <Grid item xs={12}>
                <InfoField label="Observaciones" value={data.observaciones} />
              </Grid>
            )}
          </Grid>
        </Paper>

        {/* Cliente */}
        <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mb: { xs: 1.5, sm: 2 } }}>
          <Typography variant="subtitle2" color="primary" gutterBottom>
            <Icon icon="mdi:account" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
            Cliente
          </Typography>
          <Grid container spacing={{ xs: 1.5, sm: 2 }}>
            <Grid item xs={12} sm={6} md={4}>
              <InfoField label="Razón Social" value={razonSocial} />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
              <InfoField label="RUC / Documento" value={cliente?.personas?.ruc || cliente?.personas?.nro_documento} />
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
              <InfoField label="Teléfono" value={cliente?.personas?.telefono} />
            </Grid>
          </Grid>
        </Paper>

        {/* Historial crediticio del cliente (para que el supervisor evalúe) */}
        {data.estado === "pendiente_aprobacion" && canApprove && cliente?.id && <HistorialCrediticioCompacto cliente={cliente} moneda={moneda} />}

        {/* Vendedor */}
        {data.vendedor && (
          <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mb: { xs: 1.5, sm: 2 } }}>
            <Typography variant="subtitle2" color="primary" gutterBottom>
              <Icon icon="mdi:account-tie" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
              Vendedor
            </Typography>
            <Grid container spacing={{ xs: 1.5, sm: 2 }}>
              <Grid item xs={6} sm={4}>
                <InfoField label="Vendedor" value={`${data.vendedor.nombre || ""} ${data.vendedor.apellido || ""}`.trim()} />
              </Grid>
              <Grid item xs={6} sm={4}>
                <InfoField label="Creado por" value={data.creador?.username} />
              </Grid>
            </Grid>
          </Paper>
        )}

        {/* Política de Cobranza (frecuencia + días fijos + gracia acordada) */}
        {(() => {
          const intervalo_dias = data.intervalo_dias ?? data.condicion_pago?.intervalo_dias ?? null;
          const dia_fijo_pago_1 = data.dia_fijo_pago_1 ?? null;
          const dia_fijo_pago_2 = data.dia_fijo_pago_2 ?? null;
          const dia_cobro_semana = data.dia_cobro_semana ?? null;
          const dias_gracia_override = data.dias_gracia_override ?? null;
          if (
            intervalo_dias == null &&
            dia_fijo_pago_1 == null &&
            dia_fijo_pago_2 == null &&
            dia_cobro_semana == null &&
            dias_gracia_override == null
          ) {
            return null;
          }
          const diasSemana = ["", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
          const frecuenciaLabel =
            intervalo_dias === 7 ? "Semanal" :
            intervalo_dias === 15 ? "Quincenal" :
            intervalo_dias === 30 ? "Mensual" :
            intervalo_dias ? `Cada ${intervalo_dias} días` : "—";
          const diaLabel = dia_fijo_pago_1
            ? dia_fijo_pago_2
              ? `Días ${dia_fijo_pago_1} y ${dia_fijo_pago_2} de cada mes`
              : `Día ${dia_fijo_pago_1} de cada mes`
            : dia_cobro_semana
              ? `${diasSemana[dia_cobro_semana]} de cada semana`
              : null;
          return (
            <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mb: { xs: 1.5, sm: 2 } }}>
              <Typography variant="subtitle2" color="primary" gutterBottom>
                <Icon icon="mdi:calendar-check" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
                Política de Cobranza
              </Typography>
              <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                <Chip
                  icon={<Icon icon="mdi:repeat" width={14} />}
                  label={`Frecuencia: ${frecuenciaLabel}`}
                  size="small"
                  variant="outlined"
                />
                {diaLabel && (
                  <Chip
                    icon={<Icon icon="mdi:calendar-clock" width={14} />}
                    label={diaLabel}
                    size="small"
                    variant="outlined"
                    color="primary"
                  />
                )}
                {dias_gracia_override != null && (
                  <Chip
                    icon={<Icon icon="mdi:clock-alert-outline" width={14} />}
                    label={`Gracia acordada: ${dias_gracia_override} días`}
                    size="small"
                    color="warning"
                    variant="outlined"
                  />
                )}
              </Box>
            </Paper>
          );
        })()}

        {/* Detalle de Items */}
        <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mb: { xs: 1.5, sm: 2 } }}>
          <Typography variant="subtitle2" color="primary" gutterBottom>
            <Icon icon="mdi:format-list-bulleted" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
            Detalle de Productos ({detalle.length})
          </Typography>
          <Box sx={{ width: "100%", overflowX: "auto" }}>
            <Table size={isMobile ? "small" : "medium"} sx={{ minWidth: 500 }}>
              <TableHead>
                <TableRow>
                  <TableCell sx={{ fontWeight: 600 }}>#</TableCell>
                  <TableCell sx={{ fontWeight: 600 }}>Producto</TableCell>
                  <TableCell sx={{ fontWeight: 600 }} align="right">
                    Cant.
                  </TableCell>
                  <TableCell sx={{ fontWeight: 600 }} align="right">
                    Cuotas
                  </TableCell>
                  <TableCell sx={{ fontWeight: 600 }} align="right">
                    Monto/Cuota
                  </TableCell>
                  {!isMobile && (
                    <TableCell sx={{ fontWeight: 600 }} align="right">
                      Cuota Inicial
                    </TableCell>
                  )}
                  <TableCell sx={{ fontWeight: 600 }} align="right">
                    Total
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {detalle.map((item, index) => (
                  <TableRow key={item.id || index}>
                    <TableCell>{index + 1}</TableCell>
                    <TableCell>
                      <Typography variant="body2">{item.descripcion || item.producto?.descripcion || "-"}</Typography>
                      {item.precio_cuota?.nombre && (
                        <Typography variant="caption" color="text.secondary">
                          Plan: {item.precio_cuota.nombre}
                        </Typography>
                      )}
                    </TableCell>
                    <TableCell align="right">{item.cantidad || 0}</TableCell>
                    <TableCell align="right">{item.cant_cuotas || "-"}</TableCell>
                    <TableCell align="right">{item.monto_cuota ? formatMoney(item.monto_cuota, moneda) : "-"}</TableCell>
                    {!isMobile && <TableCell align="right">{item.cuota_inicial ? formatMoney(item.cuota_inicial, moneda) : "-"}</TableCell>}
                    <TableCell align="right">
                      <Typography variant="body2" fontWeight={600}>
                        {formatMoney(item.precio_total, moneda)}
                      </Typography>
                    </TableCell>
                  </TableRow>
                ))}
                {detalle.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={isMobile ? 6 : 7} align="center">
                      <Typography variant="body2" color="text.secondary">
                        Sin productos
                      </Typography>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </Box>
        </Paper>

        {/* Totales y Cronograma */}
        <Grid container spacing={{ xs: 1.5, sm: 2 }}>
          <Grid item xs={12} md={6}>
            <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, height: "100%" }}>
              <Typography variant="subtitle2" color="primary" gutterBottom>
                <Icon icon="mdi:calculator" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
                Totales
              </Typography>
              <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
                <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                  <Typography variant="body2" color="text.secondary">
                    Total Productos:
                  </Typography>
                  <Typography variant="body2">{detalle.length}</Typography>
                </Box>
                {data.cant_cuotas_total > 0 && (
                  <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                    <Typography variant="body2" color="text.secondary">
                      Cuotas:
                    </Typography>
                    <Typography variant="body2">{data.cant_cuotas_total}</Typography>
                  </Box>
                )}
                {Number(data.cuota_inicial_total) > 0 && (
                  <>
                    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                      <Typography variant="body2" color="text.secondary">
                        Entrega inicial:
                      </Typography>
                      <Typography variant="body2" color="warning.main" fontWeight={600}>
                        {formatMoney(data.cuota_inicial_total, moneda)}
                      </Typography>
                    </Box>
                    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                      <Typography variant="body2" color="text.secondary">
                        Saldo a financiar:
                      </Typography>
                      <Typography variant="body2">{formatMoney(data.saldo_financiar || Number(data.monto_total) - Number(data.cuota_inicial_total), moneda)}</Typography>
                    </Box>
                  </>
                )}
                {data.intervalo_dias && (
                  <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                    <Typography variant="body2" color="text.secondary">
                      Frecuencia:
                    </Typography>
                    <Typography variant="body2">
                      Cada {data.intervalo_dias} días
                      {data.intervalo_dias === 7 && " (semanal)"}
                      {data.intervalo_dias === 15 && " (quincenal)"}
                      {data.intervalo_dias === 30 && " (mensual)"}
                    </Typography>
                  </Box>
                )}
                <Divider sx={{ my: 0.5 }} />
                <Box sx={{ display: "flex", justifyContent: "space-between" }}>
                  <Typography variant="subtitle1" fontWeight={600}>
                    MONTO TOTAL:
                  </Typography>
                  <Typography variant="subtitle1" fontWeight={600} color="primary">
                    {formatMoney(data.monto_total, moneda)}
                  </Typography>
                </Box>
              </Box>
            </Paper>
          </Grid>
          <Grid item xs={12} md={6}>
            {data.cant_cuotas_total > 0 && (
              <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 } }}>
                <Typography variant="subtitle2" color="primary" gutterBottom>
                  <Icon icon="mdi:calendar-clock" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
                  Cronograma de Pagos
                </Typography>
                <Box sx={{ overflowX: "auto" }}>
                  <Table size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell sx={{ fontWeight: 600, fontSize: "0.7rem", py: 0.5, px: 1 }}>Nº</TableCell>
                        <TableCell sx={{ fontWeight: 600, fontSize: "0.7rem", py: 0.5, px: 1 }}>Vencimiento</TableCell>
                        <TableCell sx={{ fontWeight: 600, fontSize: "0.7rem", py: 0.5, px: 1 }} align="right">
                          Monto
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600, fontSize: "0.7rem", py: 0.5, px: 1 }} align="right">
                          Saldo
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {(() => {
                        // Usar cronograma guardado (fuente de verdad) si existe
                        const cronograma = Array.isArray(data.cronograma) && data.cronograma.length > 0 ? data.cronograma : null;

                        if (cronograma) {
                          return cronograma.map((c) => (
                            <TableRow key={c.nro_cuota} hover>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, fontWeight: 600 }}>{c.nro_cuota}</TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1 }}>
                                {fmtFechaCalendario(c.fecha_vencimiento, "-")}
                              </TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, fontWeight: 600 }} align="right">
                                {formatMoney(c.monto_cuota, moneda)}
                              </TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, color: Number(c.saldo_pendiente) === 0 ? "success.main" : "text.secondary" }} align="right">
                                {formatMoney(c.saldo_pendiente, moneda)}
                              </TableCell>
                            </TableRow>
                          ));
                        }

                        // Fallback: recalcular desde items (solicitudes antiguas sin cronograma)
                        const intervaloDias = data.intervalo_dias || data.condicion_pago?.intervalo_dias || 30;
                        // Parse manual "YYYY-MM-DD" a mediodía local para evitar drift por timezone
                        const parseCalendario = (val) => {
                          if (!val) return new Date();
                          const s = String(val).slice(0, 10);
                          return /^\d{4}-\d{2}-\d{2}$/.test(s) ? new Date(`${s}T12:00:00`) : new Date(val);
                        };
                        const fechaBase = parseCalendario(data.fecha_primera_cuota || data.fecha_solicitud);
                        const cuotasPorNum = {};
                        for (const item of detalle) {
                          if (!item.cant_cuotas || !item.monto_cuota) continue;
                          const cant = Number(item.cantidad || 1);
                          for (let n = 1; n <= item.cant_cuotas; n++) {
                            cuotasPorNum[n] = (cuotasPorNum[n] || 0) + Number(item.monto_cuota) * cant;
                          }
                        }
                        const nums = Object.keys(cuotasPorNum)
                          .map(Number)
                          .sort((a, b) => a - b);
                        let saldo = nums.reduce((s, n) => s + cuotasPorNum[n], 0);
                        return nums.map((n) => {
                          const fecha = new Date(fechaBase);
                          fecha.setDate(fecha.getDate() + intervaloDias * (n - 1));
                          return (
                            <TableRow key={n} hover>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, fontWeight: 600 }}>{n}</TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1 }}>{fmtFechaCalendario(fecha, "-")}</TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, fontWeight: 600 }} align="right">
                                {formatMoney(cuotasPorNum[n], moneda)}
                              </TableCell>
                              <TableCell sx={{ fontSize: "0.75rem", py: 0.5, px: 1, color: ((saldo -= cuotasPorNum[n]), saldo <= 0) ? "success.main" : "text.secondary" }} align="right">
                                {formatMoney(Math.max(0, saldo), moneda)}
                              </TableCell>
                            </TableRow>
                          );
                        });
                      })()}
                    </TableBody>
                  </Table>
                </Box>
              </Paper>
            )}
          </Grid>
        </Grid>

        {/* El formulario de rechazo se muestra en DialogActions */}

        {/* Factura relacionada */}
        {data.factura && (
          <Paper variant="outlined" sx={{ p: { xs: 1.5, sm: 2 }, mt: { xs: 1.5, sm: 2 } }}>
            <Typography variant="subtitle2" color="primary" gutterBottom>
              <Icon icon="mdi:receipt" width={18} style={{ verticalAlign: "middle", marginRight: 4 }} />
              Factura Generada
            </Typography>
            <Grid container spacing={{ xs: 1.5, sm: 2 }}>
              <Grid item xs={6} sm={4}>
                <InfoField label="Nro. Factura" value={data.factura.numero_factura} />
              </Grid>
              <Grid item xs={6} sm={4}>
                <InfoField label="Fecha" value={data.factura.fecha ? dayjs(data.factura.fecha).format("DD/MM/YYYY") : "-"} />
              </Grid>
            </Grid>
          </Paper>
        )}
      </DialogContent>

      {/* Acciones según estado */}
      <DialogActions sx={{ px: { xs: 2, sm: 3 }, py: 1.5 }}>
        {!["facturada", "cancelada"].includes(data.estado) && canCreate && (
          <Tooltip title="Cancelar solicitud">
            <Button size="small" color="error" startIcon={<Icon icon="mdi:cancel" width={18} />} onClick={() => cancelarMutation.mutate()} disabled={cancelarMutation.isPending}>
              Cancelar
            </Button>
          </Tooltip>
        )}
        {data.estado === "borrador" && canCreate && (
          <Button
            size="small"
            variant="contained"
            color="warning"
            startIcon={<Icon icon="mdi:send" width={18} />}
            onClick={() => enviarMutation.mutate()}
            disabled={enviarMutation.isPending || detalle.length === 0}
          >
            Enviar a Aprobación
          </Button>
        )}

        {data.estado === "pendiente_aprobacion" && canApprove && !showRechazo && (
          <>
            <Button size="small" color="error" startIcon={<Icon icon="mdi:close-circle" width={18} />} onClick={() => setShowRechazo(true)}>
              Rechazar
            </Button>
            <Button
              size="small"
              variant="contained"
              color="success"
              startIcon={<Icon icon="mdi:check-circle" width={18} />}
              onClick={() => aprobarMutation.mutate()}
              disabled={aprobarMutation.isPending}
            >
              Aprobar
            </Button>
          </>
        )}
        {showRechazo && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1, width: "100%" }}>
            <Typography variant="caption" fontWeight={600} color="error">
              Motivo de rechazo * — Será visible para el vendedor
            </Typography>
            <TextField
              fullWidth
              multiline
              rows={2}
              size="small"
              autoFocus
              placeholder="Ej: Cliente con cuotas vencidas, monto excede límite, documentación incompleta..."
              value={motivoRechazo}
              onChange={(e) => setMotivoRechazo(e.target.value)}
              helperText={`${motivoRechazo.length}/500`}
              inputProps={{ maxLength: 500 }}
            />
            <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}>
              <Button
                size="small"
                onClick={() => {
                  setShowRechazo(false);
                  setMotivoRechazo("");
                }}
              >
                Cancelar
              </Button>
              <Button size="small" variant="contained" color="error" disabled={!motivoRechazo.trim() || rechazarMutation.isPending} onClick={() => rechazarMutation.mutate()}>
                {rechazarMutation.isPending ? "Rechazando..." : "Confirmar Rechazo"}
              </Button>
            </Box>
          </Box>
        )}

        <Box sx={{ flex: 1 }} />
        <Button size="small" onClick={onClose}>
          Cerrar
        </Button>
      </DialogActions>
    </Dialog>
  );
}