// 视图 3: 投票看板 - 让朋友一起打分决定
function ViewVoteBoard({ regions, friends, votes, setVotes, currentFriend, setCurrentFriend, setSelectedId }) {
  const playable = regions.filter(r => r.tier !== 'avoid');

  // 按组均排序
  const ranked = [...playable].sort((a, b) => {
    const avgA = avgScore(votes[a.id] || {});
    const avgB = avgScore(votes[b.id] || {});
    if (avgB !== avgA) return avgB - avgA;
    return (a.rankWorth || 99) - (b.rankWorth || 99);
  });

  const maxAvg = Math.max(...ranked.map(r => avgScore(votes[r.id] || {})), 5);

  return (
    <div className="paper-bg view-vote-root" style={{ padding: 20, minHeight: 'calc(100vh - 62px)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="title-hand" style={{ fontSize: 28, marginBottom: 4 }}>投票看板</div>
        <div className="muted mono-hand" style={{ fontSize: 12, marginBottom: 16 }}>
          每个朋友切换身份后打星；排名根据团队平均实时更新
        </div>

        <div className="paper-card" style={{ marginBottom: 20 }}>
          <FriendBar
            friends={friends}
            setFriends={() => {}}  // 管理通过其他入口
            currentFriend={currentFriend}
            setCurrentFriend={setCurrentFriend}
          />
        </div>

        <div style={{ display: 'grid', gap: 10 }}>
          {ranked.map((r, i) => {
            const rVotes = votes[r.id] || {};
            const avg = avgScore(rVotes);
            const myScore = rVotes[currentFriend] || 0;
            const pct = (avg / 5) * 100;

            return (
              <div key={r.id} className="paper-card" style={{ padding: 12 }}>
                <div className="view-vote-card-grid" style={{ display: 'grid', gridTemplateColumns: '40px 1fr 180px 180px', gap: 12, alignItems: 'center' }}>
                  <div className="title-hand view-vote-rank" style={{ fontSize: 30, textAlign: 'center', color: i < 3 ? 'var(--orange-pen)' : 'var(--ink-faint)' }}>
                    #{i + 1}
                  </div>

                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="title-hand" style={{ fontSize: 20, cursor: 'pointer' }}
                           onClick={() => setSelectedId(r.id)}>
                        {r.name}
                      </div>
                      <TierBadge tier={r.tier} label={r.tierLabel} />
                    </div>
                    <div className="mono-hand muted" style={{ fontSize: 11, marginTop: 2 }}>
                      {r.drive} · {r.distance} · {r.days}
                    </div>

                    {/* 条形图 */}
                    <div style={{ marginTop: 8, height: 10, background: 'var(--paper-dark)', border: '1px solid var(--ink)', borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
                      <div style={{
                        width: pct + '%', height: '100%',
                        background: 'repeating-linear-gradient(45deg, var(--green-pen) 0 6px, #3a9971 6px 12px)',
                        transition: 'width 0.3s',
                      }}/>
                    </div>

                    {/* 每个朋友的打分 */}
                    <div style={{ marginTop: 6, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                      {friends.map(f => {
                        const s = rVotes[f] || 0;
                        return (
                          <span key={f} style={{ fontSize: 11 }}>
                            <span className={f === currentFriend ? '' : 'muted'}>{f}</span>
                            <span style={{ marginLeft: 3, color: s > 0 ? 'var(--orange-pen)' : 'var(--ink-faint)' }}>
                              {s > 0 ? '★'.repeat(s) : '—'}
                            </span>
                          </span>
                        );
                      })}
                    </div>
                  </div>

                  <div className="view-vote-stars" style={{ textAlign: 'center' }}>
                    <div className="muted mono-hand" style={{ fontSize: 10 }}>你 · {currentFriend}</div>
                    <StarRow value={myScore} size={22} onChange={(v) => {
                      setVotes({
                        ...votes,
                        [r.id]: { ...(votes[r.id] || {}), [currentFriend]: v }
                      });
                    }} />
                  </div>

                  <div className="view-vote-avg" style={{ textAlign: 'center' }}>
                    <div className="muted mono-hand" style={{ fontSize: 10 }}>团队平均</div>
                    <div className="big" style={{ fontSize: 32, fontWeight: 700, lineHeight: 1 }}>
                      {avg > 0 ? avg.toFixed(1) : '—'}
                    </div>
                    <div className="muted" style={{ fontSize: 10 }}>{Object.values(rVotes).filter(n => n > 0).length} 人投</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.ViewVoteBoard = ViewVoteBoard;