// ── Reels: vertical video feed for listings with agent walkthroughs ──
const { Icon, Photo, fmtPrice } = window;

function ReelMedia({ hue, active }) {
  // Animated stand-in for vertical video — slow drift + light sweep.
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#000' }}>
      <div style={{ position: 'absolute', inset: '-8%',
        animation: active ? 'kenburns 14s ease-in-out infinite alternate' : 'none' }}>
        <Photo hue={hue} dark label={false} style={{ borderRadius: 0 }} />
      </div>
      {/* drifting light sweep */}
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(50% 40% at 30% 25%, rgba(255,255,255,0.16), transparent 60%)',
        animation: active ? 'sweep 9s ease-in-out infinite alternate' : 'none' }} />
      {/* legibility gradients */}
      <div style={{ position: 'absolute', inset: 0, background:
        'linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 52%, rgba(0,0,0,0.78) 100%)' }} />
    </div>
  );
}

function RailBtn({ icon, label, onClick, active, fill }) {
  return (
    <button onClick={(e) => { e.stopPropagation(); onClick && onClick(); }} style={{ background: 'none', border: 'none',
      cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
      <span style={{ width: 46, height: 46, borderRadius: 999, background: 'rgba(255,255,255,0.16)',
        backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={24} s={active ? 'var(--accent)' : '#fff'} fill={fill && active ? 'var(--accent)' : 'none'} sw={1.9} />
      </span>
      {label && <span style={{ fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 600, color: '#fff' }}>{label}</span>}
    </button>
  );
}

function Reel({ l, active, saved, muted, onToggleSave, onToggleMute, onOpen }) {
  return (
    <div style={{ position: 'relative', height: '100%', scrollSnapAlign: 'start', flexShrink: 0,
      overflow: 'hidden' }}>
      <ReelMedia hue={l.hue} active={active} />

      {/* right action rail */}
      <div style={{ position: 'absolute', right: 12, bottom: 150, zIndex: 4, display: 'flex',
        flexDirection: 'column', alignItems: 'center', gap: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 50, height: 50, borderRadius: 999, overflow: 'hidden', border: '2px solid #fff' }}>
            <Photo hue={l.agent.hue} label={false} />
          </div>
        </div>
        <RailBtn icon="heart" label="Save" active={saved} fill onClick={() => onToggleSave(l.id)} />
        <RailBtn icon="msg" label="Ask" />
        <RailBtn icon="share" label="Share" />
        <RailBtn icon={muted ? 'mute' : 'sound'} onClick={onToggleMute} />
      </div>

      {/* bottom caption */}
      <div style={{ position: 'absolute', left: 16, right: 84, bottom: 40, zIndex: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: 0.5, textTransform: 'uppercase',
            color: '#fff', background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(6px)', padding: '4px 9px',
            borderRadius: 6 }}>{l.deal === 'rent' ? 'For rent' : 'For sale'}</span>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600, color: '#fff',
            whiteSpace: 'nowrap' }}>{l.agent.name}</span>
        </div>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500, color: '#fff', lineHeight: 1.45,
          textWrap: 'pretty', textShadow: '0 1px 8px rgba(0,0,0,0.4)' }}>{l.reelCap}</div>

        {/* listing chip */}
        <button onClick={() => onOpen(l.id)} style={{ marginTop: 14, width: '100%', display: 'flex',
          alignItems: 'center', gap: 12, padding: 8, borderRadius: 16, border: 'none', cursor: 'pointer',
          background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(14px)', textAlign: 'left' }}>
          <div style={{ width: 52, height: 52, borderRadius: 11, overflow: 'hidden', flexShrink: 0 }}>
            <Photo hue={l.hue} label={false} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 17, fontWeight: 700, color: '#fff',
              letterSpacing: -0.3 }}>{fmtPrice(l)}</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'rgba(255,255,255,0.85)',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {l.beds} bd · {l.baths} ba · {l.address}</div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 34, padding: '0 13px',
            borderRadius: 999, background: '#fff', color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: 13,
            fontWeight: 700, flexShrink: 0 }}>View <Icon name="chevR" size={15} s="var(--ink)" sw={2.2} /></span>
        </button>
      </div>
    </div>
  );
}

function Reels({ reels, startId, saved, onToggleSave, onOpen, onClose }) {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const [muted, setMuted] = React.useState(true);

  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const startIdx = Math.max(0, reels.findIndex(r => r.id === startId));
    el.scrollTop = startIdx * el.clientHeight;
    setActive(startIdx);
  }, [startId]);

  const onScroll = () => {
    const el = ref.current; if (!el) return;
    setActive(Math.round(el.scrollTop / el.clientHeight));
  };

  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 42, background: '#000' }}>
      <div ref={ref} onScroll={onScroll} className="no-scrollbar" style={{ height: '100%', overflowY: 'auto',
        scrollSnapType: 'y mandatory', WebkitOverflowScrolling: 'touch' }}>
        {reels.map((l, i) => (
          <div key={l.id} style={{ height: '100%' }}>
            <Reel l={l} active={i === active} saved={saved.has(l.id)} muted={muted}
              onToggleSave={onToggleSave} onToggleMute={() => setMuted(m => !m)} onOpen={onOpen} />
          </div>
        ))}
      </div>

      {/* top bar */}
      <div style={{ position: 'absolute', top: 56, left: 16, right: 16, zIndex: 6, display: 'flex',
        alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 700, color: '#fff' }}>Reels</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            {active + 1} / {reels.length}</span>
        </div>
        <button onClick={onClose} style={{ width: 38, height: 38, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center',
          justifyContent: 'center' }}><Icon name="close" size={20} s="#fff" sw={2} /></button>
      </div>

      {/* progress segments */}
      <div style={{ position: 'absolute', top: 44, left: 16, right: 16, zIndex: 6, display: 'flex', gap: 4 }}>
        {reels.map((_, i) => (
          <span key={i} style={{ flex: 1, height: 2.5, borderRadius: 9,
            background: i <= active ? '#fff' : 'rgba(255,255,255,0.3)' }} />
        ))}
      </div>
    </div>
  );
}

window.Reels = Reels;