/* global React, Icon, NAV, BANK, Avatar, Drawer, DrawerHead, PEOPLE */
const { useState: useStateShell } = React;

/* ============================================================
   SIDEBAR
   ============================================================ */
function Sidebar({ route, go }) {
  return (
    <nav className="sidebar">
      <div className="sb-brand">
        <div className="sb-mark">T</div>
        <div className="name">Treasury<b>OS</b></div>
      </div>

      <div className="sb-context" onClick={() => go("control")} title="Switch entity / cycle">
        <div className="row">
          <span className="ent">{BANK.name}</span>
          <Icon name="chevD" size={14} className="muted" />
        </div>
        <div className="cyc">{BANK.cycle}</div>
      </div>

      <div className="sb-scroll">
        {NAV.map(grp => (
          <div key={grp.group}>
            <div className="sb-group-label">{grp.group}</div>
            {grp.items.map(it => {
              const target = it.route || it.id;
              const wpView = window.__wpView || "";
              const active =
                (it.id === "workpaper" && route === "workpaper" && wpView !== "lcr") ||
                (it.id === "wp-lcr" && route === "workpaper" && wpView === "lcr") ||
                (it.id !== "workpaper" && it.id !== "wp-lcr" && route === target);
              return (
                <div key={it.id}
                  className={"nav-item" + (active ? " active" : "")}
                  style={it.sub ? { paddingLeft: 38, fontSize: 13 } : null}
                  onClick={() => { if (it.id === "wp-lcr") window.__wpView = "lcr"; else if (it.id === "workpaper") window.__wpView = "alm"; go(target); }}>
                  {!it.sub && <Icon name={it.icon} size={17} className="ic" />}
                  <span>{it.label}</span>
                  {it.count != null && <span className={"count " + (it.countCls || "muted")}>{it.count}</span>}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <div className="sb-foot">
        <div className="nav-item" onClick={() => go("onboarding")}><Icon name="plug" size={17} className="ic" /><span>Setup &amp; onboarding</span></div>
        <div className="nav-item" onClick={() => go("admin")}><Icon name="settings" size={17} className="ic" /><span>Admin &amp; Governance</span></div>
        <div className="nav-item" style={{ marginTop: 2 }}>
          <Avatar name="Hana Girma" size={22} />
          <div style={{ lineHeight: 1.15, whiteSpace: "nowrap" }}>
            <div style={{ fontWeight: 700, fontSize: 12.5 }}>Hana Girma</div>
            <div className="muted" style={{ fontSize: 10.5 }}>Treasury Head</div>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   TOP BAR
   ============================================================ */
function TopBar({ crumbs, onHelp }) {
  const [notificationsOpen, setNotificationsOpen] = useStateShell(false);
  return (
    <React.Fragment>
      <div className="topbar">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <Icon name="chevR" size={13} className="muted" />}
            <span className="crumb" style={i === crumbs.length - 1 ? { color: "var(--ink)", fontWeight: 600 } : null}>{c}</span>
          </React.Fragment>
        ))}
        <div className="search">
          <Icon name="search" size={14} />
          <span>Search bank, source, cell, rule…</span>
          <span className="kbd">⌘K</span>
        </div>
        <button className="icon-btn" title="Notifications" onClick={() => setNotificationsOpen(true)}><Icon name="bell" size={16} /></button>
        <button className="icon-btn" onClick={onHelp} title="About this screen"><Icon name="help" size={16} /></button>
      </div>
      {notificationsOpen && <Drawer open={notificationsOpen} onClose={() => setNotificationsOpen(false)}>
        <DrawerHead title="Notifications" sub="Current cycle alerts" onClose={() => setNotificationsOpen(false)} />
        <div className="drawer-body">
          {[
            ["Rule evidence", "2 references need checker review", "clipboard"],
            ["Data Harmonizer", "Failed rows remain in the off-balance source", "database"],
            ["Export Gate", "Official export remains blocked by open gates", "lock"],
          ].map((n, i) => (
            <div key={i} className="evi-row">
              <span className="ic-wrap"><Icon name={n[2]} size={15} /></span>
              <div className="grow"><div className="t">{n[0]}</div><div className="d">{n[1]}</div></div>
            </div>
          ))}
        </div>
        <div className="drawer-foot">
          <button className="btn btn-dark" style={{ marginLeft: "auto" }} onClick={() => setNotificationsOpen(false)}>Done</button>
        </div>
      </Drawer>}
    </React.Fragment>
  );
}

/* ============================================================
   PAGE HEADER (eyebrow + big title + info)
   ============================================================ */
function PageHeader({ eyebrow, title, onInfo, right }) {
  return (
    <div className="between" style={{ alignItems: "flex-end", marginBottom: 22 }}>
      <div>
        {eyebrow && <div className="page-eyebrow">{eyebrow}</div>}
        <div className="page-title">
          <h1>{title}</h1>
          <span className="info-dot" onClick={onInfo} title="About this screen"><Icon name="info" size={14} /></span>
        </div>
      </div>
      {right && <div className="center gap10">{right}</div>}
    </div>
  );
}

/* ============================================================
   SCREEN HELP DRAWER ("About this screen")
   ============================================================ */
function HelpDrawer({ open, onClose, help }) {
  if (!help) return null;
  return (
    <Drawer open={open} onClose={onClose}>
      <DrawerHead title={help.title} sub="About this screen" onClose={onClose} />
      <div className="drawer-body">
        <Section t="Purpose">{help.purpose}</Section>
        <Section t="Look at this first">{help.first}</Section>
        <Section t="Key terms">
          <dl className="meta" style={{ gridTemplateColumns: "150px 1fr" }}>
            {help.terms.map(([k, v], i) => <React.Fragment key={i}><dt>{k}</dt><dd style={{ fontWeight: 500, color: "var(--ink-2)" }}>{v}</dd></React.Fragment>)}
          </dl>
        </Section>
        <Section t="Next actions">
          <ul className="help-list">{help.next.map((n, i) => <li key={i}>{n}</li>)}</ul>
        </Section>
        <Section t="Connections">
          <ul className="help-list">{help.connections.map((n, i) => <li key={i}>{n}</li>)}</ul>
        </Section>
        <div className="banner banner-amber" style={{ marginTop: 8 }}>
          <Icon name="lock" size={18} className="ic" />
          <div><b>Guardrail.</b> {help.guardrail}</div>
        </div>
      </div>
    </Drawer>
  );
}
function Section({ t, children }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div className="section-label" style={{ marginBottom: 7 }}>{t}</div>
      <div style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{children}</div>
    </div>
  );
}

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