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

'use client';
import React, { useEffect, useState, useRef,useContext } from 'react';

import {
  Box, Avatar, List, ListItem, ListItemText, Checkbox, Typography,
  TextField, Button, IconButton, ListItemAvatar, Stack, Chip,
  Alert
} from '@mui/material';
import PhotoCamera from '@mui/icons-material/PhotoCamera';
import { UserContext } from '@/contexts/user-context';
// import { useRouter } from 'next/navigation';
import CircularProgress from '@mui/material/CircularProgress';


interface User {
  id: string;
  name: string;
  avatar?: string;
  role: string;
  profile:string;
}

interface GroupCreationPanelProps {
  users: User[];
  usersLoading: boolean;
  // onCreateGroup: (groupName: string, memberIds: string[], groupImage?: File | null) => void;
}

export default function GroupCreationPanel({ users,usersLoading }: GroupCreationPanelProps) {
  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
  const [groupName, setGroupName] = useState('');
  const [groupImage, setGroupImage] = useState<File | null>(null);
  const { user: loggedInUser } = useContext(UserContext) ?? {};
  const [bannerMessage, setBannerMessage] = useState<string | null>(null);
  const [bannerSeverity, setBannerSeverity] = useState<'success' | 'error' | 'warning' | 'info'>('success');
  // const router = useRouter();
  const [loading, setLoading] = useState(false);
  
  const currentUserId = loggedInUser?.id;

  const activeCompany = loggedInUser?.companies?.find(company => company.active);
  const companyId = activeCompany?.id;
  const toggleUser = (userId: string) => {
    setSelectedUserIds(prev =>
      prev.includes(userId) ? prev.filter(id => id !== userId) : [...prev, userId]
    );
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setGroupImage(e.target.files[0]);
    }
  };
  const handleCreateGroup = async () => {
    if (!groupName || selectedUserIds.length < 2) {
      alert('Enter group name and select at least 2 users');
      return;
    }
  
    if (!currentUserId || !companyId) {
      alert('Missing user or company information');
      return;
    }
    let finalMessage = '';
    let finalSeverity: 'success' | 'error' = 'success';
    // console.log('Creating group with:');
    // console.log('Group Name:', groupName);
    // console.log('Selected User IDs:', selectedUserIds);
    // console.log('Created By:', currentUserId);
    // console.log('Company ID:', companyId);
  
    // Build the request body as JSON
    const requestBody = {
        groupName: groupName,
        createdBy: currentUserId,
      companyId: companyId.toString(),
      memberIds: selectedUserIds,
    };
  
    try {
      const res = await fetch('/api/create-group', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      });
    
      const data = await res.json();
      // console.log('Response from API:', data);
    
      if (!res.ok) {
        finalMessage = data?.error || 'Failed to create group';
        finalSeverity = 'error';
      } else {
        finalMessage = 'Group created successfully';
        finalSeverity = 'success';
        setGroupName('');
        setSelectedUserIds([]);
        setGroupImage(null);
        window.location.reload();
      }
    
      setBannerMessage(finalMessage);
      setBannerSeverity(finalSeverity);
      setTimeout(() => setBannerMessage(null), 4000);
    } catch (err) {
      // console.error('Group creation failed:', err);
      setBannerMessage('Failed to create group. Try again later.');
      setBannerSeverity('error');
      setTimeout(() => setBannerMessage(null), 4000);
    }
  };
  
  
  

  const selectedUsers = users.filter(u => selectedUserIds.includes(u.id));

  return (
    <>
  {bannerMessage && (
    <Alert severity={bannerSeverity} sx={{ mt: 2 }}>
      {bannerMessage}
    </Alert>
  )}

  <Box>
    <Typography variant="h6" mb={1}>Create New Channel</Typography>

    {/* Selected Users Avatars */}
    <Stack direction="row" spacing={1} flexWrap="wrap" mb={2}>
      {selectedUsers.map(user => (
        <Chip
          key={user.id}
          avatar={<Avatar src={user.avatar || '/assets/avatar-1.png'} />}
          label={user.name}
          onDelete={() => toggleUser(user.id)}
        />
      ))}
    </Stack>

    {/* Group Name */}
    <TextField
      fullWidth
      label="Group Name"
      value={groupName}
      onChange={(e) => setGroupName(e.target.value)}
      sx={{ mb: 2 }}
    />

    {/* Group Image Upload */}
    <Stack direction="row" alignItems="center" spacing={2} mb={2}>
      {groupImage && (
        <Avatar
          src={URL.createObjectURL(groupImage)}
          sx={{ width: 56, height: 56 }}
        />
      )}
      <Button variant="outlined" component="label" startIcon={<PhotoCamera />}>
        Upload Group Image
        <input hidden accept="image/*" type="file" onChange={handleImageChange} />
      </Button>
    </Stack>

    {/* User List */}
    {usersLoading ? (
      <Box display="flex" justifyContent="center" alignItems="center" py={4}>
        <CircularProgress />
        <Typography ml={2}>Loading users...</Typography>
      </Box>
    ) : (
      <List>
        {users.map((user) => (
          <ListItem key={user.id} button onClick={() => toggleUser(user.id)}>
            <ListItemAvatar>
            <Avatar src={user.profile || `https://gohelloprovider.com/app/images/${user.profile}` || '/assets/Portrait_Placeholder.png'} />

            </ListItemAvatar>
            <ListItemText primary={user.name} secondary={user.role} />
            <Checkbox checked={selectedUserIds.includes(user.id)} />
          </ListItem>
        ))}
      </List>
    )}

    {/* Create Button */}
    <Button
      variant="contained"
      fullWidth
      sx={{ mt: 2 }}
      onClick={handleCreateGroup}
      disabled={loading}
    >
      {loading ? <CircularProgress size={24} color="inherit" /> : 'Create Channel'}
    </Button>
  </Box>
</>

  );
}