import { Box, Chip, LinearProgress, Typography } from '@mui/material'
import { FileText } from 'lucide-react'
import type { PropertyMarketSignal } from '../../domain/marketReport'

export function SignalCard({ signal }: { signal: PropertyMarketSignal }) {
  return (
    <Box
      sx={{
        p: 1.75,
        mb: 1.25,
        borderRadius: 1.5,
        border: '1px solid #e2e8f0',
        bgcolor: 'white',
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1, mb: 0.75 }}>
        <Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a', lineHeight: 1.35 }}>
          {signal.title}
        </Typography>
        {signal.confidence != null && (
          <Chip
            label={`${Math.round(signal.confidence * 100)}%`}
            size="small"
            sx={{ fontSize: '0.62rem', height: 18, flexShrink: 0, bgcolor: '#f0f9ff', color: '#0369a1', border: '1px solid #bae6fd' }}
          />
        )}
      </Box>

      <Typography variant="caption" sx={{ color: '#374151', lineHeight: 1.5, display: 'block', mb: signal.source || signal.confidence ? 1 : 0 }}>
        {signal.body}
      </Typography>

      {signal.confidence != null && (
        <Box sx={{ mb: 0.75 }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>KI-Konfidenz</Typography>
            <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.62rem' }}>{Math.round(signal.confidence * 100)}%</Typography>
          </Box>
          <LinearProgress
            variant="determinate"
            value={signal.confidence * 100}
            sx={{
              height: 3,
              borderRadius: 2,
              bgcolor: '#e8e7e4',
              '& .MuiLinearProgress-bar': { bgcolor: signal.confidence >= 0.8 ? '#1a7a4a' : signal.confidence >= 0.6 ? '#d97706' : '#64748b' },
            }}
          />
        </Box>
      )}

      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        {signal.date && (
          <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.62rem' }}>
            {new Date(signal.date).toLocaleDateString('de-CH')}
          </Typography>
        )}
        {signal.source && (
          <Box
            component={signal.sourceUrl ? 'a' : 'span'}
            href={signal.sourceUrl}
            target="_blank"
            rel="noopener noreferrer"
            sx={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 0.375,
              fontSize: '0.62rem',
              color: signal.sourceUrl ? '#152642' : '#94a3b8',
              textDecoration: 'none',
              '&:hover': signal.sourceUrl ? { textDecoration: 'underline' } : {},
            }}
          >
            <FileText size={10} />
            {signal.source}
          </Box>
        )}
      </Box>
    </Box>
  )
}
