import React, { useState, useEffect } from 'react';
import {
  Modal, Box, Typography, TextField, Button, CircularProgress, Alert
} from '@mui/material';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import type { ReabrirCierreDto } from '../../../models/dtos/Contables/ReabrirCierreDto';
import type { CierreCuentaCorrienteDto } from '../../../models/dtos/Contables/CierreCuentaCorrienteDto';

const modalStyle = {
  position: 'absolute' as const,
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: { xs: '90%', sm: 560 },
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
  maxHeight: '90vh',
  overflowY: 'auto'
};

const MIN_LEN = 10;
const MAX_LEN = 500;

interface ReabrirCierreModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (idCierre: number, data: ReabrirCierreDto) => Promise<CierreCuentaCorrienteDto>;
  cierre: CierreCuentaCorrienteDto | null;
  errorMessage?: string | null;
  clearErrorMessage: () => void;
}

const ReabrirCierreModal: React.FC<ReabrirCierreModalProps> = ({
  open,
  onClose,
  onSubmit,
  cierre,
  errorMessage,
  clearErrorMessage
}) => {
  const [justificacion, setJustificacion] = useState<string>('');
  const [loading, setLoading] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);

  useEffect(() => {
    if (open) {
      setJustificacion('');
      setLocalError(null);
      clearErrorMessage();
    }
  }, [open, clearErrorMessage]);

  const justifTrimLen = justificacion.trim().length;
  const submitDisabled = loading || justifTrimLen < MIN_LEN || justifTrimLen > MAX_LEN;

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!cierre) return;
    if (justifTrimLen < MIN_LEN) {
      setLocalError(`La justificación debe tener al menos ${MIN_LEN} caracteres.`);
      return;
    }
    if (justifTrimLen > MAX_LEN) {
      setLocalError(`La justificación no puede superar ${MAX_LEN} caracteres.`);
      return;
    }

    setLocalError(null);
    clearErrorMessage();
    setLoading(true);
    try {
      await onSubmit(cierre.idCierre, { justificacion: justificacion.trim() });
      onClose();
    } catch (err) {
      console.error('Error al reabrir cierre:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={modalStyle}>
        <Typography variant="h6" component="h2" gutterBottom>
          Reabrir Cierre de Cuenta Corriente
        </Typography>

        <Alert severity="warning" icon={<WarningAmberIcon />} sx={{ mb: 2 }}>
          <strong>ATENCIÓN:</strong> estás por reabrir un cierre. Esta acción quedará registrada en auditoría.
          Solo se puede reabrir el último cierre vigente. Si hay cierres posteriores, primero hay que reabrirlos a ellos.
        </Alert>

        {cierre && (
          <Box sx={{ mb: 2, p: 1.5, bgcolor: 'grey.100', borderRadius: 1 }}>
            <Typography variant="body2"><strong>Distribuidor:</strong> {cierre.nombreDistribuidor}</Typography>
            <Typography variant="body2"><strong>Empresa:</strong> {cierre.nombreEmpresa}</Typography>
            <Typography variant="body2"><strong>Fecha de Corte:</strong> {cierre.fechaCorte}</Typography>
            <Typography variant="body2">
              <strong>Saldo del Cierre:</strong>{' '}
              {cierre.saldoCierre.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' })}
            </Typography>
          </Box>
        )}

        <Box component="form" onSubmit={handleSubmit}>
          <TextField
            label="Justificación de la reapertura"
            value={justificacion}
            onChange={(e) => { setJustificacion(e.target.value); if (localError) setLocalError(null); }}
            required
            multiline
            rows={4}
            fullWidth
            margin="dense"
            error={!!localError}
            helperText={
              localError ||
              `Mínimo ${MIN_LEN} caracteres — ${justifTrimLen}/${MAX_LEN}`
            }
            inputProps={{ maxLength: MAX_LEN }}
            disabled={loading}
          />

          {errorMessage && <Alert severity="error" sx={{ mt: 2 }}>{errorMessage}</Alert>}

          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            <Button onClick={onClose} color="secondary" disabled={loading}>Cancelar</Button>
            <Button type="submit" variant="contained" color="warning" disabled={submitDisabled}>
              {loading ? <CircularProgress size={24} /> : 'Confirmar Reapertura'}
            </Button>
          </Box>
        </Box>
      </Box>
    </Modal>
  );
};

export default ReabrirCierreModal;
