// Shared chrome — Top nav, sidebar, demo navigator, icons.
// Exposes: TopNav, Sidebar, DemoNav, Icon

const { useState, useEffect } = React;

/* ------------------------- Icons ------------------------- */
const ICON_PATHS = {
  dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
  inbox: 'M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
  briefcase: 'M20 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16',
  book: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20 M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z',
  chart: 'M3 3v18h18 M7 14l4-4 4 4 5-5',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35',
  bell: 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0',
  arrow_right: 'M5 12h14M13 5l7 7-7 7',
  chevron_right: 'M9 18l6-6-6-6',
  chevron_down: 'M6 9l6 6 6-6',
  chevron_left: 'M15 18l-6-6 6-6',
  check: 'M20 6L9 17l-5-5',
  paperclip: 'M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48',
  doc: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
  pdf: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6',
  merge: 'M8 6V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3 M3 14h18 M5 10l-2 4 2 4 M19 10l2 4-2 4 M12 6v16',
  regen: 'M1 4v6h6 M23 20v-6h-6 M3.51 9a9 9 0 0 1 14.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
  edit: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z',
  x: 'M18 6L6 18M6 6l12 12',
  sparkles: 'M12 3l1.9 4.9L19 9.8l-4.9 1.9L12 17l-1.9-4.9L5 9.8l5.1-1.9z M19 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1z M5 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1z',
  bolt: 'M13 2L3 14h9l-1 8 10-12h-9z',
  shield: 'M12 2L4 5v6c0 4.5 3.5 8 8 9 4.5-1 8-4.5 8-9V5l-8-3z',
  clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2',
  send: 'M22 2L11 13M22 2L15 22l-4-9-9-4z',
  download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
  filter: 'M22 3H2l8 9.46V19l4 2v-8.54z',
  tool: 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z',
  warning: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01',
  external: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14L21 3',
  user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  history: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8 M3 3v5h5 M12 7v5l4 2',
  parts: 'M14 7l-5 5 5 5 M3 12h11 M18 4h3v16h-3',
  message: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z',
  lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z M7 11V7a5 5 0 0 1 10 0v4',
  file_text: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
  calendar: 'M19 4H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z M16 2v4 M8 2v4 M3 10h18',
  play: 'M5 3l14 9-14 9V3z',
  pause: 'M6 4h4v16H6zM14 4h4v16h-4z',
  alert: 'M12 9v4 M12 17h.01 M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
  link: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71 M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
};

function Icon({ name, size = 18, stroke = 2, className = '', style }) {
  const d = ICON_PATHS[name];
  if (!d) return null;
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={d} />
    </svg>
  );
}

/* ------------------------- Top nav ------------------------- */
function TopNav({ unread = 8 }) {
  return (
    <div className="topnav" data-comment-anchor="topnav">
      <div className="logo"><img src="assets/logo-white.png" alt="Tennant" /></div>
      <div className="vsep"></div>
      <div className="product">Customer Care Centre <span>ANZ</span></div>
      <div style={{ width: 8 }}></div>
      <div className="search">
        <Icon name="search" size={14} stroke={2} />
        <span>Search jobs, parts, customers, knowledge…</span>
        <kbd>⌘K</kbd>
      </div>
      <div className="spacer"></div>
      <div className="right">
        <div className="icbtn" title="Activity"><Icon name="history" size={18} /></div>
        <div className="icbtn" title="Notifications"><Icon name="bell" size={18} />{unread > 0 && <span className="dot"></span>}</div>
        <div className="user">
          <div className="who">
            <div className="nm">Sarah Mitchell</div>
            <div className="ro">CCC · Tier 1 lead</div>
          </div>
          <div className="avatar">SM</div>
        </div>
      </div>
    </div>
  );
}

/* ------------------------- Sidebar ------------------------- */
const SIDEBAR_ITEMS = [
  { key: 'dashboard', label: 'Dashboard', icon: 'dashboard', screen: 1 },
  { key: 'inbox', label: 'Inbox', icon: 'inbox', screen: 1, count: '287' },
  { key: 'key-accounts', label: 'Key Accounts', icon: 'briefcase', screen: 5 },
  { key: 'knowledge', label: 'Knowledge', icon: 'book', screen: 4 },
  { key: 'reports', label: 'Reports', icon: 'chart', screen: 6 },
  { key: 'settings', label: 'Settings', icon: 'settings' },
];

const AGENT_ITEMS = [
  { key: 'triage', label: 'Inbox Triage', icon: 'sparkles', status: 'live' },
  { key: 'ewaf', label: 'E-WAF · Invoice Matcher', icon: 'merge', status: 'live' },
  { key: 'parts', label: 'Parts Interpreter', icon: 'parts', status: 'live' },
  { key: 'reports-agent', label: 'Key Account Reports', icon: 'chart', status: 'live' },
];

function Sidebar({ activeKey, onNavigate, collapsed, onToggleCollapsed }) {
  return (
    <aside className={'side' + (collapsed ? ' is-collapsed' : '')} data-comment-anchor="sidebar">
      <div className="side-toggle" onClick={onToggleCollapsed} title={collapsed ? 'Expand navigation' : 'Collapse navigation'}>
        <Icon name={collapsed ? 'chevron_right' : 'chevron_left'} size={14} />
        {!collapsed && <span>Collapse</span>}
      </div>

      {!collapsed && <div className="sec">Workspace</div>}
      {SIDEBAR_ITEMS.map(item => (
        <div
          key={item.key}
          className={'item' + (activeKey === item.key ? ' is-active' : '')}
          onClick={() => onNavigate && item.screen && onNavigate(item.screen, item.key)}
          title={collapsed ? item.label : undefined}
        >
          <Icon name={item.icon} size={18} className="ic" />
          <span className="lbl">{item.label}</span>
          {item.count && <span className="count">{item.count}</span>}
        </div>
      ))}

      {!collapsed && <div className="sec" style={{ marginTop: 8 }}>AI Agents</div>}
      {AGENT_ITEMS.map(item => (
        <div key={item.key} className="item" title={collapsed ? item.label : undefined}>
          <Icon name={item.icon} size={18} className="ic" />
          <span className="lbl" style={{ fontSize: 13 }}>{item.label}</span>
          <span className="count" style={{ color: 'var(--tn-success-500)' }}>●</span>
        </div>
      ))}

      {!collapsed && (
        <div className="pin">
          <div className="pill-status">
            <span className="ai-dot"></span>
            <span>4 agents running · last sync 06:00</span>
          </div>
        </div>
      )}
    </aside>
  );
}

/* ------------------------- Demo navigator ------------------------- */
const SCREEN_LABELS = [
  'Triage Dashboard',
  'AI Reply Review · Woolworths',
  'Parts Interpreter · Glad T20',
  'Knowledge Agent · T16 E-47',
  'Account Rules · Glad',
  'Key Account Report · Woolworths',
];

function DemoNav({ screen, setScreen }) {
  return (
    <div className="demo-nav" data-comment-anchor="demo-nav">
      <div>
        <div className="ov">Demo journey</div>
        <div className="label">{SCREEN_LABELS[screen - 1]} <span className="counter">{screen} / 6</span></div>
      </div>
      <button disabled={screen <= 1} onClick={() => setScreen(s => Math.max(1, s - 1))} title="Previous">
        <Icon name="chevron_left" size={16} />
      </button>
      <button disabled={screen >= 6} onClick={() => setScreen(s => Math.min(6, s + 1))} title="Next">
        <Icon name="chevron_right" size={16} />
      </button>
    </div>
  );
}

Object.assign(window, { Icon, TopNav, Sidebar, DemoNav, SCREEN_LABELS });