/* ============================================================
   TECHIYAT — My Matches (two-sided: buy side + sell side)
   ============================================================ */

/* ---------- shared bits ---------- */
function MatchRow({ c, openProfile, onRequest }){
  return (
    <div className="card card-hover" onClick={()=>openProfile(c)}>
      <div className="card-pad" style={{padding:18}}>
        <div className="row gap14" style={{alignItems:"flex-start"}}>
          <div className="side-mark" style={{width:44,height:44,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}>
            <Icon name={SECTOR_ICON[c.domain]||SECTOR_ICON.default} size={21} style={{color:"var(--pine)"}}/>
          </div>
          <div className="grow">
            <div className="row between">
              <span className="mono" style={{fontSize:11.5, color:"var(--sage)"}}>{c.code}</span>
              <span className="mono" style={{fontSize:13, fontWeight:700, color:"var(--moss)"}}>{c.preservation}% fit</span>
            </div>
            <h3 style={{fontSize:15.5, lineHeight:1.25, margin:"3px 0 8px"}}>{c.title}</h3>
            <div className="row gap6 wrap">
              {c.assets.slice(0,3).map(a=><span key={a} className="tag" style={{fontSize:11.5}}>{a}</span>)}
            </div>
          </div>
        </div>
        <div className="mt12" 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="spark" size={15} style={{color:"var(--amber)", marginTop:1, flex:"none"}}/>
            <span style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.45}}>{c.match}</span>
          </div>
        </div>
        <div className="row between mt12">
          <UrgencyDot level={c.urgency}/>
          <button className="btn btn-ghost btn-sm" onClick={e=>{e.stopPropagation(); onRequest(c);}}>
            {c.gated? <><Icon name="lock" size={13}/> Request access</> : "Request review"} <Icon name="arrowRight" size={13}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function Kanban({ columns, render }){
  return (
    <div className="kan">
      {columns.map(col=>(
        <div key={col.stage} className="kan-col">
          <div className="kan-hd"><span className="kt">{col.stage}</span><span className="kc">{col.items.length}</span></div>
          {col.items.map(render)}
          {!col.items.length && <div style={{padding:"14px 6px", fontSize:11.5, color:"var(--sage-2)", textAlign:"center"}}>—</div>}
        </div>
      ))}
    </div>
  );
}

/* ---------- BUY SIDE ---------- */
function BuyView({ openProfile, onRequest, go }){
  const B = window.TZ.BUYER;
  const matches = window.TZ.COMPANIES.filter(c=>["negevdx","kinneret","nili","carmel"].includes(c.id));
  const stats = [["4","Active matches","link"],["1","Access granted","check"],["2","Watchlisted","eye"],["7","Sectors tracked","layers"]];
  const findCo = n => window.TZ.COMPANIES.find(c=>c.revealed===n) || window.TZ.COMPANIES.find(c=>c.revealed.includes(n.split(" ")[0]));
  return (
    <div className="fadein">
      <div className="grid mb24" style={{gridTemplateColumns:"1.4fr 1fr", gap:18}}>
        <div className="card card-pad">
          <div className="row between mb12"><div className="eyebrow">Your acquisition profile</div><button className="btn btn-quiet btn-sm" style={{padding:"4px 8px"}}><Icon name="sliders" size={13}/> Edit</button></div>
          <p className="serif" style={{fontSize:19, color:"var(--ink)", lineHeight:1.35}}>“{B.profile}”</p>
          <div className="row gap8 wrap mt16">
            {B.interests.map(i=><span key={i} className="chip"><Icon name="target" size={12}/> {i}</span>)}
          </div>
        </div>
        <div className="grid g2" style={{gap:12}}>
          {stats.map(([v,l,ic])=>(
            <div key={l} className="card card-pad" style={{padding:16}}>
              <Icon name={ic} size={17} style={{color:"var(--pine)"}}/>
              <div className="stat mt8"><span className="sv" style={{fontSize:26}}>{v}</span><span className="sl">{l}</span></div>
            </div>
          ))}
        </div>
      </div>

      <div className="row between mb16">
        <h2 className="serif" style={{fontSize:20}}>Opportunities matched to you</h2>
        <span className="muted" style={{fontSize:13}}>Ranked by strategic fit</span>
      </div>
      <div className="grid g2 stagger mb32">
        {matches.map(c=><MatchRow key={c.id} c={c} openProfile={openProfile} onRequest={onRequest}/>)}
      </div>

      <div className="card" style={{overflow:"hidden"}}>
        <div className="card-hd between">
          <div className="row gap10"><Icon name="layers" size={17} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16.5}}>Your acquisition pipeline</h3></div>
          <span className="muted" style={{fontSize:12.5}}>Watchlisted → Requested → Granted → Intro → Diligence → Offer → Closed</span>
        </div>
        <div className="card-pad" style={{padding:16}}>
          <Kanban columns={B.pipeline} render={name=>{
            const c = findCo(name);
            return (
              <div key={name} className="kan-card" onClick={()=>c&&openProfile(c)}>
                <div className="row between mb6"><span className="mono" style={{fontSize:10.5,color:"var(--sage)"}}>{c?c.code:"TX-•••"}</span>{c&&<span className="mono" style={{fontSize:11,fontWeight:600,color:"var(--moss)"}}>{c.preservation}%</span>}</div>
                <div style={{fontSize:12.5, fontWeight:600, color:"var(--ink)", lineHeight:1.3}}>{name}</div>
                {c && <div className="muted" style={{fontSize:11, marginTop:4}}>{c.sector}</div>}
              </div>
            );
          }}/>
        </div>
      </div>
    </div>
  );
}

