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

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

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

  return (
    <Paper
      onClick={onClick}
      elevation={0}
      sx={{
        p: 2,
        borderRadius: 1.5,
        border: '1px solid',
        borderColor: selected ? '#152642' : '#e8e7e4',
        bgcolor: selected ? '#f1f5f9' : 'white',
        cursor: 'pointer',
        transition: 'all 0.15s',
        '&:hover': {
          borderColor: selected ? '#152642' : '#94a3b8',
          boxShadow: '0 2px 6px rgba(15,23,42,0.06)',
        },
        display: 'flex',
        flexDirection: 'column',
        gap: 0.75,
        minHeight: 160,
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 1 }}>
        <Typography
          variant="body2"
          sx={{
            fontWeight: hasUnread ? 700 : 600,
            color: '#0f172a',
            fontSize: '0.85rem',
            lineHeight: 1.3,
          }}
        >
          {inquiry.tenantName}
          {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''}
        </Typography>
        {hasUnread && (
          <Box
            sx={{
              minWidth: 20,
              height: 20,
              borderRadius: '50%',
              bgcolor: '#2563eb',
              color: 'white',
              fontSize: '0.65rem',
              fontWeight: 700,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              px: inquiry.unreadCount > 9 ? 0.75 : 0,
            }}
          >
            {inquiry.unreadCount}
          </Box>
        )}
      </Box>

      <Typography
        variant="body2"
        sx={{
          fontWeight: hasUnread ? 600 : 500,
          color: '#1e293b',
          fontSize: '0.85rem',
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}
      >
        {inquiry.subject}
      </Typography>

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, color: '#64748b' }}>
        <Building2 size={13} />
        <Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
          {propertyLabelFromId(inquiry.propertyId)}
        </Typography>
      </Box>

      <Box sx={{ mt: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.7rem' }}>
          {formatInquiryDate(inquiry.createdAt)}
        </Typography>
        {inquiry.matchScore !== undefined && (
          <Box
            sx={{
              px: 1,
              py: 0.25,
              borderRadius: 1,
              bgcolor: '#e0e7ff',
              color: '#3730a3',
              fontWeight: 600,
              fontSize: '0.7rem',
            }}
          >
            Match {inquiry.matchScore}%
          </Box>
        )}
      </Box>
    </Paper>
  )
}