// ProfilePage.jsx — user profile with badges, history & stats

function ProfilePage() {
  const badges = [
    {id: 'first', label: 'First Report', emoji: '🌟', tone: '#FEF3C7', stroke: '#D9A21B'},
    {id: 'spotter', label: 'Spotter x10', emoji: '🟢', tone: '#DCFCE7', stroke: '#16A34A'},
    {id: 'verifier', label: 'Verifier', emoji: '✅', tone: '#DBEAFE', stroke: '#2563EB'},
    {id: 'warrior', label: 'Eco Warrior', emoji: '🏆', tone: '#FEE2E2', stroke: '#DC2626'},
  ];

  const history = [
    {id: 1, title: 'Plastic debris', place: 'Vardar trail', date: 'Apr 22, 2026', sev: 6, status: 'verified'},
    {id: 2, title: 'Industrial waste', place: 'Karposh Riverside', date: 'Apr 18, 2026', sev: 9, status: 'urgent'},
    {id: 3, title: 'Sewage runoff', place: 'Treska tributary', date: 'Apr 12, 2026', sev: 4, status: 'verified'},
    {id: 4, title: 'Oil spill', place: 'Ohrid inlet', date: 'Apr 03, 2026', sev: 7, status: 'resolved'},
  ];

  return (
    <>
      <div className="profile-head">
        <div className="avatar">AB</div>
        <div className="profile-id">
          <div className="profile-name">@username</div>
          <div className="profile-loc">Skopje · Water Guardian</div>
        </div>
        <button className="profile-settings" aria-label="Settings">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="3" stroke="#1f2937" strokeWidth="1.8"/>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="#1f2937" strokeWidth="1.4"/>
          </svg>
        </button>
      </div>

      <div className="stat-row">
        <div className="stat"><div className="stat-num">28</div><div className="stat-lbl">Reports</div></div>
        <div className="stat"><div className="stat-num">12</div><div className="stat-lbl">Cleanups</div></div>
        <div className="stat"><div className="stat-num">4</div><div className="stat-lbl">Badges</div></div>
        <div className="stat"><div className="stat-num">340</div><div className="stat-lbl">Points</div></div>
      </div>

      <h2 className="section-title">Badges Earned</h2>
      <div className="badge-grid">
        {badges.map(b => (
          <div key={b.id} className="badge" style={{background: b.tone, borderColor: b.stroke}}>
            <span className="badge-emoji">{b.emoji}</span>
            <span className="badge-lbl">{b.label}</span>
          </div>
        ))}
      </div>

      <h2 className="section-title">Reports History</h2>
      <div className="history-list">
        {history.map(h => (
          <div key={h.id} className="history-row">
            <div className={`sev-dot sev-${h.sev > 7 ? 'hi' : h.sev > 4 ? 'md' : 'lo'}`}>{h.sev}</div>
            <div className="history-body">
              <div className="history-title">{h.title}</div>
              <div className="history-meta">{h.place} · {h.date}</div>
            </div>
            <span className={`status-pill status-${h.status}`}>{h.status}</span>
          </div>
        ))}
      </div>
    </>
  );
}

window.ProfilePage = ProfilePage;