/* global React */
// Summit Exteriors — Operational Intelligence Hub chrome.
// DS-faithful product sidebar + topbar, styled straight off the Expansive EDGE
// product UI kit, populated with Summit's content.

const sidebarCss = {
  aside: { width: 268, background: '#fff', borderRight: '1px solid #e6e9eb', height: '100vh', display: 'flex', flexDirection: 'column', flexShrink: 0, position: 'sticky', top: 0 },
  workspaceRow: { padding: '16px 16px 14px', borderBottom: '1px solid #e6e9eb', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' },
  workspaceLogo: { width: 36, height: 36, borderRadius: 10, background: '#04454c', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flexShrink: 0 },
  workspaceLogoImg: { width: 32, height: 32, objectFit: 'contain' },
  workspaceMeta: { display: 'flex', flexDirection: 'column', lineHeight: 1.15, flex: 1, minWidth: 0 },
  workspaceName: { fontSize: 13, fontWeight: 600, color: '#04454c' },
  workspaceSub: { fontSize: 11, color: '#6b7273', marginTop: 2 },
  chevron: { color: '#aaa', fontSize: 11 },
  search: { margin: '14px 14px 8px', position: 'relative' },
  searchInput: { width: '100%', boxSizing: 'border-box', background: '#f3f5f6', border: '1px solid transparent', borderRadius: 8, padding: '8px 10px 8px 30px', fontSize: 13, color: '#3b3b3b', fontFamily: 'inherit', outline: 'none' },
  searchIcon: { position: 'absolute', top: '50%', left: 10, transform: 'translateY(-50%)', color: '#aaa', fontSize: 14 },
  nav: { padding: '8px 8px 16px', overflowY: 'auto', flex: 1 },
  group: { marginBottom: 6 },
  groupHead: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, cursor: 'pointer', transition: 'background 120ms' },
  groupHeadActive: { background: '#e8fcf0' },
  groupLetter: { width: 20, height: 20, borderRadius: 6, background: '#04454c', color: '#65ecac', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' },
  groupLetterActive: { background: '#65ecac', color: '#04454c' },
  groupLabel: { fontSize: 13, fontWeight: 600, color: '#04454c', flex: 1 },
  groupCount: { fontSize: 11, color: '#aaa', fontWeight: 500 },
  child: { display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px 6px 38px', borderRadius: 8, fontSize: 12.5, color: '#3b3b3b', cursor: 'pointer', transition: 'all 120ms' },
  childActive: { background: '#f5fdf8', color: '#04454c', fontWeight: 600 },
  childDot: { width: 6, height: 6, borderRadius: 999, background: '#cfd5d7', flexShrink: 0 },
  childDotActive: { background: '#65ecac' },
  footer: { borderTop: '1px solid #e6e9eb', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10 },
  avatar: { width: 32, height: 32, borderRadius: 999, background: '#04454c', color: '#65ecac', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 },
  userMeta: { display: 'flex', flexDirection: 'column', lineHeight: 1.15, flex: 1, minWidth: 0 },
  userName: { fontSize: 12, fontWeight: 600, color: '#04454c' },
  userRole: { fontSize: 11, color: '#6b7273', marginTop: 1 },
};

const NAV_GROUPS = [
  { letter: 'P', label: 'Profile', count: 5, children: ['Vision & values', 'Org chart', 'Service area', 'Insurance & WCB'] },
  { letter: 'P', label: 'People', count: 8, children: ['Hiring playbook', 'Crew onboarding', 'Fall protection refresher', 'Role scorecards'] },
  { letter: 'P', label: 'Policies', count: 11, children: ['Photo policy (draft)', 'Change order rule', 'PPE & tie-off', 'Vehicle & trailer'] },
  { letter: 'P', label: 'Processes', count: 19, children: ['Day-one re-roof setup', 'Weather call', 'Material delivery', 'Final walk & close-out', 'Quarterly retros'] },
];

function Sidebar({ activeItem = 'Day-one re-roof setup', onSelect }) {
  const [openGroup, setOpenGroup] = React.useState('Processes');
  return (
    <aside style={sidebarCss.aside}>
      <div style={sidebarCss.workspaceRow}>
        <div style={sidebarCss.workspaceLogo}>
          <img src="assets/icon-square.png" alt="Summit Exteriors" style={sidebarCss.workspaceLogoImg} />
        </div>
        <div style={sidebarCss.workspaceMeta}>
          <span style={sidebarCss.workspaceName}>Summit Exteriors Ltd.</span>
          <span style={sidebarCss.workspaceSub}>Operational Intelligence Hub · 19 processes</span>
        </div>
        <span style={sidebarCss.chevron}>▾</span>
      </div>
      <div style={sidebarCss.search}>
        <span style={sidebarCss.searchIcon}>⌕</span>
        <input style={sidebarCss.searchInput} placeholder="Search the hub…" />
      </div>
      <div style={sidebarCss.nav}>
        {NAV_GROUPS.map((g) => {
          const isOpen = openGroup === g.label;
          const isActive = g.label === 'Processes';
          return (
            <div key={g.label} style={sidebarCss.group}>
              <div
                style={{ ...sidebarCss.groupHead, ...(isActive ? sidebarCss.groupHeadActive : {}) }}
                onClick={() => setOpenGroup(isOpen ? null : g.label)}
              >
                <span style={{ ...sidebarCss.groupLetter, ...(isActive ? sidebarCss.groupLetterActive : {}) }}>{g.letter}</span>
                <span style={sidebarCss.groupLabel}>{g.label}</span>
                <span style={sidebarCss.groupCount}>{g.count}</span>
              </div>
              {isOpen && g.children.map((c) => {
                const isItemActive = c === activeItem;
                return (
                  <div
                    key={c}
                    style={{ ...sidebarCss.child, ...(isItemActive ? sidebarCss.childActive : {}) }}
                    onClick={() => onSelect && onSelect(g.label, c)}
                  >
                    <span style={{ ...sidebarCss.childDot, ...(isItemActive ? sidebarCss.childDotActive : {}) }} />
                    <span>{c}</span>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
      <div style={sidebarCss.footer}>
        <div style={sidebarCss.avatar}>MH</div>
        <div style={sidebarCss.userMeta}>
          <span style={sidebarCss.userName}>Marcus Hale</span>
          <span style={sidebarCss.userRole}>Owner · Codifier</span>
        </div>
      </div>
    </aside>
  );
}

const topbarCss = {
  bar: { height: 60, background: '#fff', borderBottom: '1px solid #e6e9eb', padding: '0 24px', display: 'flex', alignItems: 'center', gap: 16, position: 'sticky', top: 0, zIndex: 5, flexShrink: 0 },
  breadcrumbs: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#6b7273', minWidth: 0, flex: 1 },
  crumbActive: { color: '#04454c', fontWeight: 600 },
  sep: { color: '#cfd5d7' },
  iconBtn: { width: 36, height: 36, borderRadius: 8, background: 'transparent', border: '1px solid #e6e9eb', color: '#04454c', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 16 },
  iconBtnNotif: { position: 'relative' },
  notifDot: { position: 'absolute', top: 7, right: 7, width: 7, height: 7, borderRadius: 999, background: '#65ecac', border: '2px solid #fff' },
  badge: { fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', background: '#e8fcf0', color: '#04454c', padding: '4px 9px', borderRadius: 999 },
};

function TopBar() {
  return (
    <div style={topbarCss.bar}>
      <div style={topbarCss.breadcrumbs}>
        <span>Processes</span>
        <span style={topbarCss.sep}>/</span>
        <span>Field operations</span>
        <span style={topbarCss.sep}>/</span>
        <span style={topbarCss.crumbActive}>Day-one re-roof setup</span>
      </div>
      <span style={topbarCss.badge}>Live</span>
      <div style={{ ...topbarCss.iconBtn, ...topbarCss.iconBtnNotif }}>
        ☷<span style={topbarCss.notifDot} />
      </div>
      <div style={topbarCss.iconBtn}>?</div>
    </div>
  );
}

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