// Method 8 — Gold Fields interactive demo · app shell
// Interactive labelled sidebar, topbar, view router + transition.
// Reuses Ico/I from components.jsx.

const { Ico, I } = window;

// ---- extra icons not in the base set ----
const DI = {
  home: <g><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9 21v-6h6v6"/></g>,
  send: <g><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></g>,
  poll: <g><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></g>,
  compass: <g><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></g>,
  pencil: <g><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></g>,
  govern: <g><path d="M12 3 4 6v5c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6Z"/><path d="m9 12 2 2 4-4"/></g>,
  improve: <g><path d="M3 17l6-6 4 4 8-8"/><polyline points="14 7 21 7 21 14"/></g>,
  sense: <g><path d="M2 12h4l3 9 4-18 3 9h4"/></g>,
  qr: <g><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3M21 14v7h-7"/></g>,
  mail: <g><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></g>,
  phone: <g><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></g>,
  chev: <polyline points="6 9 12 15 18 9"/>,
};
Object.assign(I, DI);

// ---- navigation context ----
const Nav = React.createContext({ view: 'home', go: () => {} });
const useNav = () => React.useContext(Nav);

const NAV_GROUPS = [
  { items: [{ id: 'home', icon: I.home, label: 'Home' }] },
  { label: 'Assess', live: true, items: [
    { id: 'gap', icon: I.file, label: 'Gap assessment', nb: '165' },
    { id: 'workshop', icon: I.poll, label: 'Formative workshop', crit: true },
    { id: 'report', icon: I.clipboard, label: 'Health report' },
  ]},
  { label: 'Sense', live: true, items: [
    { id: 'survey', icon: I.activity, label: 'Culture survey', nb: 'live' },
  ]},
  { label: 'Your operating system', items: [
    { id: 'os', icon: I.layers, label: 'Operating system map' },
  ]},
  { label: 'Not yet enabled', locked: true, items: [
    { id: 'design', icon: I.pencil, label: 'Design', lockTo: 'os' },
    { id: 'govern', icon: I.govern, label: 'Govern', lockTo: 'os' },
    { id: 'improve', icon: I.improve, label: 'Improve', lockTo: 'os' },
  ]},
];

function SideNav() {
  const { view, go } = useNav();
  return (
    <nav className="nav">
      <div className="nav-brand">
        <div className="nav-logo">M8</div>
        <div>
          <div className="nm">Method 8</div>
          <div className="ws">Gold Fields · Group HSE</div>
        </div>
      </div>
      <div className="nav-search"><Ico d={I.search} sw={2}/><span className="ph">Search…</span><span className="kbd">⌘K</span></div>

      <div className="nav-scroll">
        {NAV_GROUPS.map((g, gi) => (
          <div key={gi} className="nav-group">
            {g.label && (
              <div className="nav-group-h">
                {g.live && <span className="live-dot"/>}
                <span>{g.label}</span>
                {g.locked && <Ico d={I.lock} sw={2} size={12} style={{ marginLeft: 'auto', opacity: .5 }}/>}
              </div>
            )}
            {g.items.map(it => {
              const active = view === it.id;
              if (g.locked) {
                return (
                  <div key={it.id} className="nav-item locked" onClick={() => go(it.lockTo)}>
                    <Ico d={it.icon} sw={2}/>{it.label}
                    <Ico d={I.lock} sw={2} size={13} className="lk" style={{ marginLeft: 'auto' }}/>
                  </div>
                );
              }
              return (
                <div key={it.id} className={`nav-item ${active ? 'active' : ''}`} onClick={() => go(it.id)}>
                  <Ico d={it.icon} sw={2}/>{it.label}
                  {it.nb && <span className="nb">{it.nb}</span>}
                  {it.crit && !it.nb && <span className="crit-dot"/>}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <div className="nav-foot">
        <div className="nav-item"><Ico d={I.help} sw={2}/>Help &amp; guides</div>
        <div className="nav-user">
          <img src="assets/avatars/av-priya.svg" alt=""/>
          <div>
            <div className="un">Priya Iyer</div>
            <div className="ur">Group HSE · Gold Fields</div>
          </div>
          <Ico d={I.settings} sw={2} size={16} style={{ marginLeft: 'auto', color: 'var(--ink4)' }}/>
        </div>
      </div>
    </nav>
  );
}

const CRUMBS = {
  home: ['Gold Fields', 'Home'],
  gap: ['Gold Fields', 'Assess', 'Gap assessment'],
  workshop: ['Gold Fields', 'Assess', 'Formative workshop'],
  report: ['Gold Fields', 'Assess', 'Health report'],
  survey: ['Gold Fields', 'Sense', 'Culture survey'],
  os: ['Gold Fields', 'Operating system'],
};

function TopBar({ role }) {
  const { view } = useNav();
  const crumbs = CRUMBS[view] || ['Gold Fields'];
  return (
    <div className="app-top">
      <nav className="crumb">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">›</span>}
            <span className={i === crumbs.length - 1 ? 'current' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </nav>
      <div className="tb-right seg">
        <span className="byline"><span className="o-dot"/> Powered by <b>Onwards</b></span>
        <div className="role-pill">
          <img src={`assets/avatars/${role.av}.svg`} alt=""/>
          {role.name}
          <Ico d={I.chev} sw={2} size={14} className="chev"/>
        </div>
        <div className="icon-btn"><Ico d={I.bell} sw={2}/><span className="dot"/></div>
      </div>
    </div>
  );
}

// roles shown in the top-right lens switcher (cosmetic — workflow blends them)
const ROLES = {
  lead: { name: 'Client lead', av: 'av-priya' },
  completer: { name: 'Site completer', av: 'av-marcus' },
  m8: { name: 'Method 8 lead', av: 'av-sarah' },
};

function AppShell() {
  const [view, setView] = React.useState(() => {
    const q = new URLSearchParams(location.search).get('view');
    const valid = ['home', 'gap', 'workshop', 'report', 'survey', 'os'];
    if (q && valid.includes(q)) return q;
    return localStorage.getItem('gfdemo.view') || 'home';
  });
  const [role, setRole] = React.useState('lead');
  const scrollRef = React.useRef(null);

  const go = React.useCallback((v, r) => {
    setView(v);
    if (r) setRole(r);
    localStorage.setItem('gfdemo.view', v);
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  }, []);

  // role auto-follows the natural workflow per destination
  React.useEffect(() => {
    const map = { gap: 'completer', workshop: 'm8', report: 'lead', survey: 'lead', os: 'lead', home: 'lead' };
    if (map[view]) setRole(map[view]);
  }, [view]);

  const views = {
    home: window.HomeView, gap: window.GapView, workshop: window.WorkshopView,
    report: window.ReportView, survey: window.SurveyView, os: window.OSView,
  };
  const ViewComp = views[view] || window.HomeView;
  const wide = view === 'os' || view === 'gap' || view === 'survey' || view === 'report';

  return (
    <Nav.Provider value={{ view, go }}>
      <div className="e8 appshell">
        <SideNav/>
        <div className="app-main">
          <TopBar role={ROLES[role]}/>
          <div className="app-scroll" ref={scrollRef}>
            <div className={`app-view ${wide ? 'wide' : ''}`} key={view}>
              <ViewComp/>
            </div>
          </div>
        </div>
      </div>
    </Nav.Provider>
  );
}

Object.assign(window, { Nav, useNav, AppShell, ROLES });