/* ======================================================================
   KOREALM — Public: hero, listings, filters, property detail
   ====================================================================== */

function PropertyCard({ p, onOpen, fav, onFav }) {
  const { user } = useApp();
  const ll = user(p.landlordId);
  return (
    <Card hover className="prop-card" onClick={() => onOpen(p.id)}>
      <div className="prop-photo">
        <Photo src={p.img} alt={p.title} label={`${p.type.toLowerCase()} · ${p.photos} photos`} style={{ height: "100%" }} />
        <div className="prop-photo-top">
          <StatusBadge status={p.status} />
          <button className={"fav" + (fav ? " on" : "")} onClick={(e) => { e.stopPropagation(); onFav(p.id); }}>
            <Icon name="heart" size={16} />
          </button>
        </div>
        {p.furnished && <span className="prop-flag">Furnished</span>}
      </div>
      <div className="prop-body">
        <div className="row between" style={{ alignItems: "baseline" }}>
          <span className="prop-price mono">{window.fmt.money(p.price)}<span className="prop-per">pcm</span></span>
          <span className="badge badge-outline">{p.type}</span>
        </div>
        <h3 className="prop-title">{p.title}</h3>
        <div className="row gap-6 dim" style={{ fontSize: 13 }}><Icon name="pin" size={14} />{p.neighborhood}</div>
        <div className="divider" style={{ margin: "12px 0" }} />
        <div className="prop-specs">
          <span><Icon name="bed" size={15} />{p.beds === 0 ? "Studio" : `${p.beds} bd`}</span>
          <span><Icon name="bath" size={15} />{p.baths} ba</span>
          <span><Icon name="ruler" size={15} />{p.sqft.toLocaleString()} sq ft</span>
        </div>
        <div className="prop-epc">
          <span className="badge badge-neutral">EPC {p.epc}</span>
          <span className="badge badge-neutral">Council Tax {p.councilTax}</span>
        </div>
      </div>
    </Card>
  );
}

function FilterBar({ f, setF, count }) {
  const types = ["Flat", "Loft", "Studio", "Townhouse"];
  return (
    <div className="filters card card-pad-sm">
      <div className="row gap-10 wrap">
        <div className="input-icon grow" style={{ minWidth: 200 }}>
          <Icon name="search" />
          <input className="input" placeholder="Search by title or address" value={f.q} onChange={e => setF({ ...f, q: e.target.value })} />
        </div>
        <Select value={f.hood} onChange={e => setF({ ...f, hood: e.target.value })} style={{ width: 165 }}>
          <option value="">All areas</option>
          {window.NEIGHBORHOODS.map(n => <option key={n} value={n}>{n}</option>)}
        </Select>
        <Select value={f.type} onChange={e => setF({ ...f, type: e.target.value })} style={{ width: 140 }}>
          <option value="">Any type</option>
          {types.map(t => <option key={t} value={t}>{t}</option>)}
        </Select>
        <Select value={f.beds} onChange={e => setF({ ...f, beds: e.target.value })} style={{ width: 120 }}>
          <option value="">Any beds</option>
          <option value="0">Studio</option><option value="1">1+ bed</option><option value="2">2+ beds</option><option value="3">3+ beds</option>
        </Select>
        <Select value={f.max} onChange={e => setF({ ...f, max: e.target.value })} style={{ width: 150 }}>
          <option value="">Any price</option>
          <option value="1000">Under £1,000 pcm</option><option value="1400">Under £1,400 pcm</option><option value="1800">Under £1,800 pcm</option><option value="9999">£1,800+ pcm</option>
        </Select>
      </div>
      <div className="divider" style={{ margin: "13px 0 12px" }} />
      <div className="row between wrap gap-10">
        <div className="row gap-8 wrap">
          <button className={"chip" + (f.furnished ? " active" : "")} onClick={() => setF({ ...f, furnished: !f.furnished })}><Icon name="check" size={13} />Furnished</button>
          <button className={"chip" + (f.avail ? " active" : "")} onClick={() => setF({ ...f, avail: !f.avail })}><Icon name="checkCircle" size={13} />Available only</button>
          <button className={"chip" + (f.pets ? " active" : "")} onClick={() => setF({ ...f, pets: !f.pets })}><Icon name="paw" size={13} />Pet friendly</button>
        </div>
        <div className="row gap-12">
          <span className="dim" style={{ fontSize: 13 }}>{count} home{count !== 1 ? "s" : ""}</span>
          <Select value={f.sort} onChange={e => setF({ ...f, sort: e.target.value })} style={{ width: 160 }}>
            <option value="new">Newest first</option>
            <option value="low">Price: low to high</option>
            <option value="high">Price: high to low</option>
          </Select>
        </div>
      </div>
    </div>
  );
}

