import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
import desertBg from '../../assets/desert.png'
import muleSprites from '../../assets/mule-sprites.png'

interface TopBarProps {
  leftSidebarOpen: boolean
  rightSidebarOpen: boolean
  onExpandLeft: () => void
  onExpandRight: () => void
}

// 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, settings gear on the right. The active heap badge moved into
 * the Heaps panel in the left sidebar (where it actually relates to the
 * heap rows the user navigates to).
 *
 * Also hosts the "expand sidebar" affordances: when a side panel is
 * collapsed, a small panel-open icon appears on the corresponding edge
 * so the user has a way to bring it back without hunting for the
 * keyboard shortcut. When the panel is open, the button hides — its
 * collapse twin lives in the panel's own header.
 */
export function TopBar({
  leftSidebarOpen,
  rightSidebarOpen,
  onExpandLeft,
  onExpandRight,
}: TopBarProps) {
  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">
        {!leftSidebarOpen && (
          <button
            onClick={onExpandLeft}
            className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
            title="Expand panel (Tab)"
            aria-label="Expand left panel"
          >
            <PanelLeftOpen className="h-4 w-4" />
          </button>
        )}
        <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 h-full items-end gap-2 self-stretch pb-1">
        {!rightSidebarOpen && (
          <button
            onClick={onExpandRight}
            className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
            title="Expand panel (I)"
            aria-label="Expand right panel"
          >
            <PanelRightOpen className="h-4 w-4" />
          </button>
        )}
        <span
          className="text-[10px] font-serif text-black/80"
        >
          Built with hubris • {toRoman(new Date().getFullYear())}
        </span>
      </div>
    </header>
  )
}