// Green Voice — Ranking screen

function GVRankingScreen({ nav }) {
  const [category, setCategory] = React.useState('overall');
  const [showWhy, setShowWhy] = React.useState(false);

  const categories = [
    { id: 'overall', label: '종합' },
    { id: 'green', label: '그린 상태' },
    { id: 'caddie', label: '캐디 서비스' },
    { id: 'halfway', label: '그늘집' },
    { id: 'pace', label: '진행' },
    { id: 'facility', label: '시설' },
    { id: 'price', label: '가성비' },
  ];

  // Sort courses by category
  const sorted = [...GV_COURSES].sort((a, b) => {
    if (category === 'overall') return b.score - a.score;
    return (b.metrics?.[category] || 0) - (a.metrics?.[category] || 0);
  });

  const top3 = sorted.slice(0, 3);
  const rest = sorted.slice(3);

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Header */}
      <div style={{ padding: '20px 20px 8px' }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.18em',
          color: GV.color.secondary,
        }}>UPDATED 12H AGO · 실시간 신뢰 지표</div>
        <h2 style={{
          fontFamily: GV.font.serif,
          fontSize: 26,
          fontWeight: 600,
          color: GV.color.forestDeep,
          margin: '4px 0 4px',
          letterSpacing: '-0.015em',
          lineHeight: 1.2,
        }}>오늘의 Green Voice 랭킹</h2>
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 13,
          color: GV.color.onSurfaceVariant,
          margin: 0,
        }}>방문 인증 리뷰 데이터를 기반으로 산출된 순위입니다</p>
      </div>

      {/* Category chips */}
      <div
        className="gv-hscroll"
        style={{
          display: 'flex',
          gap: 8,
          overflowX: 'auto',
          padding: '14px 20px 12px',
        }}
      >
        {categories.map(cat => (
          <Chip
            key={cat.id}
            active={category === cat.id}
            onClick={() => setCategory(cat.id)}
          >{cat.label}</Chip>
        ))}
      </div>

      {/* Top 3 — special */}
      <div style={{ padding: '4px 20px 0', display: 'grid', gap: 10 }}>
        {top3.map((c, idx) => {
          const rank = idx + 1;
          const score = category === 'overall' ? c.score : c.metrics[category];
          return (
            <Card key={c.id} onClick={() => nav.openCourse(c.id)}>
              <div style={{ display: 'flex', alignItems: 'stretch' }}>
                {/* Rank medallion */}
                <div style={{
                  width: 60,
                  background: rank === 1
                    ? `linear-gradient(180deg, ${GV.color.forestDeep} 0%, #2d5a41 100%)`
                    : GV.color.surfaceContainerLow,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: rank === 1 ? GV.color.prestigeGold : GV.color.forestDeep,
                  gap: 2,
                }}>
                  {rank === 1 && <Icon name="workspace_premium" size={20} color={GV.color.prestigeGold} />}
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: rank === 1 ? 28 : 30,
                    fontWeight: 700,
                    lineHeight: 1,
                  }}>{rank}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 8.5,
                    fontWeight: 700,
                    letterSpacing: '0.14em',
                    opacity: rank === 1 ? 0.8 : 0.6,
                  }}>{rank === 1 ? 'ELITE' : 'TIER'}</div>
                </div>
                {/* Image */}
                <div style={{
                  width: 88,
                  backgroundImage: `url(${c.image})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }} />
                {/* Info */}
                <div style={{ flex: 1, padding: '12px 14px', minWidth: 0 }}>
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-start',
                    gap: 6,
                  }}>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{
                        fontFamily: GV.font.serif,
                        fontSize: 15,
                        fontWeight: 600,
                        color: GV.color.forestDeep,
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}>{c.name}</div>
                      <div style={{
                        fontFamily: GV.font.sans,
                        fontSize: 11,
                        color: GV.color.outline,
                        marginTop: 1,
                      }}>{c.region}</div>
                    </div>
                    <div style={{
                      fontFamily: GV.font.serif,
                      fontSize: 22,
                      fontWeight: 700,
                      color: GV.color.forestDeep,
                      lineHeight: 1,
                      letterSpacing: '-0.02em',
                    }}>{score}</div>
                  </div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11.5,
                    color: GV.color.onSurfaceVariant,
                    marginTop: 6,
                    lineHeight: 1.35,
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                  }}>{c.summary}</div>
                  <div style={{
                    display: 'flex',
                    gap: 8,
                    marginTop: 6,
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    color: GV.color.outline,
                  }}>
                    <span>방문 인증 {c.reviewCount.toLocaleString()}</span>
                    <span style={{ color: '#008a5e' }}>· {rank === 1 ? '유지' : `${rank}↑`}</span>
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      {/* 4~N rankings */}
      <div style={{ marginTop: 18, padding: '0 20px' }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.14em',
          color: GV.color.outline,
          marginBottom: 8,
        }}>OTHER CONTENDERS</div>
        <Card>
          {rest.map((c, idx) => {
            const rank = idx + 4;
            const score = category === 'overall' ? c.score : c.metrics[category];
            const last = idx === rest.length - 1;
            return (
              <div
                key={c.id}
                onClick={() => nav.openCourse(c.id)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 12,
                  padding: '12px 14px',
                  borderBottom: last ? 'none' : `1px solid ${GV.color.borderSubtle}`,
                  cursor: 'pointer',
                }}
              >
                <div style={{
                  width: 30,
                  fontFamily: GV.font.serif,
                  fontSize: 18,
                  fontWeight: 600,
                  color: GV.color.outline,
                  textAlign: 'center',
                }}>{rank}</div>
                <div style={{
                  width: 44,
                  height: 44,
                  borderRadius: 8,
                  backgroundImage: `url(${c.image})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 14,
                    fontWeight: 600,
                    color: GV.color.forestDeep,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  }}>{c.name}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11,
                    color: GV.color.outline,
                    marginTop: 1,
                  }}>{c.region}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 16,
                    fontWeight: 700,
                    color: GV.color.forestDeep,
                  }}>{score}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    color: '#008a5e',
                    marginTop: 1,
                  }}>+0.{rank}</div>
                </div>
              </div>
            );
          })}
        </Card>
      </div>

      {/* Why this ranking? */}
      <div style={{ padding: '18px 20px 0' }}>
        <Card onClick={() => setShowWhy(!showWhy)} style={{ background: GV.color.surfaceContainerLow, border: `1px solid ${GV.color.primaryFixed}` }}>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="help_outline" size={20} color={GV.color.forestDeep} />
                <span style={{
                  fontFamily: GV.font.serif,
                  fontSize: 15,
                  fontWeight: 600,
                  color: GV.color.forestDeep,
                }}>왜 이 순위인가요?</span>
              </div>
              <Icon name={showWhy ? 'expand_less' : 'expand_more'} size={20} color={GV.color.forestDeep} />
            </div>
            {showWhy && (
              <div style={{ marginTop: 14, display: 'grid', gap: 12 }}>
                <p style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  color: GV.color.onSurfaceVariant,
                  margin: 0,
                  lineHeight: 1.5,
                }}>Green Voice 랭킹은 단순 별점이 아닌, 실제 방문한 회원의 <b style={{ color: GV.color.forestDeep }}>Visit-Verified 리뷰</b>만 반영합니다.</p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                  {[
                    { label: '정확성', v: '99.8%' },
                    { label: '최신성', v: '12시간' },
                    { label: '인증 비중', v: '100%' },
                  ].map(m => (
                    <div key={m.label} style={{
                      background: GV.color.white,
                      borderRadius: 8,
                      padding: '10px 8px',
                      textAlign: 'center',
                    }}>
                      <div style={{
                        fontFamily: GV.font.serif,
                        fontSize: 17,
                        fontWeight: 700,
                        color: GV.color.forestDeep,
                      }}>{m.v}</div>
                      <div style={{
                        fontFamily: GV.font.sans,
                        fontSize: 10,
                        color: GV.color.outline,
                        marginTop: 2,
                      }}>{m.label}</div>
                    </div>
                  ))}
                </div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 11.5,
                  color: GV.color.outline,
                  lineHeight: 1.5,
                }}>가중치: 방문 인증 리뷰 리뷰어 신뢰도, 6개 품질 축 점수, 신고/어뷰징 제외 기준을 반영해 산출됩니다.</div>
              </div>
            )}
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { GVRankingScreen });