/* Feed list — main board view */

window.PostRow = function PostRow({ post, source, onOpen, onToggleSave, onTagClick, onUpvote, voted, saved, expanded, onExpand, read }) {
  const Thumb = window.Thumbs[post.thumb];
  const langLabel = source.lang;
  const submittedAgo = window.timeAgo(post.submittedAt);
  const domain = window.urlDomain(post.url);

  return (
    <article className={`post ${expanded ? "expanded" : ""} ${read ? "read" : ""}`}>
      <div className={`upvote-col ${voted ? "voted" : ""}`} onClick={onUpvote} title="Upvote">
        <div className="arrow"></div>
        <div className="points">{post.points + (voted ? 1 : 0)}</div>
      </div>

      <div className="post-thumb" onClick={onOpen}>
        {Thumb || <span style={{ color: "var(--fg-4)", fontSize: 10 }}>NO IMG</span>}
        <span className="lang-pill">{langLabel}</span>
      </div>

      <div className="post-body">
        <h3 className="post-title">
          <a onClick={(e) => { e.preventDefault(); onOpen(); }}>{post.title}</a>
          <span className="domain">({domain})</span>
        </h3>
        {post.titleOrig && <div className="post-orig">{post.titleOrig}</div>}

        <div className="post-tags">
          {post.tags.map((t) => {
            const meta = window.TAGS_META[t] || {};
            return (
              <span key={t} className="tag clickable" onClick={(e) => { e.stopPropagation(); onTagClick(t); }}>
                <span className="swatch" style={{ background: meta.color || "#7c8290" }}></span>
                {t}
              </span>
            );
          })}
        </div>

        {expanded && (
          <p className="post-summary">{post.summary}</p>
        )}

        <div className="post-meta">
          <span><span className="source-flag">{window.regionFlag(source.region)}</span> <a>{source.name}</a></span>
          <span className="dot">·</span>
          <span>by <a>{post.submittedBy}</a></span>
          <span className="dot">·</span>
          <span>{submittedAgo}</span>
          <span className="dot">·</span>
          <a onClick={onOpen} style={{ cursor: "pointer" }}>{post.comments} comments</a>
          <span className="dot">·</span>
          <button className="summary-toggle" onClick={onExpand}>
            {expanded ? "− 요약 닫기" : "+ 한국어 요약"}
          </button>
          <span className="dot">·</span>
          <button className={`save-btn ${saved ? "saved" : ""}`} onClick={onToggleSave} title="Save">
            {saved ? "★ 저장됨" : "☆ 저장"}
          </button>
        </div>
      </div>
    </article>
  );
};

window.Feed = function Feed({ posts, sources, onOpen, voted, saved, expanded, onUpvote, onToggleSave, onExpand, onTagClick, readSet, activeTag, onClearTag, sort, onSort, region, onRegion, regionCounts, query, onQuery }) {
  const sortLabels = [
    { key: "hot", label: "Hot" },
    { key: "new", label: "New" },
    { key: "top", label: "Top" },
    { key: "week", label: "Week" },
    { key: "month", label: "Month" },
  ];
  const regionTabs = [
    { key: "all", label: "All", flag: "🌐" },
    { key: "KR",  label: "Korea", flag: "🇰🇷" },
    { key: "JP",  label: "Japan", flag: "🇯🇵" },
    { key: "CN",  label: "China", flag: "🇨🇳" },
    { key: "US",  label: "US/EN", flag: "🇺🇸" },
  ];

  return (
    <>
      <div className="region-bar">
        <div className="region-tabs">
          {regionTabs.map((r) => (
            <button key={r.key} className={region === r.key ? "active" : ""} onClick={() => onRegion(r.key)}>
              <span className="flag">{r.flag}</span>
              <span>{r.label}</span>
              <span className="count">{regionCounts[r.key]}</span>
            </button>
          ))}
        </div>
        <div className="spacer"></div>
        <div className="sort-group">
          {sortLabels.map((s) => (
            <button key={s.key} className={sort === s.key ? "active" : ""} onClick={() => onSort(s.key)}>{s.label}</button>
          ))}
        </div>
      </div>

      {activeTag && (
        <div className="chip-bar">
          <span className="label">FILTER</span>
          <span className="chip active">
            <span className="swatch" style={{ background: (window.TAGS_META[activeTag] || {}).color || "#7c8290" }}></span>
            {activeTag}
            <span className="x" onClick={onClearTag} style={{ cursor: "pointer" }}>×</span>
          </span>
        </div>
      )}

      <div className="feed-list">
        {posts.length === 0 && (
          <div style={{ padding: "60px 22px", textAlign: "center", color: "var(--fg-3)", fontFamily: "var(--mono)", fontSize: 12 }}>
            조건과 일치하는 글이 없습니다.
          </div>
        )}
        {posts.map((p) => (
          <window.PostRow
            key={p.id}
            post={p}
            source={sources[p.source]}
            onOpen={() => onOpen(p.id)}
            onToggleSave={() => onToggleSave(p.id)}
            onTagClick={onTagClick}
            onUpvote={() => onUpvote(p.id)}
            voted={voted.has(p.id)}
            saved={saved.has(p.id)}
            expanded={expanded.has(p.id)}
            onExpand={() => onExpand(p.id)}
            read={readSet.has(p.id)}
          />
        ))}
      </div>
    </>
  );
};