/* ============================================================
   TECHIYAT — unified Dashboard (no personas).
   One launchpad; every tool is available to everyone.
   ============================================================ */

function Kpi({ l, v, sub, ic, col }){
  return (
    <div className="card card-pad" style={{padding:18}}>
      <Icon name={ic} size={18} style={{color:col}}/>
      <div className="stat mt8"><span className="sv" style={{color:col}}>{v}</span><span className="sl">{l}</span></div>
      <span className="muted" style={{fontSize:11.5, marginTop:2}}>{sub}</span>
    </div>
  );
}

function Module({ icon, title, to, go, children, action }){
  return (
    <div className="card" style={{overflow:"hidden"}}>
      <div className="card-hd between">
        <div className="row gap10"><Icon name={icon} size={17} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16}}>{title}</h3></div>
        {to && <button className="btn btn-quiet btn-sm" onClick={()=>go(to)}>{action||"View all"} <Icon name="arrowRight" size={13}/></button>}
      </div>
      {children}
    </div>
  );
}

const QUICK_LINKS = [
  ["doc","Start a confidential assessment","Preserve your company's IP & team","founder"],
  ["compass","Browse the marketplace","Second-life IP, data, and teams","opportunities"],
  ["pulse","Monitor portfolio risk","Spot runway risk early","portfolio"],
  ["radar","Open Signal Radar","Companies surfaced from public signals","signals"],
  ["globe","Open the ecosystem view","Sector-level preservation metrics","ecosystem"],
  ["shield","Privacy & access controls","Decide who sees what, and when","trust"]
];

