/* ============================================================
   TECHIYAT — IP opportunity marketplace
   ============================================================ */

const TAG_LABEL = { "second-life":["Second-life opportunity","amber"], "strategic-fit":["Strategic fit","green"], "preservation":["Preservation candidate","pine"] };

function OppCard({ c, onOpen, onRequest }){
  const [tl,tc] = TAG_LABEL[c.tag];
  return (
    <div className="card card-hover" onClick={onOpen}>
      <div className="ph" data-label={c.domain+" · anonymized"} style={{height:118, borderRadius:0, borderInline:"none", borderTop:"none"}} />
      <div className="card-pad" style={{padding:18}}>
        <div className="row between mb12">
          <span className="mono" style={{fontSize:11.5, color:"var(--sage)"}}>{c.code}</span>
          <span className={"chip "+tc} style={{fontSize:11.5, padding:"3px 9px"}}>{tl}</span>
        </div>
        <h3 style={{fontSize:16, lineHeight:1.25, marginBottom:6}}>{c.title}</h3>
        <div className="row gap8 mb12" style={{fontSize:12.5, color:"var(--sage)"}}>
          <Icon name={SECTOR_ICON[c.domain]||SECTOR_ICON.default} size={14}/> {c.sector}
        </div>
        <div className="row gap6 wrap mb12">
          {c.assets.slice(0,3).map(a=><span key={a} className="tag" style={{fontSize:11.5}}>{a}</span>)}
          {c.assets.length>3 && <span className="tag" style={{fontSize:11.5}}>+{c.assets.length-3}</span>}
        </div>
        <div className="divider" style={{margin:"0 0 12px"}}/>
        <div className="row between" style={{fontSize:12.5, color:"var(--ink-2)"}}>
          <span className="row gap6"><Icon name="users" size={13}/> Team {c.team}</span>
          <span className="row gap6"><Icon name="map" size={13}/> {c.location}</span>
          <UrgencyDot level={c.urgency}/>
        </div>
        <div className="row between mt16">
          <div className="row gap8">
            <div className="mono" style={{fontSize:13, fontWeight:600, color: c.preservation>=82?"var(--moss)":"var(--amber)"}}>{c.preservation}</div>
            <span className="muted" style={{fontSize:11.5, lineHeight:1.1}}>preservation<br/>score</span>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={e=>{e.stopPropagation(); onRequest(c);}}>
            {c.gated? <><Icon name="lock" size={13}/> Request access</> : "Request review"}
          </button>
        </div>
      </div>
    </div>
  );
}

const FILTERS = [
  { id:"domain", label:"Sector", opts:[["all","All sectors"],["medtech","Medtech"],["ai","AI"],["cyber","Cyber"],["agritech","Agritech"],["fintech","Fintech"]] },
  { id:"urgency", label:"Runway urgency", opts:[["all","Any"],["high","Urgent"],["medium","Moderate"],["low","Low"]] },
  { id:"grant", label:"Grant-backed", opts:[["all","Any"],["yes","IIA-backed"],["no","No grant"]] },
  { id:"access", label:"Access", opts:[["all","Any"],["approval","Approval required"],["open","Open review"]] }
];

function Marketplace({ openProfile, onRequest }){
  const all = window.TZ.COMPANIES;
  const [filt,setFilt] = useState({ domain:"all", urgency:"all", grant:"all", access:"all" });
  const [q,setQ] = useState("");
  const [sort,setSort] = useState("preservation");
  const set = (k,v)=>setFilt(s=>({...s,[k]:v}));

  let list = all.filter(c=>
    (filt.domain==="all"||c.domain===filt.domain) &&
    (filt.urgency==="all"||c.urgency===filt.urgency) &&
    (filt.grant==="all"|| (filt.grant==="yes"? c.grant : !c.grant)) &&
    (filt.access==="all"|| (filt.access==="approval"? c.gated : !c.gated)) &&
    (q==="" || (c.title+c.sector+c.assets.join()).toLowerCase().includes(q.toLowerCase()))
  );
  if(sort==="preservation") list = [...list].sort((a,b)=>b.preservation-a.preservation);
  if(sort==="urgency"){ const r={high:0,medium:1,low:2}; list=[...list].sort((a,b)=>r[a.urgency]-r[b.urgency]); }

  const active = Object.values(filt).filter(v=>v!=="all").length + (q?1:0);

  return (
    <div className="fadein">
      <PageHd eyebrow="For approved buyers · anonymized by default"
        title="Opportunity marketplace"
        sub="Confidential second-life opportunities across the Israeli ecosystem. Identities are coded until a founder approves access.">
        <span className="chip green"><span className="chip-dot"/> {all.length} live</span>
        <button className="btn btn-ghost btn-sm"><Icon name="eyeOff" size={14}/> Anonymized view</button>
      </PageHd>

      {/* filter bar */}
      <div className="card card-pad mb24" style={{padding:"14px 18px"}}>
        <div className="row gap14 wrap">
          <div className="top-search" style={{margin:0, minWidth:220, flex:1}}>
            <Icon name="search" size={15}/>
            <input placeholder="Search assets, sectors, technology…" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
          {FILTERS.map(fl=>(
            <div key={fl.id} className="col" style={{gap:4}}>
              <span className="mono" style={{fontSize:9.5, letterSpacing:".1em", textTransform:"uppercase", color:"var(--sage-2)"}}>{fl.label}</span>
              <select className="select" style={{padding:"7px 30px 7px 11px", fontSize:13}} value={filt[fl.id]} onChange={e=>set(fl.id,e.target.value)}>
                {fl.opts.map(([v,l])=><option key={v} value={v}>{l}</option>)}
              </select>
            </div>
          ))}
          <div className="col" style={{gap:4}}>
            <span className="mono" style={{fontSize:9.5, letterSpacing:".1em", textTransform:"uppercase", color:"var(--sage-2)"}}>Sort</span>
            <select className="select" style={{padding:"7px 30px 7px 11px", fontSize:13}} value={sort} onChange={e=>setSort(e.target.value)}>
              <option value="preservation">Preservation score</option>
              <option value="urgency">Runway urgency</option>
            </select>
          </div>
        </div>
      </div>

      <div className="row between mb16">
        <span className="muted" style={{fontSize:13.5}}>{list.length} {list.length===1?"opportunity":"opportunities"}{active>0 && <span> · {active} filter{active>1?"s":""} active</span>}</span>
        {active>0 && <button className="btn btn-quiet btn-sm" onClick={()=>{setFilt({domain:"all",urgency:"all",grant:"all",access:"all"});setQ("");}}>Clear all</button>}
      </div>

      {list.length? (
        <div className="grid g3 stagger">
          {list.map(c=><OppCard key={c.id} c={c} onOpen={()=>openProfile(c)} onRequest={onRequest}/>)}
        </div>
      ) : (
        <div className="card card-pad" style={{textAlign:"center", padding:"60px"}}>
          <Icon name="search" size={28} style={{color:"var(--sage-2)"}}/>
          <h3 className="serif mt12" style={{fontSize:18}}>No opportunities match these filters</h3>
          <p className="muted mt4">Try widening your criteria or ask the agent to find matches.</p>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Marketplace, OppCard, TAG_LABEL });