// ── Explore + Saved screens ──────────────────────────────────────
const { Icon, Chip, ListingCard, ListingCardMini, ListingCardOverlay, ListingCardCompact, DealTag } = window;

function SearchHeader({ deal, setDeal, onOpenSearch, onOpenFilters, activeFilterCount, onOpenProfile }) {
  return (
    <div style={{ padding: '0 18px', background: 'var(--bg)' }}>
      {/* location + profile */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        paddingTop: 4, paddingBottom: 12 }}>
        <button onClick={onOpenSearch} style={{ display: 'flex', alignItems: 'center', gap: 5, border: 'none',
          background: 'none', padding: 0, cursor: 'pointer' }}>
          <Icon name="pin" size={19} s="var(--accent)" />
          <span style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 700, letterSpacing: -0.4,
            color: 'var(--ink)', whiteSpace: 'nowrap' }}>San Francisco</span>
          <Icon name="chevD" size={18} s="var(--muted)" />
        </button>
        <button onClick={onOpenProfile} style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--accent-soft)',
          border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="user" size={21} s="var(--accent)" />
        </button>
      </div>

      {/* AI search + guided filter entry */}
      <button onClick={onOpenSearch} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 11,
        height: 52, padding: '0 6px 0 14px', borderRadius: 999, border: '1.5px solid var(--line)',
        background: 'var(--surface)', cursor: 'pointer', textAlign: 'left',
        boxShadow: '0 1px 3px rgba(0,0,0,0.03)' }}>
        <span style={{ width: 30, height: 30, borderRadius: 9, flexShrink: 0, background: 'var(--accent)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="sparkle" size={18} s="#fff" /></span>
        <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--muted)' }}>
          Ask Haven AI to find a home…</span>
        <span onClick={(e) => { e.stopPropagation(); onOpenFilters(); }} style={{ position: 'relative',
          width: 40, height: 40, borderRadius: 999, background: 'oklch(0.95 0.004 95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name="sliders" size={20} s="var(--ink)" />
        </span>
      </button>
    </div>
  );
}

function Explore({ listings, deal, setDeal, saved, layout, setLayout, sort, setSort,
  activeFilterCount, onOpenSearch, onOpenFilters, onOpen, onToggleSave, onOpenReel, onOpenProfile, cardStyle = 'Classic' }) {
  return (
    <div style={{ paddingBottom: 110 }}>
      <SearchHeader deal={deal} setDeal={setDeal} onOpenSearch={onOpenSearch}
        onOpenFilters={onOpenFilters} activeFilterCount={activeFilterCount} onOpenProfile={onOpenProfile} />

      {/* results bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 18px 12px' }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>
          {listings.length} {listings.length === 1 ? 'home' : 'homes'}
          <span style={{ color: 'var(--muted)', fontWeight: 400 }}> · {sort === 'new' ? 'Newest' : 'Price'}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => setSort(sort === 'new' ? 'price' : 'new')} style={{ display: 'inline-flex',
            alignItems: 'center', gap: 5, height: 34, padding: '0 12px', borderRadius: 999,
            border: '1.5px solid var(--line)', background: 'var(--surface)', cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>
            <Icon name="arrowUp" size={14} s="var(--ink)" /> Sort
          </button>
          <div style={{ display: 'flex', borderRadius: 999, border: '1.5px solid var(--line)',
            overflow: 'hidden' }}>
            {[['list', 'rows'], ['grid', 'grid']].map(([k, ic]) => (
              <button key={k} onClick={() => setLayout(k)} style={{ width: 38, height: 34, border: 'none',
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: layout === k ? 'var(--ink)' : 'var(--surface)' }}>
                <Icon name={ic} size={16} s={layout === k ? 'var(--bg)' : 'var(--ink)'} sw={1.8} />
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* cards */}
      {listings.length === 0 ? (
        <Empty />
      ) : layout === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 14px', padding: '0 18px' }}>
          {listings.map(l => (
            <ListingCardMini key={l.id} l={l} saved={saved.has(l.id)} onOpen={onOpen} onToggleSave={onToggleSave} />
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: cardStyle === 'Compact' ? 18 : 24, padding: '0 18px' }}>
          {listings.map(l => {
            const props = { key: l.id, l, saved: saved.has(l.id), onOpen, onToggleSave, onOpenReel };
            if (cardStyle === 'Overlay') return <ListingCardOverlay {...props} />;
            if (cardStyle === 'Compact') return <ListingCardCompact {...props} />;
            return <ListingCard {...props} />;
          })}
        </div>
      )}
    </div>
  );
}

function Empty() {
  return (
    <div style={{ textAlign: 'center', padding: '70px 40px', color: 'var(--muted)' }}>
      <div style={{ width: 64, height: 64, borderRadius: 999, background: 'oklch(0.94 0.004 95)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>
        <Icon name="search" size={28} s="var(--muted)" />
      </div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 600, color: 'var(--ink)' }}>
        No homes match</div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 14, marginTop: 4 }}>
        Try widening your filters or price range.</div>
    </div>
  );
}

// ── Saved ────────────────────────────────────────────────────────
function Saved({ listings, saved, onOpen, onToggleSave, onOpenReel, goExplore }) {
  const items = listings.filter(l => saved.has(l.id));
  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ padding: '10px 18px 6px' }}>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 30, fontWeight: 700, letterSpacing: -0.7,
          color: 'var(--ink)' }}>Saved</div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--muted)', marginTop: 2 }}>
          {items.length ? `${items.length} ${items.length === 1 ? 'home' : 'homes'} you're tracking` : 'Tap the heart on any home'}</div>
      </div>
      {items.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '60px 40px' }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--accent-soft)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>
            <Icon name="heart" size={28} s="var(--accent)" />
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 600, color: 'var(--ink)' }}>
            Nothing saved yet</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--muted)', marginTop: 4,
            maxWidth: 240, marginInline: 'auto' }}>
            Save homes you love and compare them side by side here.</div>
          <button onClick={goExplore} style={{ marginTop: 22, height: 46, padding: '0 22px', borderRadius: 12,
            border: 'none', background: 'var(--ink)', color: 'var(--bg)', cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600 }}>Browse homes</button>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26, padding: '16px 18px 0' }}>
          {items.map(l => (
            <ListingCard key={l.id} l={l} saved onOpen={onOpen} onToggleSave={onToggleSave} onOpenReel={onOpenReel} />
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Explore, Saved });