/**
 * View Component: ContentGrid
 * Main content area — posts grouped by date, in card grid.
 *
 * Props:
 *   groups: [{ date, posts: [] }]
 *   onToggleFav: (id) => void
 *   onCardClick: (id) => void
 *   totalVisible: number
 */

function EmptyState({ message }) {
  return (
    <div className="empty-state">
      <svg className="empty-state-icon" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="8" y="8" width="48" height="48" rx="6"></rect>
        <path d="M8 28h48"></path>
        <circle cx="20" cy="18" r="3"></circle>
        <circle cx="32" cy="18" r="3"></circle>
        <path d="M16 40l6-6 4 4 8-8 10 10"></path>
      </svg>
      <div className="empty-state-title">没有找到相关内容</div>
      <div className="empty-state-text">{message || '试试调整筛选条件，或清除筛选查看全部内容。'}</div>
    </div>
  );
}

function ContentGrid({ groups, onToggleFav, onCardClick, totalVisible, allPosts, viewMode = 'grid', preferredVersion }) {
  if (totalVisible === 0) {
    return <EmptyState />;
  }

  return (
    <div className="content-grid">
      {groups.map(group => (
        <section key={group.date} className="date-group" data-screen-label={group.date}>
          <div className="date-group-header">
            <div className="date-bookmark">
              {ContentService.formatDate(group.date)}
              {ContentService.isToday(group.date, allPosts) && (
                <span style={{ marginLeft: 8, fontSize: 12, fontWeight: 400, opacity: 0.8 }}>今日</span>
              )}
            </div>
            <div className="date-meta">
              <span>{group.posts.length} 篇内容</span>
            </div>
          </div>

          <div className={`post-grid ${viewMode === 'list' ? 'list-mode' : ''}`}>
            {group.posts.map(post => (
              <PostCard
                key={post.id}
                post={post}
                onToggleFav={onToggleFav}
                onClick={onCardClick}
                preferredVersion={preferredVersion}
              />
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}

window.ContentGrid = ContentGrid;