// 03 · Events List + Filters (desktop)
// Public browse page. Sidebar filters + grid of V4EventCard.

function ScreenEventsList({ onNav }) {
  const [cat, setCat] = React.useState('all');
  const [city, setCity] = React.useState('all');
  const [price, setPrice] = React.useState([0, 300]);
  const [date, setDate] = React.useState('any');
  const [sort, setSort] = React.useState('trending');
  const [view, setView] = React.useState('grid');
  const C = window.V4;
  const allEvents = window.DESI_EVENTS;

  const cats = [
    { id: 'all', label: 'All categories', count: allEvents.length },
    { id: 'Concert', label: 'Concerts', count: 7 },
    { id: 'Festival', label: 'Festivals', count: 2 },
    { id: 'Club', label: 'Club nights', count: 1 },
    { id: 'Comedy', label: 'Comedy', count: 1 },
    { id: 'Theatre', label: 'Theatre', count: 1 },
  ];
  const cities = ['all', 'Berlin', 'Frankfurt', 'Munich', 'Hamburg', 'Cologne', 'Stuttgart', 'Düsseldorf'];
  const dates = [
    { id: 'any', label: 'Any time' },
    { id: 'weekend', label: 'This weekend' },
    { id: '7d', label: 'Next 7 days' },
    { id: '30d', label: 'Next 30 days' },
    { id: 'month', label: 'Pick a date' },
  ];

  let filtered = allEvents;
  if (cat !== 'all') filtered = filtered.filter(e => e.category === cat);
  if (city !== 'all') filtered = filtered.filter(e => e.city === city);
  filtered = filtered.filter(e => e.priceFrom >= price[0] && e.priceFrom <= price[1]);

  return (
    <div data-screen-label="03 Events List" style={{ background: C.bg, minHeight: '100vh' }}>
      <V4TopNav onNav={onNav} transparent={false}/>

      {/* Page header */}
      <div style={{ borderBottom: `1px solid ${C.line}`, background: C.paper }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '40px 40px 28px' }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: C.red, marginBottom: 14, fontWeight: 600,
          }}>Browse · {allEvents.length * 3}+ live events</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40 }}>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 400,
              letterSpacing: '-0.032em', lineHeight: 1, margin: 0,
              maxWidth: 700,
            }}>
              Every desi show in <em style={{
                fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic',
                color: C.red, fontWeight: 400,
              }}>Germany.</em>
            </h1>
            <div style={{ display: 'flex', gap: 20, fontSize: 13, color: C.ink2, paddingBottom: 8 }}>
              <span><strong style={{ color: C.ink }}>{filtered.length}</strong> matching</span>
              <span style={{ color: C.ink4 }}>·</span>
              <span><strong style={{ color: C.ink }}>7</strong> cities</span>
              <span style={{ color: C.ink4 }}>·</span>
              <span>Updated 3 min ago</span>
            </div>
          </div>

          {/* Quick chips row */}
          <div style={{ display: 'flex', gap: 8, marginTop: 28, flexWrap: 'wrap' }}>
            {['🔥 Selling fast', '✨ Originals only', '🎤 Bollywood', '🪩 Punjabi', '🎭 Comedy', '👨‍👩‍👧 Family-friendly', '🎓 Student €25', '♿ Accessible'].map(x => (
              <button key={x} style={{
                height: 36, padding: '0 14px', borderRadius: 99,
                background: C.bgAlt, border: `1px solid ${C.line}`,
                fontSize: 12.5, fontWeight: 500, color: C.ink, cursor: 'pointer',
              }}>{x}</button>
            ))}
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '36px 40px 80px', display: 'grid', gridTemplateColumns: '280px 1fr', gap: 40 }}>
        {/* Sidebar filters */}
        <aside>
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, margin: 0 }}>Filters</h3>
              <button style={{ background: 'none', border: 0, color: C.red, fontSize: 12, fontWeight: 600, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 4 }}>Clear all</button>
            </div>

            <FilterGroup label="Category">
              {cats.map(c => (
                <FilterRow key={c.id} active={cat === c.id} onClick={() => setCat(c.id)} count={c.count}>
                  {c.label}
                </FilterRow>
              ))}
            </FilterGroup>

            <FilterGroup label="City">
              <select value={city} onChange={e => setCity(e.target.value)} style={selectStyle(C)}>
                {cities.map(c => <option key={c} value={c}>{c === 'all' ? 'All cities' : c}</option>)}
              </select>
            </FilterGroup>

            <FilterGroup label="When">
              {dates.map(d => (
                <FilterRow key={d.id} active={date === d.id} onClick={() => setDate(d.id)}>
                  {d.label}
                </FilterRow>
              ))}
            </FilterGroup>

            <FilterGroup label="Price · €">
              <div style={{ padding: '8px 0' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: C.ink2, marginBottom: 12, fontFamily: 'var(--font-mono)' }}>
                  <span>€{price[0]}</span><span>€{price[1]}+</span>
                </div>
                <div style={{ position: 'relative', height: 4, background: C.line, borderRadius: 99, marginBottom: 16 }}>
                  <div style={{ position: 'absolute', height: '100%', left: `${(price[0]/300)*100}%`, right: `${100-(price[1]/300)*100}%`, background: C.red, borderRadius: 99 }}/>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input type="number" value={price[0]} onChange={e => setPrice([+e.target.value, price[1]])} style={priceInput(C)}/>
                  <input type="number" value={price[1]} onChange={e => setPrice([price[0], +e.target.value])} style={priceInput(C)}/>
                </div>
              </div>
            </FilterGroup>

            <FilterGroup label="Language">
              {['Hindi', 'Punjabi', 'Tamil', 'Bengali', 'English'].map(l => (
                <label key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 13.5, cursor: 'pointer' }}>
                  <input type="checkbox" style={{ accentColor: C.red }}/> {l}
                </label>
              ))}
            </FilterGroup>

            <FilterGroup label="More">
              {['Verified organisers', 'Wheelchair accessible', 'Family-friendly', 'Standing only', 'Seated'].map(l => (
                <label key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 13.5, cursor: 'pointer' }}>
                  <input type="checkbox" style={{ accentColor: C.red }}/> {l}
                </label>
              ))}
            </FilterGroup>
          </div>
        </aside>

        {/* Results */}
        <div>
          {/* Active chips + sort row */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, gap: 16 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {cat !== 'all' && (
                <ActiveChip onClear={() => setCat('all')}>{cats.find(c => c.id === cat).label}</ActiveChip>
              )}
              {city !== 'all' && (
                <ActiveChip onClear={() => setCity('all')}>{city}</ActiveChip>
              )}
              {(price[0] > 0 || price[1] < 300) && (
                <ActiveChip onClear={() => setPrice([0,300])}>€{price[0]}–€{price[1]}</ActiveChip>
              )}
            </div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <select value={sort} onChange={e => setSort(e.target.value)} style={{...selectStyle(C), width: 'auto', height: 38, fontSize: 13}}>
                <option value="trending">Sort: Trending</option>
                <option value="date">Sort: Soonest</option>
                <option value="price-low">Price: low to high</option>
                <option value="price-high">Price: high to low</option>
              </select>
              <div style={{ display: 'flex', border: `1px solid ${C.line}`, borderRadius: 8, overflow: 'hidden', background: '#fff' }}>
                <button onClick={() => setView('grid')} style={viewBtn(view==='grid', C)}><V4Icon name="grid" size={14}/></button>
                <button onClick={() => setView('list')} style={viewBtn(view==='list', C)}><V4Icon name="filter" size={14}/></button>
              </div>
            </div>
          </div>

          {/* Grid / List */}
          {view === 'grid' ? (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
              {filtered.map(e => <V4EventCard key={e.id} event={e} onNav={onNav}/>)}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {filtered.map(e => <ListRow key={e.id} event={e} onNav={onNav}/>)}
            </div>
          )}

          {/* Empty state hint when no results */}
          {filtered.length === 0 && (
            <div style={{ padding: '80px 20px', textAlign: 'center', background: C.paper, borderRadius: 16, border: `1px solid ${C.line}` }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: C.ink, marginBottom: 8 }}>Nothing matches.</div>
              <p style={{ color: C.ink2, fontSize: 14 }}>Loosen a filter or try a different city.</p>
            </div>
          )}

          {/* Pagination */}
          {filtered.length > 0 && (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 6, marginTop: 60 }}>
              {['‹', '1', '2', '3', '…', '7', '›'].map((p, i) => (
                <button key={i} style={{
                  minWidth: 40, height: 40, borderRadius: 99, border: `1px solid ${C.line}`,
                  background: p === '1' ? C.ink : '#fff', color: p === '1' ? '#fff' : C.ink,
                  fontSize: 13, fontWeight: 500, cursor: 'pointer',
                }}>{p}</button>
              ))}
            </div>
          )}
        </div>
      </div>

      <V4Footer/>
    </div>
  );
}

