// Company row variants — calm, one-row-per-company
// Three layouts: "horizon" (default), "ledger", "stack"

function ServiceTags({ services }){
  if(!services || !services.length) return null;
  return (
    <div className="svc-tags">
      {services.map((s,i)=>(<span key={i} className="svc-tag">{s}</span>))}
    </div>
  );
}

function HealthDot({ h }){ return <div className={"health-dot " + (h||"")}/> }

function CompanyRowHorizon({ name, data, onOpen, segment }){
  const resolved = resolveCompany(name, segment, data);
  const logo = resolved.logo;
  const displayName = resolved.displayName;
  const d = resolved.data;
  const renewClass = d.renewalDays < 15 ? "urgent" : d.renewalDays < 60 ? "warn" : "";
  const champ = d.champion || d.poc;
  // Live bookings from Bookings 2026 board, matched case-insensitively by name.
  const live = window.useLiveData ? window.useLiveData() : null;
  const bk = (live && window.findClientBookings) ? window.findClientBookings(name, live) : null;
  const fmt = window.fmtMoney || (n => "₪" + n);
  // Assigned doctor (MD segment) or medical employee (Mgmt segment), set in Edit drawer.
  const assigned = segment === "mgmt" ? d.medicalEmployee : d.assignedMD;
  return (
    <div className="row-h" onClick={onOpen}>
      <div className="row-h-left">
        <div className="row-h-logo" style={{ background: logo.bg }}><CompanyGlyph name={name} size={26} override={logo}/></div>
        <div className="row-h-id">
          <div className="row-h-name">
            <b>{displayName}</b>
            <HealthDot h={d.health}/>
          </div>
          {champ && (
            <div className="row-h-champ">
              <span className="row-h-champ-av" style={{ background: logo.bg }}>{(champ.name||"").split(" ").map(w=>w[0]).slice(0,2).join("")}</span>
              <span className="row-h-champ-info">
                <b>{champ.name}</b>
                <span>{champ.role}</span>
              </span>
            </div>
          )}
          {assigned && (
            <div className="row-h-assigned" title={segment === "mgmt" ? "Medical employee" : "Assigned private MD"}
                 style={{
                   display:"inline-flex", alignItems:"center", gap:6,
                   padding:"3px 10px", marginTop:6,
                   borderRadius:999,
                   background:"color-mix(in oklab, var(--accent-soft) 30%, transparent)",
                   border:"1px solid var(--accent-soft)",
                   fontSize:11, color:"var(--ink)",
                   fontFamily:"'JetBrains Mono',monospace", letterSpacing:".04em",
                   width:"fit-content",
                 }}>
              <span style={{opacity:.6, textTransform:"uppercase", fontSize:9}}>
                {segment === "mgmt" ? "EMP" : "MD"}
              </span>
              <span style={{fontFamily:"'DM Sans','Noto Sans Hebrew',sans-serif", fontWeight:500}}>
                {assigned}
              </span>
            </div>
          )}
          <ServiceTags services={d.services}/>
        </div>
      </div>
      <div className="row-h-mid">
        <div className="row-h-cell">
          <div className="k">Last touchpoint</div>
          <div className="v">
            <span className="dim">{d.lastTouch.when}</span> — {d.lastTouch.note}
          </div>
        </div>
        <div className="row-h-cell">
          <div className="k">Current project</div>
          <div className="v">{d.currentProject}</div>
        </div>
      </div>
      <div className="row-h-right">
        <div className="row-h-stat">
          <div className="k">Booked '26</div>
          <div className="num" style={!bk ? {color:"var(--ink-muted)", fontWeight:400, fontSize:14} : null}
               title={!bk && live ? `No matching client found on the Bookings board for "${name}"` : null}>
            {bk ? fmt(bk.booked) : (live ? "—" : "…")}
          </div>
        </div>
        <div className="row-h-stat">
          <div className="k">Awaiting</div>
          <div className={"num small " + (bk && bk.late > 0 ? "urgent" : "")}
               style={!bk ? {color:"var(--ink-muted)", fontWeight:400} : null}>
            {bk ? fmt(bk.awaitingInvoice + bk.awaitingPayment) : (live ? "—" : "…")}
          </div>
        </div>
        <div className="row-h-arr"><Icon.ArrowRight/></div>
      </div>
    </div>
  );
}

function CompanyRowLedger({ name, data, onOpen, segment }){
  const resolved = resolveCompany(name, segment, data);
  const logo = resolved.logo;
  const displayName = resolved.displayName;
  const d = resolved.data;
  const champ = d.champion || d.poc;
  return (
    <div className="row-l" onClick={onOpen}>
      <div className="row-l-bar" style={{ background: logo.bg }}/>
      <div className="row-l-glyph" style={{ background: logo.bg }}><CompanyGlyph name={name} size={20} override={logo}/></div>
      <div className="row-l-head">
        <div className="row-l-title">
          <h4>{displayName}</h4>
          <HealthDot h={d.health}/>
        </div>
        <ServiceTags services={d.services}/>
      </div>
      <div className="row-l-grid">
        <div>
          <div className="k">Last touchpoint</div>
          <div className="v">{d.lastTouch.note}</div>
          <div className="dim">{d.lastTouch.when} · {d.lastTouch.type}</div>
        </div>
        <div>
          <div className="k">Current project</div>
          <div className="v">{d.currentProject}</div>
        </div>
        <div className="row-l-side">
          <div><span className="k">MRR</span> <b>{d.mrr}</b></div>
          <div><span className="k">Renews</span> <b>{d.renewalDate}</b></div>
          <div><span className="k">Open tasks</span> <b>{d.openTasks}</b></div>
        </div>
      </div>
    </div>
  );
}

function CompanyRowStack({ name, data, onOpen, segment }){
  const resolved = resolveCompany(name, segment, data);
  const logo = resolved.logo;
  const displayName = resolved.displayName;
  const d = resolved.data;
  return (
    <div className="row-s" onClick={onOpen}>
      <div className="row-s-top">
        <div className="row-s-logo" style={{ background: logo.bg }}><CompanyGlyph name={name} size={18} override={logo}/></div>
        <h4>{displayName}</h4>
        <HealthDot h={d.health}/>
        <span className="row-s-mrr">{d.mrr}<span>/mo</span></span>
      </div>
      <ServiceTags services={d.services}/>
      <div className="row-s-foot">
        <span><b>Last touchpoint</b> · {d.lastTouch.when}</span>
        <span><b>Current</b> · {d.currentProject.split(".")[0]}</span>
        <span><b>Renews</b> · {d.renewalDate}</span>
      </div>
    </div>
  );
}

function CompanyRow({ variant, ...p }){
  if(variant === "ledger") return <CompanyRowLedger {...p}/>;
  if(variant === "stack") return <CompanyRowStack {...p}/>;
  return <CompanyRowHorizon {...p}/>;
}

Object.assign(window, { CompanyRow, ServiceTags });