/* ---------- SELL SIDE ---------- */
const INTERESTED = [
  { code:"BUY-2206", name:"Imaging acquirer", fit:91, stage:"Access requested",
    why:"Acquiring diagnostic AI with regulatory clearance — your CE-marked pipeline and clinical data are a direct fit." },
  { code:"BUY-0743", name:"Digital-health platform", fit:84, stage:"Approved by you",
    why:"Wants a regulated dataset and a computer-vision team to extend their care platform." },
  { code:"BUY-1184", name:"Hospital network", fit:80, stage:"Viewing",
    why:"Building in-house diagnostics; your validated models could deploy across their imaging centers." },
  { code:"BUY-3052", name:"Diagnostics corporate", fit:76, stage:"Viewing",
    why:"Scanning for patent families in early detection to fill a portfolio gap." }
];
const SELLER_PIPELINE = [
  { stage:"Viewing", items:["Hospital network","Diagnostics corporate"] },
  { stage:"Access requested", items:["Imaging acquirer"] },
  { stage:"Approved", items:["Digital-health platform"] },
  { stage:"Intro scheduled", items:[] },
  { stage:"Diligence", items:[] },
  { stage:"Offer", items:[] }
];

function InterestedCard({ b, toast }){
  const fitColor = b.fit>=85?"var(--moss)":"var(--amber)";
  const acted = b.stage==="Approved by you";
  return (
    <div className="card card-pad" style={{padding:18}}>
      <div className="row between mb12" style={{alignItems:"flex-start"}}>
        <div className="row gap12">
          <div className="side-mark" style={{width:42,height:42,background:"var(--paper-sunken)",boxShadow:"none",border:"1px solid var(--line)",flex:"none"}}><Icon name="building" size={20} style={{color:"var(--pine)"}}/></div>
          <div className="col" style={{gap:2}}>
            <div className="row gap8"><span className="mono" style={{fontSize:11.5, color:"var(--sage)"}}>{b.code}</span><span className="badge ghost" style={{textTransform:"none", letterSpacing:0}}>{b.stage}</span></div>
            <span style={{fontSize:15, fontWeight:600, color:"var(--ink)"}}>{b.name}</span>
          </div>
        </div>
        <span className="mono" style={{fontSize:13, fontWeight:700, color:fitColor}}>{b.fit}% fit</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="spark" size={15} style={{color:"var(--amber)", marginTop:1, flex:"none"}}/>
          <span style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.45}}>{b.why}</span>
        </div>
      </div>
      <div className="row between mt12">
        <span className="row gap6" style={{fontSize:11.5, color:"var(--sage)"}}><Icon name="eyeOff" size={13}/> Sees only your anonymized card</span>
        {acted
          ? <span className="chip green"><Icon name="check" size={13}/> Approved</span>
          : <button className="btn btn-primary btn-sm" onClick={()=>toast && toast("Access approved — the buyer can now request your full profile.")}><Icon name="check" size={13}/> Approve access</button>}
      </div>
    </div>
  );
}

