// ============================================================
// wf-ia.jsx — Information Architecture: sitemap trees per app
// ============================================================

// A top-down tree: root → section boxes → leaf list inside each box.
const Tree = ({root, sections}) => (
  <div className="wf-tree-wrap">
    <div className="wf-tree">
      <div className="wf-troot">{root}</div>
      <div className="wf-tstem" />
      <div style={{height:1,background:'var(--line)',width:`calc(${(sections.length-1)*166}px + 2px)`,maxWidth:'100%'}} />
      <div className="wf-trow">
        {sections.map((s,i)=>(
          <div className="wf-tnode" key={i}>
            <div className="wf-tstem" style={{height:14}} />
            <div className="wf-tsec">{s.name}</div>
            {s.kids && (
              <ul className="wf-tkids">
                {s.kids.map((k,j)=><li key={j} className={k.startsWith('~')?'muted':''}>{k.replace(/^~/,'')}</li>)}
              </ul>
            )}
          </div>
        ))}
      </div>
    </div>
  </div>
);

const AppBlock = ({tag, title, nav, desc, root, sections}) => (
  <div style={{marginBottom:46}}>
    <Row align="baseline" gap={12} style={{marginBottom:6,flexWrap:'wrap'}}>
      <span className="wf-screen-idx" style={{background:'var(--teal)'}}>{tag}</span>
      <span className="wf-screen-title">{title}</span>
      <span className="wf-screen-tag">{nav}</span>
    </Row>
    <p className="wf-screen-caption" style={{marginBottom:8}}>{desc}</p>
    <Plain style={{padding:'10px 16px',background:'#fbfcfd'}}>
      <Tree root={root} sections={sections} />
    </Plain>
  </div>
);

function SitemapsView(){
  return (
    <React.Fragment>
      <SectionHead
        kicker="Information Architecture · Sitemaps"
        title="Navigation model & sitemaps"
        desc="Each platform is tuned to its operational context but shares one identity, one device model, and one design-token system. Below: the navigation structure for each app as a sitemap. Dashed nodes are view-only or conditional on the platform; primary surfaces are bold."
      />

      <Row gap={16} wrap style={{marginBottom:30}}>
        <Note><b>Shared identity</b> — one IdP (SSO / MFA / CAC-PIV) across all three apps</Note>
        <Note><b>Org model</b> — Organization › Division › Team › Device</Note>
        <Note><b>Persistent</b> — Classification banner + audit logging on every surface</Note>
      </Row>

      <AppBlock
        tag="DESKTOP" title="Hardware Operations Suite" nav="Left sidebar (collapsible)"
        desc="Lab / workshop / depot. Hardware-deep: calibration, firmware, diagnostics, configuration. Connected devices only."
        root="DESKTOP APP"
        sections={[
          {name:'Dashboard', kids:['Connected devices','Alerts bar','Recent activity','Quick actions']},
          {name:'Devices', kids:['Device detail ▸','Overview / HW info','Connection state']},
          {name:'Calibration', kids:['Profiles','Guided wizard','Certificates']},
          {name:'Firmware', kids:['Versions','Updates','Batch update','History']},
          {name:'Diagnostics', kids:['Test suites','Pass/fail','Export report']},
          {name:'Configuration', kids:['Profiles','Edit params','Import / export']},
          {name:'Test Suites', kids:['Pre-built','Custom','Schedule','Results']},
          {name:'Activity Log', kids:['Local actions','Timestamped','Filter']},
          {name:'Settings', kids:['Connection','Profile','Appearance','License']},
        ]}
      />

      <AppBlock
        tag="WEB" title="Command & Monitoring Console" nav="Left sidebar + top bar"
        desc="Operations center / HQ. Fleet-wide visibility, event analysis, administration. All org devices."
        root="WEB APP"
        sections={[
          {name:'Dashboard', kids:['KPI cards','Fleet health','Alert summary','Events feed']},
          {name:'Fleet Map', kids:['Status pins','Clusters','Filters','Location trail']},
          {name:'Devices', kids:['Device detail ▸','Health charts','Bulk actions']},
          {name:'Events', kids:['Unified log','Filters','Expand row','Export CSV']},
          {name:'Alerts', kids:['Active','Ack / snooze','Alert rules']},
          {name:'Reports', kids:['Templates','Builder','PDF / CSV']},
          {name:'Admin', kids:['Org / Users','Divisions & Teams','Device registry','SSO · Audit','Gesture templates','Export controls']},
          {name:'Settings', kids:['Profile','Notifications','Display','API keys']},
        ]}
      />

      <AppBlock
        tag="MOBILE" title="Field Operations (iOS / Android)" nav="Bottom tab bar (5 tabs)"
        desc="Field / deployed. Offline-first. Pairing, real-time status, comms, field reports, motion gestures. Team devices."
        root="MOBILE APP"
        sections={[
          {name:'Home', kids:['My devices','Connectivity','Active alerts','Quick actions']},
          {name:'Devices', kids:['Pair device ▸','Device detail ▸','Pull-refresh']},
          {name:'Device Detail', kids:['Status','Health','Location','Actions','Gestures ▸']},
          {name:'Comms', kids:['Team channels','Chat','Voice / photo','Offline queue']},
          {name:'Alerts', kids:['Severity-sorted','Detail','Acknowledge']},
          {name:'~Gestures', kids:['Library','Record flow','Confirmation','Settings']},
        ]}
      />

      <div className="wf-legend">
        <span><span className="wf-tsec" style={{padding:'2px 8px',fontSize:10}}>Aa</span> Top-level nav section</span>
        <span><span style={{fontFamily:'var(--mono)',fontSize:10,background:'#f6f8fa',border:'1px solid var(--line)',borderRadius:4,padding:'2px 6px'}}>kid</span> Sub-screen / view</span>
        <span><span style={{fontFamily:'var(--mono)',fontSize:10,border:'1px dashed var(--dash)',borderRadius:4,padding:'2px 6px',fontStyle:'italic',color:'var(--ink-soft)'}}>kid</span> Nested / sub-flow</span>
        <span>▸ opens detail or sub-flow</span>
      </div>
    </React.Fragment>
  );
}

const IA_SUBS = [
  {id:'sitemaps', label:'Sitemaps', comp:'SitemapsView'},
  {id:'flows', label:'User Flows', comp:'FlowsView'},
  {id:'arch', label:'Architecture', comp:'ArchView'},
];
function IASection(){
  const [sub,setSub] = React.useState(()=>localStorage.getItem('ac_ia_sub')||'sitemaps');
  React.useEffect(()=>{localStorage.setItem('ac_ia_sub',sub);},[sub]);
  const Comp = window[IA_SUBS.find(s=>s.id===sub).comp];
  return (
    <div>
      <div className="wf-subnav">
        {IA_SUBS.map((s,i)=>(
          <button key={s.id} className={s.id===sub?'active':''} onClick={()=>setSub(s.id)}>
            <span className="sc">{String(i+1).padStart(2,'0')}</span>{s.label}
          </button>
        ))}
      </div>
      {Comp ? <Comp/> : <div>Loading…</div>}
    </div>
  );
}
window.SitemapsView = SitemapsView;
window.IASection = IASection;