/* stage1/PropertySummary.jsx — reciprocity primer.
   Shows the applicant what they're applying for BEFORE the ask.
   Pulls live property from Supabase by slug; falls back to the rich
   tenant-config property (always present) so it's beautiful offline. */
/* eslint-disable */
const { useState: useStateP, useEffect: useEffectP } = React;

function PropertySummary({ slug, onStart }) {
  const cfgProp = Portal.property;
  const [p, setP] = useStateP(cfgProp);

  useEffectP(() => {
    Portal && window.portalAnalytics && window.portalAnalytics.log("form_view", { step: "property_summary" });
    let cancelled = false;
    const sb = window.portalSupabase;
    const wantSlug = slug || cfgProp.slug;
    if (!sb) return;
    (async () => {
      try {
        const { data } = await sb.from("properties").select("*").eq("slug", wantSlug).eq("active", true).maybeSingle();
        if (!cancelled && data) {
          // merge DB fields over config defaults (DB wins where present)
          setP(Object.assign({}, cfgProp, cleanNulls(data)));
        }
      } catch (e) { /* keep config fallback */ }
    })();
    return () => { cancelled = true; };
  }, [slug]);

  function cleanNulls(o) {
    const out = {}; Object.keys(o).forEach((k) => { if (o[k] != null) out[k] = o[k]; }); return out;
  }

  const stats = p.stats || [];
  const sell = p.sellingPoints || [];
  const gallery = p.gallery || [];
  const heroUrl = p.heroImage || p.hero_image_url;

  return (
    <div>
      {/* HERO */}
      <header className="summary-hero">
        <div className="hero-bg" style={heroUrl ? { backgroundImage: `url(${heroUrl})` } : {}} />
        <div className="hero-scrim" />
        <div className="hero-inner">
          <div className="wrap">
            <div className="eyebrow kicker reveal in">{p.kicker || (p.city + ", " + p.state)}</div>
            <h1 className="h-display h-xl reveal in delay-1"
              dangerouslySetInnerHTML={{ __html: Portal.c("summary.heading", p.name) }} />
            <div className="hero-meta reveal in delay-2">
              <span><b>{p.availableSf}</b> available</span>
              <span><b>{p.askingRent}</b></span>
              <span>{p.address}, {p.city}, {p.state}</span>
            </div>
          </div>
        </div>
      </header>

      {/* STAT BAND */}
      {stats.length > 0 && (
        <section className="stat-band">
          <div className="stat-grid">
            {stats.slice(0, 6).map((s, i) => (
              <div className="stat" key={i}>
                <div className="v">{s.value}</div>
                <div className="l">{s.label}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* NARRATIVE + WHY */}
      <section className="summary-body">
        <div className="wrap summary-cols">
          <div>
            <div className="eyebrow brick" style={{ marginBottom: 22 }}>{Portal.c("summary.eyebrow", "Lease application")}</div>
            <p className="lede" style={{ marginBottom: 20 }}>{Portal.c("summary.lede")}</p>
            <p className="body-lg">{p.narrative}</p>
            {p.leaseNote && (
              <p className="mono" style={{ marginTop: 24, color: "var(--brick)" }}>{p.leaseNote}</p>
            )}
          </div>
          {sell.length > 0 && (
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{Portal.c("summary.whyLabel", "Why this space")}</div>
              <ul className="sell-list">
                {sell.map((s, i) => (
                  <li key={i}><span className="mk">{String(i + 1).padStart(2, "0")}</span><span>{s}</span></li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* GALLERY */}
        {gallery.length > 0 && (
          <div className="wrap">
            <div className="gallery">
              {gallery.map((g, i) => (
                <figure key={i}>
                  <img src={g.src} alt={g.caption || ""} loading="lazy" />
                  {g.caption && <figcaption>{g.caption}</figcaption>}
                </figure>
              ))}
            </div>
          </div>
        )}

        {/* CTA */}
        <div className="wrap summary-cta">
          <div className="eyebrow no-rule" style={{ justifyContent: "center", marginBottom: 18, color: "var(--muted)" }}>
            Two minutes · We reply within one business day
          </div>
          <button className="btn" onClick={onStart}>
            {Portal.c("summary.ctaStart", "Start application")} <span className="arr"><Icon name="arrow" size={15} /></span>
          </button>
          {window.PORTAL_DEMO && (
            <div style={{ marginTop: 22 }}>
              <a className="mono" style={{ color: "var(--muted)", borderBottom: "1px solid var(--rule-soft)", paddingBottom: 2, cursor: "pointer" }}
                 href="#/apply/2/demo-preview">
                ▸ Preview the full underwriting application (Stage 2 demo)
              </a>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}