/* ============================================================
   TECHIYAT — app shell (sidebar, topbar, persona switcher)
   ============================================================ */

const NAV = [
  { sec:"Overview" },
  { id:"dashboard", label:"Dashboard", icon:"grid" },
  { id:"matches", label:"My Matches", icon:"link" },
  { id:"signals", label:"Signal Radar", icon:"radar", badge:"23" },
  { id:"agent", label:"Intelligence Agent", icon:"spark" },
  { sec:"Sellers" },
  { id:"founder", label:"Confidential Assessment", icon:"doc", kids:"listings" },
  { sec:"Buyers" },
  { id:"opportunities", label:"Marketplace", icon:"compass", badge:"8", kids:"marketplace" },
  { sec:"Investors" },
  { id:"portfolio", label:"Portfolio Risk", icon:"pulse", kids:"portfolio" },
  { sec:"Ecosystem" },
  { id:"ecosystem", label:"Ecosystem View", icon:"globe" },
  { sec:"Account" },
  { id:"trust", label:"Privacy & Access", icon:"shield" },
  { id:"settings", label:"Settings", icon:"gear" }
];

const VIEW_TITLE = {
  dashboard:"Dashboard", opportunities:"Marketplace", matches:"My Matches",
  portfolio:"Portfolio Risk & Early Warning", signals:"Signal Radar", founder:"Confidential Assessment",
  ecosystem:"Ecosystem View", agent:"Techiyat Intelligence Agent",
  settings:"Settings", profile:"Company Profile", trust:"Privacy & Access"
};

function PersonaSwitcher({ persona, setPersona }){
  const [open,setOpen] = useState(false);
  const cur = window.TZ.PERSONAS.find(p=>p.id===persona);
  const icons = { founder:"user", buyer:"building", investor:"trend", ecosystem:"globe" };
  return (
    <div className="side-persona">
      <div className="pl mb8">Viewing as</div>
      <div className="persona-current" onClick={()=>setOpen(o=>!o)}>
        <div className="pa"><Icon name={icons[persona]} size={15} style={{color:"var(--amber-2)"}}/></div>
        <div className="col" style={{lineHeight:1.2}}>
          <span className="pn">{cur.name}</span>
          <span style={{fontSize:11.5, color:"rgba(238,243,239,.55)"}}>{cur.org}</span>
        </div>
        <Icon name="chevDown" size={15} className={"chev"+(open?" open":"")} />
      </div>
      {open && (
        <div className="persona-menu">
          {window.TZ.PERSONAS.map(p=>(
            <button key={p.id} className={"persona-btn"+(p.id===persona?" active":"")}
              onClick={()=>{ setPersona(p.id); setOpen(false); }}>
              <div className="pa"><Icon name={icons[p.id]} size={14} style={{color:"var(--amber-2)"}}/></div>
              <div className="col" style={{lineHeight:1.2}}>
                <span className="pn" style={{fontSize:13}}>{p.name}</span>
                <span style={{fontSize:11, color:"rgba(238,243,239,.5)"}}>{p.org}</span>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function subItemsFor(kids){
  const C = window.TZ.COMPANIES;
  if(kids==="marketplace") return C.slice(0,2).map(c=>({ label:c.code, sub:c.sector.split(" / ")[0], co:c }));
  if(kids==="portfolio") return window.TZ.PORTFOLIO.slice(0,2).map(p=>({ label:p.name, sub:p.runway, co:C.find(c=>c.id===p.id) }));
  if(kids==="listings") return [{ label:"NegevDx", sub:"TX-4471", co:C.find(c=>c.id==="negevdx") }];
  return [];
}

function Sidebar({ view, go, persona, setPersona, openProfile }){
  return (
    <aside className="sidebar">
      <div className="side-brand">
        <div className="side-mark"><Mark size={20}/></div>
        <div>
          <div className="side-name">Techiyat</div>
          <div className="side-sub">תחיית המתים</div>
        </div>
      </div>
      <nav className="side-nav">
        {NAV.map((n,i)=>{
          if(n.sec) return <div key={i} className="side-sec">{n.sec}</div>;
          const kids = n.kids ? subItemsFor(n.kids) : null;
          return (
            <React.Fragment key={n.id}>
              <button className={"nav-item"+(view===n.id?" active":"")} onClick={()=>go(n.id)}>
                <Icon name={n.icon} size={17} className="ni-ic"/>
                <span>{n.label}</span>
                {n.badge && <span className="nav-badge">{n.badge}</span>}
              </button>
              {kids && kids.map((k,j)=>(
                <button key={j} className="nav-sub" onClick={()=>k.co && openProfile && openProfile(k.co)} title={k.co?k.co.title:k.label}>
                  <span className="dot"/>
                  <span className="nav-sub-l">{k.label}</span>
                  <span className="nav-sub-s">{k.sub}</span>
                </button>
              ))}
            </React.Fragment>
          );
        })}
      </nav>
      <div className="side-foot">
        <div className="row gap8" style={{marginBottom:4}}><Icon name="lock" size={13}/> Confidential by design</div>
        <span className="heb">תחיית המתים</span> · second life for IP
      </div>
    </aside>
  );
}

function Topbar({ view, persona, go }){
  const cur = window.TZ.PERSONAS.find(p=>p.id===persona);
  return (
    <header className="topbar">
      <button className="btn-quiet btn btn-sm" style={{padding:"7px 9px"}} onClick={()=>go("landing")} title="Home">
        <Icon name="arrowRight" size={16} style={{transform:"rotate(180deg)"}}/>
      </button>
      <div className="col" style={{gap:0}}>
        <h2>{VIEW_TITLE[view]||"Techiyat"}</h2>
      </div>
      <div className="top-search">
        <Icon name="search" size={16}/>
        <input placeholder="Search companies, assets, sectors…" />
      </div>
      <button className="btn btn-ghost btn-sm" onClick={()=>go("agent")}>
        <Icon name="spark" size={15} style={{color:"var(--amber)"}}/> Ask the agent
      </button>
      <button className="x-btn" title="Notifications"><Icon name="bell" size={17}/></button>
      <button className="top-persona" onClick={()=>go("settings")} title="Account">
        <div className="avatar">{cur.ini}</div>
        <div className="col" style={{gap:0, lineHeight:1.15, alignItems:"flex-start"}}>
          <span style={{fontSize:13, fontWeight:600, color:"var(--ink)", whiteSpace:"nowrap"}}>{cur.role}</span>
          <span style={{fontSize:11, color:"var(--sage)", whiteSpace:"nowrap"}}>{cur.org}</span>
        </div>
      </button>
    </header>
  );
}

function AppShell({ view, go, persona, setPersona, openProfile, children, wide }){
  return (
    <div className="app">
      <Sidebar view={view} go={go} persona={persona} setPersona={setPersona} openProfile={openProfile} />
      <div className="main">
        <Topbar view={view} persona={persona} go={go} />
        <div className={"canvas"+(wide?" wide":"")}>{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, { AppShell, NAV, VIEW_TITLE });