import { useEffect, useState } from 'react';
import { Alert, Box, CircularProgress, Typography } from '@mui/material';
import { useParams } from 'react-router-dom';
import { MovimentoFixoForm } from '../components/MovimentoFixoForm';
import { buscarMovimentoFixoPorId } from '../services/movimentosFixosService';
import type { MovimentoFixo } from '../types/movimentoFixoTypes';

export function EditarMovimentoFixoPage() {
  const { id } = useParams();

  const [movimentoFixo, setMovimentoFixo] = useState<MovimentoFixo | null>(null);
  const [loading, setLoading] = useState(true);
  const [erro, setErro] = useState('');

  useEffect(() => {
    async function carregarMovimentoFixo() {
      try {
        setLoading(true);
        setErro('');

        const movimentoFixoId = Number(id);

        if (!movimentoFixoId) {
          setErro('ID do movimento fixo inválido.');
          return;
        }

        const data = await buscarMovimentoFixoPorId(movimentoFixoId);
        setMovimentoFixo(data);
      } catch (error: any) {
        const message =
          error?.response?.data?.message ||
          'Não foi possível carregar o movimento fixo.';

        setErro(message);
      } finally {
        setLoading(false);
      }
    }

    carregarMovimentoFixo();
  }, [id]);

  if (loading) {
    return (
      <Box padding={3} display="flex" alignItems="center" gap={2}>
        <CircularProgress size={22} />
        <Typography>Carregando movimento fixo...</Typography>
      </Box>
    );
  }

  if (erro) {
    return (
      <Box padding={3}>
        <Alert severity="error">{erro}</Alert>
      </Box>
    );
  }

  return <MovimentoFixoForm mode="edit" initialData={movimentoFixo} />;
}