function FilterGroup({ label, children }) {
  const C = window.V4;
  return (
    <div style={{ paddingBottom: 22, marginBottom: 22, borderBottom: `1px solid ${C.line}` }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600,
      }}>{label}</div>
      {children}
    </div>
  );
}

function FilterRow({ children, active, onClick, count }) {
  const C = window.V4;
  return (
    <button onClick={onClick} style={{
      width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '8px 12px', borderRadius: 8, border: 0,
      background: active ? C.bgAlt : 'transparent',
      color: active ? C.ink : C.ink2, fontWeight: active ? 600 : 500,
      fontSize: 13.5, cursor: 'pointer', textAlign: 'left',
    }}>
      <span>{children}</span>
      {count != null && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: C.ink3 }}>{count}</span>}
    </button>
  );
}

function ActiveChip({ children, onClear }) {
  const C = window.V4;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 8px 6px 14px', borderRadius: 99,
      background: C.ink, color: '#fff', fontSize: 12.5, fontWeight: 500,
    }}>
      {children}
      <button onClick={onClear} style={{
        width: 20, height: 20, borderRadius: 99, border: 0,
        background: 'rgba(255,255,255,0.2)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
      }}><V4Icon name="close" size={11}/></button>
    </span>
  );
}

function ListRow({ event, onNav }) {
  const C = window.V4;
  return (
    <div onClick={() => onNav('event', event.id)} style={{
      display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24,
      padding: 16, background: '#fff', borderRadius: 14,
      border: `1px solid ${C.line}`, cursor: 'pointer', alignItems: 'center',
    }}>
      <div style={{ width: 120, aspectRatio: '3/4', borderRadius: 8, overflow: 'hidden' }}>
        <window.DesiPoster event={event}/>
      </div>
      <div>
        <div style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: C.ink3, textTransform: 'uppercase', marginBottom: 8 }}>
          <span style={{ color: C.red, fontWeight: 600 }}>{event.category}</span>
          <span>·</span><span>{event.dateShort} · {event.day}</span>
          {event.status === 'selling-fast' && <><span>·</span><span style={{ color: C.saffron, fontWeight: 600 }}>SELLING FAST</span></>}
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 6px' }}>{event.artist}</h3>
        <div style={{ fontSize: 14, color: C.ink2 }}>{event.title} · {event.venue}, {event.city}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          {event.tags.map(t => (
            <span key={t} style={{ fontSize: 11, padding: '3px 9px', borderRadius: 99, background: C.bgAlt, color: C.ink2 }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 11, color: C.ink3, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em' }}>FROM</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, color: C.ink, margin: '4px 0 12px' }}>{v4Eur(event.priceFrom)}</div>
        <button style={{
          height: 40, padding: '0 18px', borderRadius: 99,
          background: C.ink, color: '#fff', border: 0,
          fontSize: 13, fontWeight: 600, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>Tickets <V4Icon name="arrow" size={13}/></button>
      </div>
    </div>
  );
}

function selectStyle(C) {
  return {
    width: '100%', height: 42, padding: '0 14px', borderRadius: 8,
    border: `1px solid ${C.line}`, background: '#fff', fontSize: 13.5,
    color: C.ink, cursor: 'pointer', appearance: 'none',
    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7d86' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>")`,
    backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', paddingRight: 32,
  };
}
function priceInput(C) {
  return {
    flex: 1, height: 38, padding: '0 12px', borderRadius: 8,
    border: `1px solid ${C.line}`, background: '#fff', fontSize: 13,
    color: C.ink, fontFamily: 'var(--font-mono)',
  };
}
function viewBtn(active, C) {
  return {
    width: 38, height: 38, border: 0,
    background: active ? C.ink : '#fff', color: active ? '#fff' : C.ink2,
    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}