// Recursive MLS — Screen 1: Realtor daily dashboard.
function Dashboard({ go }) {
  const D = window.RC_DATA;
  const statusTone = { Active: "active", Pending: "pending", "Price drop": "drop", "New": "new" };

  const SectionCard = ({ title, action, children, pad = 18, style }) => (
    <div style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", ...style }}>
      {(title || action) && (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "15px 18px", borderBottom: "1px solid #f1f0ea" }}>
          <h2 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "#1d241f" }}>{title}</h2>
          {action}
        </div>
      )}
      <div style={{ padding: pad }}>{children}</div>
    </div>
  );
  const ViewAll = ({ children, onClick }) => (
    <button onClick={onClick} style={{ border: 0, background: "transparent", color: "#006747", fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".5px", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 4 }}>
      {children} <Icon name="chevron-right" size={13} color="#006747" />
    </button>
  );

  return (
    <div style={{ padding: "24px 30px 60px", maxWidth: 1280, margin: "0 auto" }}>
      {/* greeting */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 20 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 25, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>Good morning, Alex</h1>
          <p style={{ margin: "5px 0 0", fontSize: 14, color: "#8a8e88" }}>Thursday, June 19 · 4 active listings · 2 deals closing this month</p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button onClick={() => go("search")} style={btnOutline}><Icon name="search" size={15} color="#006747" /> Find Homes</button>
          <button onClick={() => go("listing")} style={btnPrimary}><Icon name="plus" size={15} color="#fff" /> Add Listing</button>
        </div>
      </div>

      {/* market strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginBottom: 16 }}>
        {D.market.map((m, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", padding: "15px 16px" }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "1.1px", color: "#8a8e88" }}>{m.label}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 8 }}>
              <span style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.8px", color: "#1d241f" }}>{m.value}</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: m.up ? "#1f8a5b" : "#c0612f", display: "inline-flex", alignItems: "center", gap: 2 }}>
                <Icon name={m.up ? "trending-up" : "trending-down"} size={13} color={m.up ? "#1f8a5b" : "#c0612f"} />{m.delta}
              </span>
            </div>
            <div style={{ fontSize: 11.5, color: "#bcbfba", marginTop: 4 }}>Central Austin · 30d</div>
          </div>
        ))}
      </div>

      {/* main grid */}
      <div style={{ display: "grid", gridTemplateColumns: "1.62fr 1fr", gap: 16, alignItems: "start" }}>
        {/* LEFT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <SectionCard title="Your listings" pad={0} action={<ViewAll>All listings</ViewAll>}>
            {D.myListings.map((l, i) => (
              <div key={l.id} className="rc-row" style={{ display: "flex", gap: 14, alignItems: "center", padding: "13px 18px", borderTop: i ? "1px solid #f4f3ee" : "none", cursor: "pointer" }}>
                <div style={{ width: 84, height: 60, borderRadius: 3, backgroundImage: `url(${l.photo})`, backgroundSize: "cover", backgroundPosition: "center", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                    <span style={{ fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>{l.addr}</span>
                    <Pill tone={statusTone[l.status]}>{l.status}</Pill>
                    {l.compliance && l.compliance.n > 0 ? (
                      <span title="Open MLS compliance" style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, fontWeight: 600,
                        color: l.compliance.sev === "high" ? "#b3261e" : "#9a6a12",
                        background: l.compliance.sev === "high" ? "#fbe9e7" : "#fbf2dc", borderRadius: 999, padding: "3px 8px" }}>
                        <Icon name="shield-alert" size={12} color={l.compliance.sev === "high" ? "#b3261e" : "#9a6a12"} /> {l.compliance.n}
                      </span>
                    ) : (
                      <span title="Compliant" style={{ display: "inline-flex", alignItems: "center", color: "#1f8a5b" }}>
                        <Icon name="shield-check" size={14} color="#1f8a5b" />
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 3 }}>{l.city} · {l.beds} bd · {l.baths} ba · {l.sqft.toLocaleString()} sqft</div>
                </div>
                <div style={{ display: "flex", gap: 22, flex: "none" }}>
                  {[["eye", l.views.toLocaleString(), "views"], ["heart", l.saves, "saves"], ["calendar-check", l.showings, "tours"]].map(([ic, v, lab]) => (
                    <div key={lab} style={{ textAlign: "right" }}>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 14, fontWeight: 700, color: "#1d241f" }}>{v}</div>
                      <div style={{ fontSize: 10, color: "#a8aca6", textTransform: "uppercase", letterSpacing: ".4px" }}>{lab}</div>
                    </div>
                  ))}
                  <div style={{ textAlign: "right", width: 56 }}>
                    <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 14, fontWeight: 700, color: l.dom > 40 ? "#c0612f" : "#1d241f" }}>{l.dom}</div>
                    <div style={{ fontSize: 10, color: "#a8aca6", textTransform: "uppercase", letterSpacing: ".4px" }}>days</div>
                  </div>
                </div>
                <div style={{ width: 120, textAlign: "right", flex: "none" }}>
                  <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 16, fontWeight: 700, color: "#006747" }}>{D.usd(l.price)}</div>
                  {l.tour && <div style={{ fontSize: 11, color: "#9a6a12", marginTop: 2 }}>Open {l.tour}</div>}
                </div>
              </div>
            ))}
          </SectionCard>

          <SectionCard title="New & changed for your clients" action={<ViewAll>All matches</ViewAll>} pad={0}>
            {D.matches.map((m, i) => (
              <div key={i} className="rc-row" style={{ display: "flex", gap: 14, alignItems: "center", padding: "13px 18px", borderTop: i ? "1px solid #f4f3ee" : "none", cursor: "pointer" }}>
                <div style={{ width: 64, height: 50, borderRadius: 3, backgroundImage: `url(${m.photo})`, backgroundSize: "cover", backgroundPosition: "center", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>{m.addr}</span>
                    <span style={{ fontSize: 11, fontWeight: 600, color: m.change.includes("↓") ? "#c0612f" : "#1f8a5b" }}>{m.change}</span>
                  </div>
                  <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 3 }}>For {m.client} · {m.beds} bd · {m.baths} ba · {m.sqft.toLocaleString()} sqft</div>
                </div>
                <div style={{ textAlign: "right", flex: "none" }}>
                  <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 14, fontWeight: 700, color: "#1d241f" }}>{D.usd(m.price)}</div>
                  <div style={{ fontSize: 11, color: "#bcbfba", marginTop: 2 }}>{m.ago}</div>
                </div>
              </div>
            ))}
          </SectionCard>
        </div>

        {/* RIGHT */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <SectionCard title="Today" action={<span style={{ fontSize: 12, color: "#8a8e88" }}>4 events</span>}>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {D.schedule.map((s, i) => {
                const ic = { tour: "car-front", open: "door-open", call: "phone", photo: "camera" }[s.kind];
                return (
                  <div key={i} style={{ display: "flex", gap: 12, paddingBottom: i < D.schedule.length - 1 ? 14 : 0 }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                      <div style={{ width: 30, height: 30, borderRadius: "50%", background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                        <Icon name={ic} size={15} color="#006747" />
                      </div>
                      {i < D.schedule.length - 1 && <div style={{ width: 1.5, flex: 1, background: "#ececec", marginTop: 4 }} />}
                    </div>
                    <div style={{ flex: 1, paddingTop: 1 }}>
                      <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                        <span style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{s.label}</span>
                        <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 12.5, color: "#006747", fontWeight: 700, flex: "none" }}>{s.time}</span>
                      </div>
                      <div style={{ fontSize: 12, color: "#8a8e88", marginTop: 2 }}>{s.sub}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </SectionCard>

          <SectionCard title="Pipeline" action={<ViewAll>Board</ViewAll>}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {D.pipeline.map((p, i) => (
                <div key={i}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{p.addr}</span>
                    <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 13, fontWeight: 700, color: "#1d241f" }}>{D.usd(p.amount)}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 7 }}>
                    <span style={{ fontSize: 12, color: "#8a8e88" }}>{p.party}</span>
                    <span style={{ fontSize: 12, color: "#8a8e88" }}>{p.stage}{p.close !== "—" ? ` · close ${p.close}` : ""}</span>
                  </div>
                  <div style={{ height: 5, borderRadius: 3, background: "#eeede7", overflow: "hidden" }}>
                    <div style={{ width: `${p.pct}%`, height: "100%", background: "#006747" }} />
                  </div>
                </div>
              ))}
            </div>
          </SectionCard>

          <SectionCard title="Messages" action={<ViewAll>Inbox</ViewAll>} pad={0}>
            {D.leads.map((l, i) => (
              <div key={i} className="rc-row" style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "13px 18px", borderTop: i ? "1px solid #f4f3ee" : "none", cursor: "pointer" }}>
                <div style={{ width: 34, height: 34, borderRadius: "50%", background: l.unread ? "#006747" : "#e7e1d4", color: l.unread ? "#fff" : "#006747", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, flex: "none" }}>{l.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{l.name}</span>
                    <span style={{ fontSize: 11, color: "#bcbfba", flex: "none" }}>{l.ago}</span>
                  </div>
                  <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{l.text}</div>
                </div>
                {l.unread && <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#006747", flex: "none", marginTop: 6 }} />}
              </div>
            ))}
          </SectionCard>
        </div>
      </div>
    </div>
  );
}

const btnPrimary = { display: "inline-flex", alignItems: "center", gap: 7, background: "#006747", color: "#fff", border: "1px solid #006747", borderRadius: 7, padding: "10px 16px", fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, cursor: "pointer" };
const btnOutline = { display: "inline-flex", alignItems: "center", gap: 7, background: "#fff", color: "#006747", border: "1px solid #d9d7cd", borderRadius: 7, padding: "10px 16px", fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, cursor: "pointer" };

Object.assign(window, { Dashboard, btnPrimary, btnOutline });