function SellView({ go, toast }){
  const co = window.TZ.COMPANIES.find(c=>c.id==="negevdx");
  const stats = [["4","Interested buyers","users"],["1","Access requests","lock"],["1","Approved by you","check"],["0","Intros scheduled","handshake"]];
  return (
    <div className="fadein">
      <div className="grid mb24" style={{gridTemplateColumns:"1.4fr 1fr", gap:18}}>
        <div className="card card-pad">
          <div className="row between mb12"><div className="eyebrow">Your listing</div>
            <div className="row gap8"><span className="chip amber" style={{fontSize:11.5}}><Icon name="eyeOff" size={12}/> Visible after approval</span></div>
          </div>
          <div className="row gap8 mb8"><span className="mono" style={{fontSize:11.5, color:"var(--sage)"}}>{co.code}</span><span className="chip" style={{fontSize:11}}>Anonymized</span></div>
          <p className="serif" style={{fontSize:18, color:"var(--ink)", lineHeight:1.3}}>{co.title}</p>
          <div className="row gap6 wrap mt12">{co.assets.slice(0,4).map(a=><span key={a} className="tag" style={{fontSize:11.5}}>{a}</span>)}</div>
          <div className="row gap10 mt16">
            <button className="btn btn-ghost btn-sm" onClick={()=>go("founder")}><Icon name="doc" size={13}/> Edit listing</button>
            <button className="btn btn-ghost btn-sm" onClick={()=>go("trust")}><Icon name="shield" size={13}/> Visibility controls</button>
          </div>
        </div>
        <div className="grid g2" style={{gap:12}}>
          {stats.map(([v,l,ic])=>(
            <div key={l} className="card card-pad" style={{padding:16}}>
              <Icon name={ic} size={17} style={{color:"var(--pine)"}}/>
              <div className="stat mt8"><span className="sv" style={{fontSize:26}}>{v}</span><span className="sl">{l}</span></div>
            </div>
          ))}
        </div>
      </div>

      <div className="row between mb16">
        <h2 className="serif" style={{fontSize:20}}>Buyers interested in you</h2>
        <span className="muted" style={{fontSize:13}}>You approve every reveal</span>
      </div>
      <div className="grid g2 stagger mb32">
        {INTERESTED.map(b=><InterestedCard key={b.code} b={b} toast={toast}/>)}
      </div>

      <div className="card" style={{overflow:"hidden"}}>
        <div className="card-hd between">
          <div className="row gap10"><Icon name="layers" size={17} style={{color:"var(--pine)"}}/><h3 className="serif" style={{fontSize:16.5}}>Buyer interest pipeline</h3></div>
          <span className="muted" style={{fontSize:12.5}}>Viewing → Requested → Approved → Intro → Diligence → Offer</span>
        </div>
        <div className="card-pad" style={{padding:16}}>
          <Kanban columns={SELLER_PIPELINE} render={name=>{
            const b = INTERESTED.find(x=>x.name===name);
            return (
              <div key={name} className="kan-card">
                <div className="row between mb6"><span className="mono" style={{fontSize:10.5,color:"var(--sage)"}}>{b?b.code:"BUY-•••"}</span>{b&&<span className="mono" style={{fontSize:11,fontWeight:600,color:"var(--moss)"}}>{b.fit}%</span>}</div>
                <div style={{fontSize:12.5, fontWeight:600, color:"var(--ink)", lineHeight:1.3}}>{name}</div>
              </div>
            );
          }}/>
        </div>
      </div>
    </div>
  );
}

/* ---------- container with side toggle ---------- */
function Buyer({ openProfile, onRequest, go, toast }){
  const [side,setSide] = useState("buy");
  return (
    <div className="fadein">
      <PageHd eyebrow="Matches work both ways"
        title="My matches"
        sub="Opportunities matched to what you want to acquire, and buyers matched to what you've listed — you stay in control of every reveal.">
        <button className="btn btn-ghost btn-sm" onClick={()=>go("agent")}><Icon name="spark" size={14} style={{color:"var(--amber)"}}/> Refine with agent</button>
      </PageHd>

      <div className="row mb24" style={{background:"var(--paper-sunken)", border:"1px solid var(--line)", borderRadius:13, padding:5, gap:4, width:"fit-content"}}>
        {[["buy","compass","Opportunities for me"],["sell","building","Buyers for me"]].map(([k,ic,l])=>(
          <button key={k} className="btn btn-sm" onClick={()=>setSide(k)}
            style={{borderRadius:9, padding:"9px 16px", background:side===k?"var(--paper-card)":"transparent", border:"1px solid "+(side===k?"var(--line-2)":"transparent"),
              color:side===k?"var(--ink)":"var(--sage)", boxShadow:side===k?"var(--shadow-sm)":"none", fontWeight:600}}>
            <Icon name={ic} size={15} style={{color:side===k?"var(--pine)":"var(--sage)"}}/> {l}
          </button>
        ))}
      </div>

      {side==="buy"
        ? <BuyView openProfile={openProfile} onRequest={onRequest} go={go}/>
        : <SellView go={go} toast={toast}/>}
    </div>
  );
}

Object.assign(window, { Buyer });