import type { CSSProperties } from 'react'
import styles from '../../pages/EndOfGamePage.module.css'

type ResultsSummaryBarProps = {
  gradeKey: 'S' | 'A' | 'B' | 'C' | 'D' | 'F' | 'other'
  gradeLetter: string
  perfect: number
  good: number
  miss: number
  totalNotes: number
  judgmentLead: 'perfect' | 'good' | 'miss' | null
  style: CSSProperties
}

export function ResultsSummaryBar({
  gradeKey,
  gradeLetter,
  perfect,
  good,
  miss,
  totalNotes,
  judgmentLead,
  style,
}: ResultsSummaryBarProps) {
  return (
    <section className={styles.summaryBar} style={style} aria-label="Grade and judgment">
      <div className={styles.summaryGradeCol}>
        <span className={`${styles.summaryStatLabel} font-caption`}>GRADE</span>
        <div className={`${styles.summaryGradeBadge} ${styles.gradeSlam}`} data-grade={gradeKey}>
          {gradeLetter}
        </div>
      </div>

      <div className={styles.summaryStats}>
        <div className={styles.summaryStat}>
          <span
            className={`${styles.summaryStatNum} font-display ${styles.judgmentPerfect}${judgmentLead === 'perfect' ? ` ${styles.summaryStatLead}` : ''}`}
          >
            {perfect}
          </span>
          <span className={`${styles.summaryStatLabel} font-caption`}>PERFECT</span>
        </div>
        <div className={styles.summaryStat}>
          <span
            className={`${styles.summaryStatNum} font-display ${styles.judgmentGood}${judgmentLead === 'good' ? ` ${styles.summaryStatLead}` : ''}`}
          >
            {good}
          </span>
          <span className={`${styles.summaryStatLabel} font-caption`}>GOOD</span>
        </div>
        <div className={styles.summaryStat}>
          <span
            className={`${styles.summaryStatNum} font-display ${styles.judgmentMiss}${judgmentLead === 'miss' ? ` ${styles.summaryStatLead}` : ''}`}
          >
            {miss}
          </span>
          <span className={`${styles.summaryStatLabel} font-caption`}>MISS</span>
        </div>
      </div>

      <p className={`${styles.summaryNotes} font-caption`}>
        {totalNotes} {totalNotes === 1 ? 'NOTE' : 'NOTES'}
      </p>
    </section>
  )
}
