/* Chrome: left rail + top bar (top bar carries the demo controls) */
const { useState } = React;

function Rail() {
  const [active, setActive] = useState('copilot');
  const items = [
    ['home', 'home'], ['interactions', 'forum'], ['copilot', 'auto_awesome'],
    ['analytics', 'insights'], ['workforce', 'groups'], ['knowledge', 'menu_book'],
  ];
  return (
    <nav className="rail">
      <div className="brand"><img src="assets/nice-smile.svg" alt="NiCE" /></div>
      {items.map(([key, icon]) => (
        <button key={key} className={'rail-btn' + (active === key ? ' active' : '')}
          onClick={() => setActive(key)} title={key}>
          <Icon name={icon} size={25} />
        </button>
      ))}
      <div className="spacer"></div>
      <button className="rail-btn" title="Settings"><Icon name="settings" size={24} /></button>
      <div className="me" title={CXData.AGENT.name}>{CXData.AGENT.initials}</div>
    </nav>
  );
}

function TopBar({ path, onPath, mode, onMode, live }) {
  return (
    <header className="topbar">
      <div className="title">Agent workspace <span className="crumb">/ Live coaching</span></div>

      <div className="demo-controls">
        {mode !== 'cognigy' && (
          <div className="seg" role="group" aria-label="Scenario">
            {['strong', 'struggling'].map(p => (
              <button key={p} className={'seg-btn' + (path === p ? ' active' : '')} onClick={() => onPath(p)}>
                {CXData.SCENARIOS[p].label}
              </button>
            ))}
          </div>
        )}
        <button className={'mode-toggle' + (mode === 'cognigy' ? ' on' : '')} onClick={onMode}
          title={mode === 'cognigy' ? 'Free-type mode — you type the agent replies' : 'Guided mode — pre-written dialogue, scored live'}>
          <Icon name={mode === 'cognigy' ? 'person' : 'forum'} size={15} />
          {mode === 'cognigy' ? 'Free type' : 'Guided'}
        </button>
        <span className={'cognigy-badge' + (live ? ' busy' : '')} title="Every score is produced by the live Cognigy agent">
          <span className="mdot"></span>{live ? 'Cognigy scoring…' : 'Scored by Cognigy'}
        </span>
      </div>

      <div className="status-pill"><span className="dot"></span>Available</div>
    </header>
  );
}

Object.assign(window, { Rail, TopBar });