/* ui.jsx — header, search, chips, badge card, bottom nav (window globals) */

const CAT_COLOR = { System: 'var(--purple)', Corporate: 'var(--gold)', Group: 'var(--teal)' };
const AVA_COLORS = ['#514f88', '#8a6d3b', '#3e8e8e', '#a8554f', '#5a7a52', '#6a5d8a', '#9a7b3e', '#4f6f8a'];
function avaColor(name) {let h = 0;for (const ch of name) h = h * 31 + ch.charCodeAt(0) >>> 0;return AVA_COLORS[h % AVA_COLORS.length];}
function initials(name) {const p = name.trim().split(/\s+/);return ((p[0]?.[0] || '') + (p[1]?.[0] || '')).toUpperCase();}

function Avatar({ name, size = 34 }) {
  return (
    <div className="ava" style={{ width: size, height: size, background: avaColor(name), fontSize: size * 0.38 }}>
      {initials(name)}
    </div>);

}

/* Hexagon placeholder for badges whose art the user hasn't supplied yet */
function HexPlaceholder({ size = 140, hint = true }) {
  const pts = "50,3 93,26 93,74 50,97 7,74 7,26";
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="hexfill" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#EFE9DE" />
          <stop offset="1" stopColor="#E3DBCC" />
        </linearGradient>
      </defs>
      <polygon points={pts} fill="url(#hexfill)" stroke="rgba(33,30,26,.16)" strokeWidth="1.4" strokeDasharray="3 3" />
      {hint &&
      <text x="50" y="54" textAnchor="middle" fontFamily="ui-monospace,Menlo,monospace"
      fontSize="6.4" fill="#A8A092" letterSpacing="0.3">badge art</text>
      }
    </svg>);

}

function CatTag({ cat }) {
  return (
    <span className="cat-tag">
      <span className="cat-dot" style={{ background: CAT_COLOR[cat] }}></span>{cat}
    </span>);

}

function Header({ scrolled, title = 'Badges' }) {
  return (
    <div className={'hdr nav' + (scrolled ? ' scrolled' : '')}>
      <button className="nav-icon-btn" aria-label="Back">
        <Ic.ChevronLeft s={23} c="var(--ink)" />
      </button>
      <h1 className="nav-title">{title}</h1>
      <button className="nav-icon-btn" aria-label="Profile">
        <div className="nav-ava">{initials(window.MANAGER || 'Riley Morgan')}</div>
      </button>
    </div>);

}

function SearchBar({ value, onChange, focus, setFocus, filterActive, onFilter }) {
  return (
    <div className="toolbar">
      <div className={'search' + (focus ? ' focus' : '')}>
        <Ic.Search s={19} />
        <input
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          placeholder="Search badges"
          aria-label="Search badges" />
        
        {value &&
        <button className="filter-btn" onClick={() => onChange('')} aria-label="Clear search">
            <Ic.Close s={16} />
          </button>
        }
        {onFilter && <>
          <div className="filter-divider"></div>
          <button className={'filter-btn' + (filterActive ? ' active' : '')} onClick={onFilter} aria-label="Filter badges">
            <Ic.Sliders s={20} c={filterActive ? 'var(--purple)' : 'var(--ink-2)'} />
            {filterActive && <span className="filter-dot"></span>}
          </button>
        </>}
      </div>
    </div>);

}

function FilterChips({ cats, active, onPick }) {
  return (
    <div className="chips">
      {cats.map((c) =>
      <button key={c} className={'chip' + (active === c ? ' active' : '')} onClick={() => onPick(c)}>
          {c}
        </button>
      )}
    </div>);

}

function BadgeCard({ badge, onOpen, onGive, onReadMore, onMore }) {
  return (
    <div className="card" onClick={onOpen}>
      <div className="stage">
        <div className="glow"></div>
        <CatTag cat={badge.cat} />
        <button className="card-more" onClick={(e) => {e.stopPropagation();onMore();}} aria-label={'More options for ' + badge.name}>
          <Ic.More s={20} c="var(--ink-2)" />
        </button>
        <div className="pedestal"></div>
        {badge.img ?
        <img className="badge-img" src={badge.img} alt={badge.name} /> :
        <div className="hex-slot">
              <image-slot id={'slot-' + badge.id} mask="polygon(50% 2%, 95% 26%, 95% 74%, 50% 98%, 5% 74%, 5% 26%)"
          placeholder="Tap to add badge art"></image-slot>
            </div>}
      </div>
      <div className="card-body">
        <h2 className="badge-name">{badge.name}</h2>
        <p className="badge-desc">{badge.desc}</p>
        <span className="read-more" onClick={(e) => {e.stopPropagation();onReadMore();}}>Read more</span>
        <div className="card-footer">
          <button className="btn-give" onClick={(e) => {e.stopPropagation();onGive();}}>
            <Ic.Rosette s={19} c="#fff" /> Give badge
          </button>
        </div>
      </div>
    </div>);

}

function BottomNav({ manager, onMenu }) {
  /* Locked app-level nav — same across screens: menu · global search · workspace · notifications · profile */
  const goMenu = onMenu || (() => {window.location.href = 'menu.html';});
  return (
    <nav className="tabbar locked">
      <button className="ltab" aria-label="Menu" onClick={goMenu}><Ic.Menu s={24} c="var(--ink)" /></button>
      <button className="ltab" aria-label="Global search"><Ic.Search s={23} c="var(--ink)" /></button>
      <button className="ltab" aria-label="Workspace"><Ic.Grid s={22} c="var(--ink)" /></button>
      <button className="ltab" aria-label="Notifications">
        <span className="bell-wrap"><Ic.Bell s={24} c="var(--ink)" /><span className="bell-dot"></span></span>
      </button>
      <button className="ltab" aria-label="List"><Ic.ListBullets s={23} c="var(--ink)" /></button>
    </nav>);

}

Object.assign(window, { Avatar, HexPlaceholder, CatTag, Header, SearchBar, FilterChips, BadgeCard, BottomNav, avaColor, initials, CAT_COLOR });