const { useState, useEffect } = React;

/* CRM · Building detail — Empire State Building, bound to REAL data only.
 * Facts + owner from NYC PLUTO (crm_building_intel), tenant roster from
 * crm_building_tenants, change-events from aiciq_events. No fabricated
 * mortgages/floors/signals — honest empty states where there's nothing on file.
 * Watch binds to crm_watch_building / crm_unwatch_building. */

const ESB_BBL = "BBL:1008350041";
const fmtEmp = (n) => (n != null ? Number(n).toLocaleString() + " emp" : "");
const fmtArea = (n) => (n ? (n >= 1e6 ? (n / 1e6).toFixed(2) + "M sqft" : Number(n).toLocaleString() + " sqft") : "—");
const fmtMoney = (n) => (n ? (n >= 1e6 ? "$" + (n / 1e6).toFixed(1) + "M" : "$" + Number(n).toLocaleString()) : "—");
const dash = (x) => (x != null && x !== "" ? x : "—");
const SIG = {
  new_mortgage:  { label: "New mortgage",  c: "var(--green)" },
  deed_transfer: { label: "Deed transfer", c: "var(--src-government)" },
  ucc_lien:      { label: "UCC lien",      c: "var(--src-hedge)" },
  warn_layoff:   { label: "WARN layoff",   c: "var(--red)" },
  form_d_raise:  { label: "Form D raise",  c: "var(--accent)" },
};

