import type { ParsedSeq } from '../seq/types.ts'
import type { Reconstructed } from '../seq/reconstruct.ts'
import { formatGrad, formatNumber, formatSlew, formatTime } from './format'

export interface ReportPanelProps {
  seq: ParsedSeq
  rec: Reconstructed
}

export default function ReportPanel({ seq, rec }: ReportPanelProps) {
  const name = seq.definitions.get('Name')
  const fov = seq.definitions.get('FOV')
  const maxGrad = Math.max(rec.stats.maxGrad.gx, rec.stats.maxGrad.gy, rec.stats.maxGrad.gz)
  const maxSlew = Math.max(rec.stats.maxSlew.gx, rec.stats.maxSlew.gy, rec.stats.maxSlew.gz)

  const items: [string, React.ReactNode][] = [
    ['Name', typeof name === 'string' ? name : '—'],
    ['Format', `v${seq.version.major}.${seq.version.minor}.${seq.version.revision}`],
    ['Duration', formatTime(rec.duration)],
    ['Blocks', String(seq.blocks.length)],
    ['RF pulses', String(rec.stats.rfCount)],
    ['ADC', `${rec.stats.adcCount} windows / ${rec.stats.adcSamples} samples`],
  ]
  if (Array.isArray(fov)) {
    items.push(['FOV', fov.map((v) => `${formatNumber(v * 1e3, 4)}`).join(' × ') + ' mm'])
  }
  if (maxGrad > 0) items.push(['Peak gradient', formatGrad(maxGrad)])
  if (maxSlew > 0) items.push(['Peak slew', formatSlew(maxSlew)])

  return (
    <div className="report">
      {items.map(([label, value]) => (
        <div className="item" key={label}>
          <b>{label}</b>
          <span>{value}</span>
        </div>
      ))}
      <div className="item">
        <b>Signature</b>
        <span>
          {seq.signature ? (
            seq.signature.valid ? (
              <span className="badge good">md5 verified</span>
            ) : (
              <span className="badge bad">md5 mismatch</span>
            )
          ) : (
            <span className="badge neutral">none</span>
          )}
        </span>
      </div>
    </div>
  )
}