/* global React, Ico, STR, Button, Chip, SectionHead, Label, XPBar, AttributeRing,
   PlayerCard, BottomNav, TopBar, SessionRow, Achievement, StreakCard,
   Avatar, Card, RealReportDetailScreen */
// NEXT XI · UI Kit · screens.jsx
// Composed screens used by the app prototype.

const { useState: useStateS, useEffect: useEffectS } = React;
const sxLang = (lang) => lang === 'ru' ? 'ru' : lang === 'en' ? 'en' : 'tr';
const sxTxt = (lang, tr, en, ru) => {
  const key = sxLang(lang);
  return key === 'ru' ? (ru ?? tr ?? en ?? '') : key === 'en' ? (en ?? tr ?? ru ?? '') : (tr ?? en ?? ru ?? '');
};

// ───── LEVEL SYSTEM ─────
const LEVEL_TIERS = [
  { min:     0, level:  1, name:{ tr:'Çaylak',            en:'Rookie',         ru:'Новичок'          } },
  { min:   200, level:  2, name:{ tr:'Başlangıç',         en:'Beginner',       ru:'Начинающий'       } },
  { min:   500, level:  3, name:{ tr:'Sporcu',             en:'Athlete',        ru:'Спортсмен'        } },
  { min:   900, level:  4, name:{ tr:'Yedek',             en:'Reserve',        ru:'Запасной'         } },
  { min:  1400, level:  5, name:{ tr:'Akademi Sporcusu',  en:'Academy Athlete', ru:'Игрок академии'  } },
  { min:  2000, level:  6, name:{ tr:'Kadro Sporcusu',    en:'Squad Athlete',   ru:'Игрок состава'   } },
  { min:  2800, level:  7, name:{ tr:'İlk 11',            en:'Starter',        ru:'Основной состав'  } },
  { min:  3800, level:  8, name:{ tr:'Kilit Sporcu',      en:'Key Athlete',    ru:'Ключевой игрок'   } },
  { min:  5000, level:  9, name:{ tr:'Yıldız',            en:'Star',           ru:'Звезда'           } },
  { min:  6500, level: 10, name:{ tr:'Elit',              en:'Elite',          ru:'Элита'            } },
  { min: 15000, level: 15, name:{ tr:'Profesyonel',       en:'Pro',            ru:'Профессионал'     } },
  { min: 30000, level: 20, name:{ tr:'Kaptan',            en:'Captain',        ru:'Капитан'          } },
];

const getLevelInfo = (xp = 0) => {
  let tier = LEVEL_TIERS[0];
  for (const t of LEVEL_TIERS) {
    if (xp >= t.min) tier = t; else break;
  }
  const idx      = LEVEL_TIERS.indexOf(tier);
  const next     = LEVEL_TIERS[idx + 1] || null;
  const xpToNext = next ? next.min - xp : 0;
  const progress = next ? (xp - tier.min) / (next.min - tier.min) : 1;
  return { ...tier, xp, xpToNext, progress };
};

// ───── HOME SCREEN ─────
const HomeScreen = ({ lang, onStart, onTab }) => {
  const t = STR[lang];
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 18, paddingBottom: 8 }}>

      {/* Hero — today's mission */}
      <div style={{ padding: '0 20px' }}>
        <Label>{t.welcome}, EFE</Label>
        <h1 style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 36, lineHeight: 1.0,
          textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
          {t.todayMission}<span style={{ color:'#00FF88' }}>.</span>
        </h1>
        <p style={{ fontFamily:'Manrope', fontSize: 14, lineHeight: 1.45, color:'#B8B8B8', margin: '8px 0 0' }}>
          {lang==='tr'
            ? 'Bugün bitiriciliğe odaklan. Antrenmana 18:30’da başlayacaksın — şimdi ısınmaya başla.'
            : 'Focus on finishing today. Session starts at 18:30 — warm up now.'}
        </p>
      </div>

      {/* Big CTA */}
      <div style={{ padding:'0 20px' }}>
        <Button kind="primary" size="lg" full onClick={onStart} icon="arrow">
          {t.startSession}
        </Button>
      </div>

      {/* XP / Level block */}
      <div style={{ padding:'0 20px' }}>
        <XPBar level={14} current={960} total={1500} gain={120}/>
      </div>

      {/* Streak + Quick stats row */}
      <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 10 }}>
        <StreakCard days={6} target={7}/>
        <div style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
          borderRadius: 16, padding: 16, display:'flex', flexDirection:'column', gap: 6 }}>
          <Label>OVR</Label>
          <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 56, color:'#fff', lineHeight: 0.9 }}>82</span>
          <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
            <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:'#00FF88' }}>▲ 3</span>
            <Label color="#7A7A7A">{lang==='tr' ? 'son 4 hafta' : 'last 4 weeks'}</Label>
          </div>
        </div>
      </div>

      {/* Sessions */}
      <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
        <SectionHead title={t.upcoming} action={t.viewAll} onAction={() => onTab('training')}/>
        <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
          <SessionRow status="live" time="18:30 · Pitch 2" coach={lang==='tr'?'Koç Ahmet':'Coach Ahmet'}
            title={lang==='tr'?'Bitiricilik · Set 4':'Finishing · Set 4'} xp={120}/>
          <SessionRow time="14 May · 18:30" coach={lang==='tr'?'Koç Selin':'Coach Selin'}
            title={lang==='tr'?'Pas üçgenleri':'Passing triangles'} xp={90}/>
        </div>
      </div>

      {/* Recent reward */}
      <div style={{ padding:'0 20px' }}>
        <div style={{ borderRadius: 16, padding: 16,
          background:'radial-gradient(120% 80% at 100% 0%, rgba(0,255,136,0.35), transparent 55%), #141414',
          border:'1px solid rgba(0,255,136,0.4)',
          boxShadow: '0 0 0 1px rgba(0,255,136,0.12)',
          display:'flex', flexDirection:'column', gap: 8 }}>
          <Label>{lang==='tr'?'Yeni başarım':'New achievement'}</Label>
          <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, textTransform:'uppercase',
            letterSpacing:'0.04em', color:'#fff' }}>{t.hatTrick} {lang==='tr'?'kilidi açıldı':'unlocked'}</div>
          <div style={{ display:'flex', gap: 16, alignItems:'baseline' }}>
            <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 44, color:'#00FF88', textShadow:'0 0 24px rgba(0,255,136,0.5)' }}>+250</span>
            <span style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 12, color:'#B8B8B8', letterSpacing:'0.14em', textTransform:'uppercase' }}>XP</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// ───── TRAINING SCREEN ─────
