import { useEffect, useState } from "react";
import {
  Alert,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { toast } from "sonner";
import { cancelarPromesa } from "../../../api/cobranzas.service";
import { fmtMoneda } from "../../../components/_standards/enums/monedas";

export function CancelarPromesaModal({ open, onClose, promesa, onSuccess }) {
  const [motivo, setMotivo] = useState("");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (open) {
      setMotivo("");
      setSaving(false);
    }
  }, [open]);

  const handleSubmit = async () => {
    if (!motivo.trim()) {
      toast.error("Indicá el motivo de la cancelación");
      return;
    }
    setSaving(true);
    try {
      await cancelarPromesa(promesa.id, { motivo: motivo.trim() });
      toast.success("Promesa cancelada");
      onSuccess?.();
      onClose?.();
    } catch (e) {
      toast.error(e?.response?.data?.message || "No se pudo cancelar");
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open={open} onClose={saving ? undefined : onClose} maxWidth="sm" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Icon icon="mdi:close-circle-outline" color="#ef4444" />
        Cancelar promesa de pago
      </DialogTitle>
      <DialogContent dividers>
        <Stack spacing={2} sx={{ pt: 1 }}>
          <Alert severity="warning">
            La promesa quedará en estado <strong>cancelada</strong> y dejará de
            aparecer en el cashflow proyectado. El motivo se registra para
            auditoría.
          </Alert>
          {promesa && (
            <Typography variant="body2" color="text.secondary">
              Cliente: <strong>{promesa.cliente?.personas?.razon_social || promesa.cliente?.nombre_fantasia || "—"}</strong>
              {" · "}Monto: <strong>{fmtMoneda(promesa.monto_prometido, promesa.factura?.moneda?.codigo || "PYG")}</strong>
            </Typography>
          )}
          <TextField
            label="Motivo de la cancelación"
            value={motivo}
            onChange={(e) => setMotivo(e.target.value)}
            multiline
            minRows={3}
            fullWidth
            required
            placeholder="Ej: el cliente desistió, error de carga, factura ya pagada por otra vía..."
          />
        </Stack>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={saving}>Volver</Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          color="error"
          disabled={saving || !motivo.trim()}
          startIcon={<Icon icon="mdi:close-circle" />}
        >
          {saving ? "Cancelando..." : "Cancelar promesa"}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default CancelarPromesaModal;