/* Dispensaries Near Me — geolocation, a stylized map with pins, Google + WeedReview ratings. */
(function () {
  const D = window.WeedReviewDesignSystem_dcaedb;
  const { Card, LeafRating, Badge, Tag, Button, Divider, Icon, FanLeaf, Input, LeafFall } = D;
  const WR = window.WR_DATA;
  const { useState } = React;

  const Wrap = ({ children, style }) => (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--space-7)', ...style }}>{children}</div>
  );

  function MapPanel({ list, sel, setSel }) {
    return (
      <div style={{ position: 'relative', height: 'min(72vh, 640px)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-card)', background: 'linear-gradient(160deg, #E7EEDE 0%, #DEE7D2 100%)' }}>
        {/* park + water blocks */}
        <div style={{ position: 'absolute', left: '6%', top: '10%', width: '32%', height: '24%', background: '#D3E2BE', borderRadius: 18, opacity: 0.85 }} />
        <div style={{ position: 'absolute', right: '-8%', bottom: '6%', width: '42%', height: '32%', background: '#C6DCD8', borderRadius: '46%', transform: 'rotate(-14deg)', opacity: 0.9 }} />
        {/* street grid */}
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.6) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,0.6) 2px, transparent 2px)', backgroundSize: '68px 68px', opacity: 0.5 }} />
        {/* main roads */}
        <div style={{ position: 'absolute', left: '-10%', top: '44%', width: '120%', height: 6, background: '#F3E1B4', transform: 'rotate(7deg)', opacity: 0.95 }} />
        <div style={{ position: 'absolute', left: '38%', top: '-10%', width: 6, height: '120%', background: '#F3E1B4', transform: 'rotate(4deg)', opacity: 0.95 }} />
        {/* you-are-here */}
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}>
          <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#2A6FDB', border: '3px solid #fff', boxShadow: '0 0 0 6px rgba(42,111,219,0.22)' }} />
        </div>
        {/* pins */}
        {list.map((d, i) => {
          const on = sel === d.id;
          return (
            <button key={d.id} type="button" onClick={() => setSel(d.id)}
              style={{ position: 'absolute', left: d.pin.x + '%', top: d.pin.y + '%', transform: 'translate(-50%,-100%)', zIndex: on ? 5 : 2, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: on ? 38 : 32, height: on ? 38 : 32, borderRadius: '50% 50% 50% 0', transform: 'rotate(-45deg)', background: on ? 'var(--amber-500)' : 'var(--forest-700)', boxShadow: on ? 'var(--shadow-hover)' : 'var(--shadow-sm)', transition: 'all var(--duration-fast) var(--ease-out)', border: '2px solid #fff' }}>
                  <span style={{ transform: 'rotate(45deg)', color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: on ? 15 : 13 }}>{i + 1}</span>
                </div>
              </div>
            </button>
          );
        })}
        <div style={{ position: 'absolute', left: 12, bottom: 12, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(4px)', borderRadius: 'var(--radius-pill)', padding: '5px 12px', fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="map" size={13} /> Map preview
        </div>
      </div>
    );
  }

  function DispensaryCard({ d, index, sel, setSel }) {
    const on = sel === d.id;
    return (
      <Card interactive onClick={() => setSel(d.id)} padding="md"
        style={{ borderColor: on ? 'var(--sage-400)' : undefined, boxShadow: on ? 'var(--shadow-hover)' : undefined, scrollMarginTop: 90 }}>
        <div style={{ display: 'flex', gap: 'var(--space-5)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flex: 'none' }}>
            <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: '50%', background: on ? 'var(--amber-500)' : 'var(--forest-700)', color: '#fff', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14 }}>{index + 1}</span>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-lg)', fontWeight: 600, color: 'var(--text-heading)', letterSpacing: '-0.01em' }}>{d.name}</h3>
              {d.neighborhood && <Tag size="sm">{d.neighborhood}</Tag>}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-muted)', fontSize: 14, marginTop: 4, flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="map-pin" size={14} /> {d.address}, {d.city}</span>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', margin: '12px 0', flexWrap: 'wrap' }}>
              <div>
                <div className="u-label" style={{ color: 'var(--text-faint)', marginBottom: 3 }}>WeedReview</div>
                <LeafRating value={null} size="sm" />
              </div>
            </div>

            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
              {d.tags.map((t) => <Tag key={t} tone="sage" size="sm">{t}</Tag>)}
            </div>

            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Button size="sm" iconLeft="navigation" onClick={(e) => { e.stopPropagation(); window.open('https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent(d.name + ' ' + d.address + ' ' + d.city), '_blank'); }}>Directions</Button>
            </div>
          </div>
        </div>
      </Card>
    );
  }

  function DispensariesPage() {
    const list = WR.dispensaries;
    const [sel, setSel] = useState(list[0].id);
    const [loc, setLoc] = useState('Denver, CO');
    const [locating, setLocating] = useState(false);

    const useMyLocation = () => {
      if (!navigator.geolocation) { setLoc('Geolocation not supported — showing Denver, CO'); return; }
      setLocating(true);
      navigator.geolocation.getCurrentPosition(
        (pos) => { setLoc('Near you (' + pos.coords.latitude.toFixed(3) + ', ' + pos.coords.longitude.toFixed(3) + ')'); setLocating(false); },
        () => { setLoc('Location blocked — showing Denver, CO'); setLocating(false); },
        { timeout: 8000 }
      );
    };

    return (
      <div style={{ paddingBottom: 80 }}>
        {/* Header band */}
        <section style={{ position: 'relative', background: 'radial-gradient(120% 140% at 85% 0%, #24503F 0%, #1B3B2F 60%, #14301F 100%)', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -50, top: -50, opacity: 0.08 }}><FanLeaf size={300} filledColor="#EDE7D8" /></div>
          <LeafFall travel={320} count={13} />
          <Wrap style={{ position: 'relative', zIndex: 1, padding: '44px var(--space-7)' }}>
            <div className="u-label" style={{ color: 'var(--leaf-400)', marginBottom: 10 }}>Find a shop</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-4xl)', fontWeight: 600, color: '#F3EEE2', letterSpacing: '-0.02em' }}>Dispensaries Near Me</h1>
            <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 15, margin: '10px 0 22px', maxWidth: 560 }}>Real licensed recreational dispensaries in Denver, CO. Community leaf scores appear as reviews come in.</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ flex: '1 1 320px', maxWidth: 420 }}><Input icon="map-pin" value={loc} onChange={(e) => setLoc(e.target.value)} /></div>
              <Button variant="primary" iconLeft="locate-fixed" onClick={useMyLocation}>{locating ? 'Locating…' : 'Use my location'}</Button>
            </div>
          </Wrap>
        </section>

        <Wrap style={{ paddingTop: 28, display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 1fr)', gap: 'var(--space-8)', alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 'var(--space-5)' }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 600, color: 'var(--text-heading)' }}>{list.length} dispensaries near {loc.replace(/^Near you.*/, 'you')}</h2>
              <span className="u-label" style={{ color: 'var(--text-faint)' }}>Denver, CO</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              {list.map((d, i) => <DispensaryCard key={d.id} d={d} index={i} sel={sel} setSel={setSel} />)}
            </div>
          </div>
          <div style={{ position: 'sticky', top: 88 }}>
            <MapPanel list={list} sel={sel} setSel={setSel} />
          </div>
        </Wrap>
      </div>
    );
  }
  window.DispensariesPage = DispensariesPage;
})();