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

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

export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowProps) {
  return (
    <Box
      onClick={onClick}
      sx={{
        px: 2,
        py: 1.5,
        borderBottom: '1px solid #e2e8f0',
        borderLeft: '3px solid',
        borderLeftColor: selected ? '#1e3a5f' : 'transparent',
        bgcolor: selected ? '#f1f5f9' : '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: 600, color: '#0f172a', fontSize: '0.85rem' }}>
          {inquiry.tenantName}
          {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''}
        </Typography>
        <InquiryStatusBadge status={inquiry.status} />
      </Box>
      <Typography
        variant="body2"
        sx={{
          fontWeight: 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 && (
          <Box
            sx={{
              ml: 'auto',
              px: 0.75,
              py: 0.125,
              borderRadius: 1,
              bgcolor: '#e0e7ff',
              color: '#3730a3',
              fontWeight: 600,
              fontSize: '0.7rem',
            }}
          >
            {inquiry.matchScore}%
          </Box>
        )}
      </Box>
      <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem', mt: 0.5, display: 'block' }}>
        {formatInquiryDate(inquiry.createdAt)}
      </Typography>
    </Box>
  )
}