/* ============================================================
   TECHIYAT — investor early-warning dashboard
   ============================================================ */

function PortfolioCard({ p, openProfile }){
  const company = window.TZ.COMPANIES.find(c=>c.id===p.id);
  const tone = p.risk==="high"?"risk":p.risk==="medium"?"watch":"ok";
  return (
    <div className="card" style={{overflow:"hidden", borderLeft:`3px solid ${p.risk==="high"?"var(--risk)":p.risk==="medium"?"var(--amber)":"var(--ok)"}`}}>
      <div className="card-pad" style={{padding:18}}>
        <div className="row between mb12">
          <div className="row gap12">
            <div className="side-mark" style={{width:40,height:40,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)"}}>
              <Icon name={SECTOR_ICON[company?.domain]||SECTOR_ICON.default} size={19} style={{color:"var(--pine)"}}/>
            </div>
            <div className="col" style={{gap:1}}>
              <span style={{fontSize:15, fontWeight:600, color:"var(--ink)"}}>{p.name}</span>
              <span className="muted" style={{fontSize:12.5}}>{p.sector} · {p.owned}</span>
            </div>
          </div>
          <RiskBadge level={p.risk}/>
        </div>

        <div className="grid g3 mb12" style={{gap:10}}>
          <div className="col" style={{padding:"9px 11px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:9}}>
            <span className="muted" style={{fontSize:10.5, textTransform:"uppercase", letterSpacing:".06em"}}>Runway</span>
            <span className="row gap6" style={{fontSize:15, fontWeight:600, color:p.risk==="high"?"var(--risk)":"var(--ink)"}}><Icon name="clock" size={13}/> {p.runway}</span>
          </div>
          <div className="col" style={{padding:"9px 11px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:9}}>
            <span className="muted" style={{fontSize:10.5, textTransform:"uppercase", letterSpacing:".06em"}}>Preservation</span>
            <span className="mono" style={{fontSize:15, fontWeight:600, color:p.preservation>=80?"var(--moss)":"var(--amber)"}}>{p.preservation}</span>
          </div>
          <div className="col" style={{padding:"9px 11px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:9}}>
            <span className="muted" style={{fontSize:10.5, textTransform:"uppercase", letterSpacing:".06em"}}>Buyer fit</span>
            <span style={{fontSize:11.5, fontWeight:600, color:"var(--ink)", lineHeight:1.2}}>{p.buyers[0]}</span>
          </div>
        </div>

        <div className="row gap6 wrap mb12">
          {p.signals.map(s=><span key={s} className="badge ghost" style={{textTransform:"none", letterSpacing:0, fontSize:11}}>{s}</span>)}
        </div>

        <div style={{padding:"11px 13px", background:"var(--amber-bg)", border:"1px solid var(--amber-line)", borderRadius:10}}>
          <div className="row gap8" style={{alignItems:"flex-start"}}>
            <Icon name="bolt" size={15} style={{color:"var(--amber)", marginTop:1, flex:"none"}}/>
            <div>
              <span className="mono" style={{fontSize:10, letterSpacing:".1em", textTransform:"uppercase", color:"var(--amber)"}}>Suggested action</span>
              <p style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.45, marginTop:3}}>{p.action}</p>
            </div>
          </div>
        </div>

        <div className="row between mt12">
          <button className="btn btn-quiet btn-sm" onClick={()=>company&&openProfile(company)}>View preservation profile</button>
          <button className="btn btn-ghost btn-sm"><Icon name="handshake" size={13}/> Founder outreach</button>
        </div>
      </div>
    </div>
  );
}

function Investor({ openProfile, go }){
  const P = window.TZ.PORTFOLIO;
  const [filter,setFilter] = useState("all");
  const counts = { high:P.filter(p=>p.risk==="high").length, medium:P.filter(p=>p.risk==="medium").length, low:P.filter(p=>p.risk==="low").length };
  const list = filter==="all"? P : P.filter(p=>p.risk===filter);
  const sorted = [...list].sort((a,b)=>{ const r={high:0,medium:1,low:2}; return r[a.risk]-r[b.risk]; });

  return (
    <div className="fadein">
      <PageHd eyebrow="Portfolio monitoring · 7 companies tracked"
        title="Portfolio risk & early warning"
        sub="Spot runway risk early and pursue structured outcomes — soft landings, IP preservation, and continuation paths — before value disappears.">
        <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-dark btn-sm"><Icon name="bell" size={14}/> Alert settings</button>
      </PageHd>

      {/* summary */}
      <div className="grid g4 mb24">
        {[["Needs intervention",counts.high,"warn","var(--risk)"],["Watch closely",counts.medium,"clock","var(--amber)"],
          ["Stable",counts.low,"checkCircle","var(--ok)"],["Avg. preservation",Math.round(P.reduce((a,p)=>a+p.preservation,0)/P.length),"heart","var(--pine)"]].map(([l,v,ic,col])=>(
          <div key={l} className="card card-pad" style={{padding:18}}>
            <div className="row between"><Icon name={ic} size={18} style={{color:col}}/></div>
            <div className="stat mt8"><span className="sv" style={{color:col}}>{v}</span><span className="sl">{l}</span></div>
          </div>
        ))}
      </div>

      {/* sensitivity note */}
      <div className="card card-pad mb24" style={{padding:"14px 18px", background:"var(--paper-raised)", display:"flex", gap:12, alignItems:"center"}}>
        <Icon name="heart" size={17} style={{color:"var(--moss)", flex:"none"}}/>
        <span style={{fontSize:13.5, color:"var(--ink-2)"}}>We use careful language by design. These are <b>second-life and soft-landing opportunities</b> — not failing companies. The goal is to preserve value and protect founder relationships.</span>
      </div>

      {/* filter */}
      <div className="row between mb16">
        <div className="row gap8">
          {[["all","All"],["high","Needs intervention"],["medium","Watch"],["low","Stable"]].map(([k,l])=>(
            <button key={k} className="btn btn-sm" onClick={()=>setFilter(k)}
              style={{background:filter===k?"var(--pine)":"var(--paper-card)", color:filter===k?"#fff":"var(--ink-2)", border:"1px solid "+(filter===k?"var(--pine)":"var(--line-2)")}}>{l}</button>
          ))}
        </div>
        <span className="muted" style={{fontSize:13}}>{sorted.length} companies</span>
      </div>

      <div className="grid g2 stagger">
        {sorted.map(p=><PortfolioCard key={p.id} p={p} openProfile={openProfile}/>)}
      </div>
    </div>
  );
}

Object.assign(window, { Investor });