// itrymo — data states: loading skeletons, empty, error.
// Shared by web grid and mobile list. Loaded after proto-shared.jsx.

// ── Card skeleton ────────────────────────────────────────────
function CardSkeleton({ variant = 'grid' }) {
  const isGrid = variant === 'grid';
  const bar = (w, h = 12) => (
    <div style={{ width: w, height: h, borderRadius: 6, background: '#EFEAE0' }} />
  );
  return (
    <div className="itrymo-shimmer" style={{
      background: T.panel, borderRadius: 16, border: `1px solid ${T.borderSoft}`,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ height: isGrid ? 140 : 120, background: '#EFEAE0' }} />
      <div style={{ padding: '14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {bar('70%', 15)}
        {bar('45%')}
        <div style={{ display: 'flex', gap: 6, marginTop: 2 }}>
          {bar(52, 18)}{bar(64, 18)}{bar(40, 18)}
        </div>
      </div>
    </div>
  );
}

function SkeletonGrid({ surface, count = 6 }) {
  const variant = surface === 'mobile' ? 'wide' : 'grid';
  if (surface === 'mobile') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '0 20px 28px' }}>
        {Array.from({ length: count }).map((_, i) => <CardSkeleton key={i} variant="wide" />)}
      </div>
    );
  }
  return (
    <div style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))' }}>
      {Array.from({ length: count }).map((_, i) => <CardSkeleton key={i} variant="grid" />)}
    </div>
  );
}

// ── Empty state ──────────────────────────────────────────────
function EmptyState({ surface, hasFilters, onClear }) {
  const pad = surface === 'mobile' ? '48px 24px' : '72px 24px';
  return (
    <div style={{
      padding: pad, textAlign: 'center',
      background: '#fff', borderRadius: 16, border: `1px dashed ${T.border}`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 28, background: T.bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name="search" size={22} color={T.muted} />
      </div>
      <div style={{ fontSize: 17, fontWeight: 700, color: T.ink }}>No places match</div>
      <div style={{ fontSize: 13, color: T.muted, maxWidth: 320, lineHeight: 1.5 }}>
        {hasFilters
          ? 'Your filters are a little too tight. Try removing a tag or widening your search.'
          : 'Nothing here yet for this category — check back soon.'}
      </div>
      {hasFilters && (
        <button onClick={onClear} style={{
          all: 'unset', cursor: 'pointer', marginTop: 4,
          height: 42, padding: '0 20px', borderRadius: 12,
          background: T.selBg, color: T.selFg, fontSize: 13, fontWeight: 600,
        }}>Clear filters</button>
      )}
    </div>
  );
}

// ── Error state ──────────────────────────────────────────────
function ErrorState({ surface, onRetry }) {
  const pad = surface === 'mobile' ? '48px 24px' : '72px 24px';
  return (
    <div style={{
      padding: pad, textAlign: 'center',
      background: '#fff', borderRadius: 16, border: `1px solid ${T.border}`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 28, background: '#FBEAE6',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#C0492F', fontSize: 26, fontWeight: 700,
      }}>!</div>
      <div style={{ fontSize: 17, fontWeight: 700, color: T.ink }}>Couldn't load places</div>
      <div style={{ fontSize: 13, color: T.muted, maxWidth: 320, lineHeight: 1.5 }}>
        Something went wrong on our end. Check your connection and try again.
      </div>
      <button onClick={onRetry} style={{
        all: 'unset', cursor: 'pointer', marginTop: 4,
        height: 42, padding: '0 20px', borderRadius: 12,
        background: T.selBg, color: T.selFg, fontSize: 13, fontWeight: 600,
      }}>Retry</button>
    </div>
  );
}

Object.assign(window, { CardSkeleton, SkeletonGrid, EmptyState, ErrorState });