import { Box, Typography } from '@mui/material'
import { Building2 } from 'lucide-react'
import type { Inquiry } from '../../domain/inquiry'
import { formatInquiryDate, propertyLabelFromId } from './inquiryUtils'

interface InquiryListRowProps {
  inquiry: Inquiry
  selected: boolean
  onClick: () => void
}

export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowProps) {
  const hasUnread = !inquiry.isRead && inquiry.unreadCount > 0

  return (
    <Box
      onClick={onClick}
      sx={{
        px: 2,
        py: 1,
        borderBottom: '1px solid #e2e8f0',
        borderLeft: selected ? '4px solid #2563eb' : `3px solid ${hasUnread ? '#2563eb' : 'transparent'}`,
        bgcolor: selected ? '#eff6ff' : 'white',
        cursor: 'pointer',
        transition: 'background-color 0.15s, border-color 0.15s',
        '&:hover': { bgcolor: selected ? '#f1f5f9' : '#f8fafc' },
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
        <Typography
          variant="body2"
          sx={{ fontWeight: selected || hasUnread ? 700 : 600, color: selected ? '#1d4ed8' : '#0f172a', fontSize: '0.85rem' }}
        >
          {inquiry.tenantName}
          {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''}
        </Typography>
        {hasUnread && (
          <Box
            sx={{
              minWidth: 18,
              height: 18,
              borderRadius: '50%',
              bgcolor: '#2563eb',
              color: 'white',
              fontSize: '0.6rem',
              fontWeight: 700,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              px: inquiry.unreadCount > 9 ? 0.5 : 0,
            }}
          >
            {inquiry.unreadCount}
          </Box>
        )}
      </Box>
      <Typography
        variant="body2"
        sx={{
          fontWeight: hasUnread ? 600 : 500,
          color: '#1e293b',
          fontSize: '0.8125rem',
          mb: 0.5,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }}
      >
        {inquiry.subject}
      </Typography>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#64748b', fontSize: '0.75rem' }}>
        <Building2 size={12} />
        <Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
          {propertyLabelFromId(inquiry.propertyId)}
        </Typography>
        {inquiry.matchScore !== undefined && (
          <Typography sx={{ ml: 'auto', fontSize: '0.75rem', fontWeight: 700, color: '#152642' }}>
            {inquiry.matchScore}%
          </Typography>
        )}
      </Box>
      <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem', mt: 0.5, display: 'block' }}>
        {formatInquiryDate(inquiry.createdAt)}
      </Typography>
    </Box>
  )
}
