/* ============================================================
   TECHIYAT — confidential company profile (post-approval)
   ============================================================ */

function PField({ label, children }){
  return (
    <div className="col" style={{gap:3}}>
      <span className="mono" style={{fontSize:10, letterSpacing:".08em", textTransform:"uppercase", color:"var(--sage-2)"}}>{label}</span>
      <span style={{fontSize:13.5, color:"var(--ink)", fontWeight:500}}>{children}</span>
    </div>
  );
}

function Section({ icon, title, children, aside }){
  return (
    <div className="card mb18" style={{overflow:"hidden"}}>
      <div className="card-hd between">
        <div className="row gap10"><Icon name={icon} size={16} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16}}>{title}</h3></div>
        {aside}
      </div>
      <div className="card-pad">{children}</div>
    </div>
  );
}

const TX_STRUCTURES = [
  ["IP acquisition","Acquire patents, code, and know-how outright."],
  ["Patent acquisition","Targeted purchase of the granted patent family."],
  ["License agreement","Non-exclusive or exclusive license of the technology."],
  ["Acqui-hire","Retain the team; absorb the product into yours."],
  ["Asset sale","Purchase selected assets without the entity."],
  ["Strategic merger","Combine into a larger continuing entity."],
  ["Spin-in to corporate","Fold the unit into a corporate buyer."],
  ["Team transfer","Move the core team under a new employer."],
  ["Bridge-to-acquisition","Finance runway with a path to acquisition."]
];

