scheduler/frontend/src/components/TestCard.jsx

const STATUS_STYLES = {
  pending:   'bg-gray-600/60 text-gray-200 border-gray-500',
  completed: 'bg-green-800/60 text-green-200 border-green-600',
  failed:    'bg-red-800/60 text-red-200 border-red-600',
  invalid:   'bg-yellow-800/60 text-yellow-200 border-yellow-600',
}

function formatConfig(config) {
  if (!config || typeof config !== 'object') return '—'
  const entries = Object.entries(config)
  if (entries.length === 0) return '—'
  const formattedEntries = entries
    .map(([band, data]) => {
      if (!data || typeof data !== 'object') return null
      const testpoint = data.test_point || data['Test Point']
      const sta = data.sta || data.STA
      // Only display if both testpoint and sta are present
      if (!testpoint || !sta) return null
      return `${band}: ${testpoint}→${sta}`
    })
    .filter(Boolean)
  
  return formattedEntries.length > 0 ? formattedEntries.join('; ') : '—'
}

export default function TestCard({ test }) {
  const style = STATUS_STYLES[test.status] ?? STATUS_STYLES.pending

  return (
    <div className="relative group">
      <div
        className={`px-1.5 py-0.5 rounded border text-xs font-mono truncate cursor-default select-none ${style}`}
        style={{ maxWidth: '100%' }}
      >
        {test.test_id}
      </div>
      {/* Hover tooltip */}
      <div className="absolute z-50 bottom-full left-0 mb-1 hidden group-hover:block min-w-max">
        <div className="bg-gray-800 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 shadow-lg max-w-md">
          <p><span className="text-gray-400">Type:</span> {test.test_type ?? '—'}</p>
          <p><span className="text-gray-400">Rotation:</span> {test.rotation ?? '—'}</p>
          <p><span className="text-gray-400">Device:</span> {test.device ?? '—'}</p>
          <p className="mt-1 pt-1 border-t border-gray-600"><span className="text-gray-400">Config:</span> {formatConfig(test.config)}</p>
        </div>
      </div>
    </div>
  )
}