// Shared shell: sidebar (HOME only), topbar, chat panel, stepper

// Full sidebar shown only on the Sessions-list home screen. On session
// workspaces the sidebar is hidden entirely — the co-pilot chat sits
// flush-left in that slot. Navigation back to home happens via the
// breadcrumb / logo in the topbar.
function Sidebar({ onNav, activeSessionId }) {
  const sessions = window.SESSIONS;
  const recent = sessions.slice(0, 5);
  return (
    <aside className="sidebar full">
      <div className="sb-brand" onClick={() => onNav('home')}>
        <div className="brand-mark">7</div>
        <div className="sb-brand-text">
          <div className="sb-brand-name">7play.ai</div>
          <div className="sb-brand-sub">ua co-pilot</div>
        </div>
      </div>

      <button className="sb-cta" onClick={() => onNav('new')}>
        <Icon name="plus" size={14} /> New session
      </button>

      <div className="sb-section-label">Workspace</div>
      <div className="sb-nav">
        <div className="sb-nav-item active" onClick={() => onNav('home')}>
          <Icon name="layers" size={15} /> <span>All sessions</span>
          <span className="sb-nav-count">{sessions.length}</span>
        </div>
        <div className="sb-nav-item disabled"><Icon name="template" size={15} /> <span>Templates</span></div>
        <div className="sb-nav-item disabled"><Icon name="download" size={15} /> <span>Exports</span></div>
        <div className="sb-nav-item disabled"><Icon name="target" size={15} /> <span>Insights</span></div>
      </div>

      <div className="sb-section-label">Recent sessions</div>
      <div className="sb-recent">
        {recent.map(s => {
          const g = window.GAMES.find(x => x.id === s.gameId);
          return (
            <div key={s.id} className="sb-recent-item" onClick={() => onNav('session', s.id)}>
              <div className="sb-recent-mark" style={{ background: g?.accent || 'var(--ink)' }}>
                {(g?.name || '?').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase()}
              </div>
              <div className="sb-recent-body">
                <div className="sb-recent-name">{g?.name}</div>
                <div className="sb-recent-meta">{s.stageName.toLowerCase()} · {s.updated}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="sb-spacer" />
      <div className="sb-user">
        <div className="sb-avatar">MR</div>
        <div style={{ minWidth: 0 }}>
          <div className="sb-user-name">Maya Rodriguez</div>
          <div className="sb-user-role">ua@northbeam · pro</div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ title, crumbs, right, homeButton }) {
  return (
    <div className="topbar">
      {homeButton && (
        <div className="topbar-home" onClick={homeButton} title="Back to sessions">
          <div className="brand-mark" style={{ width: 24, height: 24, fontSize: 12 }}>7</div>
        </div>
      )}
      <div className="title">
        {crumbs && crumbs.map((c, i) => (
          <React.Fragment key={i}>
            <span className="crumb">{c}</span>
            <Icon name="chevronRight" size={12} className="" />
          </React.Fragment>
        ))}
        <span>{title}</span>
      </div>
      <div className="topbar-right">{right}</div>
    </div>
  );
}

function Stepper({ current, variant = 'numbered' }) {
  const steps = window.STAGES;
  return (
    <div className={`stepper ${variant}`}>
      {steps.map((s, i) => {
        const cls = i < current ? 'done' : i === current ? 'current' : '';
        return (
          <div key={s.key} className={`step ${cls}`}>
            <div className="num">{i < current ? '✓' : i + 1}</div>
            <span>{s.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// Persistent right-rail chat — contextual co-pilot
function ChatPanel({ stage, game, collapsed, hidden, onToggle, messages, onSend, onClear }) {
  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages?.length]);

  if (hidden) return null;

  if (collapsed) {
    return (
      <aside className="chat-collapsed-bar">
        <div className="ic-btn" onClick={onToggle} title="Expand chat">
          <Icon name="chat" size={16} />
        </div>
        <div className="ic-btn" title="History"><Icon name="history" size={16} /></div>
        <div className="ic-btn" title="Files"><Icon name="folder" size={16} /></div>
      </aside>
    );
  }
  return (
    <aside className="chat">
      <div className="chat-head">
        <div style={{
          width: 22, height: 22, borderRadius: 5, background: 'var(--ink)',
          color: 'var(--lime)', display: 'grid', placeItems: 'center', fontSize: 11,
          fontFamily: 'var(--font-mono)', fontWeight: 700, flexShrink: 0,
        }}>c</div>
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
          <div className="title">Co-pilot</div>
          <div className="sub">{stage ? `stage · ${stage.toLowerCase()}` : 'ready'}</div>
        </div>
        <button className="btn ghost sm" onClick={onToggle} title="Collapse panel" style={{ marginLeft: 'auto' }}>
          <Icon name="chevronLeft" size={13} />
        </button>
      </div>

      <div className="chat-sub">
        <span className="dot live" />
        <span>Supervised agent · haiku-4-5 · {game?.name || 'no session'}</span>
      </div>

      <div className="chat-body" ref={scrollRef}>
        {messages.map((m, i) => (
          <ChatMessage key={i} msg={m} />
        ))}
      </div>

      <div className="chat-input-wrap">
        <ChatInput onSend={onSend} />
      </div>
    </aside>
  );
}

function ChatInput({ onSend }) {
  const [text, setText] = React.useState('');
  const send = () => {
    const t = text.trim();
    if (!t) return;
    onSend && onSend(t);
    setText('');
  };
  return (
    <div className="chat-input">
      <textarea
        placeholder="Ask, or request a change…"
        rows={1}
        value={text}
        onChange={e => setText(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
      />
      <div className="chat-input-row">
        <button className="mini"><Icon name="attach" size={11} /> attach</button>
        <button className="mini">/commands</button>
        <button className="chat-input-send" onClick={send} disabled={!text.trim()}><Icon name="send" size={11} /></button>
      </div>
    </div>
  );
}

function ChatMessage({ msg }) {
  if (msg.kind === 'system') {
    return (
      <div className="msg system">
        <div className="msg-body"><Icon name="check" size={12} /> {msg.text}</div>
      </div>
    );
  }
  if (msg.kind === 'user') {
    return (
      <div className="msg user">
        <div className="msg-head"><span className="tag">You</span><span>· {msg.time}</span></div>
        <div className="msg-body">{msg.text}</div>
      </div>
    );
  }
  return (
    <div className={`msg agent ${msg.thinking ? 'thinking' : ''}`}>
      <div className="msg-head">
        <span className="tag agent">Co-pilot</span>
        <span>· {msg.time}</span>
        {msg.label && <span className="chip" style={{ fontSize: 9 }}>{msg.label}</span>}
      </div>
      <div className="msg-body">
        {msg.text}
        {msg.footer && (
          <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--line)', fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'var(--font-mono)' }}>
            {msg.footer}
          </div>
        )}
      </div>
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.Stepper = Stepper;
window.ChatPanel = ChatPanel;
window.ChatMessage = ChatMessage;