function Profile({ c, go, onRequest, unlocked }){
  if(!c) return null;
  const [open,setOpen] = useState(unlocked || false);
  const masked = !open;

  return (
    <div className="fadein">
      <button className="btn btn-quiet btn-sm mb16" onClick={()=>go("opportunities")}><Icon name="arrowRight" size={15} style={{transform:"rotate(180deg)"}}/> Back to marketplace</button>

      {/* header */}
      <div className="card mb18" style={{overflow:"hidden"}}>
        <div className="ph" data-label={c.domain+" · confidential profile"} style={{height:120, borderRadius:0, border:"none", borderBottom:"1px solid var(--line)"}}/>
        <div className="card-pad" style={{padding:"20px 24px"}}>
          <div className="row between wrap" style={{gap:14}}>
            <div className="grow" style={{minWidth:260}}>
              <div className="row gap10 mb8">
                <span className="mono" style={{fontSize:12, color:"var(--sage)"}}>{c.code}</span>
                <span className={"chip "+TAG_LABEL[c.tag][1]} style={{fontSize:11.5}}>{TAG_LABEL[c.tag][0]}</span>
                {c.grant && <span className="chip"><Icon name="flag" size={12}/> IIA-backed</span>}
              </div>
              <h1 className="serif" style={{fontSize:25, lineHeight:1.15}}>{masked? c.title : c.revealed+" — "+c.title}</h1>
              <div className="row gap14 wrap mt12" style={{fontSize:13, color:"var(--ink-2)"}}>
                <span className="row gap6"><Icon name={SECTOR_ICON[c.domain]||SECTOR_ICON.default} size={14}/> {c.sector}</span>
                <span className="row gap6"><Icon name="users" size={14}/> Team {c.team}</span>
                <span className="row gap6"><Icon name="map" size={14}/> {masked? "Israel" : c.location}</span>
                <span className="row gap6"><Icon name="clock" size={14}/> {c.runway} runway</span>
              </div>
            </div>
            <div className="col" style={{alignItems:"center", gap:6}}>
              <div className="mono" style={{fontSize:11, color:"var(--sage)"}}>PRESERVATION</div>
              <ScoreRing value={c.preservation} size={108} label="score"/>
            </div>
          </div>
        </div>
      </div>

      {/* approval banner */}
      {masked ? (
        <div className="card card-pad mb18" style={{background:"var(--amber-bg)", border:"1px solid var(--amber-line)", display:"flex", gap:14, alignItems:"center", flexWrap:"wrap"}}>
          <div className="side-mark" style={{width:42,height:42,background:"var(--amber)",boxShadow:"none",flex:"none"}}><Icon name="lock" size={20} style={{color:"#fff"}}/></div>
          <div className="grow" style={{minWidth:220}}>
            <h3 style={{fontSize:15}}>Identity & full profile are approval-gated</h3>
            <p style={{fontSize:13, color:"var(--ink-2)", marginTop:2}}>Founder-controlled. Request access to unlock identity, cap table, IP inventory, and team map — the founder approves each request.</p>
          </div>
          <button className="btn btn-amber" onClick={()=>setOpen(true)}><Icon name="check" size={15}/> Request founder approval</button>
        </div>
      ) : (
        <div className="card card-pad mb18" style={{background:"var(--ok-bg)", border:"1px solid #cfe0d2", display:"flex", gap:12, alignItems:"center"}}>
          <Icon name="checkCircle" size={20} style={{color:"var(--ok)", flex:"none"}}/>
          <span style={{fontSize:13.5, color:"var(--ink-2)"}}><b>Access approved.</b> Full confidential profile unlocked · access logged · founder approval still required before any introduction.</span>
        </div>
      )}

      <div className="grid" style={{gridTemplateColumns:"1.6fr 1fr", gap:18, alignItems:"start"}}>
        {/* LEFT: detail sections */}
        <div>
          <Section icon="doc" title="Company overview">
            <p style={{fontSize:14, color:"var(--ink-2)", lineHeight:1.6}}>{c.blurb}</p>
            <div className="grid g3 mt16" style={{gap:14}}>
              <PField label="Stage">{c.stage}</PField>
              <PField label="Status">{c.status}</PField>
              <PField label="Regulatory">{c.reg}</PField>
              <PField label="Patents">{c.patent}</PField>
              <PField label="Grant">{c.grant? "IIA-backed":"None"}</PField>
              <PField label="Access">{c.gated? "Founder-approved":"Open review"}</PField>
            </div>
          </Section>

          <Section icon="layers" title="Asset summary">
            <div className="grid g2" style={{gap:10}}>
              {c.assets.map(a=>(
                <div key={a} className="row gap10" style={{padding:"11px 13px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:10}}>
                  <Icon name="check" size={15} style={{color:"var(--moss)"}}/>
                  <span style={{fontSize:13.5, fontWeight:500, color:"var(--ink)"}}>{a}</span>
                </div>
              ))}
            </div>
          </Section>

          <div className="grid g2" style={{gap:18}}>
            <Section icon="file" title="IP inventory">
              <div className="col gap10">
                <div className="row between"><span className="muted" style={{fontSize:13}}>Granted patents</span><span className="mono" style={{fontWeight:600}}>{masked?"•••":c.patent.split(",")[0]}</span></div>
                <div className="row between"><span className="muted" style={{fontSize:13}}>Codebase maturity</span><span className="mono" style={{fontWeight:600, color:"var(--moss)"}}>Production</span></div>
                <div className="row between"><span className="muted" style={{fontSize:13}}>Open-source deps</span><span className="mono" style={{fontWeight:600}}>{masked?"•••":"Audited · MIT/Apache"}</span></div>
              </div>
            </Section>
            <Section icon="database" title="Data assets">
              <div className="col gap10">
                <div className="row between"><span className="muted" style={{fontSize:13}}>Proprietary dataset</span><span className="mono" style={{fontWeight:600, color:"var(--moss)"}}>Yes</span></div>
                <div className="row between"><span className="muted" style={{fontSize:13}}>Regulatory status</span><span className="mono" style={{fontWeight:600}}>{c.reg}</span></div>
                <div className="row between"><span className="muted" style={{fontSize:13}}>Customer contracts</span><span className="mono" style={{fontWeight:600}}>{masked?"•••":c.assetTypes.includes("customers")?"Active":"—"}</span></div>
              </div>
            </Section>
          </div>

          <Section icon="users" title="Team map" aside={<span className="muted" style={{fontSize:12}}>{c.team} people</span>}>
            <div className="row gap8 wrap">
              {["Founder / CEO","CTO","ML / CV lead","Regulatory","Senior eng ×4","Product","Clinical / domain","Data"].slice(0, masked?4:8).map((t,i)=>(
                <div key={i} className="row gap8" style={{padding:"8px 11px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:20}}>
                  <div className="avatar" style={{width:24,height:24,fontSize:10}}>{t.split(" ").map(w=>w[0]).slice(0,2).join("")}</div>
                  <span style={{fontSize:12.5, color:"var(--ink-2)"}}>{t}</span>
                </div>
              ))}
              {masked && <span className="muted" style={{fontSize:12.5, alignSelf:"center"}}>+ more after approval</span>}
            </div>
          </Section>

          <div className="grid g2" style={{gap:18}}>
            <Section icon="scale" title="Cap table summary">
              {masked ? <p className="muted" style={{fontSize:13}}><Icon name="lock" size={13} style={{verticalAlign:"-2px"}}/> Sensitive — unlocks after founder approval.</p> :
                <div className="col gap8">
                  <div className="row between"><span className="muted" style={{fontSize:13}}>Founders</span><span className="mono">48%</span></div>
                  <div className="row between"><span className="muted" style={{fontSize:13}}>Investors</span><span className="mono">39%</span></div>
                  <div className="row between"><span className="muted" style={{fontSize:13}}>ESOP</span><span className="mono">13%</span></div>
                </div>}
            </Section>
            <Section icon="flag" title="Grant obligations">
              <p style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.5}}>
                {c.grant? "IIA IP-retention clause active. An IP sale may require Authority notification and possible royalty/repayment terms — factor into structure." : "No grant obligations on file."}
              </p>
            </Section>
          </div>

          <Section icon="warn" title="Risk notes">
            <ul style={{margin:0, paddingLeft:18, fontSize:13.5, color:"var(--ink-2)", lineHeight:1.7}}>
              <li>Runway is the primary time constraint ({c.runway}). Move deliberately but promptly.</li>
              <li>{c.grant? "Grant IP-retention terms must be cleared before transfer." : "No grant entanglement to clear."}</li>
              <li>Team retention is key to value — structure incentives for the core team.</li>
            </ul>
          </Section>
        </div>

        {/* RIGHT: sticky actions */}
        <div style={{position:"sticky", top:78}}>
          <div className="card card-pad mb18">
            <div className="eyebrow mb12">Request introduction</div>
            <p style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.5}}>Founder approval is required before any introduction. Nothing is shared externally without consent.</p>
            <button className="btn btn-primary btn-block mt16" onClick={()=>onRequest(c)}><Icon name="handshake" size={16}/> Request intro</button>
            <button className="btn btn-ghost btn-block mt8" onClick={()=>go("agent")}><Icon name="spark" size={15} style={{color:"var(--amber)"}}/> Ask agent about this company</button>
            <div className="row gap8 mt12" style={{fontSize:11.5, color:"var(--sage)", justifyContent:"center"}}><Icon name="eye" size={13}/> Your view is logged in the audit trail</div>
          </div>

          {(()=>{
            const d = (window.DETECTED||[]).find(x=>x.id===c.id);
            return (
              <div className="card mb18" style={{overflow:"hidden", borderColor:"#cfdde2"}}>
                <div className="card-hd" style={{background:"var(--info-bg)", borderColor:"#cfdde2"}}>
                  <Icon name="radar" size={16} style={{color:"var(--info)"}}/><h3 className="serif" style={{fontSize:15.5}}>How we surfaced this</h3>
                </div>
                <div className="card-pad" style={{padding:16}}>
                  {d ? <>
                    <div className="row gap8 mb12"><span className="badge info">Detected ~{d.lead} early</span><span className="mono" style={{fontSize:12, color:"var(--sage)", alignSelf:"center"}}>confidence {d.confidence}</span></div>
                    <div className="col gap8">
                      {d.signals.slice(0,3).map((s,i)=>(
                        <div key={i} className="row gap8" style={{fontSize:12.5, color:"var(--ink-2)"}}>
                          <Icon name={s.ic} size={13} style={{color:"var(--sage)", flex:"none", marginTop:2}}/>
                          <span><b style={{color:"var(--ink)"}}>{s.src}</b> · {s.label}</span>
                        </div>
                      ))}
                    </div>
                    <button className="btn btn-ghost btn-block btn-sm mt12" onClick={()=>go("signals")}>View on Signal Radar <Icon name="arrowRight" size={13}/></button>
                  </> : <p style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.5}}>Founder-submitted through a confidential assessment — no external distress signals were used to surface this company.</p>}
                </div>
              </div>
            );
          })()}

          <div className="card" style={{overflow:"hidden"}}>
            <div className="card-hd"><Icon name="handshake" size={16} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:15.5}}>Suggested transaction structures</h3></div>
            <div className="card-pad" style={{padding:14}}>
              <div className="col gap8">
                {TX_STRUCTURES.filter((t,i)=> c.outcome.some(o=>t[0].toLowerCase().includes(o.split(" ")[0].toLowerCase())) || i<4).slice(0,5).map(([t,d])=>(
                  <div key={t} style={{padding:"11px 12px", background:"var(--paper-raised)", border:"1px solid var(--line)", borderRadius:10}}>
                    <div style={{fontSize:13.5, fontWeight:600, color:"var(--ink)"}}>{t}</div>
                    <div className="muted" style={{fontSize:12, marginTop:1}}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="card card-pad mt18">
            <div className="eyebrow mb12">Recommended buyer types</div>
            <div className="col gap8">
              {c.fit.map(f=><span key={f} className="row gap8" style={{fontSize:13.5, color:"var(--ink-2)"}}><Icon name="target" size={14} style={{color:"var(--moss)"}}/> {f}</span>)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Profile });
