/* global React, Icons */
// Top navigation bar with step rail + closer-mode strip

const { useState } = React;

function Topbar({ step, mode, percentComplete }) {
  const steps = [
    { key: 'industry', label: 'Industry' },
    { key: 'basics', label: 'Business basics' },
    { key: 'voice', label: 'Voice & persona' },
    { key: 'scenarios', label: 'Scenarios' },
    { key: 'transfer', label: 'Transfer & hours' },
    { key: 'kb', label: 'Knowledge' },
    { key: 'integrations', label: 'Integrations' },
    { key: 'phone', label: 'Phone setup' },
    { key: 'review', label: 'Review' },
  ];
  const currentIdx = steps.findIndex((s) => s.key === step);

  // Show abbreviated rail: prev, current, next
  const visible = [];
  for (let i = 0; i < steps.length; i++) {
    if (i === currentIdx || i === currentIdx - 1 || i === currentIdx + 1) {
      visible.push({ ...steps[i], idx: i });
    }
  }

  return (
    <header className="topbar" data-screen-label="Order Panel — top nav">
      <div className="topbar-logo">
        <img src="assets/logo-64.png" alt="AgentZap" />
        <div className="topbar-logo-text">AgentZap <span>· Order</span></div>
      </div>
      <div className="topbar-divider"></div>
      <div className="topbar-step-rail">
        {visible.map((s, i) => {
          const isDone = s.idx < currentIdx;
          const isActive = s.idx === currentIdx;
          return (
            <React.Fragment key={s.key}>
              <div className={`topbar-step ${isDone ? 'done' : ''} ${isActive ? 'active' : ''}`}>
                <div className="topbar-step-num">
                  {isDone ? <Icons.Check size={12} strokeWidth={3} /> : String(s.idx + 1).padStart(2, '0')}
                </div>
                <span>{s.label}</span>
              </div>
              {i < visible.length - 1 && <div className="topbar-step-link"></div>}
            </React.Fragment>
          );
        })}
      </div>
      <div className="topbar-right">
        <div className="topbar-progress">
          <span>{percentComplete}%</span>
          <div className="topbar-progress-bar">
            <div style={{ width: `${percentComplete}%` }}></div>
          </div>
        </div>
        <div className="topbar-save">
          <span className="topbar-save-dot"></span>
          Saved
        </div>
        <button className="topbar-help">Save & exit</button>
      </div>
    </header>
  );
}

function CloserStrip({ closerName = 'Marcus T.', prospectName = 'Jess @ Bloom & Vine' }) {
  return (
    <div className="closer-strip">
      <span className="closer-strip-tag">● Closer mode</span>
      <span className="closer-strip-msg">
        <b>{closerName}</b> is on the call with <b>{prospectName}</b>. Walk her through the scenarios — every "yes" updates her total.
      </span>
      <span className="closer-strip-spacer"></span>
      <span className="closer-strip-pill">
        <span className="dot"></span>
        Screen-share active · 14:23
      </span>
      <span className="closer-strip-pill">
        Script <Icons.Arrow size={12} />
      </span>
    </div>
  );
}

window.Topbar = Topbar;
window.CloserStrip = CloserStrip;