// frontend/src/components/EditarTitularModal.tsx

import { useEffect, useState } from 'react';
import { Modal, Box, Typography, TextField, Button } from '@mui/material';
import type { Titular } from '../types';

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  boxShadow: 24,
  p: 4,
};

interface Props {
  open: boolean;
  onClose: () => void;
  onSave: (id: number, texto: string, viñeta: string) => void;
  titular: Titular | null;
}

const EditarTitularModal = ({ open, onClose, onSave, titular }: Props) => {
  const [texto, setTexto] = useState('');
  const [viñeta, setViñeta] = useState('');

  // Este efecto actualiza el estado del formulario cuando se selecciona un titular para editar
  useEffect(() => {
    if (titular) {
      setTexto(titular.texto);
      setViñeta(titular.viñeta ?? '•'); // Default a '•' si es nulo
    }
  }, [titular]);

  const handleSave = () => {
    if (titular && texto.trim()) {
      onSave(titular.id, texto.trim(), viñeta.trim());
      onClose();
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={style}>
        <Typography variant="h6" component="h2">Editar Titular</Typography>
        <TextField
          fullWidth autoFocus margin="normal" label="Texto del titular"
          value={texto} onChange={(e) => setTexto(e.target.value)}
        />
        <TextField
          fullWidth margin="normal" label="Viñeta (ej: •, !, o dejar vacío)"
          value={viñeta} onChange={(e) => setViñeta(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
        />
        <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
          <Button onClick={onClose} sx={{ mr: 1 }}>Cancelar</Button>
          <Button variant="contained" onClick={handleSave}>Guardar Cambios</Button>
        </Box>
      </Box>
    </Modal>
  );
};

export default EditarTitularModal;