// App shell: left rail (Agio Admin top-level), sub-nav (Compliance section),
// header w/ breadcrumb + global search, sub-header.

function AppShell({ section, setSection, applicantCounts, openCmdK, auditorMode, children }) {
  return (
    <div className="app">
      <Rail />
      <SubNav section={section} setSection={setSection} counts={applicantCounts} openCmdK={openCmdK} auditorMode={auditorMode} />
      <main className="app-main">
        <AppHeader section={section} openCmdK={openCmdK} auditorMode={auditorMode} />
        {children}
      </main>
      {auditorMode ? <div className="auditor-watermark">READ-ONLY · AUDITOR VIEW · SCB-2026-Q2</div> : null}
    </div>
  );
}

function Rail() {
  const items = [
    { icon: window.IGraph,   label: "Dashboard",     active: false },
    { icon: window.IUsers,   label: "Users",         active: false },
    { icon: window.ICoins,   label: "Treasury",      active: false },
    { icon: window.IShield,  label: "Compliance",    active: true  },
    { icon: window.IGitMerge,label: "Networks",      active: false },
    { icon: window.IFile,    label: "Documents",     active: false },
  ];
  return (
    <nav className="app-rail" aria-label="Top-level navigation">
      <div className="app-rail-logo" title="Agio Admin">A</div>
      {items.map((it, i) => (
        <button key={i} className={`app-rail-btn ${it.active ? "is-active" : ""}`} title={it.label}>
          <it.icon size={17} />
        </button>
      ))}
      <div className="app-rail-spacer" />
      <button className="app-rail-btn" title="Settings"><ISettings size={17} /></button>
      <div className="app-rail-avatar" title="Alva Brennan · Compliance Reviewer">AB</div>
    </nav>
  );
}

function SubNav({ section, setSection, counts, openCmdK, auditorMode }) {
  const Section = (label) => <div className="subnav-section">{label}</div>;
  const Item = ({ id, icon: Icon, label, badge, badgeTone, nested, disabled }) => (
    <button
      className={`subnav-item ${nested ? "is-nested" : ""} ${section === id ? "is-active" : ""} ${disabled ? "is-disabled" : ""}`}
      onClick={() => !disabled && setSection(id)}
      disabled={disabled}
    >
      {Icon ? <Icon size={14} className="subnav-icon" /> : null}
      <span>{label}</span>
      {badge != null ? <span className={`subnav-badge ${badgeTone === "warn" ? "is-warn" : badgeTone === "bad" ? "is-bad" : ""}`}>{badge}</span> : null}
    </button>
  );

  return (
    <aside className="app-subnav" aria-label="Compliance section navigation">
      <div className="subnav-hd">
        <span className="subnav-title">Compliance</span>
        <span className="subnav-env" title={auditorMode ? "Read-only auditor session" : "Production environment"}>
          {auditorMode ? "AUDITOR" : "PROD"}
        </span>
      </div>

      {Section("Queue")}
      <div className="subnav-list">
        <Item id="queue"    icon={IUsers}    label="Pending Reviews" badge={counts.queue}    badgeTone="warn" />
        <Item id="vitals"   icon={IGraph}    label="Ops Vitals" />
      </div>

      {Section("Withdrawals")}
      <div className="subnav-list">
        <Item id="withdrawals"      icon={ICoins}   label="Pending Approval" badge={counts.withdrawals} badgeTone="warn" />
        <Item id="withdrawals-auto" icon={ICheckCirc} label="Auto-Approved Log" />
      </div>

      {Section("Diligence")}
      <div className="subnav-list">
        <Item id="coverage" icon={IGitMerge} label="Coverage Gaps"     badge={counts.coverage} badgeTone="warn" />
        <Item id="docs"     icon={ICalendar} label="Document Expiration" badge={counts.docs}    badgeTone={counts.docs > 0 ? "warn" : ""} />
        <Item id="kyt"      icon={IBolt}     label="KYT Transactions"  badge="3" badgeTone="bad" />
      </div>

      {Section("Records")}
      <div className="subnav-list">
        <Item id="audit"    icon={ILock}     label="Audit Trail" />
        <Item id="glossary" icon={IFile}     label="Glossary" />
      </div>

      {Section("Settings")}
      <div className="subnav-list">
        <Item id="settings-thresholds" icon={ISettings} label="Risk-Tier Thresholds" />
        <Item id="settings-cadence"    icon={ICalendar} label="Re-KYC Cadence" nested />
        <Item id="settings-questionnaire" icon={IFile}  label="Questionnaire Authoring" nested />
      </div>

      <div className="subnav-foot">
        <div className="cmdk-cue" onClick={openCmdK}>
          <span>Quick switch</span>
          <span style={{display:"flex", gap:4}}><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
        </div>
      </div>
    </aside>
  );
}

function AppHeader({ section, openCmdK }) {
  const titles = {
    queue:               { crumb: "Pending Reviews", title: "Pending Reviews" },
    vitals:              { crumb: "Ops Vitals",      title: "Compliance Ops Vitals" },
    withdrawals:         { crumb: "Withdrawals",     title: "Withdrawal Approvals" },
    "withdrawals-auto":  { crumb: "Withdrawals", subcrumb: "Auto-Approved Log", title: "Auto-Approved Log" },
    coverage:            { crumb: "Coverage Gaps",   title: "Coverage Gaps & UBO Completion" },
    docs:                { crumb: "Document Expiration", title: "Document Expiration" },
    kyt:                 { crumb: "KYT Transactions", title: "KYT Transactions" },
    audit:               { crumb: "Audit Trail",     title: "Audit Trail" },
    glossary:            { crumb: "Glossary",        title: "Compliance Glossary" },
    "settings-thresholds":    { crumb: "Settings", subcrumb: "Risk-Tier Thresholds", title: "Risk-Tier Thresholds" },
    "settings-cadence":       { crumb: "Settings", subcrumb: "Re-KYC Cadence",       title: "Re-KYC Cadence" },
    "settings-questionnaire": { crumb: "Settings", subcrumb: "Questionnaire Authoring", title: "Questionnaire Authoring" },
  };
  const t = titles[section] || titles.queue;
  return (
    <header className="app-header">
      <div className="bread">
        <span>Agio Admin</span>
        <span className="sep">/</span>
        <span>Compliance</span>
        <span className="sep">/</span>
        <b>{t.crumb}</b>
        {t.subcrumb ? <><span className="sep">/</span><b>{t.subcrumb}</b></> : null}
      </div>
      <div className="header-search">
        <span className="header-search-icon"><ISearch size={13} /></span>
        <input placeholder="Search applicants, withdrawals, orgs, addresses…" readOnly onClick={openCmdK} />
        <span className="header-search-kbd">⌘K</span>
      </div>
      <div className="header-tools">
        <button className="header-tool" title="Notifications"><IBolt size={14} /></button>
        <button className="header-tool" title="Help"><ICircle size={14} /></button>
      </div>
    </header>
  );
}

Object.assign(window, { AppShell });