/* OnSumn — EventsGrid components: CategoryCarouselRow, SkeletonCard, EmptyState
   Extracted from index.html. Behavior unchanged. */

/* ───── Skeleton loading card ───── */
function SkeletonCard({ darkMode, radius }) {
  const bg = darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)';
  return (
    <div className="skeleton-card" style={{
      ...glassStyle(darkMode, 'card'),
      border: darkMode ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.04)',
      borderRadius: radius, overflow: 'hidden',
    }}>
      <div style={{ height: 120, background: bg }} />
      <div style={{ padding: '12px 14px 14px' }}>
        <div style={{ height: 10, width: '40%', background: bg, borderRadius: 4, marginBottom: 12 }} />
        <div style={{ height: 16, width: '80%', background: bg, borderRadius: 4, marginBottom: 8 }} />
        <div style={{ height: 12, width: '100%', background: bg, borderRadius: 4, marginBottom: 6 }} />
        <div style={{ height: 12, width: '60%', background: bg, borderRadius: 4, marginBottom: 20 }} />
        <div style={{ height: 1, background: bg, marginBottom: 12 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ height: 12, width: '30%', background: bg, borderRadius: 4 }} />
          <div style={{ height: 12, width: '25%', background: bg, borderRadius: 4 }} />
        </div>
      </div>
    </div>
  );
}

/* ───── Empty state ───── */
function EmptyState({ darkMode, radius, city, category }) {
  const cityName = city && city !== 'ALL' ? city.charAt(0) + city.slice(1).toLowerCase() : 'the Bay';
  const catName = category ? category.charAt(0) + category.slice(1).toLowerCase() : null;
  const headline = catName
    ? `No ${catName.toLowerCase()} in ${cityName}? We just ain't found it yet.`
    : `${cityName}'s quiet right now. That never lasts.`;
  const sub = 'Widen the filter or pull up tomorrow. The Bay always delivers.';

  return (
    <div style={{
      padding: '64px 32px', textAlign: 'center',
      ...glassStyle(darkMode, 'panel'),
      border: darkMode ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.04)',
      borderRadius: radius,
    }}>
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke={darkMode ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)'}
        strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ margin: '0 auto 16px', display: 'block' }}>
        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
      </svg>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700,
        color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.25)', marginBottom: 8,
      }}>{headline}</div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 13,
        color: darkMode ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.18)',
      }}>{sub}</div>
    </div>
  );
}

/* ───── Category Carousel Row (mobile sectioned browsing) ───── */
const CATEGORY_META = {
  'YOUR WAVE': { color: '#D57800', icon: '★' },
  'MUSIC': { color: '#FF4F00', icon: '♫' },
  'CARDS': { color: '#395542', icon: '♠' },
  'ART': { color: '#5A7A68', icon: '◆' },
  'FOOD': { color: '#D57800', icon: '●' },
  'NIGHTLIFE': { color: '#5B7A8D', icon: '☽' },
  'COMMUNITY': { color: '#7A99AC', icon: '◎' },
};

function CategoryCarouselRow({ title, events, darkMode, radius, taste, accentColor, rowRef, isLifted, onHandlePointerDown }) {
  const scrollRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  const onScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setProgress(max > 0 ? el.scrollLeft / max : 0);
  };

  React.useEffect(() => {
    const el = scrollRef.current;
    if (el) { el.addEventListener('scroll', onScroll, { passive: true }); onScroll(); }
    return () => el && el.removeEventListener('scroll', onScroll);
  }, [events]);

  if (!events.length) return null;

  const meta = CATEGORY_META[title] || { color: accentColor || '#FF4F00', icon: '·' };

  return (
    <div
      ref={rowRef}
      className="category-row"
      data-cat={title}
      style={{
        transition: isLifted ? 'none' : 'transform 0.3s cubic-bezier(0.2, 0, 0, 1)',
        zIndex: isLifted ? 50 : 1,
        position: 'relative',
      }}
    >
      <div className="category-row-header">
        <div className="category-row-title">
          {/* Drag handle */}
          <div
            onPointerDown={(e) => onHandlePointerDown && onHandlePointerDown(e, title)}
            style={{
              cursor: 'grab', padding: '6px 6px', marginRight: 6,
              color: darkMode ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              borderRadius: 8,
              background: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
              transition: 'color 0.2s, background 0.2s',
              touchAction: 'none',
              userSelect: 'none',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.color = darkMode ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)';
              e.currentTarget.style.background = darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.color = darkMode ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)';
              e.currentTarget.style.background = darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)';
            }}
            title="Drag to reorder"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <rect x="7" y="3" width="4" height="2.5" rx="1.25"/>
              <rect x="13" y="3" width="4" height="2.5" rx="1.25"/>
              <rect x="7" y="8" width="4" height="2.5" rx="1.25"/>
              <rect x="13" y="8" width="4" height="2.5" rx="1.25"/>
              <rect x="7" y="13" width="4" height="2.5" rx="1.25"/>
              <rect x="13" y="13" width="4" height="2.5" rx="1.25"/>
              <rect x="7" y="18" width="4" height="2.5" rx="1.25"/>
              <rect x="13" y="18" width="4" height="2.5" rx="1.25"/>
            </svg>
          </div>
          <div className="category-row-accent" style={{ background: meta.color }} />
          <span style={{
            fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700,
            color: darkMode ? '#fff' : '#1a1a1a',
            letterSpacing: '0.02em',
          }}>{title}</span>
          <span className="category-row-count" style={{
            color: darkMode ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.35)',
          }}>{events.length}</span>
        </div>
      </div>

      <div ref={scrollRef} className="events-carousel">
        {events.map((e, i) => (
          <div key={e.id} className="carousel-card">
            <EventCard event={e} darkMode={darkMode} index={i} radius={radius} taste={taste} />
          </div>
        ))}
      </div>

      {/* Scroll progress bar */}
      {events.length > 2 && (
        <div className="scroll-progress-track" style={{
          background: darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',
        }}>
          <div className="scroll-progress-fill" style={{
            width: `${Math.max(10, progress * 100)}%`,
            background: meta.color,
            opacity: 0.6,
          }} />
        </div>
      )}
    </div>
  );
}

window.SkeletonCard = SkeletonCard;
window.EmptyState = EmptyState;
window.CategoryCarouselRow = CategoryCarouselRow;
window.CATEGORY_META = CATEGORY_META;