function Dashboard({ persona, go, openProfile }){
  const me = window.TZ.PERSONAS.find(p=>p.id===persona) || window.TZ.PERSONAS[0];
  const firstName = (me.role||"there").split(" ")[0];
  const opps = window.TZ.COMPANIES.slice(0,3);
  const detected = (window.DETECTED||[]).filter(d=>d.status!=="engaged").slice(0,3);
  const urgent = window.TZ.PORTFOLIO.filter(p=>p.risk==="high").slice(0,3);

  return (
    <div className="fadein">
      <PageHd eyebrow="Your workspace"
        title={`Welcome back, ${firstName}`}
        sub="A snapshot of opportunities, signals, and companies to watch across the ecosystem.">
        <button className="btn btn-ghost btn-sm" onClick={()=>go("agent")}><Icon name="spark" size={14} style={{color:"var(--amber)"}}/> Ask the agent</button>
        <button className="btn btn-primary btn-sm" onClick={()=>go("founder")}>Start confidential assessment <Icon name="arrowRight" size={14}/></button>
      </PageHd>

      <div className="grid g4 mb24">
        <Kpi l="Live opportunities" v="8" sub="in the marketplace" ic="compass" col="var(--pine)"/>
        <Kpi l="Surfaced this week" v="23" sub="via Signal Radar" ic="radar" col="var(--amber)"/>
        <Kpi l="Avg preservation" v="80" sub="across tracked companies" ic="heart" col="var(--moss)"/>
        <Kpi l="Preserved YTD" v="15" sub="IP & teams retained" ic="checkCircle" col="var(--moss)"/>
      </div>

      <div className="grid mb18" style={{gridTemplateColumns:"1.3fr 1fr", gap:18, alignItems:"start"}}>
        <Module icon="compass" title="Featured opportunities" to="opportunities" go={go}>
          <div>
            {opps.map((c,i)=>(
              <div key={c.id} className="row gap14" style={{padding:"14px 18px", borderTop:i?"1px solid var(--line)":"none", cursor:"pointer"}} onClick={()=>openProfile(c)}>
                <div className="side-mark" style={{width:36,height:36,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}><Icon name={SECTOR_ICON[c.domain]||SECTOR_ICON.default} size={17} style={{color:"var(--pine)"}}/></div>
                <div className="grow">
                  <div className="row gap8"><span className="mono" style={{fontSize:11, color:"var(--sage)"}}>{c.code}</span><span className={"chip "+window.TAG_LABEL[c.tag][1]} style={{fontSize:10.5, padding:"2px 7px"}}>{window.TAG_LABEL[c.tag][0]}</span></div>
                  <div style={{fontSize:13.5, fontWeight:600, color:"var(--ink)", marginTop:2}}>{c.title}</div>
                </div>
                <div className="col" style={{alignItems:"flex-end", gap:2}}>
                  <span className="mono" style={{fontSize:13, fontWeight:600, color:c.preservation>=82?"var(--moss)":"var(--amber)"}}>{c.preservation}</span>
                  <UrgencyDot level={c.urgency}/>
                </div>
              </div>
            ))}
          </div>
        </Module>

        <Module icon="radar" title="Fresh on Signal Radar" to="signals" go={go}>
          <div>
            {detected.map((d,i)=>(
              <div key={d.id} className="row gap12" style={{padding:"13px 18px", borderTop:i?"1px solid var(--line)":"none", cursor:"pointer"}} onClick={()=>go("signals")}>
                <span className="serif" style={{fontSize:19, fontWeight:600, lineHeight:1, width:30, textAlign:"center", flex:"none", color:d.confidence>=85?"var(--risk)":"var(--amber)"}}>{d.confidence}</span>
                <div className="grow col" style={{gap:0}}><span style={{fontSize:13, fontWeight:600, color:"var(--ink)"}}>{d.sector}</span><span className="muted" style={{fontSize:11.5}}>Detected ~{d.lead} early · {d.code}</span></div>
                <Icon name="chevRight" size={15} style={{color:"var(--sage-2)"}}/>
              </div>
            ))}
            <div className="row gap6" style={{padding:"11px 18px", borderTop:"1px solid var(--line)", fontSize:11.5, color:"var(--sage)", background:"var(--paper-raised)"}}><Icon name="broadcast" size={12}/> We see it before they say it.</div>
          </div>
        </Module>
      </div>

      <div className="grid mb18" style={{gridTemplateColumns:"1.3fr 1fr", gap:18, alignItems:"start"}}>
        <Module icon="pulse" title="Needs attention" to="portfolio" go={go}>
          <div>
            {urgent.map((p,i)=>{
              const c = window.TZ.COMPANIES.find(x=>x.id===p.id);
              return (
                <div key={p.id} className="row gap14" style={{padding:"14px 18px", borderTop:i?"1px solid var(--line)":"none", cursor:"pointer"}} onClick={()=>c&&openProfile(c)}>
                  <div className="side-mark" style={{width:36,height:36,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}><Icon name={SECTOR_ICON[c?.domain]||SECTOR_ICON.default} size={17} style={{color:"var(--pine)"}}/></div>
                  <div className="grow">
                    <div className="row gap8"><span style={{fontSize:13.5, fontWeight:600, color:"var(--ink)"}}>{p.name}</span><RiskBadge level={p.risk}/></div>
                    <span className="muted" style={{fontSize:12}}>{p.runway} runway · {p.sector}</span>
                  </div>
                  <span className="mono" style={{fontSize:13, fontWeight:600, color:"var(--moss)"}}>{p.preservation}</span>
                </div>
              );
            })}
          </div>
        </Module>

        <div className="card card-pad">
          <div className="eyebrow mb12">Quick actions</div>
          <div className="col gap6">
            {QUICK_LINKS.map(([ic,t,d,v])=>(
              <button key={t} className="row gap12" onClick={()=>go(v)}
                style={{padding:"10px 11px", border:"1px solid var(--line)", borderRadius:11, background:"var(--paper-raised)", cursor:"pointer", textAlign:"left", transition:"border-color .14s, background .14s"}}
                onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--line-strong)"; e.currentTarget.style.background="#fff";}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--line)"; e.currentTarget.style.background="var(--paper-raised)";}}>
                <div className="side-mark" style={{width:32,height:32,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}><Icon name={ic} size={15} style={{color:"var(--pine)"}}/></div>
                <div className="grow col" style={{gap:0}}><span style={{fontSize:13, fontWeight:600, color:"var(--ink)"}}>{t}</span><span className="muted" style={{fontSize:11.5}}>{d}</span></div>
                <Icon name="arrowRight" size={14} style={{color:"var(--sage-2)"}}/>
              </button>
            ))}
          </div>
        </div>
      </div>

      <div className="card card-pad" style={{display:"flex", gap:18, alignItems:"center", flexWrap:"wrap", background:"linear-gradient(110deg,var(--paper-raised),var(--paper-card))"}}>
        <div className="side-mark" style={{width:46,height:46,background:"linear-gradient(150deg,var(--amber-2),var(--amber))",flex:"none"}}><Icon name="spark" size={22} style={{color:"#fff"}}/></div>
        <div className="grow" style={{minWidth:220}}>
          <h3 className="serif" style={{fontSize:18}}>Ask the Intelligence Agent</h3>
          <p className="muted" style={{fontSize:13, marginTop:2}}>Find companies, summarize IP for buyers, draft anonymous listings, or flag grant obligations — with reasoning you approve.</p>
        </div>
        <button className="btn btn-dark" onClick={()=>go("agent")}>Open agent <Icon name="arrowRight" size={15}/></button>
      </div>

      <div className="heb mt24" style={{textAlign:"center", fontSize:15, color:"var(--sage-2)"}}>תחיית המתים · second life for IP, talent & technology</div>
    </div>
  );
}

Object.assign(window, { Dashboard });