// PropertyDrawer — the full file for one property.
// Renders:
//   - masthead with titled acres, parcel count, assessed value
//   - community rollup (proportional bar + 6 counters)
//   - the quarter list (each row is a QuarterRow → QuarterDetail vote UI)
//
// The "Zoom Mapbox →" button is where the swap-in lives: when a real
// Mapbox token is wired in, this button should fly the atlas to the
// property's bbox.
function PropertyDrawer({ prop, onClose, onZoomMap }) {
  const [openQ, setOpenQ] = useState(null);
  if (!prop) return null;
  const { rollup } = rollupProperty(prop.id);
  const quarters = (Q && Q[prop.id]) || [];
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(19,17,14,0.55)", zIndex: 50, display: "flex", justifyContent: "flex-end" }}>
      <div onClick={(e) => e.stopPropagation()} className="scroll" style={{
        width: 780, maxWidth: "100%", height: "100%", background: "var(--paper)", overflowY: "auto", borderLeft: "1px solid var(--ink)",
      }}>
        <div style={{ padding: "24px 28px 20px", borderBottom: "2px solid var(--ink)", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>{prop.province} · {prop.region}</div>
            <div className="serif" style={{ fontSize: 50, lineHeight: 1, marginTop: 6 }}>{prop.name}</div>
            <div style={{ marginTop: 10, fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: "var(--mute)" }}>
              {fmt(prop.titled)} titled ac · {prop.parcels} parcels · {fmtM(prop.assessment)}
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => onZoomMap && onZoomMap(prop)} style={{ padding: "8px 12px", fontSize: 11, fontFamily: "inherit", border: "1px solid var(--rule-2)", background: "transparent", cursor: "pointer" }}>Zoom Mapbox →</button>
            <button onClick={onClose} style={{ padding: "8px 12px", fontSize: 11, fontFamily: "inherit", border: "1px solid var(--ink)", background: "transparent", cursor: "pointer" }}>Close ✕</button>
          </div>
        </div>

        {/* Rollup */}
        <div style={{ padding: "16px 28px", background: "var(--paper-2)", borderBottom: "1px solid var(--rule)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
            <span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--mute)" }}>Community rollup · {rollup.total} quarters shown</span>
            <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: "var(--mute)" }}>Click any quarter to vote</span>
          </div>
          <RollupBar rollup={rollup} />
          <div style={{ marginTop: 10, display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12, fontSize: 11, fontFamily: '"JetBrains Mono", monospace' }}>
            {[
              ["Owned",    rollup.owned,   OWN["owned-monette"].color],
              ["Rented",   rollup.rented,  OWN["rented-monette"].color],
              ["Sold",     rollup.sold,    OWN.sold.color],
              ["For sale", rollup.forSale, LIST["listed-for-sale"].color],
              ["Seeded",   rollup.seeded,  "#4e6a30"],
              ["Sprayed",  rollup.sprayed, "#b48638"],
            ].map(([l, v, c]) => (
              <div key={l}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: c }} />
                  <span style={{ color: "var(--mute)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em" }}>{l}</span>
                </div>
                <div className="serif" style={{ fontSize: 24, lineHeight: 1, marginTop: 4 }}>
                  {v}<span style={{ fontSize: 11, color: "var(--mute)", marginLeft: 4 }}>/ {rollup.total}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Column headers */}
        <div style={{
          display: "grid", gridTemplateColumns: "24px 170px 80px 1fr auto auto auto", gap: 12,
          padding: "10px 14px", borderBottom: "1.5px solid var(--ink)",
          fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)",
        }}>
          <span>#</span>
          <span>Quarter</span>
          <span style={{ textAlign: "right" }}>Acres</span>
          <span>Soil / Crop '25</span>
          <span>Ownership</span>
          <span>Listing</span>
          <span>Season</span>
        </div>

        {/* Quarter rows */}
        {quarters.map((q, i) => (
          <QuarterRow
            key={q.loc + i}
            propId={prop.id}
            q={q}
            i={i}
            onOpen={(loc) => setOpenQ(openQ === loc ? null : loc)}
            expanded={openQ === q.loc}
          />
        ))}

        <div style={{ padding: "14px 18px", borderTop: "1px solid var(--rule)", fontSize: 11, fontFamily: '"JetBrains Mono", monospace', color: "var(--mute)" }}>
          Showing {quarters.length} of {prop.parcels} quarters · Mapbox zoom will highlight this block on the main atlas.
        </div>
      </div>
    </div>
  );
}

window.PropertyDrawer = PropertyDrawer;