import { useEffect, useMemo, useState } from 'react'
import { playSound, SFX_BUTTON_DEFAULT } from '../../lib/sounds'
import { lighten, withAlpha } from './color-utils'
import type { Song } from './types'

const ARCADE_ACCENT = '#d946ef'

type SongInfoBarProps = {
  song: Song
  onConfirm: () => void
}

function DifficultyDots({ difficulty }: { difficulty: number }) {
  return (
    <div className="song-info-bar__dots" aria-label={`Difficulty ${difficulty} out of 5`}>
      {Array.from({ length: 5 }).map((_, index) => (
        <span
          key={index}
          className="song-info-bar__dot"
          style={{
            backgroundColor:
              index < difficulty ? '#fff' : 'rgba(0, 0, 0, 0.35)',
          }}
        />
      ))}
    </div>
  )
}

export function SongInfoBar({ song, onConfirm }: SongInfoBarProps) {
  const [isPulseOn, setIsPulseOn] = useState(false)
  const pulseMs = useMemo(() => Math.max(150, Math.floor(60000 / song.bpm)), [song.bpm])

  useEffect(() => {
    setIsPulseOn(true)
    const clearBeat = window.setTimeout(() => setIsPulseOn(false), 120)

    const intervalId = window.setInterval(() => {
      setIsPulseOn(true)
      window.setTimeout(() => setIsPulseOn(false), 120)
    }, pulseMs)

    return () => {
      window.clearTimeout(clearBeat)
      window.clearInterval(intervalId)
    }
  }, [pulseMs])

  return (
    <section
      className="song-info-bar"
      style={{
        '--info-bg-image': `url(${song.bgUrl})`,
        '--info-bg-color': withAlpha(song.color, 0.75),
        borderColor: withAlpha(song.color, 0.88),
      } as React.CSSProperties}
      aria-label="Selected song details"
    >
      <div className="song-info-bar__main">
        <h2 className="song-info-bar__title font-title">{song.title}</h2>
        <p className="song-info-bar__artist">{song.artist}</p>
      </div>

      <div className="song-info-bar__stats">
        <div className="song-info-bar__stat">
          <div className="song-info-bar__bpm-row">
            <span
              className={`song-info-bar__pulse${isPulseOn ? ' song-info-bar__pulse--on' : ''}`}
              style={{ backgroundColor: lighten(song.color, 0.5) }}
              aria-hidden="true"
            />
            <span>{song.bpm}</span>
          </div>
          <span className="song-info-bar__label font-caption">BPM</span>
        </div>

        <div className="song-info-bar__stat">
          <DifficultyDots difficulty={song.difficulty} />
          <span className="song-info-bar__label font-caption">DIFF</span>
        </div>

        <div className="song-info-bar__stat">
          <span>{song.duration}</span>
          <span className="song-info-bar__label font-caption">LEN</span>
        </div>
      </div>

      <button
        type="button"
        className="song-info-bar__confirm font-title"
        onClick={() => {
          playSound(SFX_BUTTON_DEFAULT)
          onConfirm()
        }}
        style={{ backgroundColor: lighten(ARCADE_ACCENT, 0.38), color: ARCADE_ACCENT }}
      >
        SELECT
      </button>
    </section>
  )
}
