// 视图 1: 笔记本跨页地图 (大地图 + 右栏便签)
function ViewNotebook({ regions, filters, sortMode, selectedId, setSelectedId,
  showAvoid, showRoutes, votes, setVotes, currentFriend, sortHighlightIds }) {

  const filtered = regions.filter(r => passesFilter(r, filters));
  const sorted = sortRegions(filtered, sortMode);
  const playable = sorted.filter(r => r.tier !== 'avoid');
  const selected = regions.find(r => r.id === selectedId);

  return (
    <div className="paper-bg view-notebook-root" style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1fr) 380px',
      gap: 16, padding: 16,
      height: 'calc(100vh - 62px)',
      overflow: 'hidden',
    }}>
      {/* 地图区 */}
      <div className="view-notebook-map" style={{ position: 'relative', minWidth: 0 }}>
        <RealMap
          regions={filtered}
          selectedId={selectedId}
          onSelect={setSelectedId}
          showAvoid={showAvoid}
          showRoutes={showRoutes}
          sortMode={sortMode}
          votes={votes}
          sortHighlightIds={sortHighlightIds}
        />

        {/* 地图图例 */}
        <div className="map-legend" style={{
          position: 'absolute', left: 16, bottom: 16,
          background: 'rgba(245,240,225,0.95)',
          border: '1.5px solid var(--ink)', borderRadius: 4,
          padding: '10px 12px', fontSize: 12,
          boxShadow: '2px 3px 0 var(--ink)',
          zIndex: 500,
        }}>
          <div className="title-hand" style={{ fontSize: 15, marginBottom: 4 }}>图例</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, margin: '3px 0' }}>
            <div style={{ width: 16, height: 14, background: '#d8ecd4', border: '1.5px solid #2e7d5b', borderRadius: 2 }}/>
            <span>最值得优先</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, margin: '3px 0' }}>
            <div style={{ width: 16, height: 14, background: '#f5e5c8', border: '1.5px solid #c08835', borderRadius: 2 }}/>
            <span>可以去，挑路线</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, margin: '3px 0' }}>
            <div style={{ width: 16, height: 14, background: '#f5c9c2', border: '1.5px solid #a83a3a', borderRadius: 2, opacity: 0.7 }}/>
            <span className="soft">五一踩雷热区</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, margin: '3px 0' }}>
            <div style={{ width: 20, borderTop: '2px dashed #4a4a45' }}/>
            <span>示意路线</span>
          </div>
        </div>
      </div>

      {/* 右栏便签列表 */}
      <div className="view-notebook-side" style={{ overflowY: 'auto', paddingRight: 4 }}>
        {selected ? (
          <RegionDetail
            region={selected}
            currentFriend={currentFriend}
            votes={votes}
            setVotes={setVotes}
            onClose={() => setSelectedId(null)}
          />
        ) : (
          <>
            <div className="title-hand" style={{ fontSize: 22, marginBottom: 8 }}>
              片区清单 <span className="muted" style={{ fontSize: 13 }}>({playable.length})</span>
            </div>
            <div className="muted mono-hand" style={{ fontSize: 11, marginBottom: 10 }}>
              点击卡片 → 在地图上聚焦
            </div>
            {sorted.map((r, idx) => {
              const rVotes = votes[r.id] || {};
              const avg = avgScore(rVotes);
              const isAvoid = r.tier === 'avoid';
              return (
                <div
                  key={r.id}
                  className={'sticky ' + (isAvoid ? 'red' : r.tier === 'top' ? 'green' : 'tan')}
                  style={{
                    marginBottom: 10,
                    cursor: 'pointer',
                    transform: `rotate(${(idx % 3 - 1) * 0.3}deg)`,
                    opacity: isAvoid ? 0.75 : 1,
                  }}
                  onClick={() => setSelectedId(r.id)}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 8 }}>
                    <div>
                      <div className="title-hand" style={{ fontSize: 18, lineHeight: 1.1 }}>
                        {isAvoid && '⚠ '}{r.name}
                      </div>
                      <div className="mono-hand soft" style={{ fontSize: 11 }}>
                        {r.distance} · {r.drive} · {r.province}
                      </div>
                    </div>
                    {!isAvoid && avg > 0 && (
                      <div style={{ textAlign: 'right' }}>
                        <div className="mono-hand muted" style={{ fontSize: 10 }}>组均</div>
                        <div style={{ fontSize: 16, fontWeight: 700 }}>{avg.toFixed(1)}</div>
                      </div>
                    )}
                  </div>
                  {!isAvoid && (
                    <>
                      <div style={{ fontSize: 12, marginTop: 4 }}>{r.oneLiner}</div>
                      <div style={{ marginTop: 4, display: 'flex', gap: 6, alignItems: 'center', fontSize: 11 }}>
                        <CrowdMeter level={r.crowd} />
                        <span className="soft">{r.crowdLabel}</span>
                        <span className="muted">·</span>
                        <span className="soft">{r.days}</span>
                      </div>
                    </>
                  )}
                  {isAvoid && (
                    <div style={{ fontSize: 12, marginTop: 4 }} className="soft">{r.oneLiner}</div>
                  )}
                </div>
              );
            })}
          </>
        )}
      </div>
    </div>
  );
}

window.ViewNotebook = ViewNotebook;