import { Icon } from "@iconify/react";
import {
    Autocomplete,
    Box,
    Button,
    CircularProgress,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    TextField,
    Typography,
} 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 { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import { getEmpresaMonedas } from "../../../api/monedas.service";
import {
    anularLiquidacion,
    crearLiquidacion,
    getLiquidacionDetalle,
    getLiquidaciones,
    getResumenLiquidaciones,
    getVendedoresCobradores,
    marcarLiquidacionPagada,
} from "../../../api/vendedores-cobradores.service";
import { usePermission } from "../../../hooks/usePermission";
import { fmtFechaCalendario } from "../../../utils/fecha";
import { EmptyState, ScreenGuia } from "../../_standards";
import {
  ESTADO_LIQUIDACION,
  TIPO_BENEFICIARIO,
  TIPO_COMISION,
} from "../../_standards/enums/estados";
import { LiquidacionesPdfModal } from "./LiquidacionesPdfModal";

// ── Guía ────────────────────────────────────────────────────────────
const GUIA_PASOS = [
  {
    icon: "lucide:layers",
    color: "#3b82f6",
    titulo: "1. Comisiones se acumulan",
    desc: "Cada venta o cobro genera una comisión pendiente para el vendedor o cobrador asignado.",
  },
  {
    icon: "lucide:file-plus-2",
    color: "#f59e0b",
    titulo: "2. Crear liquidación",
    desc: "Elegí vendedor/cobrador y período. Las comisiones pendientes del período pasan a estado liquidada.",
  },
  {
    icon: "lucide:hand-coins",
    color: "#22c55e",
    titulo: "3. Marcar como pagada",
    desc: "Al pagar, se registra la fecha y se genera el asiento contable de cancelación del pasivo.",
  },
  {
    icon: "lucide:ban",
    color: "#ef4444",
    titulo: "4. Anular si corresponde",
    desc: "Si la liquidación se hizo mal, anular devuelve las comisiones a pendientes y revierte el asiento.",
  },
];
const GUIA_NOTAS = [
  { icon: "lucide:info", text: "El resumen filtra por moneda; cada moneda lleva su propio plan de cuentas." },
  { icon: "lucide:info", text: "Al crear la liquidación se genera el devengamiento (Gasto / Comisiones a Pagar)." },
  { icon: "lucide:info", text: "Al marcar como pagada se contabiliza la salida de caja." },
];

// ── Estado ──────────────────────────────────────────────────────────
const ESTADO_CONFIG = {
  [ESTADO_LIQUIDACION.PENDIENTE]: { icon: "lucide:clock",        color: "#f59e0b", label: "Pendiente" },
  [ESTADO_LIQUIDACION.PAGADA]:    { icon: "lucide:check-circle", color: "#22c55e", label: "Pagada"    },
  [ESTADO_LIQUIDACION.ANULADA]:   { icon: "lucide:ban",          color: "#94a3b8", label: "Anulada"   },
};

// ── Helpers ─────────────────────────────────────────────────────────
const formatCurrency = (value, moneda = null) => {
  const codigo = moneda?.codigo || "PYG";
  const simbolo = moneda?.simbolo || "Gs.";
  const formatted = new Intl.NumberFormat("es-PY", {
    minimumFractionDigits: codigo === "PYG" ? 0 : 2,
    maximumFractionDigits: codigo === "PYG" ? 0 : 2,
  }).format(value || 0);
  return `${simbolo} ${formatted}`;
};

// ── Styled Components (canónico: RendicionesPanel) ──────────────────
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  .title {
    font-size: 1.1rem;
    font-weight: 700;
    color: ${(p) => p.theme.text};
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
`;
const FilterRow = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  label {
    font-size: 0.75rem;
    font-weight: 600;
    color: ${(p) => p.theme.textSecondary};
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  select {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    color: ${(p) => p.theme.text};
    font-size: 0.85rem;
    outline: none;
    font-family: inherit;
    min-width: 220px;
    &:focus {
      border-color: ${(p) => p.theme.primary};
      box-shadow: 0 0 0 3px ${(p) => p.theme.primary}20;
    }
  }
`;
const KpiGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
`;
const KpiCard = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: ${(p) => p.theme.bg2};
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .ident {
    min-width: 0;
    .tipo {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: ${(p) => p.theme.textSecondary};
    }
    .nombre {
      font-size: 0.95rem;
      font-weight: 700;
      color: ${(p) => p.theme.text};
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cod {
      font-size: 0.72rem;
      color: ${(p) => p.theme.textSecondary};
    }
  }
  .icon-box {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    background: ${(p) => p.theme.primary}15;
    color: ${(p) => p.theme.primary};
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
  }
  /* Una fila por cifra (etiqueta a la izquierda, monto a la derecha). Dos
     columnas con nowrap se pisaban en cuanto el monto pasaba de 7 dígitos. */
  .stats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid ${(p) => p.theme.borderColor};
    padding-top: 0.5rem;
  }
  .stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    .label {
      flex-shrink: 0;
      font-size: 0.68rem;
      text-transform: uppercase;
      font-weight: 600;
      color: ${(p) => p.theme.textSecondary};
      letter-spacing: 0.04em;
      .cant { text-transform: none; letter-spacing: 0; }
    }
    .value {
      font-size: 0.88rem;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    &.warn .value { color: #f59e0b; }
    &.ok .value { color: #22c55e; }
  }
`;
const SectionBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  .title {
    font-size: 1rem;
    font-weight: 700;
    color: ${(p) => p.theme.text};
  }
  .actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
`;
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.35rem;
  border: none;
  background: ${(p) => p.theme.primary};
  color: #fff;
  &:hover { opacity: 0.88; }
  &:disabled { opacity: 0.45; cursor: not-allowed; }
`;
const OutlineBtn = 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.35rem;
  background: transparent;
  color: ${(p) => p.theme.text};
  border: 1px solid ${(p) => p.theme.borderColor};
  &:hover { background: ${(p) => p.theme.bgAlpha}; }
`;
const DataTable = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  overflow: hidden;
  background: ${(p) => p.theme.bg2};
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    th, td {
      padding: 0.65rem 0.85rem;
      text-align: left;
    }
    th {
      background: ${(p) => p.theme.bg6};
      font-weight: 700;
      color: ${(p) => p.theme.textSecondary};
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    tbody tr {
      border-bottom: 1px solid ${(p) => p.theme.borderColor};
      transition: background 0.12s;
      &:hover { background: ${(p) => p.theme.bgAlpha}; }
      &:last-child { border-bottom: none; }
    }
    .right { text-align: right; }
    .center { text-align: center; }
    .bold { font-weight: 700; }
    .nombre { font-weight: 600; color: ${(p) => p.theme.text}; }
    .sub { font-size: 0.72rem; color: ${(p) => p.theme.textSecondary}; text-transform: capitalize; }
  }
`;
const Badge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: ${(p) => p.$color};
  background: ${(p) => p.$color}14;
  border: 1px solid ${(p) => p.$color}30;
  white-space: nowrap;
`;
const ActionIcon = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  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};
    color: ${(p) => p.$color || p.theme.text};
  }
`;
const LoadingRow = styled.div`
  padding: 2rem;
  display: flex;
  justify-content: center;
  color: ${(p) => p.theme.textSecondary};
`;
const Subhead = styled.div`
  font-size: 0.9rem;
  font-weight: 700;
  color: ${(p) => p.theme.text};
  margin-bottom: 0.25rem;
`;

// ── Panel principal ─────────────────────────────────────────────────
export const LiquidacionesPanel = ({ canLiquidar = false }) => {
  const queryClient = useQueryClient();
  const [openCrear, setOpenCrear] = useState(false);
  const [openDetalle, setOpenDetalle] = useState(false);
  const [selectedLiquidacion, setSelectedLiquidacion] = useState(null);
  const [filterVendedor, setFilterVendedor] = useState(null);
  const [filterMoneda, setFilterMoneda] = useState("");
  const [pdfLista, setPdfLista] = useState(false);
  const [pdfLiquidacionId, setPdfLiquidacionId] = useState(null);

  const { data: monedas } = useQuery({
    queryKey: ["empresa-monedas"],
    queryFn: getEmpresaMonedas,
  });

  useEffect(() => {
    if (monedas?.length > 0 && !filterMoneda) {
      const principal = monedas.find((m) => m.es_principal);
      if (principal) setFilterMoneda(principal.moneda?.id || principal.id);
      else if (monedas[0]) setFilterMoneda(monedas[0].moneda?.id || monedas[0].id);
    }
  }, [monedas, filterMoneda]);

  const { data: resumen = [], isLoading: loadingResumen } = useQuery({
    queryKey: ["resumen-liquidaciones", filterMoneda],
    queryFn: () => getResumenLiquidaciones({ monedaId: filterMoneda || undefined }),
  });

  const { data: liquidaciones = [], isLoading: loadingLiquidaciones } = useQuery({
    queryKey: ["liquidaciones", filterVendedor?.id],
    queryFn: () => getLiquidaciones({ vendedor_cobrador_id: filterVendedor?.id }),
  });

  const { data: vendedores = [] } = useQuery({
    queryKey: ["vendedores-cobradores-all"],
    queryFn: () => getVendedoresCobradores({ active: true }),
  });

  const monedaSeleccionada = useMemo(() => {
    const m = monedas?.find((x) => (x.moneda?.id || x.id) === filterMoneda);
    return m?.moneda || m || null;
  }, [monedas, filterMoneda]);

  return (
    <Wrapper>
      <ScreenGuia
        titulo="¿Cómo funciona la liquidación de comisiones?"
        intro="Las comisiones pendientes de vendedores y cobradores se agrupan en liquidaciones por período. Al pagar, se genera el asiento contable correspondiente."
        pasos={GUIA_PASOS}
        notas={GUIA_NOTAS}
      />

      <Header>
        <div className="title">
          <Icon icon="lucide:hand-coins" />
          Liquidación de Comisiones
        </div>
        <div style={{ display: "flex", gap: "0.5rem" }}>
          <OutlineBtn onClick={() => setPdfLista(true)}>
            <Icon icon="lucide:file-text" /> PDF Historial
          </OutlineBtn>
          {canLiquidar && (
            <PrimaryBtn onClick={() => setOpenCrear(true)}>
              <Icon icon="lucide:plus" /> Nueva liquidación
            </PrimaryBtn>
          )}
        </div>
      </Header>

      <FilterRow>
        <label>Moneda</label>
        <select
          value={filterMoneda}
          onChange={(e) => setFilterMoneda(e.target.value)}
        >
          {monedas?.map((m) => (
            <option key={m.moneda?.id || m.id} value={m.moneda?.id || m.id}>
              {m.moneda?.codigo || m.codigo} — {m.moneda?.descripcion || m.descripcion}
            </option>
          ))}
        </select>
      </FilterRow>

      <div>
        <Subhead>Resumen de comisiones pendientes</Subhead>
        {loadingResumen ? (
          <LoadingRow><CircularProgress size={22} /></LoadingRow>
        ) : resumen.length === 0 ? (
          <EmptyState
            icon="lucide:wallet"
            title="No hay comisiones pendientes"
            description="Cuando se generen comisiones por ventas o cobros, aparecerán acá agrupadas por vendedor/cobrador."
            compact
          />
        ) : (
          <KpiGrid>
            {resumen.map((item) => (
              <KpiCard key={item.id}>
                <div className="head">
                  <div className="ident">
                    <div className="tipo">
                      {item.tipo === TIPO_BENEFICIARIO.VENDEDOR
                        ? "Vendedor"
                        : item.tipo === TIPO_BENEFICIARIO.COBRADOR
                          ? "Cobrador"
                          : "Vendedor/Cobrador"}
                    </div>
                    <div className="nombre" title={item.nombre}>{item.nombre}</div>
                    {item.codigo && <div className="cod">Código: {item.codigo}</div>}
                  </div>
                  <div className="icon-box">
                    <Icon icon="lucide:badge-percent" />
                  </div>
                </div>
                <div className="stats">
                  <div className={`stat ${(item.comisiones_pendientes?.cantidad || 0) > 0 ? "warn" : ""}`}>
                    <div className="label">
                      Pendientes <span className="cant">· {item.comisiones_pendientes?.cantidad || 0}</span>
                    </div>
                    <div className="value">{formatCurrency(item.comisiones_pendientes?.monto || 0, item.moneda)}</div>
                  </div>
                  <div className="stat ok">
                    <div className="label">
                      Liquidadas <span className="cant">· {item.comisiones_liquidadas?.cantidad || 0}</span>
                    </div>
                    <div className="value">{formatCurrency(item.comisiones_liquidadas?.monto || 0, item.moneda)}</div>
                  </div>
                </div>
              </KpiCard>
            ))}
          </KpiGrid>
        )}
      </div>

      <SectionBar>
        <div className="title">Historial de liquidaciones</div>
        <div className="actions">
          <Autocomplete
            size="small"
            sx={{ width: 260 }}
            options={vendedores}
            getOptionLabel={(option) => `${option.nombre} ${option.apellido || ""}`.trim()}
            value={filterVendedor}
            onChange={(_, newValue) => setFilterVendedor(newValue)}
            renderInput={(params) => <TextField {...params} label="Filtrar por vendedor" />}
          />
        </div>
      </SectionBar>

      {loadingLiquidaciones ? (
        <LoadingRow><CircularProgress size={22} /></LoadingRow>
      ) : liquidaciones.length === 0 ? (
        <EmptyState
          icon="lucide:file-x"
          title="Sin liquidaciones registradas"
          description="Creá una nueva liquidación para agrupar las comisiones pendientes de un vendedor o cobrador."
          ctaLabel={canLiquidar ? "Nueva liquidación" : undefined}
          onCta={canLiquidar ? () => setOpenCrear(true) : undefined}
          ctaIcon="lucide:plus"
        />
      ) : (
        <DataTable>
          <table>
            <thead>
              <tr>
                <th>Beneficiario</th>
                <th className="center">Origen</th>
                <th>Período</th>
                <th className="right">Facturas</th>
                <th className="right">Total</th>
                <th className="center">Estado</th>
                <th>Fecha de pago</th>
                <th className="center">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {liquidaciones.map((liq) => {
                const estado = ESTADO_CONFIG[liq.estado] || ESTADO_CONFIG[ESTADO_LIQUIDACION.PENDIENTE];
                const esSupervisor = liq.tipo === TIPO_BENEFICIARIO.SUPERVISOR;
                return (
                  <tr key={liq.id}>
                    <td>
                      <div className="nombre">{liq.vendedor_cobrador?.nombre}</div>
                      <div className="sub">{liq.vendedor_cobrador?.tipo}</div>
                    </td>
                    <td className="center">
                      <Badge $color={esSupervisor ? "#a855f7" : "#3b82f6"}>
                        <Icon icon={esSupervisor ? "lucide:shield-check" : "lucide:user"} />
                        {esSupervisor ? "Supervisor" : "Vendedor"}
                      </Badge>
                    </td>
                    <td>
                      {fmtFechaCalendario(liq.periodo_desde)} — {fmtFechaCalendario(liq.periodo_hasta)}
                    </td>
                    <td className="right">{esSupervisor ? "—" : liq.cantidad_facturas}</td>
                    <td className="right bold">{formatCurrency(liq.total_comisiones, monedaSeleccionada)}</td>
                    <td className="center">
                      <Badge $color={estado.color}>
                        <Icon icon={estado.icon} /> {estado.label}
                      </Badge>
                    </td>
                    <td>{liq.fecha_pago ? fmtFechaCalendario(liq.fecha_pago) : "—"}</td>
                    <td className="center">
                      <ActionIcon
                        title="Ver detalle"
                        onClick={() => { setSelectedLiquidacion(liq); setOpenDetalle(true); }}
                      >
                        <Icon icon="lucide:eye" />
                      </ActionIcon>
                      <ActionIcon
                        title="Comprobante PDF"
                        $color="#ef4444"
                        onClick={() => setPdfLiquidacionId(liq.id)}
                      >
                        <Icon icon="lucide:file-text" />
                      </ActionIcon>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </DataTable>
      )}

      <CrearLiquidacionDialog
        open={openCrear}
        onClose={() => setOpenCrear(false)}
        vendedores={vendedores}
        onSuccess={() => {
          queryClient.invalidateQueries(["liquidaciones"]);
          queryClient.invalidateQueries(["resumen-liquidaciones"]);
        }}
      />

      <DetalleLiquidacionDialog
        open={openDetalle}
        onClose={() => { setOpenDetalle(false); setSelectedLiquidacion(null); }}
        liquidacion={selectedLiquidacion}
        moneda={monedaSeleccionada}
        onSuccess={() => {
          queryClient.invalidateQueries(["liquidaciones"]);
          queryClient.invalidateQueries(["resumen-liquidaciones"]);
        }}
        onPdf={(id) => setPdfLiquidacionId(id)}
      />

      <LiquidacionesPdfModal
        open={pdfLista}
        onClose={() => setPdfLista(false)}
        modo="lista"
        filtros={{
          vendedor_cobrador_id: filterVendedor?.id || undefined,
          moneda_id: filterMoneda || undefined,
        }}
      />

      <LiquidacionesPdfModal
        open={!!pdfLiquidacionId}
        onClose={() => setPdfLiquidacionId(null)}
        modo="individual"
        liquidacionId={pdfLiquidacionId}
      />
    </Wrapper>
  );
};

// ── Crear Liquidación Dialog ────────────────────────────────────────
const CrearLiquidacionDialog = ({ open, onClose, vendedores, onSuccess }) => {
  const [vendedor, setVendedor] = useState(null);
  const [periodoDesde, setPeriodoDesde] = useState(dayjs().startOf("month"));
  const [periodoHasta, setPeriodoHasta] = useState(dayjs());
  const [observaciones, setObservaciones] = useState("");

  const mutation = useMutation({
    mutationFn: crearLiquidacion,
    onSuccess: () => {
      toast.success("Liquidación creada exitosamente");
      onSuccess();
      handleClose();
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al crear liquidación");
    },
  });

  const handleClose = () => {
    setVendedor(null);
    setPeriodoDesde(dayjs().startOf("month"));
    setPeriodoHasta(dayjs());
    setObservaciones("");
    onClose();
  };

  const handleSubmit = () => {
    if (!vendedor) {
      toast.error("Seleccioná un vendedor/cobrador");
      return;
    }
    mutation.mutate({
      vendedor_cobrador_id: vendedor.id,
      periodo_desde: periodoDesde.format("YYYY-MM-DD"),
      periodo_hasta: periodoHasta.format("YYYY-MM-DD"),
      observaciones,
    });
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Icon icon="lucide:file-plus-2" width={20} />
        Nueva liquidación de comisiones
      </DialogTitle>
      <DialogContent>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}>
          <Autocomplete
            options={vendedores}
            getOptionLabel={(option) => `${option.nombre} ${option.apellido || ""}`.trim()}
            value={vendedor}
            onChange={(_, newValue) => setVendedor(newValue)}
            renderInput={(params) => <TextField {...params} label="Vendedor / Cobrador" required size="small" />}
            renderOption={(props, option) => (
              <li {...props}>
                <Box>
                  <Typography variant="body2" fontWeight={600}>
                    {`${option.nombre} ${option.apellido || ""}`.trim()}
                  </Typography>
                  <Typography variant="caption" color="text.secondary">
                    {option.tipo}{option.codigo ? ` · ${option.codigo}` : ""}
                  </Typography>
                </Box>
              </li>
            )}
          />
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Box sx={{ display: "flex", gap: 2 }}>
              <DatePicker
                label="Desde"
                value={periodoDesde}
                onChange={setPeriodoDesde}
                slotProps={{ textField: { fullWidth: true, size: "small" } }}
              />
              <DatePicker
                label="Hasta"
                value={periodoHasta}
                onChange={setPeriodoHasta}
                slotProps={{ textField: { fullWidth: true, size: "small" } }}
              />
            </Box>
          </LocalizationProvider>
          <TextField
            label="Observaciones"
            size="small"
            multiline
            rows={2}
            value={observaciones}
            onChange={(e) => setObservaciones(e.target.value)}
            helperText="Opcional — útil para identificar la liquidación más adelante"
          />
        </Box>
      </DialogContent>
      <DialogActions sx={{ px: 3, py: 2 }}>
        <Button onClick={handleClose} color="inherit">Cancelar</Button>
        <Button
          variant="contained"
          onClick={handleSubmit}
          disabled={mutation.isPending}
          startIcon={mutation.isPending ? <CircularProgress size={16} color="inherit" /> : <Icon icon="lucide:check" />}
        >
          Crear liquidación
        </Button>
      </DialogActions>
    </Dialog>
  );
};

// ── Detalle Liquidación Dialog ──────────────────────────────────────
const DetalleSection = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
  .cell {
    background: ${(p) => p.theme.bg6};
    border: 1px solid ${(p) => p.theme.borderColor};
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    .label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: ${(p) => p.theme.textSecondary};
    }
    .value {
      font-size: 0.95rem;
      font-weight: 700;
      color: ${(p) => p.theme.text};
    }
    &.primary .value { color: ${(p) => p.theme.primary}; }
  }
`;

const DetalleLiquidacionDialog = ({ open, onClose, liquidacion, moneda, onSuccess, onPdf }) => {
  const [detalle, setDetalle] = useState(null);
  const [loading, setLoading] = useState(false);
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const canAnular = canCobranzas("COB_COM_LIQUIDACION_ANULAR");
  const canPagar = canCobranzas("COB_COM_LIQUIDACION_PAGAR");

  const pagarMutation = useMutation({
    mutationFn: () => marcarLiquidacionPagada(liquidacion?.id),
    onSuccess: () => {
      toast.success("Liquidación marcada como pagada");
      onSuccess();
      onClose();
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al marcar como pagada");
    },
  });

  const anularMutation = useMutation({
    mutationFn: () => anularLiquidacion(liquidacion?.id),
    onSuccess: () => {
      toast.success("Liquidación anulada");
      onSuccess();
      onClose();
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al anular");
    },
  });

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      if (!open || !liquidacion?.id) return;
      setLoading(true);
      try {
        const data = await getLiquidacionDetalle(liquidacion.id);
        if (!cancelled) setDetalle(data);
      } catch {
        toast.error("Error al cargar detalle");
      } finally {
        if (!cancelled) setLoading(false);
      }
    };
    load();
    return () => { cancelled = true; };
  }, [open, liquidacion?.id]);

  if (!liquidacion) return null;
  const estado = ESTADO_CONFIG[liquidacion.estado] || ESTADO_CONFIG[ESTADO_LIQUIDACION.PENDIENTE];

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1 }}>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="lucide:file-text" width={20} />
          Detalle de liquidación
        </Box>
        <Badge $color={estado.color}>
          <Icon icon={estado.icon} /> {estado.label}
        </Badge>
      </DialogTitle>
      <DialogContent>
        {loading ? (
          <LoadingRow><CircularProgress size={22} /></LoadingRow>
        ) : (
          <Box>
            <DetalleSection>
              <div className="cell">
                <div className="label">Vendedor / Cobrador</div>
                <div className="value">
                  {detalle?.vendedor_cobrador?.nombre || liquidacion.vendedor_cobrador?.nombre}
                </div>
              </div>
              <div className="cell">
                <div className="label">Período</div>
                <div className="value" style={{ fontSize: "0.85rem" }}>
                  {fmtFechaCalendario(liquidacion.periodo_desde)} — {fmtFechaCalendario(liquidacion.periodo_hasta)}
                </div>
              </div>
              <div className="cell primary">
                <div className="label">Total comisiones</div>
                <div className="value">{formatCurrency(liquidacion.total_comisiones, moneda)}</div>
              </div>
              <div className="cell">
                <div className="label">Facturas</div>
                <div className="value">{liquidacion.cantidad_facturas}</div>
              </div>
            </DetalleSection>

            {detalle?.comisiones?.length > 0 ? (
              <>
                <Subhead style={{ marginBottom: "0.5rem" }}>
                  Detalle de comisiones ({detalle.comisiones.length})
                </Subhead>
                <DataTable>
                  <table>
                    <thead>
                      <tr>
                        <th>Factura</th>
                        <th>Cliente</th>
                        <th>Tipo</th>
                        <th className="right">Base</th>
                        <th className="right">Comisión</th>
                      </tr>
                    </thead>
                    <tbody>
                      {detalle.comisiones.map((com) => (
                        <tr key={com.id}>
                          <td>{com.factura?.numero || "—"}</td>
                          <td>{com.factura?.cliente || "—"}</td>
                          <td>
                            <Badge $color={com.tipo === TIPO_COMISION.VENTA ? "#3b82f6" : "#a855f7"}>
                              <Icon icon={com.tipo === TIPO_COMISION.VENTA ? "lucide:shopping-cart" : "lucide:hand-coins"} />
                              {com.tipo}
                            </Badge>
                          </td>
                          <td className="right">{formatCurrency(com.monto_base, moneda)}</td>
                          <td className="right bold">{formatCurrency(com.monto_comision, moneda)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </DataTable>
              </>
            ) : (
              <EmptyState
                icon="lucide:inbox"
                title="Sin comisiones en esta liquidación"
                compact
              />
            )}
          </Box>
        )}
      </DialogContent>
      <DialogActions sx={{ px: 3, py: 2, gap: 1 }}>
        <Button
          startIcon={<Icon icon="lucide:file-text" />}
          onClick={() => onPdf?.(liquidacion.id)}
        >
          Comprobante PDF
        </Button>
        <Box sx={{ flex: 1 }} />
        {canAnular && liquidacion.estado !== ESTADO_LIQUIDACION.ANULADA && (
          <Button
            color="error"
            startIcon={<Icon icon="lucide:ban" />}
            onClick={() => anularMutation.mutate()}
            disabled={
              anularMutation.isPending ||
              (liquidacion.estado === ESTADO_LIQUIDACION.PAGADA &&
                liquidacion.tipo !== TIPO_BENEFICIARIO.SUPERVISOR)
            }
          >
            Anular
          </Button>
        )}
        {canPagar &&
          liquidacion.estado === ESTADO_LIQUIDACION.PENDIENTE &&
          liquidacion.tipo !== TIPO_BENEFICIARIO.SUPERVISOR && (
          <Button
            variant="contained"
            color="success"
            startIcon={<Icon icon="lucide:check" />}
            onClick={() => pagarMutation.mutate()}
            disabled={pagarMutation.isPending}
          >
            Marcar como pagada
          </Button>
        )}
        <Button onClick={onClose} color="inherit">Cerrar</Button>
      </DialogActions>
    </Dialog>
  );
};

export default LiquidacionesPanel;