function BuildingDetail({ go, parcelRef }) {
  const { toast } = React.useContext(window.CrmContext);
  const Ico = window.CrmIco;
  const ref = parcelRef || ESB_BBL;
  const [watching, setWatching] = useState(false);
  const [tenants, setTenants] = useState([]);
  const [intel, setIntel] = useState(null);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const c = window.ContactIQ && window.ContactIQ.client;
    if (!c) { setLoaded(true); return; }
    let alive = true; setLoaded(false); setTenants([]); setIntel(null);
    c.rpc("crm_building_tenants", { p_parcel_ref: ref, p_limit: 80 })
      .then(({ data, error }) => { if (alive && !error && data) setTenants(data.map((t) => ({ name: t.name, emp: fmtEmp(t.employee_count) }))); })
      .catch(() => {});
    c.rpc("crm_building_intel", { p_parcel_ref: ref })
      .then(({ data, error }) => { if (alive && !error && data) setIntel(data); })
      .catch(() => {})
      .then(() => { if (alive) setLoaded(true); });
    return () => { alive = false; };
  }, [ref]);

  const p = (intel && intel.pluto) || {};
  const bldgName = ref === ESB_BBL ? "Empire State Building" : (p.address || ref.replace("BBL:", "BBL "));

  const mapBase = location.pathname.includes("/public-site/") ? "../index.html" : "/map/";
  const openOnMap = () => { const h = /^BBL:\d+$/.test(ref) ? "#bbl=" + ref.slice(4) : "#parcel=" + encodeURIComponent(ref); window.open(mapBase + h, "_blank"); };

  const toggleWatch = () => {
    const next = !watching; setWatching(next);
    const c = window.ContactIQ && window.ContactIQ.client;
    if (c) (next
      ? c.rpc("crm_watch_building", { p_parcel_ref: ref, p_label: bldgName, p_share: false })
      : c.rpc("crm_unwatch_building", { p_parcel_ref: ref })).catch(() => {});
    toast(next ? "Building added to watchlist — signals will surface in Today" : "Removed from watchlist");
  };

  const signals = (intel && Array.isArray(intel.signals)) ? intel.signals : [];
  const debt = signals.filter((s) => s.type === "new_mortgage" || s.type === "deed_transfer");
  const FACTS = [["Floors", dash(p.numfloors)], ["Units", dash(p.unitstotal)], ["Gross area", fmtArea(p.bldgarea)],
    ["Built / Alt", p.yearbuilt ? p.yearbuilt + (p.yearalter ? " / " + p.yearalter : "") : "—"], ["Zoning", dash(p.zoning)], ["Assessed", fmtMoney(p.assesstot)]];

  return (
    <div className="page">
      <div style={{ display: "flex", alignItems: "center", gap: "7px", fontSize: "var(--fs-sm)", color: "var(--fg-3)", marginBottom: "14px" }}>
        <a onClick={() => toast("Watchlist coming soon")} style={{ color: "var(--fg-2)", cursor: "pointer" }}>Buildings</a><span>/</span>
        <span style={{ color: "var(--fg-1)", fontWeight: 500 }}>{bldgName}</span>
      </div>

      {/* HERO */}
      <div className="bldg-hero">
        <div className="bh-top">
          <span className="bh-mark"><svg width="26" height="26" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 14V5l3-2 3 2v9"/><path d="M3 14h10M7 6h0M9 6h0M7 8h0M9 8h0M7 10h0M9 10h0M6.5 14v-2.5h3V14"/></svg></span>
          <div className="bh-main">
            <h1 className="bh-name">{bldgName}</h1>
            <div className="bh-addr">{p.address || (ref === ESB_BBL ? "350 5th Ave, New York, NY" : "—")} <span className="bbl">{ref.replace("BBL:", "BBL ")}</span></div>
            <div className="bh-tags">
              {p.owner && <span className="pill accent">Owner · {p.owner}</span>}
              <span className="pill"><span className="fact">{tenants.length}</span> tenants on file</span>
              <span className="src chip"><span className="sdot" style={{ background: "var(--src-government)" }}></span>via NYC PLUTO</span>
            </div>
          </div>
          <div className="bh-actions">
            <button className={"btn btn-primary" + (watching ? " on" : "")} aria-pressed={watching} onClick={toggleWatch}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill={watching ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1" strokeLinejoin="round"><path d="M8 2l1.8 3.8 4.2.6-3 3 .7 4.2L8 11.6l-3.7 2 .7-4.2-3-3 4.2-.6z"/></svg>
              {watching ? "Watching" : "Watch"}
            </button>
            <button className="btn" onClick={() => go("crm_deals")}><Ico.Plus s={13}/>Start deal</button>
            <button className="btn" onClick={openOnMap}><Ico.Pin/> Map ↗</button>
          </div>
        </div>
        <div className="bh-facts">
          {FACTS.map(([l, val], i) => <div className="bh-fact" key={l}><span className="bf-l">{l}</span><span className={"bf-v" + (i === 5 ? " big" : "")}>{val}</span></div>)}
        </div>
      </div>

      <div className="bldg-layout">
        {/* LEFT: tenant roster (real) */}
        <div>
          <section className="card">
            <div className="card-head">
              <span className="ch-title">Tenant roster</span>
              <span className="pill" style={{ padding: "1px 7px" }}><span className="fact">{tenants.length}</span> orgs</span>
              <span className="ch-spacer"></span>
              <span className="src">via PLUTO + entity graph</span>
            </div>
            {tenants.length ? tenants.map((r, i) => (
              <div className="roster-row" key={i}>
                <span className="ind-ico">🏢</span>
                <div className="roster-main">
                  <div className="roster-name">{r.name}</div>
                  <div className="roster-meta">{r.emp && <span className="emp">{r.emp}</span>}</div>
                </div>
                <div className="roster-actions">
                  <button className="btn btn-sm" onClick={() => toast("Saved " + r.name + " to Accounts")}>Claim → Account</button>
                  <button className="btn btn-primary btn-sm" onClick={() => go("crm_deals")}>Start deal</button>
                </div>
              </div>
            )) : <div className="muted" style={{ padding: "22px 14px", fontSize: "var(--fs-base)" }}>{loaded ? "No tenants on file for this building." : "Loading…"}</div>}
            {tenants.length > 0 && <div style={{ padding: "11px 14px", borderTop: "1px solid var(--border-1)" }}><span className="muted" style={{ fontSize: "var(--fs-sm)" }}>Showing {tenants.length} tenants · roster is never truncated</span></div>}
          </section>
        </div>

        {/* RIGHT */}
        <div>
          {window.CrmNotesCard && <window.CrmNotesCard subjectType="building" subjectId={ref}/>}

          <section className="card side-card">
            <div className="card-head"><span className="ch-title">Other tenants in this building</span><span className="ch-spacer"></span><span className="src">co-tenant graph</span></div>
            {tenants.length ? tenants.slice(0, 6).map((r, i) => (
              <div className="adj-row" key={i}><span className="adj-name">{r.name}</span>{r.emp && <span className="pill" style={{ padding: "1px 6px" }}>{r.emp}</span>}</div>
            )) : <div className="muted" style={{ padding: "16px 14px", fontSize: "var(--fs-sm)" }}>{loaded ? "No co-tenants on file." : "Loading…"}</div>}
          </section>

          <section className="card side-card">
            <div className="card-head"><span className="ch-title">Owner &amp; debt</span><span className="ch-spacer"></span><span className="src">via PLUTO · ACRIS</span></div>
            <div className="debt-row"><div className="debt-main"><div className="debt-label">Owner of record</div><div className="debt-sub">{dash(p.owner)}</div></div></div>
            {debt.length ? debt.map((s, i) => (
              <div className="debt-row" key={i}><div className="debt-main"><div className="debt-label">{SIG[s.type] ? SIG[s.type].label : s.type}</div><div className="debt-sub">{s.date || ""}</div></div><div className="debt-val">{(s.title.match(/\$[\d,]+/) || ["—"])[0]}</div></div>
            )) : <div className="muted" style={{ padding: "12px 14px", fontSize: "var(--fs-sm)" }}>{loaded ? "No mortgages or deeds in the indexed window." : "Loading…"}</div>}
          </section>

          <section className="card side-card">
            <div className="card-head"><span className="ch-title">Signals timeline</span><span className="ch-spacer"></span>{signals.length > 0 && <span className="pill accent" style={{ padding: "1px 7px" }}><span className="pdot"></span>{signals.length} recent</span>}</div>
            <div style={{ padding: "14px" }}>
              {signals.length ? (
                <div className="activity">
                  {signals.map((s, i) => { const m = SIG[s.type] || { label: s.type, c: "var(--fg-2)" }; return (
                    <div className="act" key={i}><span className="act-ico" style={{ color: m.c, borderColor: m.c, background: "var(--bg-2)" }}><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="6"/></svg></span><div className="act-body"><div className="act-text"><b>{m.label}</b> · {s.title}</div><div className="act-time"><span className="src"><span className="sdot" style={{ background: m.c }}></span>{s.source}</span> · {s.date}</div></div></div>
                  ); })}
                </div>
              ) : <div className="muted" style={{ fontSize: "var(--fs-base)" }}>{loaded ? "No recent change-events on this building." : "Loading…"}</div>}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

function CrmBuildingPage({ go, user, parcelRef }) {
  return <window.CrmShell go={go} user={user} current="buildings"><BuildingDetail go={go} parcelRef={parcelRef}/></window.CrmShell>;
}
window.CrmBuildingPage = CrmBuildingPage;