import { Icon } from "@iconify/react";
import { Box, Button, Chip, Paper, Typography } from "@mui/material";

/**
 * Barra sticky que aparece cuando el usuario selecciona uno o más documentos
 * reenviables a SIFEN (Pendiente / Rechazado / Error). Se usa tanto en
 * `FacturasTab` como en `NotasCreditoTab` para mantener la UX consistente.
 *
 * Props:
 *  - selectedCount: cantidad de items seleccionados.
 *  - rechazadosCount: subset que son rechazados (para mensaje contextual).
 *  - entityLabel: `"factura"` | `"nota de crédito"`.
 *  - canSend: si el usuario tiene permiso.
 *  - sending: mientras la mutación está en flight.
 *  - onSend / onCancel: callbacks.
 */
export function SifenSelectionBar({
  selectedCount,
  rechazadosCount = 0,
  entityLabel = "documento",
  canSend,
  sending,
  onSend,
  onCancel,
}) {
  if (!selectedCount) return null;

  const plural = selectedCount === 1 ? "" : "s";
  const labelPlural = entityLabel + plural;

  const btnLabel = !canSend
    ? "Sin permiso"
    : sending
      ? "Enviando…"
      : rechazadosCount > 0
        ? `Reenviar ${selectedCount} ${labelPlural}`
        : `Enviar ${selectedCount} ${labelPlural}`;

  return (
    <Paper
      elevation={2}
      sx={{
        p: 1.5,
        mb: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 1.5,
        flexWrap: "wrap",
        bgcolor: (theme) =>
          theme.palette.mode === "dark"
            ? "rgba(59, 130, 246, 0.12)"
            : "rgba(59, 130, 246, 0.08)",
        border: 1,
        borderColor: "primary.main",
        borderRadius: 2,
        position: "sticky",
        top: 0,
        zIndex: 3,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
        <Icon icon="mdi:check-circle" width={20} color="#3b82f6" />
        <Box sx={{ minWidth: 0 }}>
          <Typography variant="body2" fontWeight={700} color="primary.main">
            {selectedCount} {labelPlural} seleccionada{plural}
          </Typography>
          {rechazadosCount > 0 && (
            <Typography variant="caption" color="warning.main" sx={{ display: "block", mt: 0.25 }}>
              <Icon
                icon="mdi:alert-circle-outline"
                width={12}
                style={{ verticalAlign: "middle", marginRight: 3 }}
              />
              {rechazadosCount === selectedCount
                ? `Todas son reenvíos de rechazos SIFEN — verificá que los datos ya estén corregidos.`
                : `${rechazadosCount} de ${selectedCount} son reenvíos de rechazos SIFEN.`}
            </Typography>
          )}
        </Box>
      </Box>

      <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
        <Chip
          size="small"
          variant="outlined"
          label="Cancelar selección"
          onClick={onCancel}
          onDelete={onCancel}
          sx={{ cursor: "pointer" }}
        />
        <Button
          variant="contained"
          color={rechazadosCount > 0 ? "warning" : "success"}
          size="small"
          startIcon={
            <Icon
              icon={sending ? "mdi:loading" : rechazadosCount > 0 ? "mdi:reload" : "mdi:send"}
              width={16}
              style={sending ? { animation: "spin 1s linear infinite" } : undefined}
            />
          }
          onClick={onSend}
          disabled={sending || !canSend}
          sx={{ textTransform: "none", fontWeight: 700 }}
        >
          {btnLabel}
        </Button>
      </Box>
    </Paper>
  );
}