const TrainingScreen = ({ lang, onSession, profile }) => {
  const [filter,   setFilter]   = useStateS('all');
  const [sessions, setSessions] = useStateS([]);
  const [loading,  setLoading]  = useStateS(true);
  const [error,    setError]    = useStateS(null);
  const [selectedSession, setSelectedSession] = useStateS(null);
  const isMock = !profile;
  const langKey = sxLang(lang);
  const t = STR[langKey] || STR.tr;
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const trainingLabel = isRu ? (isSwimming ? 'Занятие' : 'Тренировка') : isTr ? (th.trainingLabel || t.training) : t.training;
  const coachLabel = isRu ? (isSwimming ? 'Инструктор' : 'Тренер') : isTr ? (th.coachLabel || t.coach) : t.coach;
  const teamLabel = isRu ? (isSwimming ? 'Группа' : 'Команда') : isTr ? (th.teamLabel || t.team) : t.team;
  const matchLabel = isRu ? 'Матч' : isTr ? t.match : 'Match';

  useEffectS(() => {
    if (isMock || !window.NX || !profile?.academyId) { setLoading(false); return; }
    if (!profile.teamId) { setSessions([]); setLoading(false); setError(null); return; }
    setLoading(true);
    setError(null);
    const sessionSource = profile.teamId && window.NX.onSessionsByTeam
      ? window.NX.onSessionsByTeam(profile.academyId, profile.teamId, entries => {
          const sorted = [...entries].sort((a, b) => {
            const da = (a.date || '') + (a.time || '');
            const db = (b.date || '') + (b.time || '');
            return da > db ? 1 : da < db ? -1 : 0;
          });
          setSessions(sorted);
          setLoading(false);
        }, (err) => {
          console.error('[NX] player training sessions listener failed:', err?.code, err?.message, {
            uid: profile.uid,
            academyId: profile.academyId,
            teamId: profile.teamId,
          });
          setError(sxTxt(lang, 'Seanslar yüklenemedi. Bağlantını kontrol edip tekrar dene.', 'Could not load sessions. Check your connection and try again.', 'Не удалось загрузить занятия. Проверьте подключение и попробуйте снова.'));
          setLoading(false);
        })
      : window.NX.onSessionsByAcademy(profile.academyId, entries => {
      const today = new Date().toISOString().slice(0, 10);
      // Legacy fallback only: real sessions should now use teamId/teamName.
      const relevant = profile.teamId
        ? entries.filter(s => s.teamId === profile.teamId)
        : profile.ageGroup
          ? entries.filter(s => !s.ageGroup || s.ageGroup === profile.ageGroup)
        : entries;
      const sorted = [...relevant].sort((a, b) => {
        const da = (a.date || '') + (a.time || '');
        const db = (b.date || '') + (b.time || '');
        return da > db ? 1 : da < db ? -1 : 0;
      });
      setSessions(sorted);
      setLoading(false);
    }, (err) => {
      console.error('[NX] player training academy sessions fallback failed:', err?.code, err?.message, {
        uid: profile.uid,
        academyId: profile.academyId,
        teamId: profile.teamId,
        ageGroup: profile.ageGroup,
      });
      setError(sxTxt(lang, 'Seanslar yüklenemedi. Bağlantını kontrol edip tekrar dene.', 'Could not load sessions. Check your connection and try again.', 'Не удалось загрузить занятия. Проверьте подключение и попробуйте снова.'));
      setLoading(false);
    });
    return () => sessionSource();
  }, [isMock, profile?.academyId, profile?.teamId, profile?.ageGroup, lang]);

  const today = new Date().toISOString().slice(0, 10);
  const upcoming  = sessions.filter(s => (s.date || '') >= today && (!filter || filter === 'all' || s.type === filter));
  const past      = sessions.filter(s => (s.date || '') <  today && (!filter || filter === 'all' || s.type === filter));

  const FilterChips = (
    <div style={{ display:'flex', gap: 6, padding:'0 20px', overflowX:'auto', scrollbarWidth:'none' }}>
      <Chip on={filter==='all'} onClick={() => setFilter('all')}>{sxTxt(lang, 'Tümü', 'All', 'Все')}</Chip>
      <Chip on={filter==='training'} onClick={() => setFilter('training')}>{trainingLabel}</Chip>
      {!isSwimming && <Chip on={filter==='match'} onClick={() => setFilter('match')}>{matchLabel}</Chip>}
    </div>
  );

  const SessionCard = ({ s, onOpen }) => {
    const isPast = (s.date || '') < today;
    return (
      <button onClick={onOpen} style={{ width:'100%', textAlign:'left', cursor:'pointer',
        background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
        borderRadius:14, padding:14, display:'flex', gap:14, alignItems:'flex-start' }}>
        <div style={{ width:36, height:36, borderRadius:10, flexShrink:0,
          background: s.type==='match' && !isSwimming ? 'rgba(255,184,0,0.10)' : isPast ? 'rgba(255,255,255,0.04)' : 'var(--nx-accent-soft)',
          border:`1px solid ${s.type==='match' && !isSwimming ? 'rgba(255,184,0,0.25)' : isPast ? 'rgba(255,255,255,0.06)' : 'var(--nx-accent-glow)'}`,
          display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Ico name={s.type==='match' && !isSwimming?'trophy':'lightning'} size={16}
            style={{ color: s.type==='match' && !isSwimming ? '#FFB800' : isPast ? '#5A5A5A' : 'var(--nx-accent)' }}/>
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13,
            color: isPast ? '#7A7A7A' : '#fff',
            overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.title}</div>
          <div style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#5A5A5A', marginTop:2 }}>
            {s.date}{s.time ? ` · ${s.time}` : ''}{s.location ? ` · ${s.location}` : ''}
          </div>
          {s.coachName && (
            <div style={{ fontFamily:'Manrope', fontSize:10, color:'#4A4A4A', marginTop:2 }}>
              {coachLabel} {s.coachName}
            </div>
          )}
        </div>
      </button>
    );
  };

  const RealSessionDetail = ({ session, onBack }) => {
    const typeLabel = session.type === 'match' && !isSwimming
      ? matchLabel
      : trainingLabel;
    const info = [
      [sxTxt(lang, 'Tür', 'Type', 'Тип'), typeLabel],
      [sxTxt(lang, 'Tarih', 'Date', 'Дата'), session.date || '–'],
      [sxTxt(lang, 'Saat', 'Time', 'Время'), session.time || '–'],
      [sxTxt(lang, 'Konum', 'Location', 'Место'), session.location || '–'],
      [coachLabel, session.coachName || '–'],
      [isRu ? `${teamLabel} / группа` : isTr ? `${teamLabel} / grup` : `${isSwimming ? 'Group' : 'Team'} / group`, session.teamName || session.team || session.ageGroup || '–'],
    ];
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:20 }}>
        <div style={{ padding:'0 20px', display:'flex', alignItems:'center', gap:12 }}>
          <button onClick={onBack} style={{
            width:32, height:32, borderRadius:999, cursor:'pointer',
            background:'#1C1C1C', border:'1px solid rgba(255,255,255,0.06)',
            color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <Ico name="chev" size={16} style={{ transform:'scaleX(-1)' }}/>
          </button>
          <div style={{ flex:1, minWidth:0 }}>
            <Label color={session.type === 'match' && !isSwimming ? '#FFB800' : 'var(--nx-accent)'}>{typeLabel}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:24, lineHeight:1.05,
              textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop:3 }}>
              {session.title || sxTxt(lang, 'Seans', 'Session', 'Занятие')}
            </div>
          </div>
        </div>

        <div style={{ padding:'0 20px' }}>
          <Card style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            {info.map(([label, value]) => (
              <div key={label}>
                <Label>{label}</Label>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13,
                  color: label === 'XP' ? 'var(--nx-accent)' : '#fff', marginTop:4,
                  overflowWrap:'anywhere' }}>{value}</div>
              </div>
            ))}
          </Card>
        </div>

        <div style={{ padding:'0 20px' }}>
          <Card>
            <Label>{sxTxt(lang, 'Notlar', 'Notes', 'Заметки')}</Label>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8',
              lineHeight:1.55, marginTop:8 }}>
              {session.notes || sxTxt(lang, 'Bu seans için koç notu eklenmemiş.', 'No coach notes have been added for this session.', 'Для этого занятия пока нет заметок тренера.')}
            </div>
          </Card>
        </div>

        <div style={{ padding:'0 20px' }}>
          <Card style={{ background:'rgba(79,141,255,0.05)', border:'1px solid rgba(79,141,255,0.18)' }}>
            <div style={{ fontFamily:'Manrope', fontSize:12, color:'#7A7A7A', lineHeight:1.5 }}>
              {isRu
                ? `XP начисляется после еженедельного отчёта или подтверждения от ${coachLabel.toLowerCase()}а.`
                : isTr
                ? `XP, ${coachLabel.toLowerCase()} haftalık raporu/onayı sonrası eklenir.`
                : 'XP is awarded after coach weekly report/confirmation.'}
            </div>
          </Card>
        </div>
      </div>
    );
  };

  if (!isMock && selectedSession) {
    return <RealSessionDetail session={selectedSession} onBack={() => setSelectedSession(null)}/>;
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 16, paddingBottom: 16 }}>
      <div style={{ padding:'0 20px' }}>
        <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 24, textTransform:'uppercase',
          letterSpacing:'0.02em', color:'#fff', margin: 0 }}>{trainingLabel}</h1>
        {isMock && <Label>{sxTxt(lang, 'Bu hafta · 4 seans', 'This week · 4 sessions', 'На этой неделе · 4 занятия')}</Label>}
      </div>

      {isMock ? (
        <>
          {/* Weekly bars — demo only */}
          <div style={{ padding:'0 20px' }}>
            <div style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
              borderRadius: 16, padding: 14 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
                <Label>{t.weeklyForm}</Label>
                <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, color:'var(--nx-accent)', textShadow:'0 0 12px var(--nx-accent-glow)' }}>▲ +12%</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap: 6, alignItems:'flex-end',
                height: 100, paddingBottom: 6, borderBottom:'1px solid var(--nx-accent-glow)' }}>
                {[18,55,22,70,28,95,60].map((h, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'flex-end', justifyContent:'center', height:'100%' }}>
                    <div style={{ width: 22, height: `${h}%`,
                      borderRadius:'5px 5px 2px 2px',
                      background: i===5
                        ? (isSwimming ? 'linear-gradient(180deg,var(--nx-accent),var(--nx-accent-lo))' : 'linear-gradient(180deg,#FFB800,#B07700)')
                        : h > 40
                        ? 'linear-gradient(180deg,var(--nx-accent),var(--nx-accent-lo))'
                        : 'linear-gradient(180deg,#2a2a2a,#1a1a1a)',
                      boxShadow: i===5 ? (isSwimming ? '0 0 12px var(--nx-accent-glow)' : '0 0 12px rgba(255,184,0,0.4)') : h > 40 ? '0 0 10px var(--nx-accent-glow)' : 'none'
                    }}/>
                  </div>
                ))}
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', marginTop: 6, textAlign:'center' }}>
                {(isRu?['Пн','Вт','Ср','Чт','Пт','Сб','Вс']:isTr?['Pzt','Sal','Çar','Per','Cum','Cmt','Paz']:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']).map((d,i) => (
                  <span key={d} style={{ fontFamily:'Manrope', fontSize: 9, letterSpacing:'0.12em',
                    textTransform:'uppercase', color: i===5 ? (isSwimming ? 'var(--nx-accent)' : '#FFB800') : '#7A7A7A' }}>{d}</span>
                ))}
              </div>
            </div>
          </div>

          {FilterChips}

          <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
            <Label style={{ paddingLeft: 4, marginBottom: 6 }}>{t.upcoming}</Label>
            <div onClick={onSession} style={{ cursor:'pointer' }}>
              <SessionRow status="live" time={`18:30 · ${th.mockLocation || (isSwimming ? 'Havuz 2' : 'Pitch 2')}`} coach={isRu?`${coachLabel} Ahmet`:isTr?`${coachLabel} Ahmet`:(isSwimming?'Instructor Ahmet':'Coach Ahmet')}
                title={isRu?(isSwimming?'Вольный стиль · Сет 4':'Завершение · Сет 4'):isTr?(th.mockSessionTitle || 'Bitiricilik · Set 4'):(isSwimming?'Freestyle · Set 4':'Finishing · Set 4')} xp={120}/>
            </div>
            <SessionRow time="14 May · 18:30" coach={isRu?`${coachLabel} Selin`:isTr?`${coachLabel} Selin`:(isSwimming?'Instructor Selin':'Coach Selin')}
              title={isRu?(isSwimming?'Контроль дыхания':'Передачи в треугольниках'):isTr?(isSwimming?'Nefes kontrolü':'Pas üçgenleri'):(isSwimming?'Breath control':'Passing triangles')} xp={90}/>
            <SessionRow time="16 May · 10:00" coach={isRu?`${coachLabel} Ahmet`:isTr?`${coachLabel} Ahmet`:(isSwimming?'Instructor Ahmet':'Coach Ahmet')}
              title={isRu?(isSwimming?'Сет на выносливость':'Матч U16'):isTr?(isSwimming?'Dayanıklılık seti':'U16 maçı · Galatasaray'):(isSwimming?'Endurance set':'U16 match · Galatasaray')} xp={200}/>

            <Label style={{ paddingLeft: 4, marginTop: 16, marginBottom: 6 }}>{t.completed}</Label>
            <SessionRow status="done" time="11 May · 18:30" coach={isRu?`${coachLabel} Ahmet`:isTr?`${coachLabel} Ahmet`:(isSwimming?'Instructor Ahmet':'Coach Ahmet')}
              title={isRu?(isSwimming?'Спринт · 6×200м':'Спринт · 6×200м'):'Sprint · 6×200m'} xp={140}/>
            <SessionRow status="done" time="9 May · 17:00" coach={isRu?`${coachLabel} Selin`:isTr?`${coachLabel} Selin`:(isSwimming?'Instructor Selin':'Coach Selin')}
              title={isRu?(isSwimming?'Техника kick':'Упражнение на ведение мяча'):isTr?(isSwimming?'Kick tekniği':'Top sürme drili'):(isSwimming?'Kick technique':'Dribbling drill')} xp={110}/>
          </div>
        </>
      ) : loading ? (
        <div style={{ display:'flex', justifyContent:'center', padding:'48px 0' }}>
          <div style={{ display:'flex', gap:8 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width:7, height:7, borderRadius:999, background:'var(--nx-accent)',
                animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
            ))}
          </div>
        </div>
      ) : error ? (
        <div style={{ padding:'0 20px' }}>
          <Card style={{ textAlign:'center', padding:'28px 20px',
            background:'rgba(255,80,80,0.05)', border:'1px solid rgba(255,80,80,0.18)' }}>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>{error}</div>
          </Card>
        </div>
      ) : !profile.teamId ? (
        <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
          justifyContent:'center', gap:16, padding:'64px 32px', textAlign:'center' }}>
          <div style={{ width:56, height:56, borderRadius:16,
            background:'rgba(79,141,255,0.08)', border:'1px solid rgba(79,141,255,0.25)',
            display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Ico name="clock" size={28} style={{ color:'#4F8DFF' }}/>
          </div>
          <div>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:22,
              textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginBottom:8 }}>
              {isRu ? `${teamLabel} ещё не назначена` : isTr ? `Henüz ${teamLabel.toLowerCase()} atanmadı` : `No ${isSwimming ? 'group' : 'team'} assigned yet`}
            </div>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.6, maxWidth:270 }}>
              {isRu
                ? `${isSwimming ? 'Библиотека техник' : 'Библиотека тренировок'} скоро будет доступна. Очки прогресса сейчас рассчитываются по еженедельным отчётам ${coachLabel.toLowerCase()}а.`
                : isTr
                ? `${th.drillLibLabel || 'Antrenman Kütüphanesi'} yakında aktif olacak. Gelişim puanları şu anda haftalık ${coachLabel.toLowerCase()} raporlarına göre hesaplanır.`
                : 'Practice Library is coming soon. Progress points are currently calculated from weekly coach reports.'}
            </div>
          </div>
        </div>
      ) : sessions.length === 0 ? (
        /* No sessions created by coach yet */
        <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
          justifyContent:'center', gap:16, padding:'64px 32px', textAlign:'center' }}>
          <div style={{ width:56, height:56, borderRadius:16,
            background:'rgba(79,141,255,0.08)', border:'1px solid rgba(79,141,255,0.25)',
            display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Ico name="clock" size={28} style={{ color:'#4F8DFF' }}/>
          </div>
          <div>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:22,
              textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginBottom:8 }}>
              {sxTxt(lang, 'Program yakında', 'Schedule coming soon', 'Расписание скоро появится')}
            </div>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.6, maxWidth:260 }}>
              {isRu
                ? `Расписание появится здесь, когда ${coachLabel.toLowerCase()} его составит. Очки прогресса рассчитываются по еженедельным отчётам.`
                : isTr
                ? `${coachLabel} ${trainingLabel.toLowerCase()} programını oluşturduktan sonra burada görünecek. Gelişim puanları haftalık ${coachLabel.toLowerCase()} raporlarına göre hesaplanır.`
                : 'Your training schedule will appear here once your coach sets it up. Progress points are calculated from weekly coach reports.'}
            </div>
          </div>
        </div>
      ) : (
        /* Real sessions from Firestore */
        <>
          {FilterChips}
          <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
            {upcoming.length > 0 && (
              <Label style={{ paddingLeft: 4, marginBottom: 6 }}>{t.upcoming}</Label>
            )}
            {upcoming.map(s => <SessionCard key={s.id} s={s} onOpen={() => setSelectedSession(s)}/>)}
            {past.length > 0 && (
              <Label style={{ paddingLeft: 4, marginTop: upcoming.length ? 16 : 0, marginBottom: 6 }}>
                {sxTxt(lang, 'Geçmiş', 'Past', 'Прошедшие')}
              </Label>
            )}
            {past.map(s => <SessionCard key={s.id} s={s} onOpen={() => setSelectedSession(s)}/>)}
          </div>
        </>
      )}
    </div>
  );
};

