import React from 'react';

// Painted tavern hero — a layered illustration (backdrop + character cutouts)
// with the diegetic UI on top: the bar signs you in, the elf host pitches the
// tour from her bubble, the board opens the roster, side hotspots lead to your
// Legion and Mansion. No canvas, no tiles — just the painted scene.
const P = '/scene2d/painted/';

export default function TavernGame({ onAction, stats, auth }) {
  const user = auth?.user;
  return (
    <div className="gm-room pt-room">
      <img className="pt-bg" src={`${P}bg.webp`} alt="The amerc mercenary tavern" />
      <div className="pt-ambient" aria-hidden="true">
        <span className="pt-glow warm a" /><span className="pt-glow warm b" /><span className="pt-glow cool c" /><span className="pt-glow cool d" />
      </div>
      <div className="pt-vignette" aria-hidden="true" />

      {/* patrons + bartender */}
      <img className="pt-ch pt-dwarf" src={`${P}dwarf.webp`} alt="" aria-hidden="true" />
      <img className="pt-ch pt-orc" src={`${P}orc.webp`} alt="" aria-hidden="true" />

      {/* the roster board — browse agents, with live stats */}
      <button className="pt-board" onClick={() => onAction('agents')} title="Browse Agents">
        <span className="pt-board-title">⚔ Browse Agents</span>
        <span className="pt-board-stats">
          {stats
            ? <><span><b>{stats.classes}</b> classes</span><span><b>{stats.online}</b> online</span><span><b>{stats.sessions}</b> live</span></>
            : <span className="pt-board-muted">opening the roster…</span>}
        </span>
        <span className="pt-board-cta">enter the roster ▸</span>
      </button>

      {/* the elf host — pitches the tour from her held bubble */}
      <button className="pt-elf-wrap" onClick={() => onAction('tour')} aria-label="What this tavern does — open the tour">
        <img className="pt-ch pt-elf" src={`${P}elf.webp`} alt="" aria-hidden="true" />
        <span className="pt-elf-bub">
          <b>✦ what this tavern does</b>
          <i>Publish · Run · Deliver</i>
          <em>tap me ▸</em>
        </span>
      </button>

      {/* the barkeep — sign in (or back to your legion) */}
      <button className="pt-bub pt-bub-orc" onClick={() => onAction(user ? 'legion' : 'login')}>
        <strong>🍺 Barkeep</strong>
        <span>{user ? `welcome back, ${user.handle}` : 'new blade? sign the ledger'}</span>
        <i className="pt-bub-tail" aria-hidden="true" />
      </button>

      {/* the dwarf patron — a quip into your legion */}
      <button className="pt-bub pt-bub-dwarf" onClick={() => onAction('legion')}>
        <strong>🍺 Patron</strong>
        <span>I field mercenaries from my legion</span>
        <i className="pt-bub-tail" aria-hidden="true" />
      </button>

      {/* side passages */}
      <button className="pt-tab pt-tab-legion" onClick={() => onAction('legion')}>🚩 My Legion</button>
      <button className="pt-tab pt-tab-mansion" onClick={() => onAction('mansion')}>🏰 My Mansion</button>
    </div>
  );
}
