import { Box, Chip, Paper, Typography } from '@mui/material'
import { MapPin } from 'lucide-react'
import type { LatentNeed } from '../../domain/latentNeed'
import { assetTypeLabel, latentStatusBadge } from './latentNeedUtils'

interface PublicNeedCardProps {
  need: LatentNeed
  selected: boolean
  onClick: () => void
}

function opportunityColor(status: 'public' | 'paused' | 'expired'): string {
  if (status === 'public') return '#16a34a'
  if (status === 'paused') return '#d97706'
  return '#94a3b8'
}

export function PublicNeedCard({ need, selected, onClick }: PublicNeedCardProps) {
  const statusCfg = latentStatusBadge(need.status)
  return (
    <Paper
      onClick={onClick}
      elevation={0}
      sx={{
        p: 1.5,
        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,
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1, alignItems: 'flex-start' }}>
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3 }}>
          {need.title}
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexShrink: 0 }}>
          <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: opportunityColor(need.status) }} />
          <Chip
            label={statusCfg.label}
            size="small"
            sx={{ bgcolor: statusCfg.bg, color: statusCfg.fg, fontWeight: 600, fontSize: '0.65rem', height: 20 }}
          />
        </Box>
      </Box>

      {need.tenantCompany && (
        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.75rem' }}>
          {need.tenantCompany}
        </Typography>
      )}

      <Chip
        label={assetTypeLabel(need.assetType)}
        size="small"
        sx={{
          alignSelf: 'flex-start',
          bgcolor: '#e0e7ff',
          color: '#3730a3',
          fontWeight: 600,
          fontSize: '0.7rem',
          height: 20,
        }}
      />

      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, color: '#475569', fontSize: '0.75rem' }}>
        <MapPin size={12} />
        <Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
          {need.desiredLocation}
        </Typography>
      </Box>
    </Paper>
  )
}