function pageWindow(cur, total) {
  const out = [];
  const set = [...new Set([1, total, cur, cur - 1, cur + 1].filter(n => n >= 1 && n <= total))].sort((a, b) => a - b);
  let prev = 0;
  set.forEach(n => { if (n - prev > 1) out.push("\u2026"); out.push(n); prev = n; });
  return out;
}

function Listings({ onOpen }) {
  const { db } = useApp();
  const [f, setF] = useState({ q: "", hood: "", type: "", beds: "", max: "", furnished: false, avail: false, pets: false, sort: "new" });
  const [favs, setFavs] = useState({});
  const [page, setPage] = useState(1);
  const toggleFav = (id) => setFavs(s => ({ ...s, [id]: !s[id] }));
  const PAGE_SIZE = 12, MAX_PAGES = 20;

  const list = useMemo(() => {
    let r = db.properties.filter(p => {
      if (f.q && !(p.title + " " + p.address).toLowerCase().includes(f.q.toLowerCase())) return false;
      if (f.hood && p.neighborhood !== f.hood) return false;
      if (f.type && p.type !== f.type) return false;
      if (f.beds !== "" && p.beds < +f.beds) return false;
      if (f.max && p.price > +f.max) return false;
      if (f.furnished && !p.furnished) return false;
      if (f.avail && p.status !== "available") return false;
      if (f.pets && !p.amenities.some(a => /pet/i.test(a))) return false;
      return true;
    });
    if (f.sort === "low") r = [...r].sort((a, b) => a.price - b.price);
    else if (f.sort === "high") r = [...r].sort((a, b) => b.price - a.price);
    else r = [...r].sort((a, b) => new Date(b.listedDate) - new Date(a.listedDate));
    return r;
  }, [db.properties, f]);

  useEffect(() => { setPage(1); }, [f]);
  const totalPages = Math.min(MAX_PAGES, Math.max(1, Math.ceil(list.length / PAGE_SIZE)));
  const cur = Math.min(page, totalPages);
  const start = (cur - 1) * PAGE_SIZE;
  const pageItems = list.slice(start, start + PAGE_SIZE);
  const goPage = (n) => {
    setPage(n);
    const el = document.getElementById("listings-anchor");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" });
  };

  return (
    <div className="pub-wide" style={{ paddingtop: 0 }}>
      <FilterBar f={f} setF={setF} count={list.length} />
      {list.length === 0 ? (
        <Card pad style={{ marginTop: 18 }}><Empty title="No homes match your filters" icon="search">Try widening your price range or clearing a filter.</Empty></Card>
      ) : (
        <>
          <div className="grid-auto" style={{ marginTop: 18 }}>
            {pageItems.map(p => <PropertyCard key={p.id} p={p} onOpen={onOpen} fav={favs[p.id]} onFav={toggleFav} />)}
          </div>
          {totalPages > 1 && (
            <div className="row between wrap gap-12" style={{ marginTop: 26 }}>
              <span className="dim" style={{ fontSize: 13 }}>Showing {start + 1}–{Math.min(start + PAGE_SIZE, list.length)} of {list.length} · page {cur} of {totalPages}</span>
              <div className="row gap-8" style={{ flexWrap: "wrap", alignItems: "center" }}>
                <button className="btn btn-ghost btn-sm" disabled={cur === 1} onClick={() => goPage(cur - 1)}><Icon name="chevL" size={15} />Prev</button>
                {pageWindow(cur, totalPages).map((n, i) => n === "\u2026"
                  ? <span key={"e" + i} className="dim" style={{ padding: "0 2px" }}>…</span>
                  : <button key={n} className={"btn btn-sm " + (n === cur ? "btn-primary" : "btn-ghost")} style={{ minWidth: 38 }} onClick={() => goPage(n)}>{n}</button>)}
                <button className="btn btn-ghost btn-sm" disabled={cur === totalPages} onClick={() => goPage(cur + 1)}>Next<Icon name="chevR" size={15} /></button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

function Hero({ onBrowse }) {
  return (
    <section className="hero">
      <div className="pub-wide">
        <div className="hero-inner">
          <span className="badge badge-green" style={{ marginBottom: 18 }}><span className="dot" />Now letting across Manchester</span>
          <h1 className="hero-title">Renting, without the runaround.</h1>
          <p className="hero-sub">Browse verified homes, book a viewing, apply, and pay your move-in — all in one trusted place. Korealm handles the rest with the landlord.</p>
          <div className="row gap-12 wrap" style={{ marginTop: 26 }}>
            <Button variant="primary" size="lg" iconR="arrowR" onClick={onBrowse}>Browse homes</Button>
            <Button variant="ghost" size="lg" icon="play">How it works</Button>
          </div>
          <div className="hero-stats">
            <div><span className="hs-v mono">240+</span><span className="hs-k">verified listings</span></div>
            <div className="vdivider" style={{ height: 32 }} />
            <div><span className="hs-v mono">48h</span><span className="hs-k">avg. to approval</span></div>
            <div className="vdivider" style={{ height: 32 }} />
            <div><span className="hs-v mono">100%</span><span className="hs-k">KYC-verified landlords</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Detail ---------------- */
function PropertyDetail({ id, onBack }) {
  const { db, user, session, go, setSession } = useApp();
  const p = db.properties.find(x => x.id === id);
  const [gate, setGate] = useState(null); // 'inspection' | 'apply'
  if (!p) return <div className="pub-wide" style={{ padding: "40px 0" }}><Empty title="Listing not found" /></div>;
  const ll = user(p.landlordId);
  const kyc = db.kyc.find(k => k.landlordId === p.landlordId);

  const go2 = (action) => {
    // Already signed in as a tenant → straight into the flow, no prompt.
    if (session.tenantId) {
      const view = action === "apply" ? "apply" : "book-inspection";
      setSession(s => ({ ...s, role: "tenant", view, params: { propertyId: p.id } }));
      return;
    }
    setGate(action);
  };

  return (
    <div className="pub-wide detail">
      <button className="btn-link row gap-6" style={{ margin: "6px 0 16px" }} onClick={onBack}><Icon name="chevL" size={16} />Back to listings</button>

      <div className="detail-gallery">
        <Photo src={p.gallery?.[0]} alt={p.title} label="hero photo — living room" className="g-main" />
        <Photo src={p.gallery?.[1]} alt="kitchen" label="kitchen" className="g-sub" />
        <Photo src={p.gallery?.[2]} alt="bedroom" label="bedroom" className="g-sub" />
        <div className="g-sub g-more"><Photo src={p.gallery?.[3]} alt="bathroom" className="g-sub" style={{ height: "100%" }} /><span className="g-more-label">+{p.photos - 4} more</span></div>
      </div>

      <div className="detail-grid">
        <div className="col gap-24" style={{ minWidth: 0 }}>
          <div>
            <div className="row gap-10 wrap" style={{ marginBottom: 10 }}>
              <StatusBadge status={p.status} />
              <span className="badge badge-outline">{p.type}</span>
              {p.furnished && <span className="badge badge-neutral">Furnished</span>}
              <span className="badge badge-neutral">EPC {p.epc}</span>
              <span className="badge badge-neutral">Council Tax {p.councilTax}</span>
              <span className="dim row gap-4" style={{ fontSize: 13 }}><Icon name="clock" size={13} />Listed {window.fmt.fmtShort(p.listedDate)}</span>
            </div>
            <h1 style={{ fontSize: 30, letterSpacing: "-0.025em" }}>{p.title}</h1>
            <div className="row gap-6 muted" style={{ marginTop: 8, fontSize: 15 }}><Icon name="pin" size={16} />{p.address} · {p.neighborhood}, Manchester {p.postcode}</div>
          </div>

          <div className="specs-row">
            {[["bed", p.beds === 0 ? "Studio" : p.beds + " Bedrooms"], ["bath", p.baths + " Bathrooms"], ["ruler", p.sqft.toLocaleString() + " sq ft"], ["key", window.fmt.money(p.deposit) + " deposit"]].map(([ic, t]) => (
              <div key={t} className="spec-item"><span className="avatar sq" style={{ width: 38, height: 38, background: "var(--green-soft)", color: "var(--green)" }}><Icon name={ic} size={19} /></span><span style={{ fontWeight: 600, fontSize: 14 }}>{t}</span></div>
            ))}
          </div>

          <div>
            <h3 className="d-h">About this home</h3>
            <p className="muted" style={{ fontSize: 15, lineHeight: 1.6, textWrap: "pretty" }}>
              A bright {p.type.toLowerCase()} in the heart of {p.neighborhood}, finished to a high standard with abundant natural light and thoughtful storage throughout. Moments from the tram, independent cafés, and green space — an easy place to call home.
            </p>
          </div>

          <div>
            <h3 className="d-h">Amenities</h3>
            <div className="amen-grid">
              {p.amenities.map(a => <div key={a} className="amen"><Icon name="check" size={15} style={{ color: "var(--green)" }} />{a}</div>)}
            </div>
          </div>

          <div>
            <h3 className="d-h">Location</h3>
            <Photo label="area map" style={{ height: 220, borderRadius: "var(--r-lg)" }} />
          </div>
        </div>

        {/* sticky action rail */}
        <div className="detail-rail">
          <Card pad>
            <div className="row between" style={{ alignItems: "baseline" }}>
              <div><span className="prop-price mono" style={{ fontSize: 30 }}>{window.fmt.money(p.price)}</span><span className="prop-per">pcm</span></div>
            </div>
            <div className="rail-meta">
              <div className="row between"><span className="muted">Tenancy deposit <span className="hint">(5 weeks)</span></span><span className="mono">{window.fmt.money(p.deposit)}</span></div>
              <div className="row between"><span className="muted">Holding deposit <span className="hint">(1 week)</span></span><span className="mono">{window.fmt.money(p.holdingDeposit)}</span></div>
              <div className="row between"><span className="muted">Move-in total</span><span className="mono" style={{ fontWeight: 600 }}>{window.fmt.money(p.price + p.deposit + p.holdingDeposit)}</span></div>
            </div>
            <div className="col gap-10" style={{ marginTop: 18 }}>
              <Button variant="primary" size="lg" className="btn-block" icon="doc" disabled={p.status === "leased"} onClick={() => go2("apply")}>{p.status === "leased" ? "No longer available" : "Apply to rent"}</Button>
              <Button variant="ghost" size="lg" className="btn-block" icon="calendar" disabled={p.status === "leased"} onClick={() => go2("inspection")}>Book a viewing</Button>
            </div>
            <p className="hint center" style={{ marginTop: 12, textAlign: "center" }}>Free to apply · No obligation to rent</p>
          </Card>

          <Card pad="sm" style={{ marginTop: 14 }}>
            <span className="section-title">Listed by</span>
            <div className="row gap-12" style={{ marginTop: 12 }}>
              <Avatar name={ll.name} size={44} />
              <div className="grow">
                <div className="row gap-6">
                  <span style={{ fontWeight: 600 }}>{ll.company}</span>
                  {kyc?.status === "verified" && <Icon name="checkCircle" size={15} style={{ color: "var(--green)" }} />}
                </div>
                <span className="hint">{ll.name} · Landlord</span>
              </div>
            </div>
            {kyc?.status === "verified" && <div className="verified-strip"><Icon name="shield" size={14} />Identity & ownership verified by Korealm</div>}
          </Card>
        </div>
      </div>

      {gate && <AuthGate action={gate} property={p} onClose={() => setGate(null)} />}
    </div>
  );
}

/* Auth gate: sign in or create an account, then continue to the flow */
function AuthGate({ action, property, onClose }) {
  const { setSession } = useApp();
  const isApply = action === "apply";
  const view = isApply ? "apply" : "book-inspection";
  const startAuth = (mode) => setSession(s => ({ ...s, role: "public", view: "auth", params: { mode, intent: { role: "tenant", view, params: { propertyId: property.id } } } }));
  return (
    <Modal icon={isApply ? "doc" : "calendar"} title={isApply ? "Apply to rent this home" : "Book a viewing"}
      sub="You'll need a tenant account to continue." onClose={onClose}
      footer={<Button variant="ghost" onClick={onClose}>Cancel</Button>}>
      <p className="muted" style={{ fontSize: 14.5, marginBottom: 18 }}>Sign in to your Korealm tenant account, or create one — we'll take you straight to {isApply ? "your application" : "booking your viewing"}.</p>
      <div className="col gap-10">
        <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" onClick={() => startAuth("signin")}>Sign in</Button>
        <Button variant="soft" size="lg" className="btn-block" onClick={() => startAuth("register")}>Create an account</Button>
      </div>
    </Modal>
  );
}

/* ---------------- Public footer ---------------- */
function PubFooter() {
  return (
    <footer className="pub-footer">
      <div className="pub-wide row between wrap gap-20" style={{ padding: "32px 24px" }}>
        <div className="col gap-10" style={{ maxWidth: 280 }}>
          <Logo size={26} />
          <p className="hint">The trusted way to rent. Verified homes, verified landlords, protected payments.</p>
        </div>
        <div className="foot-cols">
          {[["Renters", ["Browse homes", "How it works", "Tenant guide", "Help center"]], ["Landlords", ["List a property", "Pricing", "KYC & payouts", "Owner login"]], ["Company", ["About", "Careers", "Trust & safety", "Contact"]]].map(([h, items]) => (
            <div key={h} className="col gap-8">
              <span className="section-title">{h}</span>
              {items.map(i => <a key={i} className="foot-link">{i}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="divider" />
      <div className="pub-wide row between wrap gap-10" style={{ padding: "16px 24px" }}>
        <span className="hint">© 2026 Korealm Ltd · POC sandbox</span>
        <div className="row gap-16"><a className="foot-link">Privacy</a><a className="foot-link">Terms</a><a className="foot-link">Cookies</a></div>
      </div>
    </footer>
  );
}

/* ---------------- Public router ---------------- */
function PublicApp() {
  const { session, go } = useApp();
  useEffect(() => {
    const h = () => go("auth", { mode: "register" });
    document.addEventListener("korealm-register", h);
    return () => document.removeEventListener("korealm-register", h);
  }, [go]);

  if (session.view === "auth") return <window.AuthScreen />;
  if (session.view === "detail") return (
    <div className="anim-rise" key={session.params.id}><PropertyDetail id={session.params.id} onBack={() => go("home")} /><PubFooter /></div>
  );
  // home
  return (
    <div className="anim-rise">
      <Hero onBrowse={() => { const el = document.getElementById("listings-anchor"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); }} />
      <div id="listings-anchor" style={{ height: 1 }} />
      <div style={{ padding: "8px 0 56px" }}>
        <div className="pub-wide" style={{ marginBottom: 6 }}>
          <h2 style={{ fontSize: 22 }}>Homes in Manchester</h2>
          <p className="muted" style={{ fontSize: 14.5 }}>Every listing is verified before it goes live.</p>
        </div>
        <Listings onOpen={(id) => go("detail", { id })} />
      </div>
      <PubFooter />
    </div>
  );
}

Object.assign(window, { PublicApp, PropertyCard, PropertyDetail });