import type { ActionCharacter } from '../actionMode'
import type { PlayerClass } from '../claudeCraftTypes'

const CLASS_META: Record<PlayerClass, { glyph: string; label: string }> = {
  warrior: { glyph: 'W', label: 'Warrior' },
  paladin: { glyph: 'P', label: 'Paladin' },
  hunter: { glyph: 'H', label: 'Hunter' },
  rogue: { glyph: 'R', label: 'Rogue' },
  priest: { glyph: '+', label: 'Priest' },
  shaman: { glyph: 'S', label: 'Shaman' },
  mage: { glyph: 'M', label: 'Mage' },
  warlock: { glyph: 'W', label: 'Warlock' },
  druid: { glyph: 'D', label: 'Druid' },
}

export function ActionCharacterRosterPanel({
  activeCharacterId,
  characters,
  onCreateNew,
  onSwitch,
}: {
  activeCharacterId: string | null
  characters: ActionCharacter[]
  onCreateNew: () => void
  onSwitch: (characterId: string) => void
}) {
  return (
    <section className="character-roster-panel">
      <header>
        <div>
          <p className="eyebrow">Characters</p>
          <h2>Roster</h2>
        </div>
        <button className="primary-button" onClick={onCreateNew} type="button">New Character</button>
      </header>
      <div className="character-roster-list">
        {characters.map((character) => (
          <button
            aria-pressed={character.id === activeCharacterId}
            key={character.id}
            onClick={() => onSwitch(character.id)}
            type="button"
          >
            <div className={`character-roster-avatar class-${character.classId} skin-${character.appearance.skin}`}>
              <span>{CLASS_META[character.classId].glyph}</span>
            </div>
            <div>
              <strong>{character.name}</strong>
              <small>{CLASS_META[character.classId].label} · Level {character.level}</small>
              <small>{character.inventory.length} bag slots · {character.copper} copper</small>
            </div>
          </button>
        ))}
      </div>
    </section>
  )
}
