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

'use client';

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

interface AssignModalProps {
  open: boolean;
  onClose: () => void;
  userId: string;
  type: 'provider' | 'manager';
}

interface Option {
  id?: string;
  _id?: string;
  name: string;
  active?: boolean;
}
interface Company {
  id: number; // number, as per the error
  active: boolean;
  // ...other fields
}

export function AssignModal({ open, onClose, userId, type }: AssignModalProps): JSX.Element {
  const [loading, setLoading] = useState<boolean>(false);
  const [fetchingOptions, setFetchingOptions] = useState<boolean>(false);
  const [selectedId, setSelectedId] = useState<string>('');
  const [response, setResponse] = useState<string>('');
  const [options, setOptions] = useState<Option[]>([]);
  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const companyId = loggedInUser?.companies?.find((c: Company) => c.active)?.id;


  useEffect((): void => {
    const fetchOptions = async (): Promise<void> => {
      if (!companyId) return;
      setFetchingOptions(true);
      try {
        const role = type === 'manager' ? 'manager' : 'doctor';
        const res = await fetch(`/admin/api/customers?role=${role}&companyId=${companyId}`);
        const data: Option[] = await res.json();
        setOptions(data || []);
      } catch {
        setOptions([]);
      } finally {
        setFetchingOptions(false);
      }
    };

    if (open) {
      setSelectedId('');
      setResponse('');
      fetchOptions();
    }
  }, [open, type, companyId]);

  const handleAssign = async (): Promise<void> => {
    if (!selectedId) return;

    setLoading(true);
    try {
      const res = await fetch('/admin/api/customers/assign', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          patientId: userId,
          assignedId: selectedId,
          type,
          companyId,
        }),
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.message);

      setResponse(data.message || 'Assignment successful!');
      setTimeout(() => {
        setResponse('');
        onClose();
      }, 2000);
    } catch (err: unknown) {
      if (err instanceof Error) {
        setResponse(err.message);
      } else {
        setResponse('Assignment failed.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal open={open} onClose={onClose}>
      <Box
        sx={{
          width: 400,
          p: 4,
          borderRadius: 2,
          bgcolor: 'background.paper',
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <Typography variant="h6" mb={2}>
          Assign {type === 'provider' ? 'Provider' : 'Manager'}
        </Typography>

        {fetchingOptions ? (
          <Box display="flex" justifyContent="center" mt={2}>
            <CircularProgress />
          </Box>
        ) : (
          <TextField
            select
            fullWidth
            label={`Select ${type}`}
            value={selectedId}
            onChange={(e) => setSelectedId(e.target.value)}
            sx={{ mb: 2 }}
          >
            {options.length === 0 ? (
              <MenuItem disabled>No {type}s available</MenuItem>
            ) : (
              options.map((item) => (
                <MenuItem key={item.id ?? item._id} value={item.id ?? item._id}>
                  {item.name}
                </MenuItem>
              ))
            )}
          </TextField>
        )}

        <Box mt={2} display="flex" justifyContent="space-between">
          <Button onClick={onClose} disabled={loading}>Cancel</Button>
          <Button
            variant="contained"
            onClick={handleAssign}
            disabled={loading || !selectedId}
          >
            {loading ? <CircularProgress size={20} /> : 'Assign'}
          </Button>
        </Box>

        {response && (
          <Alert
            severity={response.includes('already') ? 'error' : 'success'}
            sx={{ mt: 2 }}
          >
            {response}
          </Alert>
        )}
      </Box>
    </Modal>
  );
}