'use client'

import { useTranslations } from 'next-intl'
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemText from '@mui/material/ListItemText'
import ListItemIcon from '@mui/material/ListItemIcon'
import CircularProgress from '@mui/material/CircularProgress'
import { useTheme, alpha } from '@mui/material/styles'
import type { ConversationSummary } from './farmAiAssistantTypes'

interface ChatSidebarProps {
  open: boolean
  loading: boolean
  conversations: ConversationSummary[]
  activeConversationId: string | null
  onClose: () => void
  onSelectConversation: (id: string) => void
  getConversationLabel: (conversation: ConversationSummary, index: number) => string
}

export default function ChatSidebar({
  open,
  loading,
  conversations,
  activeConversationId,
  onClose,
  onSelectConversation,
  getConversationLabel
}: ChatSidebarProps) {
  const t = useTranslations('farmAiAssistant')
  const theme = useTheme()

  return (
    <>
      <Box
        onClick={onClose}
        sx={{
          position: 'absolute',
          inset: 0,
          bgcolor: alpha(theme.palette.common.black, 0.18),
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity 0.24s ease',
          zIndex: 5
        }}
      />

      <Box
        sx={{
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          width: { xs: '88%', sm: 320 },
          maxWidth: 320,
          transform: open ? 'translateX(0)' : 'translateX(-104%)',
          transition: 'transform 0.28s ease',
          zIndex: 6,
          display: 'flex',
          flexDirection: 'column',
          bgcolor: 'background.paper',
          borderInlineEnd: `1px solid ${alpha(theme.palette.primary.main, 0.12)}`,
          boxShadow: `0 10px 30px ${alpha(theme.palette.common.black, 0.12)}`
        }}
      >
        <Box
          className='flex items-center justify-between px-4 py-3'
          sx={{ borderBottom: `1px solid ${alpha(theme.palette.primary.main, 0.12)}` }}
        >
          <Typography variant='subtitle1' fontWeight={700}>
            {t('sidebar.title')}
          </Typography>
          <IconButton size='small' onClick={onClose}>
            <i className='tabler-x text-xl' />
          </IconButton>
        </Box>

        <Box className='flex-1 overflow-y-auto py-2'>
          {loading ? (
            <Box className='flex justify-center py-8'>
              <CircularProgress size={28} />
            </Box>
          ) : conversations.length === 0 ? (
            <Box className='flex flex-col items-center justify-center py-8 px-4 text-center'>
              <i
                className='tabler-messages text-4xl mb-2'
                style={{ color: alpha(theme.palette.text.secondary, 0.35) }}
              />
              <Typography variant='body2' color='text.secondary'>
                {t('sidebar.empty')}
              </Typography>
            </Box>
          ) : (
            <List disablePadding>
              {conversations.map((conversation, index) => (
                <ListItemButton
                  key={conversation.id}
                  selected={conversation.id === activeConversationId}
                  onClick={() => onSelectConversation(conversation.id)}
                  sx={{
                    mx: 1,
                    my: 0.5,
                    borderRadius: '12px',
                    '&.Mui-selected': {
                      backgroundColor: alpha(theme.palette.primary.main, 0.1),
                      '&:hover': {
                        backgroundColor: alpha(theme.palette.primary.main, 0.15)
                      }
                    }
                  }}
                >
                  <ListItemIcon sx={{ minWidth: 36 }}>
                    <i className='tabler-message text-lg' style={{ color: theme.palette.primary.main }} />
                  </ListItemIcon>
                  <ListItemText
                    primary={getConversationLabel(conversation, index)}
                    primaryTypographyProps={{
                      variant: 'body2',
                      fontWeight: conversation.id === activeConversationId ? 700 : 500,
                      noWrap: true
                    }}
                    secondary={`${conversation.message_count} پیام`}
                    secondaryTypographyProps={{ variant: 'caption' }}
                  />
                </ListItemButton>
              ))}
            </List>
          )}
        </Box>
      </Box>
    </>
  )
}
