// RankingPage.jsx — leaderboard of top trash collectors

function RankingPage() {
  const [period, setPeriod] = React.useState('This week');
  const [mode, setMode] = React.useState('people');

  const users = [
    {rank: 1, name: 'Ana Petrovska', handle: '@ana_p', loc: 'Skopje', kg: 142, reports: 38, badge: '🏆'},
    {rank: 2, name: 'Marko Stojanov', handle: '@marko_s', loc: 'Ohrid', kg: 128, reports: 31, badge: '🥈'},
    {rank: 3, name: 'Elena Dimitrova', handle: '@elena_d', loc: 'Bitola', kg: 117, reports: 29, badge: '🥉'},
    {rank: 4, name: 'Stefan Ilievski', handle: '@stefan_i', loc: 'Skopje', kg: 96, reports: 24},
    {rank: 5, name: 'Maja Trajkovska', handle: '@maja_t', loc: 'Mavrovo', kg: 88, reports: 22},
    {rank: 6, name: 'Nikola Petrov', handle: '@nikola_p', loc: 'Tetovo', kg: 71, reports: 18},
    {rank: 7, name: 'Ivana Jovanovska', handle: '@ivana_j', loc: 'Skopje', kg: 64, reports: 17},
    {rank: 8, name: 'You', handle: '@username', loc: 'Skopje', kg: 52, reports: 14, isMe: true},
  ];

  const companies = [
    {rank: 1, name: 'EcoMak Solutions', type: 'Environmental NGO', loc: 'Skopje', kg: 1840, reports: 214, badge: '🏆'},
    {rank: 2, name: 'Vardar Clean Co.', type: 'Waste Management', loc: 'Skopje', kg: 1520, reports: 187, badge: '🥈'},
    {rank: 3, name: 'Green Ohrid Ltd.', type: 'Environmental NGO', loc: 'Ohrid', kg: 1290, reports: 163, badge: '🥉'},
    {rank: 4, name: 'Bitola Recycle', type: 'Recycling', loc: 'Bitola', kg: 980, reports: 121},
    {rank: 5, name: 'Tetovo EcoGroup', type: 'Environmental NGO', loc: 'Tetovo', kg: 870, reports: 108},
    {rank: 6, name: 'AquaSave MK', type: 'Water Protection', loc: 'Mavrovo', kg: 740, reports: 94},
    {rank: 7, name: 'CleanAir Skopje', type: 'Civic Initiative', loc: 'Skopje', kg: 610, reports: 77},
  ];

  const top3 = mode === 'people' ? users.slice(0, 3) : companies.slice(0, 3);
  const rest  = mode === 'people' ? users.slice(3)   : companies.slice(3);
  const list  = mode === 'people' ? users             : companies;

  const initials = (name) => name.split(' ').map(n => n[0]).join('').slice(0, 2);

  return (
    <>
      <div style={{padding: '4px 16px 0', flexShrink: 0}}>
        <div className="page-title" style={{textAlign: 'left', padding: '0 0 8px', paddingLeft: 2}}>Ranking</div>
      </div>

      {/* People / Companies toggle */}
      <div className="rank-mode-toggle" style={{flexShrink: 0, margin: '4px 0'}}>
        <button className={`rank-mode-btn ${mode === 'people' ? 'is-active' : ''}`} onClick={() => setMode('people')}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="2"/>
            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
          People
        </button>
        <button className={`rank-mode-btn ${mode === 'companies' ? 'is-active' : ''}`} onClick={() => setMode('companies')}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="7" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="2"/>
            <path d="M8 7V5a4 4 0 0 1 8 0v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            <line x1="12" y1="12" x2="12" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            <line x1="9" y1="14" x2="15" y2="14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
          Companies
        </button>
      </div>

      <div className="chip-row" style={{justifyContent: 'flex-center', flexShrink: 0, margin: '4px 0'}}>
        {['This week', 'This month', 'All time'].map(t => (
          <button key={t} className={`chip ${period === t ? 'is-active' : ''}`} onClick={() => setPeriod(t)}>{t}</button>
        ))}
      </div>

      <div className="podium">
        {top3.map((u, i) => {
          const order = [0, 1, 2][i];
          const heights = [110, 88, 70];
          const colors = ['#F4C53B', '#C7CCD1', '#D49A6A'];   
          return (
            <div key={u.rank} className="podium-slot" style={{order}}>
              <div className="podium-avatar" style={{borderColor: colors[u.rank-1]}}>
                <span style={{fontSize: mode === 'companies' ? 10 : 14}}>{initials(u.name)}</span>
                <div className="podium-badge">{u.badge}</div>
              </div>
              <div className="podium-name" style={{fontSize: mode === 'companies' ? 11 : 13}}>{u.name.split(' ')[0]}</div>
              <div className="podium-kg">{u.kg} kg</div>
              <div className="podium-bar" style={{height: heights[u.rank-1], background: colors[u.rank-1]}}>
                <span className="podium-rank">{u.rank}</span>
              </div>
            </div>
          );
        })}
      </div>

      <h2 className="section-title">Leaderboard</h2>
      <div className="rank-list">
        {rest.map(u => (
          <div key={u.rank} className={`rank-row ${u.isMe ? 'is-me' : ''}`}>
            <div className="rank-num">#{u.rank}</div>
            <div className="rank-avatar" style={{fontSize: mode === 'companies' ? 10 : 12}}>{initials(u.name)}</div>
            <div className="rank-body">
              <div className="rank-name">{u.name} {u.isMe && <span className="me-pill">you</span>}</div>
              <div className="rank-meta">
                {mode === 'people' ? `${u.handle} · ${u.loc}` : `${u.type} · ${u.loc}`}
              </div>
            </div>
            <div className="rank-stats">
              <div className="rank-kg">{u.kg} <span>kg</span></div>
              <div className="rank-reports">{u.reports} reports</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

window.RankingPage = RankingPage;