// 视图 2: 片区对比表 + 行程 + 订房 tips
function ViewCompare({ regions, filters, sortMode, setSelectedId, votes, setVotes, currentFriend }) {
  const filtered = regions.filter(r => passesFilter(r, filters));
  const sorted = sortRegions(filtered, sortMode);
  const playable = sorted.filter(r => r.tier !== 'avoid');

  return (
    <div className="paper-bg view-compare-root" style={{ padding: 20, minHeight: 'calc(100vh - 62px)' }}>
      <div className="view-compare-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 20, alignItems: 'start' }}>

        {/* 左：对比表 */}
        <div>
          <div className="title-hand" style={{ fontSize: 26, marginBottom: 4 }}>片区对比</div>
          <div className="muted mono-hand" style={{ fontSize: 12, marginBottom: 12 }}>
            把所有候选摆在一起，哪个适合一眼看出来
          </div>

          <div className="paper-card" style={{ padding: 0, overflow: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: 'var(--paper-dark)', borderBottom: '2px solid var(--ink)' }}>
                  <th style={th}>片区</th>
                  <th style={th}>车程</th>
                  <th style={th}>拥挤</th>
                  <th style={th}>天数</th>
                  <th style={th}>标签</th>
                  <th style={th}>住宿参考</th>
                  <th style={th}>组均</th>
                </tr>
              </thead>
              <tbody>
                {playable.map((r, i) => {
                  const rVotes = votes[r.id] || {};
                  const avg = avgScore(rVotes);
                  return (
                    <tr key={r.id}
                        style={{
                          borderBottom: '1px dashed var(--ink-faint)',
                          background: i % 2 === 0 ? 'transparent' : 'rgba(0,0,0,0.02)',
                          cursor: 'pointer',
                        }}
                        onClick={() => setSelectedId(r.id)}
                    >
                      <td style={td}>
                        <div className="title-hand" style={{ fontSize: 16, lineHeight: 1 }}>{r.name}</div>
                        <div className="mono-hand muted" style={{ fontSize: 10 }}>{r.province}</div>
                        <div style={{ fontSize: 11, marginTop: 2 }} className="soft">{r.oneLiner}</div>
                      </td>
                      <td style={td}>
                        <div className="mono-hand">{r.drive}</div>
                        <div className="mono-hand muted" style={{ fontSize: 11 }}>{r.distance}</div>
                      </td>
                      <td style={td}>
                        <CrowdMeter level={r.crowd} />
                        <div className="muted" style={{ fontSize: 10 }}>{r.crowdLabel}</div>
                      </td>
                      <td style={td}>{r.days}</td>
                      <td style={td}>
                        {r.tags.slice(0, 3).map(t => <span key={t} className="tag-chip" style={{ fontSize: 10 }}>#{t}</span>)}
                      </td>
                      <td style={td} className="soft" >{r.stay}</td>
                      <td style={{ ...td, textAlign: 'center' }}>
                        {avg > 0 ? (
                          <div style={{ fontSize: 18, fontWeight: 700 }}>{avg.toFixed(1)}</div>
                        ) : <span className="muted">—</span>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* 避开热区 */}
          <div style={{ marginTop: 20 }}>
            <div className="title-hand" style={{ fontSize: 20, color: 'var(--red-pen)', marginBottom: 6 }}>
              ⚠ 五一容易踩雷的热区
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {regions.filter(r => r.tier === 'avoid').map(r => (
                <div key={r.id} className="sticky red" style={{
                  padding: '8px 12px', fontSize: 12, maxWidth: 200, opacity: 0.8,
                  cursor: 'pointer',
                }}
                onClick={() => setSelectedId(r.id)}>
                  <div style={{ fontWeight: 700 }}>{r.name}</div>
                  <div className="soft" style={{ fontSize: 11, marginTop: 2 }}>{r.oneLiner}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 右：行程 + tips */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'sticky', top: 80 }}>
          <TripTemplates />
          <TipsCard />
        </div>
      </div>
    </div>
  );
}

const th = {
  textAlign: 'left',
  padding: '10px 12px',
  fontFamily: "'Caveat', cursive",
  fontSize: 15,
  fontWeight: 700,
};
const td = {
  padding: '10px 12px',
  verticalAlign: 'top',
};

window.ViewCompare = ViewCompare;