import desertBg from '../../assets/desert.png'
import muleSprites from '../../assets/mule-sprites.png'

// Block-character ASCII rendering of "Mulimago" — sits on a black plate
// in place of the old text title.
const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`

const ROMAN_PAIRS: [number, string][] = [
  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
]

function toRoman(n: number): string {
  let result = ''
  for (const [value, symbol] of ROMAN_PAIRS) {
    while (n >= value) {
      result += symbol
      n -= value
    }
  }
  return result
}

/**
 * Slim top bar — animated walking mule on the left over a tiled desert
 * backdrop. Sidebar toggle buttons live on the FilterBar.
 */
export function TopBar() {
  return (
    <header
      className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
      style={{
        // Two layers: desert tile on top (scrolls right→left), dusk-sky
        // gradient underneath (static). Tile width is fixed at 200px so
        // the `desert-scroll` keyframe can move by exactly one tile and
        // loop seamlessly.
        backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
        backgroundRepeat: 'repeat-x, no-repeat',
        backgroundSize: '200px 100%, 100% 100%',
        backgroundPosition: '0 bottom, 0 0',
        imageRendering: 'pixelated',
        animation: 'desert-scroll 24s linear infinite',
      }}
    >
      <div className="relative flex items-center gap-3">
        <div
          aria-label="Mulimago"
          className="h-12 w-14"
          style={{
            backgroundImage: `url(${muleSprites})`,
            backgroundSize: '300% 200%',
            backgroundRepeat: 'no-repeat',
            imageRendering: 'pixelated',
            animation: 'mule-walk 0.6s steps(1) infinite',
          }}
        />
        <pre
          aria-label="Mulimago"
          className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
          style={{ letterSpacing: 0 }}
        >
          {MULIMAGO_ASCII}
        </pre>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-[10px] font-serif text-black/80">
          Built with hubris • {toRoman(new Date().getFullYear())}
        </span>
      </div>
    </header>
  )
}
