// Board — Pinterest-style grid with category filter chips

function CategoryChips({ active, onPick }) {
  return (
    <div style={{
      display: 'flex', gap: 7,
      overflowX: 'auto',
      padding: '2px 16px 14px',
      scrollbarWidth: 'none',
    }}>
      <style>{`::-webkit-scrollbar { display: none; }`}</style>
      {CATEGORIES.map(c => {
        const on = active === c.id;
        return (
          <button key={c.id} onClick={() => onPick(c.id)} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            height: 34, padding: '0 13px 0 11px',
            borderRadius: 999,
            border: `1.5px solid ${on ? C.navy : 'rgba(30,42,74,0.14)'}`,
            background: on ? C.navy : C.white,
            color: on ? C.cream : C.navy,
            fontFamily: '"DM Sans", system-ui',
            fontWeight: 600, fontSize: 13,
            letterSpacing: -0.1,
            cursor: 'pointer',
            flexShrink: 0,
            transition: 'all 150ms ease',
          }}>
            <span style={{ fontSize: 14 }}>{c.emoji}</span>
            {c.label}
          </button>
        );
      })}
    </div>
  );
}

function BoardCard({ item, members, onOpen, onToggleDown, isDown }) {
  const byId = (id) => members.find(m => m.id === id) || { id, name: '?', avatar: '?', color: C.inkMuted };
  const cat = catById(item.category);
  // image.h/w drives masonry aspect ratio for SVG placeholders; URL images use a default
  const w = item.image?.w || 600;
  const h = item.image?.h || 420;
  const downCount = item.downs.length;
  return (
    <div onClick={() => onOpen(item.id)} style={{
      background: C.white,
      borderRadius: 18,
      overflow: 'hidden',
      marginBottom: 10,
      boxShadow: '0 1px 3px rgba(30,42,74,0.04), 0 4px 12px rgba(30,42,74,0.05)',
      cursor: 'pointer',
      breakInside: 'avoid',
    }}>
      <div style={{ position: 'relative' }}>
        <Placeholder spec={item.image} style={{
          width: '100%',
          aspectRatio: `${w} / ${h}`,
        }}/>
        <div style={{ position: 'absolute', top: 8, left: 8 }}>
          <CategoryBadge cat={cat}/>
        </div>
        <button onClick={(e) => { e.stopPropagation(); onToggleDown(item.id); }} style={{
          position: 'absolute', bottom: 8, right: 8,
          width: 36, height: 36, borderRadius: 18,
          border: 'none',
          background: isDown ? C.sage : 'rgba(255,255,255,0.95)',
          color: isDown ? '#fff' : C.coral,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
          backdropFilter: 'blur(6px)',
          boxShadow: '0 2px 8px rgba(30,42,74,0.18)',
          padding: 0,
        }}>
          <ImDownFlame filled={isDown} size={18} color={isDown ? '#fff' : C.coral}/>
        </button>
      </div>
      <div style={{ padding: '10px 12px 12px' }}>
        <div style={{
          fontFamily: '"DM Sans", system-ui',
          fontWeight: 600, fontSize: 13.5, color: C.navy,
          letterSpacing: -0.15, lineHeight: 1.3,
        }}>{item.title}</div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginTop: 8,
        }}>
          <AvatarStack users={item.downs.map(byId)} size={18} max={3}/>
          <div style={{
            fontFamily: '"DM Sans", system-ui',
            fontSize: 11.5, color: C.inkMuted, fontWeight: 500,
          }}>{downCount} down</div>
        </div>
      </div>
    </div>
  );
}

function BoardScreen({ items, userId, huddle, onOpen, onAdd, onToggleDown }) {
  const [cat, setCat] = React.useState('all');
  const filtered = items.filter(i => cat === 'all' || i.category === cat);
  const members = huddle?.members || [];
  // Split into two columns — masonry
  const cols = [[], []];
  filtered.forEach((it, i) => cols[i % 2].push(it));

  return (
    <Screen>
      <GroupBar group={huddle} members={huddle.members}/>
      <HuddleHeader title="Board" subtitle="anytime ideas" onAdd={onAdd}/>
      <CategoryChips active={cat} onPick={setCat}/>
      {filtered.length === 0 ? (
        <div style={{ padding: '0 16px' }}>
          <div style={{
            background: C.white, borderRadius: 18, padding: 22,
            textAlign: 'center', boxShadow: '0 1px 3px rgba(30,42,74,0.04)',
          }}>
            <div style={{ fontFamily: '"Instrument Serif",serif', fontStyle: 'italic', fontSize: 22, color: C.navy }}>
              nothing in {cat === 'all' ? 'the board' : 'this category'} yet
            </div>
            <div style={{ fontFamily: '"DM Sans",system-ui', fontSize: 13.5, color: C.inkMuted, marginTop: 6, lineHeight: 1.45 }}>
              Tap + to add a spot — skip the date and it lands here.
            </div>
          </div>
        </div>
      ) : (
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 10,
          padding: '0 16px',
        }}>
          {cols.map((col, i) => (
            <div key={i}>
              {col.map(it => (
                <BoardCard
                  key={it.id} item={it} members={members}
                  isDown={it.downs.includes(userId)}
                  onOpen={onOpen}
                  onToggleDown={onToggleDown}
                />
              ))}
            </div>
          ))}
        </div>
      )}
    </Screen>
  );
}

Object.assign(window, { BoardScreen, CategoryChips });