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

'use client';
import React from 'react';
import { Box, Typography, Avatar } from '@mui/material';

interface GroupItemProps {
  chat: {
    id: string;
    group_name: string;
    last_message?: string;
    last_message_type?: string; // e.g. 'image' | 'pdf' | undefined
    last_sender_name?: string;
    chat_image?: string;
    member_names?: string;
    last_message_time?: string;
    company_last_name?: string;
    company_first_name?:string
    timestamp?:string
  };
  onClick?: () => void;
}

export default function GroupItem({ chat, onClick }: GroupItemProps) {
 
  const company_last_name = chat.company_last_name || 'N/A';
  const company_first_name = chat.company_first_name || 'N/A';
  const timestamp = chat.timestamp || 'N/A';
  const lastMessage = chat.last_message?.toLowerCase() || '';

    const isImage =
      lastMessage.endsWith('.jpg') ||
      lastMessage.endsWith('.jpeg') ||
      lastMessage.endsWith('.png') ||
      lastMessage.endsWith('.gif');

    const isPDF = lastMessage.endsWith('.pdf');

  

  const formattedTime = chat.timestamp || 'No time';

  return (
    <Box
      onClick={onClick}
      sx={{
        backgroundColor: '#fff',
        borderRadius: 2,
        boxShadow: 3,
        p: 2,
        mb: 3,
        width: '95%',
        mx: 'auto',
        cursor: onClick ? 'pointer' : 'default',
        display: 'flex',
        flexDirection: 'column',
        '&:hover': {
          boxShadow: onClick ? 6 : 3,
        },
      }}
    >
      {/* Company name bar */}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'flex-end',
          borderBottom: 1,
          borderColor: 'lightgray',
          mb: 2,
        }}
      >
        <Box
          sx={{
            backgroundColor: '#AEE6FB',
            px: 2,
            py: 0.5,
            borderRadius: 0.5,
          }}
        >
          <Typography sx={{ color: '#92BC2A', fontWeight: 'bold' }}>
            {company_first_name} {company_last_name}
          </Typography>
        </Box>
      </Box>

      {/* Main content row */}
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Avatar
          src={chat.chat_image}
          alt="Chat Avatar"
          sx={{ width: 48, height: 48, mr: 2 }}
        />
        <Box sx={{ flex: 1 }}>
          <Typography variant="subtitle1" fontWeight="bold" noWrap>
            {chat.group_name}
          </Typography>

          {chat.last_message ? (
            isImage ? (
              <Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5 }}>
                <Typography variant="body2" sx={{ color: 'gray' }}>
                  {chat.last_sender_name && `${chat.last_sender_name}: `}
                </Typography>
                <Typography
                  variant="body2"
                  sx={{ color: 'gray', fontWeight: 'bold', ml: 1 }}
                >
                  🖼️ Photo
                </Typography>
              </Box>
            ) : isPDF ? (
              <Box sx={{ display: 'flex', alignItems: 'center', mt: 0.5 }}>
                <Typography variant="body2" sx={{ color: 'gray' }}>
                  {chat.last_sender_name && `${chat.last_sender_name}: `}
                </Typography>
                <Typography
                  variant="body2"
                  sx={{ color: 'gray', fontWeight: 'bold', ml: 1 }}
                >
                  📄 File
                </Typography>
              </Box>
            ) : (
              <Typography variant="body2" sx={{ color: 'gray', mt: 0.5 }} noWrap>
                {chat.last_sender_name && `${chat.last_sender_name}: `}
                {chat.last_message}
              </Typography>
            )
          ) : (
            <Typography variant="body2" color="gray" sx={{ mt: 0.5 }}>
              No message in channel yet
            </Typography>
          )}
        </Box>
      </Box>

      {/* Time and Members */}
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
        <Typography variant="caption" color="text.secondary">
          Members: {chat.member_names}
        </Typography>
        <Typography variant="caption" fontWeight="bold" color="gray">
          {formattedTime}
        </Typography>
      </Box>
    </Box>
  );
}