import { Box, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'
import type { ConfidenceLevel } from '../../domain/enums'
import { ConfidenceBadge } from '../badges/ConfidenceBadge'

interface FieldWithConfidenceProps {
  label: string
  value: ReactNode
  confidence?: number
  confidenceLevel?: ConfidenceLevel
  layout?: 'row' | 'column'
  sx?: SxProps<Theme>
}

export function FieldWithConfidence({
  label,
  value,
  confidence,
  confidenceLevel,
  layout = 'column',
  sx,
}: FieldWithConfidenceProps) {
  const showBadge = confidence !== undefined || confidenceLevel !== undefined

  if (layout === 'row') {
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, ...sx }}>
        <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary', minWidth: 80 }}>
          {label}
        </Typography>
        <Box sx={{ flex: 1 }}>{value}</Box>
        {showBadge && (
          <ConfidenceBadge level={confidenceLevel} score={confidence} />
        )}
      </Box>
    )
  }

  return (
    <Box sx={sx}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 0.25 }}>
        <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
          {label}
        </Typography>
        {showBadge && (
          <ConfidenceBadge level={confidenceLevel} score={confidence} />
        )}
      </Box>
      <Box sx={{ fontSize: '0.875rem' }}>{value}</Box>
    </Box>
  )
}