// ───── ACHIEVEMENTS SCREEN ─────
// ───── LEADERBOARD SCREEN ─────
const LeaderboardScreen = ({ lang, profile, onBack }) => {
  const langKey = sxLang(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const isMock = !profile;
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme(profile?.sportType || 'football') : {});
  const isSwimming = th.sportType === 'swimming';
  const coachLabel = isRu ? (isSwimming ? 'Инструктор' : 'Тренер') : isTr ? (th.coachLabel || 'Koç') : (isSwimming ? 'Instructor' : 'Coach');

  const [players,  setPlayers]  = useStateS([]);
  const [loading,  setLoading]  = useStateS(!isMock && !!profile?.academyId);
  const [error,    setError]    = useStateS(null);
  const [boardType, setBoardType] = useStateS('xp'); // 'xp' | 'attendance'

  useEffectS(() => {
    if (isMock || !window.NX || !profile?.academyId) return;
    if (!profile.teamId) {
      setPlayers([]);
      setError(null);
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    const unsub = window.NX.onPlayersByAcademy(profile.academyId, ps => {
      setPlayers(ps);
      setLoading(false);
    }, (err) => {
      console.error('[NX] player leaderboard listener failed:', err?.code, err?.message, {
        uid: profile.uid,
        academyId: profile.academyId,
        teamId: profile.teamId,
      });
      setError(sxTxt(lang, 'Sıralama yüklenemedi.', 'Could not load rankings.', 'Не удалось загрузить рейтинг.'));
      setLoading(false);
    });
    return () => unsub();
  }, [isMock, profile?.uid, profile?.academyId, profile?.teamId, langKey]);

  const MOCK_PLAYERS = isSwimming ? [
    { uid:'m1', displayName:'Deniz Kaya',    xp:4280 },
    { uid:'m2', displayName:'Efe Yıldız',    xp:3420 },
    { uid:'m3', displayName:'Elif Demir',    xp:3105 },
    { uid:'m4', displayName:'Zeynep Arslan', xp:1820 },
    { uid:'m5', displayName:'Lina Öz',       xp:900  },
    { uid:'m6', displayName:'Burak Aslan',   xp:420  },
  ] : [
    { uid:'m1', displayName:'Mert Kara',   xp:4280 },
    { uid:'m2', displayName:'Efe Yıldız',  xp:3420 },
    { uid:'m3', displayName:'Burak Aslan', xp:2100 },
    { uid:'m4', displayName:'Ali Şahin',   xp:1820 },
    { uid:'m5', displayName:'Can Demir',   xp:900  },
    { uid:'m6', displayName:'Deniz Öz',    xp:420  },
  ];

  const ranked = (isMock ? MOCK_PLAYERS : players.filter(p => p.teamId === profile?.teamId))
    .map(p => ({ ...p, xp: p.xp || 0, lvl: getLevelInfo(p.xp || 0) }))
    .sort((a, b) => b.xp - a.xp);

  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%', background:'#0B0B0B', overflowY:'auto' }}>
      {/* Header */}
      <div style={{ padding:'68px 20px 12px', display:'flex', alignItems:'center', gap:12 }}>
        <button onClick={onBack} style={{ width:32, height:32, borderRadius:999, background:'#1C1C1C',
          border:'1px solid rgba(255,255,255,0.06)', color:'#fff', cursor:'pointer',
          display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          <Ico name="chev" size={16}/>
        </button>
        <div>
          <Label>{isRu ? `${isSwimming ? 'Группа' : 'Команда'} · XP рейтинг` : isTr ? `${isSwimming ? 'Grup' : 'Takım'} · XP sıralaması` : `${isSwimming ? 'Group' : 'Team'} · XP ranking`}</Label>
          <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize:28, lineHeight:1.0,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
            {sxTxt(lang, 'Liderlik tablosu', 'Leaderboard', 'Рейтинг')}<span style={{ color:isSwimming ? 'var(--nx-accent)' : '#FFB800' }}>.</span>
          </h1>
        </div>
      </div>

      {/* Privacy notice */}
      <div style={{ padding:'0 20px 12px' }}>
        <div style={{ padding:'8px 12px', borderRadius:8, background:'rgba(79,141,255,0.06)',
          border:'1px solid rgba(79,141,255,0.15)', fontFamily:'Manrope', fontSize:11, color:'#7A7A7A', lineHeight:1.4 }}>
          {isTr
            ? `Sıralama yalnızca XP ve seviye gösterir. ${coachLabel} notları ve değerlendirmeler burada yer almaz.`
            : isRu
            ? `Рейтинг показывает только XP и уровень. Заметки и оценки от ${coachLabel.toLowerCase()}а здесь не отображаются.`
            : `Rankings show XP and level only. ${coachLabel} notes and evaluations are not shown here.`}
        </div>
      </div>

      <div style={{ padding:'0 16px 16px', display:'flex', flexDirection:'column', gap:6 }}>
        {loading ? (
          <div style={{ display:'flex', justifyContent:'center', padding:'48px 0' }}>
            <div style={{ display:'flex', gap:8 }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ width:7, height:7, borderRadius:999, background:'#FFB800',
                  animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
              ))}
            </div>
          </div>
        ) : !isMock && !profile.teamId ? (
          <div style={{ textAlign:'center', padding:'48px 20px', fontFamily:'Manrope', fontSize:14, color:'#5A5A5A', lineHeight:1.5 }}>
            {sxTxt(lang, 'Henüz bir takıma atanmadınız.', 'You are not assigned to a team yet.', isSwimming ? 'Вы ещё не назначены в группу.' : 'Вы ещё не назначены в команду.')}
          </div>
        ) : error ? (
          <div style={{ textAlign:'center', padding:'48px 20px', fontFamily:'Manrope', fontSize:14, color:'#FF6B6B', lineHeight:1.5 }}>
            {error}
          </div>
        ) : ranked.length === 0 ? (
          <div style={{ textAlign:'center', padding:'48px 0', fontFamily:'Manrope', fontSize:14, color:'#5A5A5A' }}>
            {isRu ? `Пока нет ${isSwimming ? 'пловцов' : 'спортсменов'}.` : isTr ? `Henüz ${isSwimming ? 'yüzücü' : 'oyuncu'} yok.` : `No ${isSwimming ? 'swimmers' : 'players'} yet.`}
          </div>
        ) : ranked.map((p, i) => {
          const isMe    = !isMock && p.uid === profile.uid;
          const medal   = i === 0 ? '#FFB800' : i === 1 ? '#B8B8B8' : i === 2 ? '#CD7F32' : null;
          const lvlName = p.lvl.name[langKey] || p.lvl.name.tr || p.lvl.name.en;
          const initials = (p.displayName || '').split(' ').map(s=>s[0]).join('').slice(0,2).toUpperCase() || '??';
          return (
            <div key={p.uid || i} style={{
              background: isMe ? 'rgba(0,255,136,0.06)' : '#141414',
              border: `1px solid ${isMe ? 'rgba(0,255,136,0.30)' : 'rgba(255,255,255,0.06)'}`,
              borderRadius:12, padding:'12px 14px',
              display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:28, textAlign:'center', flexShrink:0 }}>
                {medal
                  ? <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize:20, color:medal }}>{i+1}</span>
                  : <span style={{ fontFamily:'JetBrains Mono', fontSize:12, color:'#5A5A5A' }}>{i+1}</span>}
              </div>
              <Avatar initials={initials} size={36} avatarId={p.avatarId}/>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13,
                  color: isMe ? '#00FF88' : '#fff',
                  overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                  {p.displayName || '–'}{isMe ? ` (${isTr?'Sen':'You'})` : ''}
                </div>
                <div style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A', marginTop:2 }}>
                  {isTr?'Lv.':'Lv.'} {p.lvl.level} · {lvlName}
                </div>
              </div>
              <div style={{ textAlign:'right', flexShrink:0 }}>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:18,
                  color: medal || (isMe ? '#00FF88' : '#fff') }}>
                  {(p.xp || 0).toLocaleString()}
                </div>
                <div style={{ fontFamily:'JetBrains Mono', fontSize:9, color:'#5A5A5A', letterSpacing:'0.08em' }}>XP</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const AchievementsScreen = ({ lang, profile }) => {
  const isMock = !profile;
  const langKey = sxLang(lang);
  const t = STR[langKey] || STR.tr;
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme(profile?.sportType || 'football') : {});
  const isSwimming = th.sportType === 'swimming';
  const coachLabel = isRu ? (isSwimming ? 'Инструктор' : 'Тренер') : isTr ? (th.coachLabel || 'Koç') : (isSwimming ? 'Instructor' : 'Coach');
  const [weeklyReports, setWeeklyReports] = useStateS([]);
  const [feedbackEntries, setFeedbackEntries] = useStateS([]);
  const [loading, setLoading] = useStateS(!isMock);
  const [error, setError] = useStateS(null);

  useEffectS(() => {
    if (isMock || !window.NX || !profile?.uid) return;
    let pending = 0;
    const done = () => { pending -= 1; if (pending <= 0) setLoading(false); };
    const unsubs = [];
    if (window.NX.onWeeklyReportsByPlayer) {
      pending += 1;
      unsubs.push(window.NX.onWeeklyReportsByPlayer(profile.uid, entries => {
        setWeeklyReports(entries);
        done();
      }, (err) => {
        console.error('[NX] achievements weekly listener failed:', err?.code, err?.message, {
          uid: profile.uid,
          academyId: profile.academyId,
        });
        setError(sxTxt(lang, 'Başarımlar için haftalık raporlar yüklenemedi.', 'Could not load weekly reports for achievements.', 'Не удалось загрузить еженедельные отчёты для достижений.'));
        done();
      }));
    }
    if (window.NX.onFeedbackByPlayer) {
      pending += 1;
      unsubs.push(window.NX.onFeedbackByPlayer(profile.uid, entries => {
        setFeedbackEntries(entries);
        done();
      }, (err) => {
        console.error('[NX] achievements feedback listener failed:', err?.code, err?.message, {
          uid: profile.uid,
          academyId: profile.academyId,
        });
        done();
      }));
    }
    if (pending === 0) setLoading(false);
    return () => unsubs.forEach(unsub => unsub && unsub());
  }, [isMock, profile?.uid, isTr]);

  const realAchievements = [
    {
      key:'first_weekly',
      name: sxTxt(lang, 'İlk haftalık rapor', 'First Weekly Report', 'Первый еженедельный отчёт'),
      desc: isRu ? `Первый еженедельный отчёт от ${coachLabel.toLowerCase()}а сохранён.` : isTr ? `İlk ${coachLabel.toLowerCase()} haftalık gelişim raporun kaydedildi.` : 'Your first coach weekly progress report was recorded.',
      unlocked: weeklyReports.length >= 1,
      progress: Math.min(weeklyReports.length, 1),
      total: 1,
    },
    {
      key:'five_weekly',
      name: sxTxt(lang, '5 haftalık rapor', '5 Weekly Reports', '5 еженедельных отчётов'),
      desc: sxTxt(lang, '5 haftalık gelişim takibi tamamlandı.', 'Complete 5 weeks of progress tracking.', 'Завершите 5 недель отслеживания прогресса.'),
      unlocked: weeklyReports.length >= 5,
      progress: Math.min(weeklyReports.length, 5),
      total: 5,
    },
    {
      key:'xp_1000',
      name: '1000 XP',
      desc: sxTxt(lang, 'Toplam 1000 XP’ye ulaş.', 'Reach 1000 total XP.', 'Наберите 1000 XP.'),
      unlocked: (profile?.xp || 0) >= 1000,
      progress: Math.min(profile?.xp || 0, 1000),
      total: 1000,
    },
    {
      key:'perfect_attendance',
      name: sxTxt(lang, 'Tam katılım haftası', 'Perfect Attendance Week', 'Неделя полной посещаемости'),
      desc: sxTxt(lang, 'Bir haftayı tam katılımla bitir.', 'Finish a week with perfect attendance.', 'Завершите неделю с полной посещаемостью.'),
      unlocked: weeklyReports.some(r => (r.attendanceTotal || 0) > 0 && r.attendanceAttended === r.attendanceTotal),
      progress: weeklyReports.some(r => (r.attendanceTotal || 0) > 0 && r.attendanceAttended === r.attendanceTotal) ? 1 : 0,
      total: 1,
    },
    {
      key:'high_effort',
      name: sxTxt(lang, 'Yüksek çaba haftası', 'High Effort Week', 'Неделя высокой отдачи'),
      desc: sxTxt(lang, 'Bir haftada çaba puanın 5 olsun.', 'Earn a 5 effort rating in one week.', 'Получите оценку старания 5 за неделю.'),
      unlocked: weeklyReports.some(r => (r.effortRating || 0) >= 5),
      progress: weeklyReports.some(r => (r.effortRating || 0) >= 5) ? 1 : 0,
      total: 1,
    },
    {
      key:'first_feedback',
      name: isRu ? `Первый отзыв ${coachLabel.toLowerCase()}а` : isTr ? 'İlk koç notu' : 'First Feedback Received',
      desc: isRu ? `Получите первый отзыв от ${coachLabel.toLowerCase()}а.` : isTr ? `İlk ${coachLabel.toLowerCase()} geri bildirimin geldi.` : `Receive your first ${coachLabel.toLowerCase()} feedback.`,
      unlocked: feedbackEntries.length >= 1,
      progress: Math.min(feedbackEntries.length, 1),
      total: 1,
    },
  ];
  const unlockedReal = realAchievements.filter(a => a.unlocked);
  const lockedReal = realAchievements.filter(a => !a.unlocked);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 12, paddingBottom: 16 }}>
      <div style={{ padding:'0 20px' }}>
        <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 24, textTransform:'uppercase',
          letterSpacing:'0.02em', color:'#fff', margin: 0 }}>{t.achievements}</h1>
        {isMock && <Label>14 / 32 · 44%</Label>}
      </div>

      {isMock ? (
        <>
          {/* Progress ring + summary — demo only */}
          <div style={{ padding:'0 20px' }}>
            <div style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
              borderRadius: 16, padding: 16, display:'flex', gap: 16, alignItems:'center' }}>
              <div style={{ position:'relative', width: 96, height: 96, flexShrink: 0 }}>
                <svg width="96" height="96" style={{ transform:'rotate(-90deg)' }}>
                  <circle cx="48" cy="48" r="40" stroke="#242424" strokeWidth="8" fill="none"/>
                  <circle cx="48" cy="48" r="40" stroke="var(--nx-accent)" strokeWidth="8" fill="none"
                    strokeLinecap="round"
                    strokeDasharray="251.3" strokeDashoffset={251.3 - (14/32)*251.3}
                    style={{ filter:'drop-shadow(0 0 6px var(--nx-accent-glow))' }}/>
                </svg>
                <span style={{ position:'absolute', inset:0, display:'flex', alignItems:'center',
                  justifyContent:'center', flexDirection:'column' }}>
                  <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 28, color:'#fff', lineHeight: 1 }}>14</span>
                  <span style={{ fontFamily:'JetBrains Mono', fontSize: 9, color:'#7A7A7A' }}>/ 32</span>
                </span>
              </div>
              <div style={{ flex:1 }}>
                <Label>{sxTxt(lang, 'Toplam XP', 'Total XP', 'Всего XP')}</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 36, color:'#fff', lineHeight: 1, margin:'4px 0' }}>3,420</div>
                <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:isSwimming ? '#B8B8B8' : '#FFB800' }}>{sxTxt(lang, 'Gold tier yolunda', 'On track for Gold tier', 'На пути к золотому уровню')}</span>
              </div>
            </div>
          </div>

          <SectionHead title={sxTxt(lang, 'Açılan başarımlar', 'Unlocked', 'Открытые достижения')}/>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
            <Achievement status="unlocked" name={isSwimming ? sxTxt(lang, 'İlk 500m', 'First 500m', 'Первые 500 м') : t.hatTrick}
              desc={isRu?(isSwimming ? 'Завершите первый длинный сет.' : 'Забейте 3 гола в одном матче.'):isTr?(isSwimming ? 'İlk uzun mesafe setini tamamla.' : 'Tek maçta 3 gol at.'):(isSwimming ? 'Complete your first long-distance set.' : 'Score 3 goals in one match.')} xp={250}/>
            <Achievement status="unlocked" name={sxTxt(lang, '7 günlük seri', '7-day streak', 'Серия 7 дней')}
              desc={sxTxt(lang, '7 gün üst üste çalış.', 'Train 7 days in a row.', 'Тренируйтесь 7 дней подряд.')} xp={180}/>
          </div>

          <SectionHead title={t.inProgress}/>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
            <Achievement name={isSwimming ? sxTxt(lang, 'Seans Serisi', 'Session Streak', 'Серия занятий') : t.winStreak}
              desc={isRu?(isSwimming ? 'Завершите 5 занятий подряд.' : 'Выиграйте 5 матчей подряд.'):isTr?(isSwimming ? 'Üst üste 5 seansı tamamla.' : 'Üst üste 5 maç kazan.'):(isSwimming ? 'Complete 5 sessions in a row.' : 'Win 5 matches in a row.')}
              progress={3} total={5} xp={180}/>
            <Achievement name={isRu?(isSwimming?'Технический прогресс':'10 ассистов'):isTr?(isSwimming?'Teknik Gelişim':'10 asist'):(isSwimming?'Technical Growth':'10 assists')}
              desc={isRu?(isSwimming?'Завершите 10 технических упражнений.':'Сделайте 10 ассистов за сезон.'):isTr?(isSwimming?'10 teknik çalışmayı tamamla.':'Sezonda 10 asist yap.'):(isSwimming?'Complete 10 technique sessions.':'10 assists this season.')}
              progress={6} total={10} xp={150}/>
          </div>

          <SectionHead title={t.locked}/>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
            <Achievement status="locked" name={t.captain}
              desc={isRu?(isSwimming?'Проведите 10 занятий как лидер.':'Выйдите капитаном в 10 матчах.'):isTr?(isSwimming?'10 seansa liderlik et.':'10 maça kaptan olarak çık.'):(isSwimming?'Lead 10 sessions.':'Lead 10 matches as captain.')}
              progress={0} total={10}/>
            <Achievement status="locked" name={sxTxt(lang, 'Rakip yok', 'No equal', 'Нет равных')}
              desc={isRu?`Достигните ${isSwimming ? 'ПРОГРЕССА' : 'OVR'} 90+.`:isTr?`${isSwimming ? 'GELİŞİM' : 'OVR'} 90+ ulaş.`:(isSwimming?'Reach GROWTH 90+.':'Reach OVR 90+.')} progress={0} total={1}/>
          </div>
        </>
      ) : loading ? (
        <div style={{ display:'flex', justifyContent:'center', padding:'64px 0' }}>
          <div style={{ display:'flex', gap:8 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width:7, height:7, borderRadius:999, background:isSwimming ? 'var(--nx-accent)' : '#FFB800',
                animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
            ))}
          </div>
        </div>
      ) : error ? (
        <div style={{ padding:'0 20px' }}>
          <Card style={{ background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)', textAlign:'center' }}>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>{error}</div>
          </Card>
        </div>
      ) : (
        <>
          <div style={{ padding:'0 20px' }}>
            <Card style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 }}>
              <div>
                <Label>{sxTxt(lang, 'Otomatik başarımlar', 'Automatic achievements', 'Автоматические достижения')}</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:34, color:'#fff', lineHeight:1, marginTop:4 }}>
                  {unlockedReal.length} / {realAchievements.length}
                </div>
              </div>
              <div style={{ fontFamily:'JetBrains Mono', fontSize:12, color:'#00FF88' }}>
                {(profile?.xp || 0).toLocaleString()} XP
              </div>
            </Card>
          </div>
          {unlockedReal.length === 0 && weeklyReports.length === 0 && feedbackEntries.length === 0 && (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ textAlign:'center', padding:'28px 20px' }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.55 }}>
                  {isTr
                    ? 'Başarımlar antrenman ve haftalık raporlarla otomatik açılır.'
                    : isRu ? 'Достижения открываются автоматически через тренировки и еженедельные отчёты.'
                    : 'Achievements unlock automatically through training and weekly reports.'}
                </div>
              </Card>
            </div>
          )}
          {unlockedReal.length > 0 && (
            <>
              <SectionHead title={sxTxt(lang, 'Açılan başarımlar', 'Unlocked', 'Открытые достижения')}/>
              <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'repeat(2, minmax(0, 1fr))', gap:10, alignItems:'stretch' }}>
                {unlockedReal.map(a => (
                  <Achievement key={a.key} status="unlocked" name={a.name} desc={a.desc}/>
                ))}
              </div>
            </>
          )}
          {lockedReal.length > 0 && (
            <>
              <SectionHead title={sxTxt(lang, 'Sıradaki', 'Next', 'Далее')}/>
              <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'repeat(2, minmax(0, 1fr))', gap:10, alignItems:'stretch' }}>
                {lockedReal.map(a => (
                  <Achievement key={a.key} name={a.name} desc={a.desc} progress={a.progress} total={a.total}/>
                ))}
              </div>
            </>
          )}
        </>
      )}
    </div>
  );
};

