/* eslint-disable -- temporary disable for development/testing purposes */


'use client';

import React, { useState ,useContext} from 'react';
import { Box, Button, Modal, TextField, Typography, CircularProgress,Alert } from '@mui/material';
import { UserContext } from '@/contexts/user-context';

interface BroadcastModalProps {
  open: boolean;
  onClose: () => void;
  userId: string;
}

export const BroadcastModal = ({ open, onClose, userId }: BroadcastModalProps) => {
  const [note, setNote] = useState('');
  const [loading, setLoading] = useState(false);
  const [response, setResponse] = useState('');
  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const companyId = loggedInUser?.companies?.find((c: any) => c.active)?.id;
  // const [alert, setAlert] = useState<{ type: 'success' | 'error'; message: string } | null>(null);


  const handleBroadcast = async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/broadcast`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            userId: userId,
          note: note || null,
          companyId:companyId
        }),
      });

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.message || 'Broadcast failed.');
      }

      setResponse(data.message || 'Broadcast successful!');

      setTimeout(() => {
        setResponse('');
        setNote('');
        onClose();
      }, 2000);
    } catch (err) {
      setResponse('Broadcast failed.');
    } finally {
      setLoading(false);
    }
  };

  return (
<Modal open={open} onClose={onClose}>
  <Box
    sx={{
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: 400,
      bgcolor: 'background.paper',
      borderRadius: 2,
      p: 4,
    }}
  >
    <Typography variant="h6" mb={2}>Broadcast</Typography>
    <TextField
      fullWidth
      label="Optional Note"
      multiline
      rows={3}
      value={note}
      onChange={(e) => setNote(e.target.value)}
    />
    <Box mt={2} display="flex" justifyContent="space-between">
      <Button onClick={onClose}>Cancel</Button>
      <Button variant="contained" onClick={handleBroadcast} disabled={loading}>
        {loading ? <CircularProgress size={20} /> : 'Broadcast'}
      </Button>
    </Box>

    {/* ✅ Show alert inside modal */}
    {response && (
      <Alert
        severity={response.includes('failed') ? 'error' : 'success'}
        sx={{ mt: 2 }}
      >
        {response}
      </Alert>
    )}
  </Box>
</Modal>
  );
};