// ───── PROFILE SCREEN ─────
const ProfileScreen = ({ lang, profile, onProfileUpdate }) => {
  const langKey = sxLang(lang);
  const t = STR[langKey] || STR.tr || {};
  const isMock = !profile;
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const trainingLabel = isRu ? (isSwimming ? 'Занятие' : 'Тренировка') : isTr ? (th.trainingLabel || t.training) : t.training;
  const coachDisplayLabel = isRu ? (isSwimming ? 'Инструктор' : 'Тренер') : isTr ? (th.coachLabel || 'Koç') : (isSwimming ? 'Instructor' : 'Coach');
  const ratingLabels = {
    technique: isRu ? 'Техника' : isTr ? 'Teknik' : 'Tech',
    intensity: isRu ? 'Интенс.' : isTr ? 'Yoğunluk' : 'Int.',
    attitude: isRu ? 'Отнош.' : isTr ? 'Tutum' : 'Att.',
  };
  const normalizeAvatarId = (id) => id === 'lightning' ? 'jersey' : (id || null);
  const [avatarId, setAvatarId] = useStateS(isMock ? (isSwimming ? 'swimmer' : 'football') : normalizeAvatarId(profile?.avatarId));
  const [avatarSaving, setAvatarSaving] = useStateS(false);
  const [avatarMessage, setAvatarMessage] = useStateS(null);

  useEffectS(() => {
    setAvatarId(isMock ? (isSwimming ? 'swimmer' : 'football') : normalizeAvatarId(profile?.avatarId));
  }, [isMock, profile?.avatarId]);

  // Real feedback subscription
  const [feedbackEntries, setFeedbackEntries] = useStateS([]);
  const [feedbackLoading, setFeedbackLoading] = useStateS(!isMock);

  useEffectS(() => {
    if (isMock || !window.NX) return;
    const unsub = window.NX.onFeedbackByPlayer(profile.uid, entries => {
      const sorted = [...entries].sort((a, b) => {
        const ta = a.sessionDate || '';
        const tb = b.sessionDate || '';
        return tb > ta ? 1 : tb < ta ? -1 : 0;
      });
      setFeedbackEntries(sorted);
      setFeedbackLoading(false);
    });
    return () => unsub();
  }, [isMock, profile?.uid]);

  // Real weekly progress reports subscription
  const [playerReports,        setPlayerReports]        = useStateS([]);
  const [playerReportsLoading, setPlayerReportsLoading] = useStateS(!isMock);
  const [openRealReport,       setOpenRealReport]       = useStateS(null);

  useEffectS(() => {
    if (isMock || !window.NX) return;
    const reportListener = window.NX.onWeeklyReportsByPlayer || window.NX.onReportsByPlayer;
    const unsub = reportListener(profile.uid, entries => {
      const sorted = [...entries].sort((a, b) => {
        const wa = a.weekStart || '';
        const wb = b.weekStart || '';
        if (wa || wb) return wb.localeCompare(wa);
        return (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0);
      });
      setPlayerReports(sorted);
      setPlayerReportsLoading(false);
    });
    return () => unsub();
  }, [isMock, profile?.uid]);

  // Real attendance subscription
  const [playerAttendance,    setPlayerAttendance]    = useStateS([]);
  const [playerAttLoading,    setPlayerAttLoading]    = useStateS(!isMock);

  useEffectS(() => {
    if (isMock || !window.NX) return;
    const unsub = window.NX.onAttendanceByPlayer(profile.uid, entries => {
      const sorted = [...entries].sort((a, b) => (b.date || '').localeCompare(a.date || ''));
      setPlayerAttendance(sorted);
      setPlayerAttLoading(false);
    });
    return () => unsub();
  }, [isMock, profile?.uid]);

  const nameParts   = !isMock ? (profile.displayName || '').trim().split(/\s+/).filter(Boolean) : [];
  const displayName = !isMock ? (profile.displayName || '').toUpperCase() : (isSwimming ? 'YELİZ KAYA' : 'EFE YILDIZ');
  const initials    = !isMock
    ? (nameParts.map(w => w[0]||'').join('').slice(0,2).toUpperCase() || '??')
    : (isSwimming ? 'YK' : 'EY');
  const position    = isSwimming ? (th.positionLabel || 'Stil') : (!isMock ? (profile.positionLabel || profile.position || '–') : 'CAM');
  const ageGroup    = isSwimming ? null : (!isMock ? (profile.ageGroup  || '–') : 'U16');

  const chooseAvatar = async (nextAvatarId) => {
    if (isMock || !profile?.uid || !window.NX?.updateUserProfile) return;
    const savedAvatarId = nextAvatarId === 'initials' ? null : nextAvatarId;
    const prev = avatarId;
    setAvatarId(savedAvatarId);
    setAvatarSaving(true);
    setAvatarMessage(null);
    onProfileUpdate && onProfileUpdate({ avatarId: savedAvatarId });
    try {
      await window.NX.updateUserProfile(profile.uid, { avatarId: savedAvatarId });
      setAvatarMessage(sxTxt(lang, 'Avatar kaydedildi.', 'Avatar saved.', 'Аватар сохранён.'));
    } catch (e) {
      setAvatarId(prev);
      onProfileUpdate && onProfileUpdate({ avatarId: prev || null });
      setAvatarMessage(sxTxt(lang, 'Avatar kaydedilemedi. Tekrar dene.', 'Could not save avatar. Try again.', 'Не удалось сохранить аватар. Попробуйте ещё раз.'));
    } finally {
      setAvatarSaving(false);
    }
  };

  if (openRealReport) {
    return <RealReportDetailScreen report={openRealReport} lang={lang} onBack={() => setOpenRealReport(null)}/>;
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 14, paddingBottom: 16 }}>

      {isMock ? (
        <>
          <div style={{ padding:'0 20px' }}>
            <PlayerCard name={displayName} initials={initials} position={position} age={ageGroup || ''} ovr={82} ovrLabel={isSwimming ? 'SKOR' : 'OVR'} tier="elite"
              stats={isSwimming
                ? [[79,'NEF',true],[81,'TEK'],[85,'HIZ'],[76,'DAY'],[88,'STİL',true],[74,'GÜÇ']]
                : [[79,'PAS',true],[81,'ŞUT'],[85,'HIZ'],[76,'SAV'],[88,'DRİ',true],[74,'FİZ']]}/>
          </div>
          <div style={{ padding:'0 20px', display:'flex', gap: 6, flexWrap:'wrap' }}>
            {!isSwimming && <Chip>U16 · Galatasaray</Chip>}
            <Chip>{isRu ? (isSwimming ? 'Стиль: Вольный' : `${t.position}: CAM`) : isSwimming ? 'Stil: Serbest' : `${t.position}: CAM`}</Chip>
            <Chip>{isSwimming ? '50m / 100m' : sxTxt(lang, 'Sağ ayak', 'Right foot', 'Правая нога')}</Chip>
            <Chip>{isRu && isSwimming ? 'Бассейн 2' : isSwimming ? 'Havuz 2' : '175 cm'}</Chip>
          </div>
          <SectionHead title={t.attributes}/>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap: 8 }}>
            <AttributeRing value={79} label={isSwimming ? 'Nefes' : t.pas} delta={6} hi="on"/>
            <AttributeRing value={81} label={isSwimming ? 'Teknik' : t.sut} delta={2} hi={isSwimming ? 'on' : 'gold'}/>
            <AttributeRing value={85} label={t.hiz} delta={1}/>
            <AttributeRing value={76} label={isSwimming ? 'Dayanıklılık' : t.sav} delta={-2}/>
            <AttributeRing value={88} label={isSwimming ? 'Stil' : t.dri} delta={4} hi="on"/>
            <AttributeRing value={74} label={isSwimming ? 'Güç' : t.fiz} delta={1}/>
          </div>
          <SectionHead title={sxTxt(lang, 'Sezon istatistikleri', 'Season stats', 'Статистика сезона')}/>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
            {[
              ['12', isSwimming ? trainingLabel || 'Seans' : t.match, '#fff'],
              ['8',  isSwimming ? sxTxt(lang, 'Set', 'Set', 'Сет') : t.goal,  'var(--nx-accent)'],
              ['11', isSwimming ? sxTxt(lang, 'Teknik', 'Technique', 'Техника') : t.assist,'#fff'],
            ].map(([v,l,c]) => (
              <div key={l} style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
                borderRadius: 12, padding: 14, display:'flex', flexDirection:'column', gap: 4 }}>
                <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 36, color: c, lineHeight: 0.9 }}>{v}</span>
                <Label>{l}</Label>
              </div>
            ))}
          </div>
        </>
      ) : (
        <>
	          {/* Real player identity card */}
	          {(() => {
	            const lvl = getLevelInfo(profile.xp || 0);
	            const lvlName = lvl.name[langKey] || lvl.name.tr || lvl.name.en;
	            const pct = Math.round(lvl.progress * 100);
	            const teamInfo = profile.teamName || profile.ageGroup || sxTxt(lang, `${th.teamLabel || 'Takım'} bekleniyor`, `${isSwimming ? 'Group' : 'Team'} pending`, `${isSwimming ? 'Группа' : 'Команда'} ожидается`);
	            const nextText = lvl.xpToNext > 0
	              ? `${lvl.xpToNext.toLocaleString()} XP ${sxTxt(lang, 'sonraki seviyeye', 'to next level', 'до следующего уровня')}`
	              : sxTxt(lang, 'En üst seviyedesin', 'Top level reached', 'Максимальный уровень достигнут');
	            return (
	              <div style={{ padding:'0 20px' }}>
	                <div style={{ position:'relative', overflow:'hidden',
	                  minHeight:190, borderRadius:20, padding:18,
	                  background:'radial-gradient(120% 90% at 88% 0%, var(--nx-accent-soft), transparent 42%), radial-gradient(80% 80% at 0% 100%, rgba(79,141,255,0.14), transparent 44%), linear-gradient(145deg,#171717,#090909)',
	                  border:'1px solid rgba(255,255,255,0.08)',
	                  boxShadow:'0 18px 38px rgba(0,0,0,0.30)' }}>
	                  <div style={{ position:'absolute', inset:12, borderRadius:16,
	                    border:'1px solid rgba(255,255,255,0.04)', pointerEvents:'none' }}/>
	                  <div style={{ position:'relative', zIndex:1, display:'flex', alignItems:'flex-start', gap:16 }}>
	                    <Avatar initials={initials} size={78} avatarId={avatarId}/>
	                    <div style={{ flex:1, minWidth:0 }}>
	                      <Label color="var(--nx-accent)">{sxTxt(lang, `${th.playerLabel || 'Sporcu'} kartı`, isSwimming ? 'Swimmer card' : 'Athlete card', isSwimming ? 'Карточка пловца' : 'Карточка спортсмена')}</Label>
	                      <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:28, lineHeight:0.98,
	                        textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop:5,
	                        overflowWrap:'anywhere' }}>{displayName}</div>
	                      <div style={{ display:'flex', flexWrap:'wrap', gap:6, marginTop:10 }}>
	                        {[position, teamInfo].filter(v => v && v !== '–').map(v => (
	                          <span key={v} style={{ fontFamily:'Manrope', fontWeight:800, fontSize:10,
	                            color:'#B8B8B8', letterSpacing:'0.08em', textTransform:'uppercase',
	                            background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.07)',
	                            borderRadius:999, padding:'5px 8px' }}>{v}</span>
	                        ))}
	                      </div>
	                    </div>
	                  </div>
	                  <div style={{ position:'relative', zIndex:1, display:'grid',
	                    gridTemplateColumns:'auto 1fr', gap:14, alignItems:'end', marginTop:18 }}>
	                    <div>
	                      <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:44,
	                        color:'var(--nx-accent)', lineHeight:0.9 }}>{lvl.level}</div>
	                      <div style={{ fontFamily:'JetBrains Mono', fontSize:9, color:'#7A7A7A',
	                        letterSpacing:'0.12em', textTransform:'uppercase', marginTop:5 }}>
	                        {sxTxt(lang, 'Seviye', 'Level', 'Уровень')} · {lvlName}
	                      </div>
	                    </div>
	                    <div style={{ minWidth:0 }}>
	                      <div style={{ display:'flex', justifyContent:'space-between', gap:10, marginBottom:7 }}>
	                        <span style={{ fontFamily:'JetBrains Mono', fontSize:11, color:'#fff' }}>
	                          {(profile.xp || 0).toLocaleString()} XP
	                        </span>
	                        <span style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A', textAlign:'right' }}>
	                          {nextText}
	                        </span>
	                      </div>
	                      <div style={{ height:8, borderRadius:999, background:'#242424', overflow:'hidden',
	                        boxShadow:'inset 0 0 0 1px rgba(255,255,255,0.04)' }}>
	                        <div style={{ height:'100%', width:`${Math.max(2, pct)}%`, borderRadius:999,
	                          background:'linear-gradient(90deg,var(--nx-accent),var(--nx-accent-hi))',
	                          boxShadow:'0 0 12px var(--nx-accent-glow)',
	                          transition:'width 0.4s ease' }}/>
	                      </div>
	                    </div>
	                  </div>
	                </div>
	              </div>
	            );
	          })()}
	          <div style={{ padding:'0 20px' }}>
	            <SectionHead title={sxTxt(lang, 'Avatar seç', 'Choose avatar', 'Выберите аватар')}/>
	            <Card style={{ display:'flex', flexDirection:'column', gap:12 }}>
	              <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
		                {getAvatarChoicesForSport(th.sportType || 'football').map(a => {
		                  const selected = a.id === 'initials'
		                    ? !avatarId
		                    : normalizeAvatarId(avatarId) === a.id;
		                  return (
			                    <button key={a.id} onClick={() => chooseAvatar(a.id)} disabled={avatarSaving}
			                      style={{
			                        minHeight:70, borderRadius:12, cursor: avatarSaving ? 'not-allowed' : 'pointer',
			                        background:selected ? `${a.color}14` : '#1C1C1C',
		                        border:`1px solid ${selected ? a.color+'66' : 'rgba(255,255,255,0.06)'}`,
		                        color:selected ? a.color : '#B8B8B8',
		                        display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
		                        gap:6, opacity: avatarSaving && !selected ? 0.55 : 1,
			                        minWidth:0, padding:'8px 4px',
			                      }}>
			                      <PlayerAvatar avatarId={a.id === 'initials' ? null : a.id} initials={initials} size={34}/>
			                      <span style={{ fontFamily:'Manrope', fontWeight:700, fontSize:8,
			                        letterSpacing:'0.06em', textTransform:'uppercase',
			                        lineHeight:1.1, textAlign:'center', maxWidth:'100%', overflowWrap:'anywhere' }}>
		                        {isRu ? (a.ru || a.tr || a.en) : isTr ? a.tr : a.en}
		                      </span>
	                    </button>
	                  );
	                })}
	              </div>
	              <div style={{ minHeight:16, fontFamily:'Manrope', fontSize:12,
	                color: avatarMessage && (avatarMessage.includes('kaydedilemedi') || avatarMessage.includes('Could not') || avatarMessage.includes('Не удалось')) ? '#FF6B6B' : '#7A7A7A',
	                lineHeight:1.4 }}>
		                {avatarSaving
		                  ? sxTxt(lang, 'Kaydediliyor…', 'Saving…', 'Сохранение…')
		                  : (avatarMessage || sxTxt(lang, 'İstersen yerleşik avatar seç; baş harfler de kullanılabilir.', 'Choose a built-in avatar if you want; initials are also available.', 'Можно выбрать встроенный аватар или использовать инициалы.'))}
	              </div>
	            </Card>
	          </div>
	        </>
	      )}

      {/* Coach feedback section */}
      <div style={{ padding:'0 20px' }}>
        <SectionHead title={isRu ? `${coachDisplayLabel} отзыв` : isTr ? `${th.coachLabel || 'Koç'} geri bildirimi` : `${isSwimming ? 'Instructor' : 'Coach'} feedback`}/>
      </div>

      {isMock ? (
        // Demo mock entries
        <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 10 }}>
          {[
            { initials:'EA', name:isRu?`${coachDisplayLabel} Ahmet`:isTr?`${th.coachLabel || 'Koç'} Ahmet`:(isSwimming?'Instructor Ahmet':'Coach Ahmet'), when:isRu?'2 ч назад':isTr?'2 saat önce':'2h ago',
              note:isRu?(isSwimming?'Ритм дыхания стал более контролируемым. Отлично.':'Передачи в треугольниках стали намного чище. Отлично.'):isTr?(isSwimming?'Nefes ritmi daha kontrollü. Aferin.':'Pas üçgenleri çok daha temiz. Aferin.'):(isSwimming?'Breathing rhythm is more controlled. Well done.':'Triangle passing much cleaner. Well done.'),
              ratings:{ technique:4, intensity:4, attitude:5 } },
            { initials:'ES', name:isRu?`${coachDisplayLabel} Selin`:isTr?`${th.coachLabel || 'Koç'} Selin`:(isSwimming?'Instructor Selin':'Coach Selin'), when:isRu?'Вчера':isTr?'Dün':'Yesterday',
              note:isRu?'Время восстановления улучшается.':isTr?'Toparlanma süresinde gelişim var.':'Recovery time improving.',
              ratings:{ technique:3, intensity:4, attitude:4 } },
          ].map((m, i) => (
            <div key={i} style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
              borderRadius:14, padding:14 }}>
              <div style={{ display:'flex', gap:12 }}>
                <Avatar initials={m.initials} size={36}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:8 }}>
                    <span style={{ fontFamily:'Manrope', fontWeight:700, fontSize:12, color:'#fff' }}>{m.name}</span>
                    <span style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A' }}>{m.when}</span>
                  </div>
                  <div style={{ display:'flex', gap:6, marginTop:4 }}>
                    {[
                      [ratingLabels.technique,  m.ratings.technique],
                      [ratingLabels.intensity,  m.ratings.intensity],
                      [ratingLabels.attitude,   m.ratings.attitude],
                    ].map(([l, v]) => (
                      <span key={l} style={{ fontFamily:'JetBrains Mono', fontSize:9,
                        color: v >= 4 ? '#00FF88' : v >= 3 ? '#FFB800' : '#FF6B6B',
                        background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.06)',
                        padding:'2px 6px', borderRadius:6 }}>
                        {l} {v}
                      </span>
                    ))}
                  </div>
                  <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', marginTop:6, lineHeight:1.45 }}>{m.note}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : feedbackLoading ? (
        <div style={{ display:'flex', justifyContent:'center', padding:'32px 0' }}>
          <div style={{ display:'flex', gap:8 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width:7, height:7, borderRadius:999, background:'#00FF88',
                animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
            ))}
          </div>
        </div>
      ) : feedbackEntries.length === 0 ? (
        <div style={{ padding:'0 20px' }}>
          <Card style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:14,
            padding:'28px 20px', textAlign:'center' }}>
            <Ico name="chart" size={24} style={{ color:'#4F8DFF' }}/>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
                  {isRu ? `Пока нет отзывов от ${coachDisplayLabel.toLowerCase()}а. Они появятся здесь после сеансов.` : isTr ? `Henüz ${th.coachLabel?.toLowerCase?.() || 'koç'} notu yok. ${th.trainingLabel || 'Antrenman'} sonrası burada görünecek.` : `No ${isSwimming ? 'instructor' : 'coach'} feedback yet. It will appear here after sessions.`}
            </div>
          </Card>
        </div>
      ) : (
        <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap:10 }}>
          {feedbackEntries.map((e, i) => {
            const coachName = e.coachName || coachDisplayLabel;
            const coachInit = coachName.split(' ').map(s => s[0]).join('').toUpperCase().slice(0,2) || 'C?';
            const dateStr   = e.sessionDate
              ? new Date(e.sessionDate).toLocaleDateString(isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB', { month:'short', day:'numeric' })
              : '';
            const hasRatings = e.ratings && typeof e.ratings === 'object';
            return (
              <div key={i} style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
                borderRadius:14, padding:14 }}>
                <div style={{ display:'flex', gap:12 }}>
	                  <Avatar initials={coachInit} size={36} avatarId="coach"/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:8 }}>
                      <span style={{ fontFamily:'Manrope', fontWeight:700, fontSize:12, color:'#fff' }}>{coachName}</span>
                      {dateStr && (
                        <span style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A' }}>{dateStr}</span>
                      )}
                    </div>
                    {hasRatings && (
                      <div style={{ display:'flex', gap:6, marginTop:4 }}>
                        {[
                          [ratingLabels.technique, e.ratings.technique],
                          [ratingLabels.intensity, e.ratings.intensity],
                          [ratingLabels.attitude,  e.ratings.attitude],
                        ].map(([l, v]) => v != null && (
                          <span key={l} style={{ fontFamily:'JetBrains Mono', fontSize:9,
                            color: v >= 4 ? '#00FF88' : v >= 3 ? '#FFB800' : '#FF6B6B',
                            background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.06)',
                            padding:'2px 6px', borderRadius:6 }}>
                            {l} {v}
                          </span>
                        ))}
                      </div>
                    )}
                    {e.notes && (
                      <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', marginTop:6, lineHeight:1.45 }}>
                        {e.notes}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Reports section */}
      <div style={{ padding:'0 20px' }}>
        <SectionHead title={sxTxt(lang, 'Haftalık gelişim', 'Weekly progress', 'Недельный прогресс')}/>
      </div>

      {isMock ? (
        <div style={{ padding:'0 20px' }}>
          <Button kind="ghost" full disabled>{sxTxt(lang, 'Raporlar veli görünümünde', 'Reports are in parent view', 'Отчёты находятся в родительском виде')}</Button>
        </div>
      ) : playerReportsLoading ? (
        <div style={{ display:'flex', justifyContent:'center', padding:'32px 0' }}>
          <div style={{ display:'flex', gap:8 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width:7, height:7, borderRadius:999, background:'#00FF88',
                animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
            ))}
          </div>
        </div>
      ) : playerReports.length === 0 ? (
        <div style={{ padding:'0 20px' }}>
          <Card style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:14,
            padding:'28px 20px', textAlign:'center' }}>
            <Ico name="chart" size={22} style={{ color:'#4F8DFF' }}/>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
              {sxTxt(lang, 'Henüz haftalık gelişim raporu yok.', 'No weekly progress report yet.', 'Недельного отчёта о прогрессе пока нет.')}
            </div>
          </Card>
        </div>
      ) : (
        <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap:8 }}>
          {playerReports.map((r, i) => {
            const dateStr = r.weekStart
              ? r.weekStart
              : r.createdAt?.seconds
              ? new Date(r.createdAt.seconds * 1000).toLocaleDateString(
                  isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB', { month:'short', day:'numeric' })
              : '';
            return (
              <button key={i} onClick={() => setOpenRealReport(r)} style={{
                width:'100%', textAlign:'left', cursor:'pointer',
                padding:0, background:'none', border:'none' }}>
                <Card style={{ padding:14 }}>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13, color:'#fff' }}>
                        {r.title || sxTxt(lang, 'Haftalık gelişim', 'Weekly progress', 'Недельный прогресс')}
                      </div>
                      <div style={{ fontFamily:'Manrope', fontSize:11, color:'#B8B8B8', marginTop:3 }}>
                        {isTr
                          ? `Katılım ${r.attendanceAttended ?? 0}/${r.attendanceTotal ?? 0} · Çaba ${r.effortRating ?? '–'} · Disiplin ${r.disciplineRating ?? '–'} · Gelişim ${r.progressRating ?? '–'}`
                          : isRu
                          ? `Посещаемость ${r.attendanceAttended ?? 0}/${r.attendanceTotal ?? 0} · Старание ${r.effortRating ?? '–'} · Дисциплина ${r.disciplineRating ?? '–'} · Прогресс ${r.progressRating ?? '–'}`
                          : `Attendance ${r.attendanceAttended ?? 0}/${r.attendanceTotal ?? 0} · Effort ${r.effortRating ?? '–'} · Discipline ${r.disciplineRating ?? '–'} · Progress ${r.progressRating ?? '–'}`}
                      </div>
                      {dateStr && (
                        <div style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A', marginTop:2 }}>
                          {dateStr} · +{r.weeklyXp ?? r.xpGained ?? 0} XP
                        </div>
                      )}
                    </div>
                    <Ico name="chev" size={16} style={{ color:'#7A7A7A', flexShrink:0 }}/>
                  </div>
                </Card>
              </button>
            );
          })}
        </div>
      )}

      {/* Attendance history — real mode only */}
      {!isMock && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={sxTxt(lang, 'Katılım geçmişi', 'Attendance history', 'История посещаемости')}/>
          </div>
          <div style={{ padding:'0 20px' }}>
            {playerAttLoading ? (
              <div style={{ display:'flex', justifyContent:'center', padding:'24px 0' }}>
                <div style={{ display:'flex', gap:8 }}>
                  {[0,1,2].map(i => (
                    <div key={i} style={{ width:7, height:7, borderRadius:999, background:'#00FF88',
                      animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
                  ))}
                </div>
              </div>
            ) : playerAttendance.length === 0 ? (
              <Card style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:12,
                padding:'24px 20px', textAlign:'center' }}>
                <Ico name="check" size={22} style={{ color:'#00FF88' }}/>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
                  {sxTxt(lang, 'Henüz katılım kaydı yok. Antrenman sonrası burada görünecek.', 'No attendance records yet. They will appear here after sessions.', 'Записей посещаемости пока нет. Они появятся здесь после занятий.')}
                </div>
              </Card>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {playerAttendance.slice(0, 10).map((a, i) => {
                  const dateStr = a.date
                    ? new Date(a.date).toLocaleDateString(isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB', { month:'short', day:'numeric', weekday:'short' })
                    : a.date || '–';
                  return (
                    <div key={i} style={{ background:'#141414',
                      border:'1px solid rgba(255,255,255,0.06)',
                      borderRadius:10, padding:'10px 14px',
                      display:'flex', alignItems:'center', justifyContent:'space-between', gap:12 }}>
                      <span style={{ fontFamily:'JetBrains Mono', fontSize:11, color:'#B8B8B8' }}>{dateStr}</span>
                      <span style={{
                        fontFamily:'JetBrains Mono', fontSize:10, fontWeight:700,
                        letterSpacing:'0.10em', textTransform:'uppercase',
                        color: a.present ? '#00FF88' : '#FF6B6B',
                        background: a.present ? 'rgba(0,255,136,0.06)' : 'rgba(255,107,107,0.06)',
                        border: `1px solid ${a.present ? 'rgba(0,255,136,0.25)' : 'rgba(255,107,107,0.25)'}`,
                        padding:'3px 8px', borderRadius:999 }}>
                        {a.present ? sxTxt(lang, 'Katıldı', 'Present', 'Присутствовал') : sxTxt(lang, 'Katılmadı', 'Absent', 'Отсутствовал')}
                      </span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
};

// ───── SESSION DETAIL (live) ─────
const SessionDetailScreen = ({ lang, onClose, onComplete }) => {
  const langKey = sxLang(lang);
  const isTr = langKey === 'tr';
  const isRu = langKey === 'ru';
  const t = STR[langKey] || STR.tr || {};
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 14, paddingBottom: 16 }}>
      <div style={{ padding:'68px 20px 0', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <button onClick={onClose} style={{ background:'#1C1C1C', border:'1px solid rgba(255,255,255,0.06)',
          color:'#fff', borderRadius: 999, padding: '8px 12px', cursor:'pointer',
          fontFamily:'Manrope', fontWeight:700, fontSize: 12, letterSpacing:'0.08em', textTransform:'uppercase' }}>← {sxTxt(lang, 'Geri', 'Back', 'Назад')}</button>
        <Label color="var(--nx-accent)">● LIVE</Label>
      </div>

      {/* Session hero */}
      <div style={{ margin: '0 20px', borderRadius: 18, height: 160, position:'relative', overflow:'hidden',
        background:'linear-gradient(180deg,#111,#070707)', border:'1px solid var(--nx-accent-glow)' }}>
        <svg viewBox="0 0 320 160" style={{ position:'absolute', inset: 12, width: 'calc(100% - 24px)', height: 'calc(100% - 24px)' }}>
          <rect x="0" y="0" width="320" height="160" fill="none" stroke="var(--nx-accent)" strokeOpacity="0.28" strokeWidth="1.2"/>
          <line x1="160" y1="0" x2="160" y2="160" stroke="var(--nx-accent)" strokeOpacity="0.18" strokeWidth="1"/>
          <circle cx="160" cy="80" r="22" fill="none" stroke="var(--nx-accent)" strokeOpacity="0.22" strokeWidth="1"/>
          <rect x="0" y="40" width="40" height="80" fill="none" stroke="var(--nx-accent)" strokeOpacity="0.22"/>
          <rect x="280" y="40" width="40" height="80" fill="none" stroke="var(--nx-accent)" strokeOpacity="0.22"/>
          <circle cx="240" cy="80" r="6" fill="var(--nx-accent)" style={{ filter:'drop-shadow(0 0 10px var(--nx-accent-glow))'}}/>
        </svg>
        <div style={{ position:'absolute', left: 16, bottom: 14 }}>
          <Label color="rgba(255,255,255,0.6)">
            {isTr
              ? `${th.mockLocation || 'Pitch 2'} · ${isSwimming ? 'Serbest stil' : 'Bitiricilik'}`
              : isRu
              ? `${isSwimming ? 'Бассейн 2' : 'Поле 2'} · ${isSwimming ? 'Вольный стиль' : 'Завершение'}`
              : `${th.mockLocation || (isSwimming ? 'Pool 2' : 'Pitch 2')} · ${isSwimming ? 'Freestyle' : 'Finishing'}`}
          </Label>
          <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 28, color:'#fff', lineHeight: 1 }}>SET 4 / 6</div>
        </div>
      </div>

      <div style={{ padding:'0 20px' }}>
        <div style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
          borderRadius: 16, padding: 16, display:'flex', gap: 14 }}>
          <div style={{ flex:1 }}>
            <Label>{sxTxt(lang, 'Süre', 'Elapsed', 'Время')}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 36, color:'#fff', fontVariantNumeric:'tabular-nums' }}>24:18</div>
          </div>
          <div style={{ width: 1, background:'rgba(255,255,255,0.08)' }}/>
          <div style={{ flex:1 }}>
            <Label>{sxTxt(lang, 'Bu seans XP', 'Session XP', 'XP занятия')}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 36, color:'var(--nx-accent)', textShadow:'0 0 18px var(--nx-accent-glow)' }}>+86</div>
          </div>
        </div>
      </div>

      {/* Drills */}
      <SectionHead title={isTr ? (isSwimming ? 'Teknik çalışmalar' : 'Driller') : isRu ? (isSwimming ? 'Технические упражнения' : 'Упражнения') : (isSwimming ? 'Technique work' : 'Drills')}/>
      <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
        <SessionRow status="done" time="06:00" coach={sxTxt(lang, 'Isınma', 'Warm-up', 'Разминка')} title={sxTxt(lang, 'Dinamik esneme', 'Dynamic stretch', 'Динамическая растяжка')} xp={20}/>
        <SessionRow status="done" time="08:00" coach={isTr?(isSwimming?'Nefes':'Pas'):isRu?(isSwimming?'Дыхание':'Передачи'):(isSwimming?'Breath':'Passing')} title={isTr?(isSwimming?'Nefes kontrolü':'Üçgen pas drili'):isRu?(isSwimming?'Контроль дыхания':'Передачи в треугольниках'):(isSwimming?'Breath control':'Triangle passing')} xp={28}/>
        <SessionRow status="live" time="10:30" coach={isTr?(isSwimming?'Serbest':'Şut'):isRu?(isSwimming?'Вольный стиль':'Удар'):(isSwimming?'Freestyle':'Shooting')} title={isTr?(isSwimming?'Serbest stil · tempo':'Bitiricilik · uzaktan'):isRu?(isSwimming?'Вольный стиль · темп':'Завершение · дальний удар'):(isSwimming?'Freestyle · tempo':'Finishing · long range')} xp={38}/>
        <SessionRow time="—" coach={isTr?(isSwimming?'Dönüş':'Maç simülasyonu'):isRu?(isSwimming?'Повороты':'Игровая симуляция'):(isSwimming?'Turns':'Scrimmage')} title={isTr?(isSwimming?'Dönüş çalışması':'5v5 · 2 takım'):isRu?(isSwimming?'Отработка поворотов':'5v5 · 2 команды'):(isSwimming?'Turn practice':'5v5 · 2 teams')}/>
      </div>

      <div style={{ padding:'0 20px' }}>
        <Button kind="primary" full size="lg" icon="check" onClick={onComplete}>
          {isTr ? (isSwimming ? 'Teknik çalışmayı tamamla' : 'Drili tamamla') : isRu ? (isSwimming ? 'Завершить техническое упражнение' : 'Завершить упражнение') : (isSwimming ? 'Complete technique work' : 'Complete drill')}
        </Button>
      </div>
    </div>
  );
};

Object.assign(window, { HomeScreen, TrainingScreen, AchievementsScreen, ProfileScreen, SessionDetailScreen, LeaderboardScreen, getLevelInfo });