/* global React, Ico, STR, Button, Chip, SectionHead, Label */
// NEXT XI · v2 — Refined Home + Parent Dashboard + Onboarding/Settings
// Premium-football direction: less glow, tighter hierarchy, structured.

const { useState: useS2, useEffect: useE2 } = React;
const nxLangKey2 = (lang) => lang === 'ru' ? 'ru' : lang === 'en' ? 'en' : 'tr';
const nxTxt2 = (lang, tr, en, ru) => {
  const key = nxLangKey2(lang);
  return key === 'ru' ? (ru ?? tr ?? en ?? '') : key === 'en' ? (en ?? tr ?? ru ?? '') : (tr ?? en ?? ru ?? '');
};

// ────────────────────────────────────────────────────────────
// TIER SYSTEM (canonical XP bands + OVR bands)
// ────────────────────────────────────────────────────────────
const TIERS = [
  { key:'bronze', min:0,    max:999,  color:'#C28A4B', label:'BRONZE' },
  { key:'silver', min:1000, max:2499, color:'#D4D4D4', label:'SILVER' },
  { key:'gold',   min:2500, max:4999, color:'#FFB800', label:'GOLD'   },
  { key:'elite',  min:5000, max:7999, color:'#00FF88', label:'ELITE'  },
  { key:'legend', min:8000, max:Infinity, color:'#B26BFF', label:'LEGEND' },
];
const tierFor = (xp) => TIERS.find(t => xp <= t.max) || TIERS[0];
const nextTierOf = (xp) => {
  const i = TIERS.findIndex(t => xp <= t.max);
  return TIERS[Math.min(i + 1, TIERS.length - 1)];
};
const ovrBand = (ovr, lang) => {
  const map = lang === 'ru'
    ? [[60,'Начинающий'],[70,'Развивающийся'],[80,'Продвинутый'],[90,'Элита']]
    : lang === 'tr'
    ? [[60,'Başlangıç'],[70,'Gelişen'],[80,'İleri'],[90,'Elit']]
    : [[60,'Beginner'],[70,'Developing'],[80,'Advanced'],[90,'Elite']];
  return map.reverse().find(([n]) => ovr >= n)?.[1] || map[0][1];
};

// ────────────────────────────────────────────────────────────
// SHARED PRIMITIVES
// ────────────────────────────────────────────────────────────
const Card = ({ children, style }) => (
  <div style={{
    background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
    borderRadius: 16, padding: 16, ...style
  }}>{children}</div>
);

const TierBadge = ({ tier, size='md' }) => {
  const s = size === 'sm' ? { h: 18, fs: 9, px: 8 } : { h: 22, fs: 10, px: 10 };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 6,
      height: s.h, padding: `0 ${s.px}px`, borderRadius: 999,
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${tier.color}40`,
      color: tier.color,
      fontFamily:'Manrope', fontWeight: 800, fontSize: s.fs,
      letterSpacing: '0.16em', textTransform:'uppercase',
    }}>
      <span style={{ width: 5, height: 5, borderRadius: 999, background: tier.color }}/>
      {tier.label}
    </span>
  );
};

const Avatar = ({ initials, size = 48, ring, avatarId }) => (
  <PlayerAvatar initials={initials} size={size} ring={ring} avatarId={avatarId}/>
);

// ────────────────────────────────────────────────────────────
// COMPACT PLAYER CARD — Home hero (less neon, more structured)
// ────────────────────────────────────────────────────────────
const HomePlayerCard = ({ name, initials, position, age, ovr, xp, lang, avatarId, hideOvr, scoreLabel = 'OVR' }) => {
  const langKey = lang === 'ru' ? 'ru' : lang === 'en' ? 'en' : 'tr';
  const isTr = langKey === 'tr';
  const isRu = langKey === 'ru';
  const tier = tierFor(xp);
  const next = nextTierOf(xp);
  const band = ovrBand(ovr, langKey);
  const nextSpan = next.min - tier.min;
  const progressPct = nextSpan > 0 ? Math.min(100, ((xp - tier.min) / nextSpan) * 100) : 100;
  const nextLabel = next?.label || '';
  const toNextLabel = isRu ? `ДО ${nextLabel}` : isTr ? `${nextLabel}'A` : `TO ${nextLabel}`;
  return (
    <Card style={{ padding: 0, overflow:'hidden' }}>
      {/* Top row: avatar + identity + OVR */}
      <div style={{ display:'flex', alignItems:'center', gap: 14, padding: 16,
        borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
        <Avatar initials={initials} size={56} ring={tier.color} avatarId={avatarId}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 4 }}>
            <TierBadge tier={tier} size="sm"/>
            {position && <span style={{ fontFamily:'JetBrains Mono', fontSize: 10, color:'#7A7A7A' }}>{[position, age].filter(Boolean).join(' · ')}</span>}
          </div>
          <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, lineHeight: 1.05,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff',
            whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{name}</div>
        </div>
        {!hideOvr && (
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 9,
              letterSpacing:'0.18em', textTransform:'uppercase', color:'#7A7A7A' }}>{scoreLabel}</div>
            <div style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 40,
              color:'#fff', lineHeight: 0.95 }}>{ovr != null ? ovr : '–'}</div>
            {ovr != null && (
              <div style={{ fontFamily:'Manrope', fontWeight: 600, fontSize: 9,
                letterSpacing:'0.14em', textTransform:'uppercase', color: tier.color }}>{band}</div>
            )}
          </div>
        )}
      </div>
      {/* Bottom row: XP rail to next tier */}
      <div style={{ padding: 14, display:'flex', flexDirection:'column', gap: 8 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <span style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 10,
            letterSpacing:'0.16em', textTransform:'uppercase', color:'#7A7A7A' }}>
            {toNextLabel}
          </span>
          <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:'#fff' }}>
            {xp.toLocaleString()} <span style={{ color:'#4A4A4A' }}>/ {next.min === Infinity ? 'MAX' : next.min.toLocaleString()} XP</span>
          </span>
        </div>
        <div style={{ height: 6, borderRadius: 3, background:'#242424', overflow:'hidden', position:'relative' }}>
          <div style={{
            position:'absolute', left: 0, top: 0, bottom: 0,
            width: `${progressPct}%`,
            background: `linear-gradient(90deg, ${tier.color}, ${next.color})`,
            borderRadius: 3,
          }}/>
        </div>
      </div>
    </Card>
  );
};

// ────────────────────────────────────────────────────────────
// QUICK ACTION — 4-tile grid
// ────────────────────────────────────────────────────────────
const QuickAction = ({ icon, label, sub, accent, onClick }) => (
  <button onClick={onClick} style={{
    background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
    borderRadius: 14, padding: 14, cursor:'pointer',
    display:'flex', flexDirection:'column', alignItems:'flex-start', gap: 10,
    color:'#fff', textAlign:'left', minHeight: 88, transition:'transform 120ms',
  }}
  onMouseDown={e => e.currentTarget.style.transform='scale(0.98)'}
  onMouseUp={e => e.currentTarget.style.transform='scale(1)'}
  onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}>
    <div style={{ width: 30, height: 30, borderRadius: 8,
      background: accent ? 'var(--nx-accent-soft)' : '#1C1C1C',
      color: accent ? 'var(--nx-accent)' : '#fff',
      display:'flex', alignItems:'center', justifyContent:'center',
      border: accent ? '1px solid var(--nx-accent-glow)' : '1px solid rgba(255,255,255,0.06)' }}>
      <Ico name={icon} size={16}/>
    </div>
    <div>
      <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 13, color:'#fff' }}>{label}</div>
      {sub && <div style={{ fontFamily:'Manrope', fontWeight: 500, fontSize: 11, color:'#7A7A7A', marginTop: 2 }}>{sub}</div>}
    </div>
  </button>
);

// ────────────────────────────────────────────────────────────
// HOME V2 — refined player home
// ────────────────────────────────────────────────────────────
const HomeScreenV2 = ({ lang, onStart, onTab, profile, onLeaderboard }) => {
  const t = STR[lang];
  const isMock      = !profile;
  const th          = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming  = th.sportType === 'swimming';
  const langKey     = nxLangKey2(lang);
  const isTr        = langKey === 'tr';
  const isRu        = langKey === 'ru';
  const displayName = !isMock ? (profile.displayName || '') : '';
  const nameParts   = displayName.trim().split(/\s+/).filter(Boolean);
  const firstName   = isMock ? (isSwimming ? 'YELİZ' : 'EFE')               : (nameParts[0]?.toUpperCase() || 'PLAYER');
  const fullName    = isMock ? (isSwimming ? 'YELİZ KAYA' : 'EFE YILDIZ')   : (displayName.toUpperCase()   || 'PLAYER');
  const initials    = isMock ? (isSwimming ? 'YK' : 'EY')                   : (nameParts.map(w => w[0]||'').join('').slice(0,2).toUpperCase() || '??');
  const position    = isSwimming ? nxTxt2(lang, th.positionLabel || 'Stil', 'Style', 'Стиль') : (isMock ? (th.positionLabel || 'CAM') : (profile.positionLabel || profile.position || '–'));
  const age         = isSwimming ? null : (isMock ? 'U16' : (profile.ageGroup  || '–'));
  const xp          = isMock ? 3420         : (profile.xp || 0);

  // Real mini-leaderboard — top 3 from this player's team (real mode only)
  const [miniBoard, setMiniBoard] = useS2([]);
  const [homeErrors, setHomeErrors] = useS2({});
  useE2(() => {
    if (isMock || !window.NX || !profile?.academyId) return;
    if (!profile.teamId) {
      setMiniBoard([]);
      setHomeErrors(e => ({ ...e, leaderboard:null }));
      return;
    }
    setHomeErrors(e => ({ ...e, leaderboard:null }));
    const unsub = window.NX.onPlayersByAcademy(profile.academyId, players => {
      const sorted = players
        .filter(p => p.teamId === profile.teamId)
        .map(p => ({
          uid: p.uid,
          name: p.displayName || '–',
          xp: p.xp || 0,
          avatarId: p.avatarId,
        }))
        .sort((a, b) => b.xp - a.xp)
        .slice(0, 3);
      setMiniBoard(sorted);
    }, (err) => {
      console.error('[NX] player home leaderboard listener failed:', err?.code, err?.message, {
        uid: profile.uid,
        academyId: profile.academyId,
        teamId: profile.teamId,
      });
      setHomeErrors(e => ({ ...e, leaderboard: nxTxt2(lang, 'Sıralama yüklenemedi.', 'Could not load rankings.', 'Не удалось загрузить рейтинг.') }));
    });
    return () => unsub();
  }, [isMock, profile?.uid, profile?.academyId, profile?.teamId, lang]);

  // Next upcoming session for this player
  const [nextSession, setNextSession] = useS2(null);
  const [openSession, setOpenSession] = useS2(null);
  const [openPracticeInfo, setOpenPracticeInfo] = useS2(false);
  useE2(() => {
    if (isMock || !window.NX || !profile?.academyId) return;
    if (!profile.teamId) {
      setNextSession(null);
      setHomeErrors(e => ({ ...e, nextSession:null }));
      return;
    }
    const today = new Date().toISOString().slice(0, 10);
    setHomeErrors(e => ({ ...e, nextSession:null }));
    const handleEntries = entries => {
      const relevant = profile.teamId
        ? entries.filter(s => s.teamId === profile.teamId)
        : profile.ageGroup
          ? entries.filter(s => !s.ageGroup || s.ageGroup === profile.ageGroup)
          : entries;
      const upcoming = relevant
        .filter(s => (s.date || '') >= today)
        .sort((a, b) => {
          const da = (a.date || '') + (a.time || '');
          const db = (b.date || '') + (b.time || '');
          return da > db ? 1 : da < db ? -1 : 0;
        });
      setNextSession(upcoming[0] || null);
    };
    const unsub = window.NX.onSessionsByTeam(profile.academyId, profile.teamId, handleEntries, (err) => {
      console.error('[NX] player home sessions listener failed:', err?.code, err?.message, {
        uid: profile.uid,
        academyId: profile.academyId,
        teamId: profile.teamId,
      });
      setHomeErrors(e => ({ ...e, nextSession: nxTxt2(lang, 'Bugünkü seans yüklenemedi.', "Could not load today's session.", 'Не удалось загрузить сегодняшнее занятие.') }));
    });
    return () => unsub();
  }, [isMock, profile?.uid, profile?.academyId, profile?.teamId, lang]);

  const [weeklyReports, setWeeklyReports] = useS2([]);
  const [weeklyLoading, setWeeklyLoading] = useS2(!isMock);
  useE2(() => {
    if (isMock || !window.NX?.onWeeklyReportsByPlayer || !profile?.uid) return;
    setHomeErrors(e => ({ ...e, weekly:null }));
    const unsub = window.NX.onWeeklyReportsByPlayer(profile.uid, entries => {
      const sorted = [...entries].sort((a, b) => (b.weekStart || '').localeCompare(a.weekStart || ''));
      setWeeklyReports(sorted);
      setWeeklyLoading(false);
    }, (err) => {
      console.error('[NX] player home weekly listener failed:', err?.code, err?.message, {
        uid: profile.uid,
        academyId: profile.academyId,
      });
      setWeeklyLoading(false);
      setHomeErrors(e => ({ ...e, weekly: nxTxt2(lang, 'Haftalık rapor yüklenemedi.', 'Could not load weekly report.', 'Не удалось загрузить недельный отчёт.') }));
    });
    return () => unsub();
  }, [isMock, profile?.uid, lang]);

  const latestWeekly = weeklyReports[0] || null;

  if (!isMock && openSession) {
    const typeLabel = openSession.type === 'match' && !isSwimming ? nxTxt2(lang, 'Maç', 'Match', 'Матч') : nxTxt2(lang, th.trainingLabel || 'Seans', isSwimming ? 'Session' : 'Training', isSwimming ? 'Занятие' : 'Тренировка');
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:20 }}>
        <div style={{ padding:'0 20px', display:'flex', alignItems:'center', gap:12 }}>
          <button onClick={() => setOpenSession(null)} 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={openSession.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 }}>
              {openSession.title || nxTxt2(lang, 'Seans', 'Session', 'Занятие')}
            </div>
          </div>
        </div>
        <div style={{ padding:'0 20px' }}>
          <Card style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            {[
              [nxTxt2(lang, 'Tür', 'Type', 'Тип'), typeLabel],
              [nxTxt2(lang, 'Tarih', 'Date', 'Дата'), openSession.date || '–'],
              [nxTxt2(lang, 'Saat', 'Time', 'Время'), openSession.time || '–'],
              [nxTxt2(lang, 'Konum', 'Location', 'Место'), openSession.location || '–'],
              [nxTxt2(lang, th.coachLabel || 'Koç', isSwimming ? 'Instructor' : 'Coach', isSwimming ? 'Инструктор' : 'Тренер'), openSession.coachName || '–'],
              [nxTxt2(lang, `${th.teamLabel || 'Takım'} / grup`, `${isSwimming ? 'Group' : 'Team'} / group`, `${isSwimming ? 'Группа' : 'Команда'} / группа`), openSession.teamName || openSession.ageGroup || '–'],
              ['XP', `+${openSession.xpReward || 0}`],
            ].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 }}>{value}</div>
              </div>
            ))}
          </Card>
        </div>
        <div style={{ padding:'0 20px' }}>
          <Card>
            <Label>{nxTxt2(lang, 'Notlar', 'Notes', 'Заметки')}</Label>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', lineHeight:1.55, marginTop:8 }}>
              {openSession.notes || nxTxt2(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 }}>
              {isTr
                ? 'XP, koç haftalık raporu/onayı sonrası eklenir.'
                : isRu
                ? 'XP начисляется после недельного отчёта/подтверждения тренера.'
                : 'XP is awarded after coach weekly report/confirmation.'}
            </div>
          </Card>
        </div>
      </div>
    );
  }

  if (!isMock && openPracticeInfo) {
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:20 }}>
        <div style={{ padding:'0 20px', display:'flex', alignItems:'center', gap:12 }}>
          <button onClick={() => setOpenPracticeInfo(false)} 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>
            <Label color="#4F8DFF">{nxTxt2(lang, 'Yakında', 'Coming soon', 'Скоро')}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:24, lineHeight:1.05,
              textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop:3 }}>
              {nxTxt2(lang, th.drillLibLabel || 'Antrenman Kütüphanesi', 'Practice Library', isSwimming ? 'Библиотека техник' : 'Библиотека упражнений')}
            </div>
          </div>
        </div>
        <div style={{ padding:'0 20px' }}>
          <Card>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', lineHeight:1.65 }}>
              {isTr
                ? `${th.drillLibLabel || 'Antrenman Kütüphanesi'} yakında aktif olacak. Burada ${th.playerLabelPlural?.toLowerCase?.() || 'oyuncular'} için evde yapılabilecek teknik çalışmalar, koordinasyon egzersizleri ve ${th.coachLabel?.toLowerCase?.() || 'koç'} önerileri yer alacak. Gelişim puanları şu anda haftalık ${th.coachLabel?.toLowerCase?.() || 'koç'} raporlarına göre hesaplanır.`
                : isRu
                ? `${isSwimming ? 'Библиотека техник' : 'Библиотека упражнений'} скоро будет доступна. Здесь появятся домашние упражнения, технические задания, координация и рекомендации тренера. Очки прогресса сейчас считаются по недельным отчётам.`
                : 'Practice Library is coming soon. It will include home practice, technical drills, coordination exercises, and coach recommendations. Progress points are currently calculated from weekly coach reports.'}
            </div>
          </Card>
        </div>
      </div>
    );
  }

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

      {/* Greeting */}
      <div style={{ padding:'4px 20px 0' }}>
        <Label>{t.welcome}, {firstName}</Label>
        <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, lineHeight: 1.05,
          textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
          {nxTxt2(lang, th.todayLabel || 'Bugün antrenman var', isSwimming ? 'Session day' : 'Training day', isSwimming ? 'Сегодня сеанс плавания' : 'Сегодня тренировка')}
        </h1>
      </div>

      {/* Player card — primary identity */}
      <div style={{ padding:'0 20px' }}>
        <HomePlayerCard name={fullName} initials={initials} position={position} age={age}
          ovr={isMock ? 82 : (profile.ovr ?? null)} xp={xp} lang={lang}
          avatarId={isMock ? 'football' : profile.avatarId}
          scoreLabel={isSwimming ? nxTxt2(lang, 'SKOR', 'SCORE', 'СЧЁТ') : 'OVR'}/>
      </div>

      {/* Today's session card */}
      <div style={{ padding:'0 20px' }}>
        {isMock ? (
          <Card style={{ padding: 0, overflow:'hidden' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 12, padding: '14px 16px 12px' }}>
              <div style={{ width: 6, height: 36, borderRadius: 3, background:'var(--nx-accent)' }}/>
              <div style={{ flex: 1 }}>
                <Label>{nxTxt2(lang, 'Bugün · 18:30', 'Today · 18:30', 'Сегодня · 18:30')}</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 20,
                  textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop: 2 }}>
                  {nxTxt2(lang, th.mockSessionTitle || 'Bitiricilik · Set 4', isSwimming ? 'Freestyle · Set 4' : 'Finishing · Set 4', isSwimming ? 'Вольный стиль · Сет 4' : 'Завершение · Сет 4')}
                </div>
              </div>
              <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:'var(--nx-accent)' }}>+120 XP</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
              padding: '10px 16px', borderTop:'1px solid rgba(255,255,255,0.06)',
              background:'rgba(255,255,255,0.015)' }}>
              <span style={{ fontFamily:'Manrope', fontSize: 12, color:'#B8B8B8' }}>
                {isRu
                  ? `${isSwimming ? 'Инструктор' : 'Тренер'} Ахмет · ${isSwimming ? 'Бассейн 2' : 'Поле 2'}`
                  : isTr
                  ? `${th.coachLabel || 'Koç'} Ahmet · ${th.mockLocation || 'Pitch 2'}`
                  : isRu
                  ? `${isSwimming ? 'Инструктор' : 'Тренер'} Ахмет · ${isSwimming ? 'Бассейн 2' : 'Поле 2'}`
                  : `${isSwimming ? 'Instructor' : 'Coach'} Ahmet · ${th.mockLocation || (isSwimming ? 'Pool 2' : 'Pitch 2')}`}
              </span>
              <Button kind="primary" size="sm" onClick={onStart} icon="arrow">
                {nxTxt2(lang, 'Başla', 'Start', 'Начать')}
              </Button>
            </div>
          </Card>
        ) : homeErrors.nextSession ? (
          <Card style={{ textAlign:'center', padding:'22px 18px',
            background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
              {homeErrors.nextSession}
            </div>
          </Card>
        ) : nextSession ? (
          <Card style={{ padding: 0, overflow:'hidden' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 12, padding: '14px 16px 12px' }}>
              <div style={{ width: 6, height: 36, borderRadius: 3,
                background: nextSession.type === 'match' && !isSwimming ? '#FFB800' : 'var(--nx-accent)', flexShrink:0 }}/>
              <div style={{ flex: 1 }}>
                <Label>{nextSession.date === new Date().toISOString().slice(0,10)
                  ? nxTxt2(lang, 'Bugün · ', 'Today · ', 'Сегодня · ') + nextSession.time
                  : nextSession.date + (nextSession.time ? ' · ' + nextSession.time : '')}</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 18,
                  textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop: 2,
                  overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                  {nextSession.title}
                </div>
              </div>
	              <span style={{ fontFamily:'JetBrains Mono', fontSize: 10,
	                color: nextSession.type === 'match' && !isSwimming ? '#FFB800' : 'var(--nx-accent)',
	                flexShrink:0, letterSpacing:'0.08em', textTransform:'uppercase' }}>
	                {nextSession.type === 'match' && !isSwimming
	                  ? nxTxt2(lang, 'Maç', 'Match', 'Матч')
	                  : nxTxt2(lang, 'Seans', 'Session', 'Занятие')}
	              </span>
            </div>
            {(nextSession.coachName || nextSession.location) && (
              <div style={{ display:'flex', padding: '10px 16px',
                borderTop:'1px solid rgba(255,255,255,0.06)', background:'rgba(255,255,255,0.015)' }}>
                <span style={{ fontFamily:'Manrope', fontSize: 12, color:'#B8B8B8' }}>
                  {[nextSession.coachName && nxTxt2(lang, `${th.coachLabel || 'Koç'} `, `${isSwimming ? 'Instructor' : 'Coach'} `, `${isSwimming ? 'Инструктор' : 'Тренер'} `) + nextSession.coachName,
                    nextSession.location].filter(Boolean).join(' · ')}
                </span>
              </div>
            )}
          </Card>
        ) : (
          <Card>
            <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
              <div style={{ width: 6, height: 36, borderRadius: 3, background:'#4F8DFF', flexShrink: 0 }}/>
              <div style={{ flex: 1 }}>
                <Label>{nxTxt2(lang, 'Bugünkü seans', "Today's session", 'Сегодняшний сеанс')}</Label>
                <div style={{ fontFamily:'Manrope', fontSize: 13, color:'#7A7A7A', marginTop: 4 }}>
                  {isTr
                    ? `${th.coachLabel || 'Koç'} programı oluşturduktan sonra burada görünecek.`
                    : isRu
                    ? 'Появится здесь, когда тренер создаст расписание.'
                    : 'Will appear here once your coach sets up the schedule.'}
                </div>
              </div>
            </div>
          </Card>
        )}
      </div>

      {/* Quick actions — 2x2 grid */}
      <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
        <SectionHead title={nxTxt2(lang, 'Hızlı erişim', 'Quick actions', 'Быстрый доступ')}/>
        <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
          <QuickAction icon="trophy" accent
            label={isMock ? nxTxt2(lang, th.sessionStartLabel || 'Antrenmana başla', isSwimming ? 'Start session' : 'Start training', isSwimming ? 'Начать сеанс' : 'Начать тренировку') : nxTxt2(lang, 'Yaklaşan Seans', 'Upcoming Session', 'Предстоящий сеанс')}
            sub={isMock ? nxTxt2(lang, `Bugünkü ${th.drillLabel || 'drill'}`, isSwimming ? "Today's technique work" : "Today's drill", isSwimming ? 'Сегодняшняя техника' : 'Сегодняшнее упражнение') : (nextSession ? nextSession.date : nxTxt2(lang, 'Program', 'Schedule', 'Расписание'))}
            onClick={isMock ? onStart : () => nextSession ? setOpenSession(nextSession) : onTab('training')}/>
          <QuickAction icon="chart"
            label={nxTxt2(lang, 'Gelişimimi gör', 'View progress', 'Мой прогресс')}
            sub={nxTxt2(lang, 'Stat & form', 'Stats & form', 'Статистика и форма')}
            onClick={() => onTab('profile')}/>
          <QuickAction icon="lightning"
            label={nxTxt2(lang, th.drillLibLabel || 'Drill kütüphanesi', isSwimming ? 'Technique library' : 'Drill library', isSwimming ? 'Библиотека техники' : 'Библиотека упражнений')}
            sub={isMock ? nxTxt2(lang, `24 ${th.drillLabel || 'drill'}`, isSwimming ? '24 technique works' : '24 drills', isSwimming ? '24 технические работы' : '24 упражнения') : nxTxt2(lang, 'Yakında', 'Coming soon', 'Скоро')}
            onClick={isMock ? () => onTab('training') : () => setOpenPracticeInfo(true)}/>
          <QuickAction icon="medal"
            label={t.achievements}
            sub={isMock ? '14 / 32' : null}
            onClick={() => onTab('achievements')}/>
        </div>
      </div>

      {/* Weekly challenge / real weekly progress */}
      <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
        <SectionHead title={isMock ? nxTxt2(lang, 'Haftalık görev', 'Weekly challenge', 'Задание недели') : nxTxt2(lang, 'Haftalık gelişim', 'Weekly progress', 'Недельный прогресс')}/>
        <div style={{ padding:'0 20px' }}>
          {isMock ? (
          <Card>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 12 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 18,
                  textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff' }}>
                  {nxTxt2(lang, `5 ${th.trainingLabel?.toLowerCase?.() || 'antrenman'} tamamla`, 'Complete 5 sessions', 'Завершить 5 занятий')}
                </div>
                <div style={{ fontFamily:'Manrope', fontSize: 12, color:'#B8B8B8', marginTop: 4 }}>
                  {nxTxt2(lang, 'Bu haftayı tam katılımla bitir.', 'Finish the week with full attendance.', 'Завершить неделю с полной посещаемостью.')}
                </div>
              </div>
              <div style={{ textAlign:'right', flexShrink: 0 }}>
                <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:isSwimming ? 'var(--nx-accent)' : '#FFB800' }}>+300 XP</span>
                <div style={{ fontFamily:'JetBrains Mono', fontSize: 10, color:'#7A7A7A', marginTop: 2 }}>
                  {nxTxt2(lang, '2 gün kaldı', '2 days left', 'Осталось 2 дня')}
                </div>
              </div>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
              marginTop: 14, marginBottom: 6 }}>
              <span style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 10,
                letterSpacing:'0.14em', textTransform:'uppercase', color:'#7A7A7A' }}>
                {nxTxt2(lang, 'İlerleme', 'Progress', 'Прогресс')}
              </span>
              <span style={{ fontFamily:'JetBrains Mono', fontSize: 11, color:'#fff' }}>3 / 5</span>
            </div>
            <div style={{ height: 5, borderRadius: 3, background:'#242424', overflow:'hidden' }}>
              <div style={{ height:'100%', width:'60%', background:isSwimming ? 'var(--nx-accent)' : '#FFB800', borderRadius: 3 }}/>
            </div>
          </Card>
        ) : weeklyLoading ? (
          <Card>
            <div style={{ display:'flex', justifyContent:'center', padding:'18px 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>
          </Card>
        ) : homeErrors.weekly ? (
          <Card style={{ background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
            <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>{homeErrors.weekly}</div>
          </Card>
        ) : latestWeekly ? (
          <Card>
            <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
              <div style={{ width:36, height:36, borderRadius:10, flexShrink:0,
                background:isSwimming ? 'var(--nx-accent-soft)' : 'rgba(255,184,0,0.08)', border:isSwimming ? '1px solid var(--nx-accent-glow)' : '1px solid rgba(255,184,0,0.20)',
                display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Ico name="trophy" size={18} style={{ color:isSwimming ? 'var(--nx-accent)' : '#FFB800' }}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13, color:'#fff' }}>
                  {latestWeekly.weekStart} · +{latestWeekly.weeklyXp || 0} XP
                </div>
                <div style={{ fontFamily:'Manrope', fontSize:12, color:'#7A7A7A', marginTop:3 }}>
                  {isTr
                    ? `Katılım ${latestWeekly.attendanceAttended || 0}/${latestWeekly.attendanceTotal || 0} · Çaba ${latestWeekly.effortRating || '–'} · Disiplin ${latestWeekly.disciplineRating || '–'} · Gelişim ${latestWeekly.progressRating || '–'}`
                    : isRu
                    ? `Посещаемость ${latestWeekly.attendanceAttended || 0}/${latestWeekly.attendanceTotal || 0} · Старание ${latestWeekly.effortRating || '–'} · Дисциплина ${latestWeekly.disciplineRating || '–'} · Прогресс ${latestWeekly.progressRating || '–'}`
                    : `Attendance ${latestWeekly.attendanceAttended || 0}/${latestWeekly.attendanceTotal || 0} · Effort ${latestWeekly.effortRating || '–'} · Discipline ${latestWeekly.disciplineRating || '–'} · Progress ${latestWeekly.progressRating || '–'}`}
                </div>
                {latestWeekly.coachNote && (
                  <div style={{ fontFamily:'Manrope', fontSize:12, color:'#B8B8B8', marginTop:8, lineHeight:1.45 }}>
                    {latestWeekly.coachNote}
                  </div>
                )}
              </div>
            </div>
          </Card>
        ) : (
          <Card>
            <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
              <div style={{ width:36, height:36, borderRadius:10, flexShrink:0,
                background:isSwimming ? 'var(--nx-accent-soft)' : 'rgba(255,184,0,0.08)', border:isSwimming ? '1px solid var(--nx-accent-glow)' : '1px solid rgba(255,184,0,0.20)',
                display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Ico name="trophy" size={18} style={{ color:isSwimming ? 'var(--nx-accent)' : '#FFB800' }}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13, color:'#fff' }}>
                  {nxTxt2(lang, 'Henüz haftalık gelişim raporu yok.', 'No weekly progress report yet.', 'Недельного отчёта о прогрессе пока нет.')}
                </div>
                <div style={{ fontFamily:'Manrope', fontSize:12, color:'#7A7A7A', marginTop:3 }}>
                  {isTr
                    ? 'XP koçun haftalık raporuyla otomatik hesaplanır.'
                    : isRu
                    ? 'XP автоматически рассчитывается по недельным отчётам тренера.'
                    : 'XP is calculated automatically from coach weekly reports.'}
                </div>
              </div>
            </div>
          </Card>
        )}
        </div>
      </div>

      {/* Mini leaderboard */}
      <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
        <SectionHead title={t.leaderboard}
          action={t.viewAll} onAction={onLeaderboard}/>
        <div style={{ padding:'0 20px' }}>
          <Card style={{ padding: 6 }}>
          {isMock ? (
            [
              { rank:1, name:isSwimming ? 'Deniz K.' : 'Mert K.', xp:4280, you:false, tier: tierFor(4280) },
              { rank:2, name:isSwimming ? 'Yeliz K.' : 'Efe Y.',  xp:3420, you:true,  tier: tierFor(3420) },
              { rank:3, name:isSwimming ? 'Ece A.' : 'Burak A.', xp:3105, you:false, tier: tierFor(3105) },
            ].map((p) => (
              <div key={p.rank} style={{
                display:'flex', alignItems:'center', gap: 12, padding: '10px 12px',
                borderRadius: 10,
                background: p.you ? 'var(--nx-accent-soft)' : 'transparent',
                border: p.you ? '1px solid var(--nx-accent-glow)' : '1px solid transparent',
              }}>
                <span style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 18,
                  color: p.rank===1 ? (isSwimming ? 'var(--nx-accent)' : '#FFB800') : '#7A7A7A', width: 22, textAlign:'center' }}>
                  {p.rank}
                </span>
                <Avatar initials={p.name.split(' ').map(s=>s[0]).join('')} size={32} ring={p.tier.color}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 13,
                    color: p.you ? 'var(--nx-accent)' : '#fff' }}>
                    {p.name} {p.you && <span style={{ fontSize: 10, color:'var(--nx-accent)', marginLeft: 4 }}>· {nxTxt2(lang, 'Sen', 'You', 'Вы')}</span>}
                  </div>
                  <div style={{ fontFamily:'JetBrains Mono', fontSize: 10, color:'#7A7A7A' }}>
                    {isSwimming ? (th.positionLabel || 'Stil') : 'U16 · CAM'}
                  </div>
                </div>
                <span style={{ fontFamily:'JetBrains Mono', fontSize: 12, color:'#fff' }}>{p.xp.toLocaleString()}</span>
              </div>
            ))
	          ) : !profile.teamId ? (
	            <div style={{ padding:'20px 12px', textAlign:'center',
	              fontFamily:'Manrope', fontSize:13, color:'#5A5A5A', lineHeight:1.5 }}>
	              {nxTxt2(lang, 'Henüz bir takıma atanmadınız.', 'You are not assigned to a team yet.', isSwimming ? 'Вы ещё не назначены в группу.' : 'Вы ещё не назначены в команду.')}
	            </div>
	          ) : homeErrors.leaderboard ? (
	            <div style={{ padding:'20px 12px', textAlign:'center',
	              fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
	              {homeErrors.leaderboard}
            </div>
          ) : miniBoard.length === 0 ? (
            <div style={{ padding:'20px 12px', textAlign:'center',
              fontFamily:'Manrope', fontSize:13, color:'#5A5A5A' }}>
              {nxTxt2(lang, 'Henüz sıralama yok.', 'No rankings yet.', 'Рейтинга пока нет.')}
            </div>
          ) : (
            miniBoard.map((p, i) => {
              const isMe   = p.uid === profile.uid;
              const tier   = tierFor(p.xp);
              const ini    = (p.name || '').split(' ').map(s => s[0]).join('').slice(0, 2).toUpperCase() || '??';
              return (
                <div key={p.uid} style={{
                  display:'flex', alignItems:'center', gap: 12, padding: '10px 12px',
                  borderRadius: 10,
                  background: isMe ? 'var(--nx-accent-soft)' : 'transparent',
                  border: isMe ? '1px solid var(--nx-accent-glow)' : '1px solid transparent',
                }}>
                  <span style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 18,
                    color: i === 0 ? (isSwimming ? 'var(--nx-accent)' : '#FFB800') : '#7A7A7A', width: 22, textAlign:'center' }}>
                    {i + 1}
                  </span>
	                  <Avatar initials={ini} size={32} ring={tier.color} avatarId={p.avatarId}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 13,
                      color: isMe ? 'var(--nx-accent)' : '#fff',
                      whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                      {p.name}{isMe && <span style={{ fontSize:10, color:'var(--nx-accent)', marginLeft:4 }}>· {nxTxt2(lang, 'Sen', 'You', 'Вы')}</span>}
                    </div>
                    <div style={{ fontFamily:'JetBrains Mono', fontSize: 10, color:'#7A7A7A' }}>
                      {tier.label}
                    </div>
                  </div>
                  <span style={{ fontFamily:'JetBrains Mono', fontSize: 12, color:'#fff' }}>
                    {p.xp.toLocaleString()}
                  </span>
                </div>
              );
            })
          )}
          </Card>
        </div>
      </div>
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// PARENT DASHBOARD — structured, NOT gamified
// ────────────────────────────────────────────────────────────
// ────────────────────────────────────────────────────────────
// MEDIA DATA + DETAIL SCREEN
// ────────────────────────────────────────────────────────────
const MEDIA_ITEMS = [
  { id:'m1', kind:'video', duration:'01:24', tint:'linear-gradient(135deg,#0E1A12,#050B07)',
    label:{ tr:'Bitiricilik · Antrenman', en:'Finishing · Training' }, date:{ tr:'18 Nis', en:'Apr 18' } },
  { id:'m2', kind:'photo', tint:'linear-gradient(135deg,#1a1a1a,#0a0a0a)',
    label:{ tr:'Maç fotoğrafı', en:'Match photo' }, date:{ tr:'15 Nis', en:'Apr 15' } },
  { id:'m3', kind:'photo', tint:'linear-gradient(135deg,#1f1f1f,#0c0c0c)',
    label:{ tr:'Takım antrenmanı', en:'Team training' }, date:{ tr:'12 Nis', en:'Apr 12' } },
];

const MediaDetailScreen = ({ item, lang, onBack }) => {
  const langKey = nxLangKey2(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const swimLabels = {
    m1: { tr:'Serbest stil · Seans', en:'Freestyle · Session', ru:'Вольный стиль · Занятие' },
    m2: { tr:'Havuz fotoğrafı', en:'Pool photo', ru:'Фото бассейна' },
    m3: { tr:'Grup seansı', en:'Group session', ru:'Групповое занятие' },
  };
  const ruLabels = {
    m1: 'Завершение · Тренировка',
    m2: 'Фото матча',
    m3: 'Командная тренировка',
  };
  const label = (isSwimming ? swimLabels[item.id]?.[langKey] : ruLabels[item.id] && isRu ? ruLabels[item.id] : null) || item.label[langKey] || item.label.en;
  const date  = item.date[langKey]  || item.date.en;
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:24 }}>
      <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 }}>
          <Label>{item.kind === 'video' ? nxTxt2(lang, 'Video', 'Video', 'Видео') : nxTxt2(lang, 'Fotoğraf', 'Photo', 'Фото')}</Label>
          <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:14, color:'#fff', marginTop:2 }}>{label}</div>
        </div>
        <Label>{date}</Label>
      </div>

      {/* Thumbnail full-width */}
      <div style={{ margin:'0 20px', borderRadius:16, aspectRatio:'16/9', position:'relative', overflow:'hidden',
        background:item.tint, border:'1px solid rgba(255,255,255,0.06)' }}>
        <svg viewBox="0 0 320 180" style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.5 }}>
          <rect x="8" y="8" width="304" height="164" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="1"/>
          <line x1="160" y1="8" x2="160" y2="172" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
          <circle cx="160" cy="90" r="28" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
          <rect x="8" y="52" width="44" height="76" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
          <rect x="268" y="52" width="44" height="76" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
        </svg>
        {item.kind === 'video' && (
          <>
            <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <div style={{ width:52, height:52, borderRadius:'50%',
                background:'rgba(0,0,0,0.55)', border:'1px solid rgba(255,255,255,0.35)',
                display:'flex', alignItems:'center', justifyContent:'center' }}>
                <div style={{ width:0, height:0, marginLeft:4,
                  borderTop:'9px solid transparent', borderBottom:'9px solid transparent',
                  borderLeft:'15px solid #fff' }}/>
              </div>
            </div>
            <span style={{ position:'absolute', bottom:10, right:10,
              fontFamily:'JetBrains Mono', fontSize:10, color:'#fff',
              background:'rgba(0,0,0,0.65)', padding:'3px 7px', borderRadius:5 }}>{item.duration}</span>
          </>
        )}
      </div>

      {/* Honest coming-soon state */}
      <div style={{ padding:'0 20px' }}>
        <Card style={{ padding:20, display:'flex', flexDirection:'column', alignItems:'center',
          textAlign:'center', gap:10 }}>
          <div style={{ width:44, height:44, borderRadius:14,
            background:'rgba(79,141,255,0.10)', border:'1px solid rgba(79,141,255,0.25)',
            display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Ico name="clock" size={22} style={{ color:'#4F8DFF' }}/>
          </div>
          <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:14, color:'#fff' }}>
            {item.kind === 'video'
              ? nxTxt2(lang, 'Video yakında', 'Video coming soon', 'Видео скоро будет доступно')
              : nxTxt2(lang, 'Fotoğraf yakında', 'Photo coming soon', 'Фото скоро будет доступно')}
          </div>
          <div style={{ fontFamily:'Manrope', fontSize:12, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
            {item.kind === 'video'
              ? nxTxt2(lang, `${th.coachLabel || 'Koç'} videoları sistem lansmanından sonra otomatik olarak senkronize edilecek.`, `${isSwimming ? 'Instructor' : 'Coach'} video uploads will sync automatically after system launch.`, `Видео от ${isSwimming ? 'инструктора' : 'тренера'} будут автоматически синхронизироваться после запуска системы.`)
              : nxTxt2(lang, `${th.trainingLabel || 'Antrenman'} fotoğrafları otomatik olarak bu galeriye eklenir.`, 'Training photos will be added to this gallery automatically.', 'Фотографии занятий будут автоматически добавляться в эту галерею.')}
          </div>
        </Card>
      </div>
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// PARENT REPORT DATA
// ────────────────────────────────────────────────────────────
const PARENT_REPORTS = [
  { id:'W19', attendance:[1,1,1,0,1,0,0], sessionCount:'4/4', xpGained:380,
    stats:{ attendance:'+8%', effort:'+12%', form:'+3%' } },
  { id:'W18', attendance:[1,0,1,1,1,0,0], sessionCount:'3/4', xpGained:260,
    stats:{ attendance:'+5%', effort:'+7%',  form:'+6%' } },
  { id:'W17', attendance:[1,1,1,1,0,0,0], sessionCount:'4/4', xpGained:310,
    stats:{ attendance:'+2%', effort:'+9%',  form:'+1%' } },
];

const REPORT_WEEK = {
  W19:{ tr:'Hafta 19 · 13–19 Mayıs', en:'Week 19 · May 13–19', ru:'Неделя 19 · 13–19 мая' },
  W18:{ tr:'Hafta 18 · 6–12 Mayıs',  en:'Week 18 · May 6–12', ru:'Неделя 18 · 6–12 мая' },
  W17:{ tr:'Hafta 17 · 29 Nis–5 May',en:'Week 17 · Apr 29–May 5', ru:'Неделя 17 · 29 апр.–5 мая' },
};

const REPORT_COACH_NOTE = {
  W19:{ tr:'Efe bu hafta bitiricilik çalışmasında belirgin gelişme gösterdi. Pas seçiminde daha sakin.', en:'Efe showed clear progress in finishing this week. Calmer with passing decisions.' },
  W18:{ tr:'Sprint sonrası toparlanma ve savunma geçişleri üzerine odaklandık. İyi ilerleme.', en:'Focused on sprint recovery and defensive transitions. Good improvement overall.' },
  W17:{ tr:'Pas üçgenleri üzerine çalışıldı. Takım koordinasyonu gelişiyor, hız artıyor.', en:'Triangle passing drills in focus. Team coordination improving and pace increasing.' },
};

const swimmingReportNote = (id) => ({
  W19: 'Efe bu hafta serbest stil tekniğinde gelişim gösterdi. Nefes kontrolünde daha sakin.',
  W18: 'Sprint sonrası toparlanma ve dönüş çalışmasına odaklandık. İyi ilerleme.',
  W17: 'Nefes kontrolü ve su içi koordinasyon üzerine çalışıldı. Stil ritmi gelişiyor.',
}[id] || '');

// ────────────────────────────────────────────────────────────
// REAL REPORT PRINT + DETAIL
// ────────────────────────────────────────────────────────────
const printRealReport = (report, lang) => {
  const langKey = nxLangKey2(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const playerName = report.playerName || '';
  const title      = report.title || nxTxt2(lang, 'Haftalık Gelişim Raporu', 'Weekly Progress Report', 'Недельный отчёт о прогрессе');
  const coachName  = report.createdByName || report.coachName || nxTxt2(lang, th.coachLabel || 'Koç', isSwimming ? 'Instructor' : 'Coach', isSwimming ? 'Инструктор' : 'Тренер');
  const att    = report.attendanceCount != null ? String(report.attendanceCount) : `${report.attendanceAttended ?? '–'} / ${report.attendanceTotal ?? '–'}`;
  const effort = (report.effort != null && report.effort !== '–') ? String(report.effort) : (report.effortRating != null ? String(report.effortRating) : '–');
  const form   = (report.form   != null && report.form   !== '–') ? String(report.form)   : (report.progressRating != null ? String(report.progressRating) : '–');
  const xp     = report.xpGained != null ? `+${report.xpGained}` : (report.weeklyXp != null ? `+${report.weeklyXp}` : null);
  const note   = report.coachNote || '';
  const dateStr = report.createdAt?.seconds
    ? new Date(report.createdAt.seconds * 1000).toLocaleDateString(isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB')
    : '';

  const w = window.open('', '_blank');
  if (!w) return;
  w.document.write(`<!DOCTYPE html>
<html lang="${lang}"><head><meta charset="utf-8">
<title>ATHLORYX · ${playerName} · ${title}</title>
<style>
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:#111;background:#fff;padding:48px 56px;max-width:640px;margin:0 auto;}
  h1{font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;margin:0 0 4px;}
  .label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#888;margin-bottom:4px;}
  .stat{font-size:26px;font-weight:800;color:#00a84a;margin-top:4px;}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:20px 0;}
  .card{border:1px solid #e8e8e8;border-radius:10px;padding:14px;}
  hr{border:none;border-top:1px solid #e8e8e8;margin:22px 0;}
  @media print{body{padding:24px 32px;}}
</style></head><body>
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid #111;">
  <div>
    <div class="label" style="margin-bottom:8px;">ATHLORYX · ACADEMY REPORT</div>
    <h1>${playerName}</h1>
    <div style="font-size:13px;color:#666;margin-top:6px;">${title}</div>
  </div>
  <div style="text-align:right;">
    <div style="font-size:13px;font-weight:700;">${coachName}</div>
    <div style="font-size:12px;color:#666;margin-top:4px;">${nxTxt2(lang, 'Performans Raporu', 'Performance Report', 'Отчёт о результатах')}</div>
    ${dateStr ? `<div style="font-size:11px;color:#aaa;margin-top:4px;">${dateStr}</div>` : ''}
  </div>
</div>
<div class="grid3">
  <div class="card"><div class="label">${nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость')}</div><div class="stat">${att}</div></div>
  <div class="card"><div class="label">${nxTxt2(lang, 'Çaba', 'Effort', 'Старание')}</div><div class="stat">${effort}</div></div>
  <div class="card"><div class="label">${nxTxt2(lang, 'Form', 'Form', 'Форма')}</div><div class="stat">${form}</div></div>
</div>
${xp ? `<div class="card" style="margin-bottom:20px;"><div class="label">XP</div><div class="stat">${xp}</div></div>` : ''}
<hr>
${note ? `<div style="margin-bottom:20px;"><div class="label">${nxTxt2(lang, `${th.coachLabel || 'Koç'} notu`, `${isSwimming ? 'Instructor' : 'Coach'} note`, `${isSwimming ? 'Инструктор' : 'Тренер'} заметка`)}</div><div style="font-size:14px;line-height:1.55;color:#333;margin-top:8px;">${note}</div></div><hr>` : ''}
<div style="font-size:11px;color:#bbb;text-align:center;">ATHLORYX · ${nxTxt2(lang, th.academyLabel || (isSwimming ? 'Yüzme Akademisi' : 'Futbol Akademisi'), isSwimming ? 'Swimming Academy' : 'Football Academy', isSwimming ? 'Академия плавания' : 'Футбольная академия')} · ${new Date().toLocaleDateString(isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB')}</div>
<script>setTimeout(()=>{window.print();},500);</script>
</body></html>`);
  w.document.close();
};

const RealReportDetailScreen = ({ report, lang, onBack }) => {
  const langKey = nxLangKey2(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const title     = report.title || nxTxt2(lang, 'Haftalık gelişim raporu', 'Weekly progress report', 'Недельный отчёт о прогрессе');
  const coachName = report.createdByName || report.coachName || nxTxt2(lang, th.coachLabel || 'Koç', isSwimming ? 'Instructor' : 'Coach', isSwimming ? 'Инструктор' : 'Тренер');
  const coachInit = coachName.split(' ').map(s => s[0]).join('').toUpperCase().slice(0, 2) || 'C?';
  const dateStr   = report.weekStart && report.weekEnd
    ? `${report.weekStart} → ${report.weekEnd}`
    : report.createdAt?.seconds
    ? new Date(report.createdAt.seconds * 1000).toLocaleDateString(
        isRu ? 'ru-RU' : isTr ? 'tr-TR' : 'en-GB', { year:'numeric', month:'long', day:'numeric' })
    : '';

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:24 }}>
      {/* Header */}
      <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 }}>
          {dateStr && <Label>{dateStr}</Label>}
          <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:20,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop:2 }}>
            {title}
          </div>
        </div>
      </div>

      {/* Stats grid */}
      <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
        {[
          [nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость'), report.attendanceCount != null ? String(report.attendanceCount) : `${report.attendanceAttended ?? '–'} / ${report.attendanceTotal ?? '–'}`],
          [nxTxt2(lang, 'Çaba', 'Effort', 'Старание'),        report.effort          != null && report.effort !== '–' ? String(report.effort) : (report.effortRating != null ? String(report.effortRating) : '–')],
          [nxTxt2(lang, 'Gelişim', 'Progress', 'Прогресс'),   report.form            != null && report.form   !== '–' ? String(report.form)   : (report.progressRating != null ? String(report.progressRating) : '–')],
        ].map(([l, v]) => (
          <div key={l} style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
            borderRadius:12, padding:12 }}>
            <Label>{l}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:22,
              color:'var(--nx-accent)', marginTop:4 }}>{v}</div>
          </div>
        ))}
      </div>

      {/* XP */}
      {(report.xpGained != null || report.weeklyXp != null) && (
        <div style={{ padding:'0 20px' }}>
          <Card style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 16px' }}>
            <Label>{nxTxt2(lang, 'Kazanılan XP', 'XP earned', 'Получено XP')}</Label>
            <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize:26, color:'var(--nx-accent)' }}>+{report.xpGained ?? report.weeklyXp}</span>
          </Card>
        </div>
      )}

      {/* Coach note */}
      {report.coachNote && (
        <div style={{ padding:'0 20px' }}>
          <Card>
            <Label>{nxTxt2(lang, `${th.coachLabel || 'Koç'} notu`, `${isSwimming ? 'Instructor' : 'Coach'} note`, `${isSwimming ? 'Инструктор' : 'Тренер'} заметка`)}</Label>
            <div style={{ display:'flex', gap:12, marginTop:8 }}>
              <Avatar initials={coachInit} size={36} avatarId="coach"/>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:12, color:'#fff', marginBottom:4 }}>
                  {coachName}
                  {dateStr && <span style={{ color:'#7A7A7A', fontWeight:500 }}> · {dateStr}</span>}
                </div>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', lineHeight:1.45 }}>
                  {report.coachNote}
                </div>
              </div>
            </div>
          </Card>
        </div>
      )}

      {/* Print */}
      <div style={{ padding:'0 20px' }}>
        <Button kind="primary" full onClick={() => printRealReport(report, lang)}>
          {nxTxt2(lang, 'PDF olarak kaydet', 'Save as PDF', 'Сохранить как PDF')}
        </Button>
      </div>
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// REPORT DETAIL + PRINT (demo / mock)
// ────────────────────────────────────────────────────────────
const printReport = (report, child, lang) => {
  const langKey = nxLangKey2(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const weekLabel = (REPORT_WEEK[report.id] || {})[langKey] || report.id;
  const coachNote = isSwimming && (isTr || isRu)
    ? (isRu
      ? ({
          W19: 'Эфе на этой неделе заметно улучшил технику вольного стиля. В дыхании стал спокойнее.',
          W18: 'После спринта мы работали над восстановлением и поворотами. Хороший прогресс.',
          W17: 'Работали над контролем дыхания и координацией в воде. Ритм стиля улучшается.',
        }[report.id] || '')
      : swimmingReportNote(report.id))
    : ((REPORT_COACH_NOTE[report.id] || {})[langKey] || '');
  const attDots = report.attendance
    .map(v => `<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:${v?'#00a84a':'#ddd'};margin:0 3px;"></span>`)
    .join('');
  const strengths = isTr
    ? (isSwimming ? ['Su içi koordinasyon','Hız ve sprint toparlanması','Stil ritmi'] : ['Driblingde top kontrolü','Hız ve sprint toparlanması','Top istemede pozisyon'])
    : isRu
    ? (isSwimming ? ['Координация в воде','Скорость и восстановление после спринта','Ритм стиля'] : ['Контроль мяча в дриблинге','Скорость и восстановление после спринта','Выбор позиции для получения мяча'])
    : ['Ball control on the dribble','Pace & sprint recovery','Positioning when receiving'];
  const improvements = isTr
    ? (isSwimming ? ['Dönüş tekniği','Kick tekniği'] : ['Savunma geçişlerinde geri dönüş','Sol ayakla bitiricilik'])
    : isRu
    ? (isSwimming ? ['Техника поворота','Техника работы ногами'] : ['Возврат в оборону','Завершение слабой ногой'])
    : ['Tracking back in defense','Finishing with weak foot'];

  const w = window.open('', '_blank');
  if (!w) return;
  w.document.write(`<!DOCTYPE html>
<html lang="${lang}"><head><meta charset="utf-8">
<title>ATHLORYX · ${child.name} · ${weekLabel}</title>
<style>
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:#111;background:#fff;padding:48px 56px;max-width:640px;margin:0 auto;}
  h1{font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;margin:0 0 4px;}
  .label{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#888;margin-bottom:4px;}
  .stat{font-size:26px;font-weight:800;color:#00a84a;margin-top:4px;}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:20px 0;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .card{border:1px solid #e8e8e8;border-radius:10px;padding:14px;}
  hr{border:none;border-top:1px solid #e8e8e8;margin:22px 0;}
  li{font-size:13px;margin-bottom:6px;list-style:none;padding-left:18px;position:relative;line-height:1.45;}
  @media print{body{padding:24px 32px;}}
</style></head>
<body>
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid #111;">
  <div>
    <div class="label" style="margin-bottom:8px;">ATHLORYX · ACADEMY REPORT</div>
    <h1>${child.name}</h1>
    <div style="font-size:13px;color:#666;margin-top:6px;">${[child.age, child.position, child.club || th.academyLabel || 'Galatasaray Akademi'].filter(Boolean).join(' · ')}</div>
  </div>
  <div style="text-align:right;">
    <div style="font-size:13px;font-weight:700;">${weekLabel}</div>
    <div style="font-size:12px;color:#666;margin-top:4px;">${nxTxt2(lang, 'Haftalık Performans Raporu', 'Weekly Performance Report', 'Недельный отчёт о результатах')}</div>
    <div style="font-size:11px;color:#aaa;margin-top:4px;">${isTr?'XP':'XP'} +${report.xpGained}</div>
  </div>
</div>
<div class="grid3">
  <div class="card"><div class="label">${nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость')}</div><div class="stat">${report.stats.attendance}</div></div>
  <div class="card"><div class="label">${nxTxt2(lang, 'Çaba', 'Effort', 'Старание')}</div><div class="stat">${report.stats.effort}</div></div>
  <div class="card"><div class="label">${nxTxt2(lang, 'Form', 'Form', 'Форма')}</div><div class="stat">${report.stats.form}</div></div>
</div>
<div style="margin-bottom:20px;">
  <div class="label">${nxTxt2(lang, 'Seans', 'Sessions', 'Занятия')} · ${report.sessionCount}</div>
  <div style="margin-top:8px;">${attDots}</div>
</div>
<hr>
<div style="margin-bottom:20px;">
  <div class="label">${nxTxt2(lang, `${th.coachLabel || 'Koç'} notu`, `${isSwimming ? 'Instructor' : 'Coach'} note`, `${isSwimming ? 'Инструктор' : 'Тренер'} заметка`)}</div>
  <div style="font-size:14px;line-height:1.55;color:#333;margin-top:8px;">${coachNote}</div>
</div>
<hr>
<div class="grid2">
  <div>
    <div class="label">${nxTxt2(lang, 'Güçlü yönler', 'Strengths', 'Сильные стороны')}</div>
    <ul style="margin-top:8px;">${strengths.map(s=>`<li><span style="position:absolute;left:0;color:#00a84a;font-weight:700;">✓</span>${s}</li>`).join('')}</ul>
  </div>
  <div>
    <div class="label">${nxTxt2(lang, 'Geliştirilecek', 'Improve', 'Развивать')}</div>
    <ul style="margin-top:8px;">${improvements.map(s=>`<li><span style="position:absolute;left:0;color:#d48800;font-weight:700;">→</span>${s}</li>`).join('')}</ul>
  </div>
</div>
<hr>
<div style="font-size:11px;color:#bbb;text-align:center;">ATHLORYX · ${nxTxt2(lang, th.academyLabel || (isSwimming ? 'Yüzme Akademisi' : 'Futbol Akademisi'), isSwimming ? 'Swimming Academy' : 'Football Academy', isSwimming ? 'Академия плавания' : 'Футбольная академия')} · ${new Date().toLocaleDateString(isRu?'ru-RU':isTr?'tr-TR':'en-GB')}</div>
<script>setTimeout(()=>{window.print();},500);</script>
</body></html>`);
  w.document.close();
};

const ReportDetailScreen = ({ child, lang, onBack }) => {
  const [reportId, setReportId] = useS2('W19');
  const langKey = nxLangKey2(lang);
  const isTr= langKey === 'tr';
  const isRu= langKey === 'ru';
  const th = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme('football') : {});
  const isSwimming = th.sportType === 'swimming';
  const report = PARENT_REPORTS.find(r => r.id === reportId) || PARENT_REPORTS[0];
  const weekLabel = (REPORT_WEEK[report.id] || {})[langKey] || report.id;
  const coachNote = isSwimming && (isTr || isRu)
    ? (isRu
      ? ({
          W19: 'Эфе на этой неделе заметно улучшил технику вольного стиля. В дыхании стал спокойнее.',
          W18: 'После спринта мы работали над восстановлением и поворотами. Хороший прогресс.',
          W17: 'Работали над контролем дыхания и координацией в воде. Ритм стиля улучшается.',
        }[report.id] || '')
      : swimmingReportNote(report.id))
    : ((REPORT_COACH_NOTE[report.id] || {})[langKey] || '');
  const strengths = isTr
    ? (isSwimming ? ['Su içi koordinasyon','Hız ve sprint toparlanması','Stil ritmi'] : ['Driblingde top kontrolü','Hız ve sprint toparlanması','Top istemede pozisyon'])
    : isRu
    ? (isSwimming ? ['Координация в воде','Скорость и восстановление после спринта','Ритм стиля'] : ['Контроль мяча в дриблинге','Скорость и восстановление после спринта','Выбор позиции для получения мяча'])
    : ['Ball control on the dribble','Pace & sprint recovery','Positioning when receiving'];
  const improvements = isTr
    ? (isSwimming ? ['Dönüş tekniği','Kick tekniği'] : ['Savunma geçişlerinde geri dönüş','Sol ayakla bitiricilik'])
    : isRu
    ? (isSwimming ? ['Техника поворота','Техника работы ногами'] : ['Возврат в оборону','Завершение слабой ногой'])
    : ['Tracking back in defense','Finishing with weak foot'];

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:24 }}>
      {/* Header */}
      <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>{weekLabel}</Label>
          <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:20,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', marginTop:2 }}>
            {child.name}
          </div>
        </div>
      </div>

      {/* Week selector */}
      <div style={{ padding:'0 20px', display:'flex', gap:6 }}>
        {PARENT_REPORTS.map(r => (
          <button key={r.id} onClick={() => setReportId(r.id)} style={{
            background: r.id===reportId ? 'var(--nx-accent-soft)' : '#141414',
            border:`1px solid ${r.id===reportId ? 'var(--nx-accent-glow)' : 'rgba(255,255,255,0.06)'}`,
            borderRadius:999, padding:'6px 12px', cursor:'pointer',
            fontFamily:'JetBrains Mono', fontWeight:600, fontSize:10,
            letterSpacing:'0.08em', color: r.id===reportId ? 'var(--nx-accent)' : '#7A7A7A',
          }}>{r.id}</button>
        ))}
      </div>

      {/* Stats */}
      <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
        {[
          [nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость'), report.stats.attendance],
          [nxTxt2(lang, 'Çaba', 'Effort', 'Старание'),        report.stats.effort],
          [nxTxt2(lang, 'Form', 'Form', 'Форма'),          report.stats.form],
        ].map(([l,v]) => (
          <div key={l} style={{ background:'#141414', border:'1px solid rgba(255,255,255,0.06)',
            borderRadius:12, padding:12 }}>
            <Label>{l}</Label>
            <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:22,
              color:'var(--nx-accent)', marginTop:4 }}>{v}</div>
          </div>
        ))}
      </div>

      {/* Attendance bar */}
      <div style={{ padding:'0 20px' }}>
        <Card>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8 }}>
            <Label>{nxTxt2(lang, 'Seans', 'Sessions', 'Занятия')}</Label>
            <span style={{ fontFamily:'JetBrains Mono', fontSize:12, color:'#fff' }}>{report.sessionCount}</span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:4 }}>
            {report.attendance.map((v,i) => (
              <div key={i} style={{ height:6, borderRadius:2, background:v?'var(--nx-accent)':'#242424' }}/>
            ))}
          </div>
          <div style={{ marginTop:16, paddingTop:14, borderTop:'1px solid rgba(255,255,255,0.06)' }}>
            <Label>{nxTxt2(lang, `${th.coachLabel || 'Koç'} notu`, `${isSwimming ? 'Instructor' : 'Coach'} note`, `${isSwimming ? 'Инструктор' : 'Тренер'} заметка`)}</Label>
            <div style={{ display:'flex', gap:12, marginTop:8 }}>
              <Avatar initials={isSwimming ? 'EA' : 'KA'} size={36}/>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:12, color:'#fff', marginBottom:4 }}>
                  {nxTxt2(lang, `${th.coachLabel || 'Koç'} Ahmet`, `${isSwimming ? 'Instructor' : 'Coach'} Ahmet`, `${isSwimming ? 'Инструктор' : 'Тренер'} Ахмет`)}
                  <span style={{ color:'#7A7A7A', fontWeight:500 }}> · {weekLabel.split('·')[1]?.trim()}</span>
                </div>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#B8B8B8', lineHeight:1.45 }}>{coachNote}</div>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Strengths / improvements */}
      <div style={{ padding:'0 20px' }}>
        <Card>
          <Label>{nxTxt2(lang, 'Güçlü yönler', 'Strengths', 'Сильные стороны')}</Label>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:8 }}>
            {strengths
              .map((s,i) => (
                <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                  <div style={{ width:18, height:18, borderRadius:999, flexShrink:0,
                    background:'var(--nx-accent-soft)', border:'1px solid var(--nx-accent-glow)',
                    color:'var(--nx-accent)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Ico name="check" size={11}/>
                  </div>
                  <span style={{ fontFamily:'Manrope', fontSize:13, color:'#fff', lineHeight:1.4 }}>{s}</span>
                </div>
              ))}
          </div>
          <div style={{ height:1, background:'rgba(255,255,255,0.06)', margin:'14px 0' }}/>
          <Label>{nxTxt2(lang, 'Geliştirilecek alanlar', 'Improvement areas', 'Зоны для развития')}</Label>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:8 }}>
            {improvements
              .map((s,i) => (
                <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                  <div style={{ width:18, height:18, borderRadius:999, flexShrink:0,
                    background:isSwimming?'var(--nx-accent-soft)':'rgba(255,184,0,0.10)', border:isSwimming?'1px solid var(--nx-accent-glow)':'1px solid rgba(255,184,0,0.30)',
                    color:isSwimming?'var(--nx-accent)':'#FFB800', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Ico name="arrow" size={11}/>
                  </div>
                  <span style={{ fontFamily:'Manrope', fontSize:13, color:'#fff', lineHeight:1.4 }}>{s}</span>
                </div>
              ))}
          </div>
        </Card>
      </div>

      {/* XP gained */}
      <div style={{ padding:'0 20px' }}>
        <Card style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 16px' }}>
          <Label>{nxTxt2(lang, 'Bu hafta kazanılan XP', 'XP earned this week', 'XP за эту неделю')}</Label>
          <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize:26, color:'var(--nx-accent)' }}>+{report.xpGained}</span>
        </Card>
      </div>

      {/* Save as PDF */}
      <div style={{ padding:'0 20px' }}>
        <Button kind="primary" full onClick={() => printReport(report, child, lang)}>
          {nxTxt2(lang, 'PDF olarak kaydet', 'Save as PDF', 'Сохранить как PDF')}
        </Button>
      </div>
    </div>
  );
};

const ParentDashboardScreen = ({ lang, childCode, profile, onToast }) => {
  const isMock = !profile;
  const langKey = nxLangKey2(lang);
  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 coachWord = nxTxt2(lang, th.coachLabel || 'Koç', isSwimming ? 'Instructor' : 'Coach', isSwimming ? 'Инструктор' : 'Тренер');
  const playerWord = nxTxt2(lang, th.playerLabel || 'Sporcu', isSwimming ? 'Swimmer' : 'Athlete', isSwimming ? 'Пловец' : 'Спортсмен');

  const [childProfile,          setChildProfile]          = useS2(null);
  const [childLoading,          setChildLoading]          = useS2(!isMock && !!profile?.playerUid);
  const [openReport,            setOpenReport]            = useS2(null);
  const [mediaItem,             setMediaItem]             = useS2(null);
  const [parentFeedback,        setParentFeedback]        = useS2([]);
  const [parentFeedbackLoading, setParentFeedbackLoading] = useS2(!isMock && !!profile?.playerUid);
  const [openRealReport,        setOpenRealReport]        = useS2(null);
  const [parentReports,         setParentReports]         = useS2([]);
  const [parentReportsLoading,  setParentReportsLoading]  = useS2(!isMock && !!profile?.playerUid);
  const [childAttendance,       setChildAttendance]       = useS2([]);
  const [childAttLoading,       setChildAttLoading]       = useS2(!isMock && !!profile?.playerUid);
  const [upcomingSessions,      setUpcomingSessions]      = useS2([]);
  const [parentErrors,          setParentErrors]          = useS2({});

  useE2(() => {
    if (isMock || !window.NX || !profile.playerUid) return;
    setChildLoading(true);
    setParentErrors(e => ({ ...e, child:null }));
    window.NX.getUserProfile(profile.playerUid)
      .then(p => setChildProfile(p))
      .catch((err) => {
        console.error('[NX] parent child profile load failed:', err?.code, err?.message, {
          parentUid: profile.uid,
          playerUid: profile.playerUid,
        });
        setChildProfile(null);
        setParentErrors(e => ({ ...e, child: nxTxt2(lang, `${th.playerLabel || 'Sporcu'} profili yüklenemedi.`, `Could not load the ${isSwimming ? 'swimmer' : 'athlete'} profile.`, `Не удалось загрузить профиль: ${playerWord}.`) }));
      })
      .finally(() => setChildLoading(false));
  }, [isMock, profile?.playerUid, lang]);

  useE2(() => {
    if (isMock || !window.NX || !profile?.playerUid) return;
    setParentErrors(e => ({ ...e, feedback:null }));
    const unsub = window.NX.onFeedbackByPlayer(profile.playerUid, entries => {
      const sorted = [...entries].sort((a, b) => {
        const ta = a.sessionDate || '';
        const tb = b.sessionDate || '';
        return tb > ta ? 1 : tb < ta ? -1 : 0;
      });
      setParentFeedback(sorted);
      setParentFeedbackLoading(false);
    }, (err) => {
      console.error('[NX] parent feedback listener failed:', err?.code, err?.message, {
        parentUid: profile.uid,
        playerUid: profile.playerUid,
      });
      setParentFeedbackLoading(false);
      setParentErrors(e => ({ ...e, feedback: nxTxt2(lang, `${th.coachLabel || 'Koç'} notları yüklenemedi.`, `Could not load ${isSwimming ? 'instructor' : 'coach'} feedback.`, `Не удалось загрузить отзывы: ${coachWord}.`) }));
    });
    return () => unsub();
  }, [isMock, profile?.playerUid, lang]);

  useE2(() => {
    if (isMock || !window.NX || !profile?.playerUid) return;
    setParentErrors(e => ({ ...e, reports:null }));
    const reportListener = window.NX.onWeeklyReportsByPlayer || window.NX.onReportsByPlayer;
    const unsub = reportListener(profile.playerUid, 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);
      });
      setParentReports(sorted);
      setParentReportsLoading(false);
    }, (err) => {
      console.error('[NX] parent reports listener failed:', err?.code, err?.message, {
        parentUid: profile.uid,
        playerUid: profile.playerUid,
      });
      setParentReportsLoading(false);
      setParentErrors(e => ({ ...e, reports: nxTxt2(lang, 'Raporlar yüklenemedi.', 'Could not load reports.', 'Не удалось загрузить отчёты.') }));
    });
    return () => unsub();
  }, [isMock, profile?.playerUid, lang]);

  useE2(() => {
    if (isMock || !window.NX || !profile?.playerUid) return;
    setParentErrors(e => ({ ...e, attendance:null }));
    const unsub = window.NX.onAttendanceByPlayer(profile.playerUid, entries => {
      const sorted = [...entries].sort((a, b) => (b.date || '').localeCompare(a.date || ''));
      setChildAttendance(sorted);
      setChildAttLoading(false);
    }, (err) => {
      console.error('[NX] parent attendance listener failed:', err?.code, err?.message, {
        parentUid: profile.uid,
        playerUid: profile.playerUid,
      });
      setChildAttLoading(false);
      setParentErrors(e => ({ ...e, attendance: nxTxt2(lang, 'Katılım geçmişi yüklenemedi.', 'Could not load attendance history.', 'Не удалось загрузить историю посещаемости.') }));
    });
    return () => unsub();
  }, [isMock, profile?.playerUid, lang]);

  // Upcoming sessions for child — subscribe once we know child's academyId
  useE2(() => {
    if (isMock || !window.NX || !childProfile?.academyId) return;
    if (!childProfile.teamId) {
      setUpcomingSessions([]);
      setParentErrors(e => ({ ...e, sessions:null }));
      return;
    }
    const today = new Date().toISOString().slice(0, 10);
    setParentErrors(e => ({ ...e, sessions:null }));
    const unsub = window.NX.onSessionsByTeam(childProfile.academyId, childProfile.teamId, entries => {
      const upcoming = entries
        .filter(s => (s.date || '') >= today)
        .sort((a, b) => {
          const da = (a.date || '') + (a.time || '');
          const db = (b.date || '') + (b.time || '');
          return da > db ? 1 : da < db ? -1 : 0;
        })
        .slice(0, 5);
      setUpcomingSessions(upcoming);
    }, (err) => {
      console.error('[NX] parent sessions listener failed:', err?.code, err?.message, {
        parentUid: profile.uid,
        playerUid: profile.playerUid,
        childAcademyId: childProfile.academyId,
        childTeamId: childProfile.teamId,
      });
      setParentErrors(e => ({ ...e, sessions: nxTxt2(lang, 'Yaklaşan seanslar yüklenemedi.', 'Could not load upcoming sessions.', 'Не удалось загрузить предстоящие занятия.') }));
    });
    return () => unsub();
  }, [isMock, childProfile?.academyId, childProfile?.teamId, lang]);

  // Build child display object from real Firestore data or mock registry
  let child = null;
  if (isMock) {
    const reg = window.CHILD_REGISTRY || {};
    child = reg[childCode] || reg[window.DEFAULT_CHILD_KEY] || {
      name:isSwimming?'EFE YILDIZ':'EFE YILDIZ',
      initials:'EY',
      position:isSwimming?'Serbest stil':'CAM',
      age:isSwimming?'Grup A':'U16',
      ovr:82,
      xp:3420,
      club:isSwimming?(th.academyLabel || 'Yüzme Akademisi'):'Galatasaray Akademi',
      avatarId:'football',
    };
    if (isSwimming) {
      child = {
        ...child,
        position: isRu ? 'Вольный стиль' : 'Serbest stil',
        age: isRu ? 'Группа A' : 'Grup A',
        club: isRu ? 'Академия плавания' : (th.academyLabel || 'Yüzme Akademisi'),
        avatarId: 'swimmer',
      };
    }
  } else if (childProfile) {
    const parts = (childProfile.displayName || '').trim().split(/\s+/);
    child = {
      name:     (childProfile.displayName || profile.linkedPlayerName || '').toUpperCase(),
      initials: parts.map(w => w[0] || '').join('').slice(0, 2).toUpperCase() || '??',
      position: childProfile.positionLabel || childProfile.position || null,
      age:      childProfile.ageGroup  || null,
      xp:       childProfile.xp || 0,
      ovr:      null,
      club:     null,
      avatarId: childProfile.avatarId || null,
    };
  } else if (profile?.linkedPlayerName) {
    const parts = profile.linkedPlayerName.trim().split(/\s+/);
    child = {
      name:     profile.linkedPlayerName.toUpperCase(),
      initials: parts.map(w => w[0] || '').join('').slice(0, 2).toUpperCase() || '??',
      position: null,
      age:      null,
      xp:       null,
      ovr:      null,
      club:     null,
      avatarId: null,
    };
  }

  const tier = (child && child.xp != null) ? tierFor(child.xp) : null;
  const band = (isMock && child && child.ovr != null) ? ovrBand(child.ovr, lang) : null;
  // First name for dynamic coach note text in real mode
  const firstName = child
    ? child.name.split(' ')[0].charAt(0) + child.name.split(' ')[0].slice(1).toLowerCase()
    : '';

  if (openReport && child) {
    return <ReportDetailScreen child={child} lang={lang} onBack={() => setOpenReport(null)}/>;
  }
  if (openRealReport) {
    return <RealReportDetailScreen report={openRealReport} lang={lang} onBack={() => setOpenRealReport(null)}/>;
  }
  if (mediaItem) {
    return <MediaDetailScreen item={mediaItem} lang={lang} onBack={() => setMediaItem(null)}/>;
  }

  // Empty state: real user but no child linked
  if (!isMock && !childLoading && !child) {
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:18, paddingBottom:16 }}>
        <div style={{ padding:'4px 20px 0' }}>
          <Label>{nxTxt2(lang, 'Hoş geldiniz', 'Welcome', 'Добро пожаловать')}</Label>
          <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize:26,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
            {nxTxt2(lang, 'Çocuğunuzun gelişimi', "Your child's progress", 'Прогресс вашего ребёнка')}
          </h1>
        </div>
        <div style={{ padding:'0 20px' }}>
          <Card>
            <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:16,
              padding:'28px 0', textAlign:'center' }}>
              <div style={{ width:56, height:56, borderRadius:14,
                background:'rgba(79,141,255,0.06)', border:'1px solid rgba(79,141,255,0.20)',
                display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Ico name="user" size={26} style={{ color:'#4F8DFF' }}/>
              </div>
              <div>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:18,
                  textTransform:'uppercase', letterSpacing:'0.04em', color:'#fff', marginBottom:6 }}>
                  {nxTxt2(lang, 'Profil bağlanmadı', 'Child profile not linked yet', 'Профиль ребёнка ещё не привязан')}
                </div>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.55, maxWidth:220 }}>
                  {parentErrors.child || (isTr
                    ? 'Akademi yöneticiniz hesabınızı çocuğunuzla ilişkilendirecek.'
                    : isRu
                    ? 'Администратор академии привяжет ваш аккаунт к профилю ребёнка.'
                    : 'Your academy administrator will link your account to your child.')}
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    );
  }

  // Loading state: fetching child profile via playerUid
  if (!isMock && childLoading) {
    return (
      <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
        <div style={{ padding:'4px 20px 0' }}>
          <Label>{nxTxt2(lang, 'Hoş geldiniz', 'Welcome', 'Добро пожаловать')}</Label>
          <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize:26,
            textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
            {nxTxt2(lang, 'Çocuğunuzun gelişimi', "Your child's progress", 'Прогресс вашего ребёнка')}
          </h1>
        </div>
        <div style={{ display:'flex', justifyContent:'center', padding:'48px 0' }}>
          <div style={{ display:'flex', gap:10 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width:7, height:7, borderRadius:999, background:'#4F8DFF',
                animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
            ))}
          </div>
        </div>
      </div>
    );
  }

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

      {/* Greeting */}
      <div style={{ padding:'4px 20px 0' }}>
        <Label>{nxTxt2(lang, 'Hoş geldiniz', 'Welcome', 'Добро пожаловать')}</Label>
        <h1 style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 26,
          textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'4px 0 0' }}>
          {nxTxt2(lang, 'Çocuğunuzun gelişimi', "Your child's progress", 'Прогресс вашего ребёнка')}
        </h1>
      </div>

      {/* Child overview */}
      <div style={{ padding:'0 20px' }}>
        <Card>
          <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
            <Avatar initials={child.initials} size={64} avatarId={child.avatarId}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22,
                textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff' }}>
                {child.name}
              </div>
              <div style={{ fontFamily:'Manrope', fontSize: 12, color:'#B8B8B8', marginTop: 2 }}>
                {[child.age, child.position, child.club].filter(Boolean).join(' · ') || (isTr ? '–' : '–')}
              </div>
            </div>
          </div>
          {(isMock || child.xp != null) && (
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 12,
              marginTop: 16, paddingTop: 14, borderTop:'1px solid rgba(255,255,255,0.06)' }}>
              <div>
                <Label>{nxTxt2(lang, 'Seviye', 'Level', 'Уровень')}</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:22, color:'var(--nx-accent)', marginTop:2 }}>
                  {tier?.label || '–'}
                </div>
              </div>
              <div>
                <Label>XP</Label>
                <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, color:'#fff', marginTop: 2 }}>
                  {(child.xp || 0).toLocaleString()}
                </div>
              </div>
              <div>
                <Label>{nxTxt2(lang, 'Form', 'Trend', 'Динамика')}</Label>
                <div style={{ display:'flex', alignItems:'baseline', gap: 6, marginTop: 2 }}>
                  <span style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 22, color:'#fff' }}>{parentReports[0]?.weeklyXp || '–'}</span>
                  <span style={{ fontFamily:'Manrope', fontWeight: 600, fontSize: 9,
                    letterSpacing:'0.14em', textTransform:'uppercase', color:'#B8B8B8' }}>XP</span>
                </div>
              </div>
            </div>
          )}
        </Card>
      </div>

      {/* Weekly report */}
      {isMock ? (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Haftalık rapor', 'Weekly report', 'Недельный отчёт')}
              action="PDF" onAction={() => setOpenReport(PARENT_REPORTS[0])}/>
          </div>
          <div style={{ padding:'0 20px' }}>
            <Card>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <Label>{nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость')}</Label>
                <span style={{ fontFamily:'JetBrains Mono', fontSize: 12, color:'#fff' }}>4 / 4</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap: 4, marginTop: 8 }}>
                {[1,1,1,0,1,0,0].map((v,i) => (
                  <div key={i} style={{ height: 6, borderRadius: 2,
                    background: v ? 'var(--nx-accent)' : '#242424' }}/>
                ))}
              </div>
              <div style={{ marginTop: 16, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 10 }}>
                {[
                  [nxTxt2(lang, 'Katılım', 'Attendance', 'Посещаемость'),  '+8%',  'var(--nx-accent)'],
                  [nxTxt2(lang, 'Çaba', 'Effort', 'Старание'),         '+12%', 'var(--nx-accent)'],
                  [nxTxt2(lang, 'Form', 'Form', 'Форма'),           '+3%',  'var(--nx-accent)'],
                ].map(([l,v,c]) => (
                  <div key={l} style={{ background:'#1C1C1C', borderRadius: 10, padding: 10 }}>
                    <Label>{l}</Label>
                    <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize: 20, color: c, marginTop: 2 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop:'1px solid rgba(255,255,255,0.06)' }}>
                <Label>{nxTxt2(lang, `${th.coachLabel || 'Koç'} notu`, `${isSwimming ? 'Instructor' : 'Coach'} note`, `${coachWord} заметка`)}</Label>
                <div style={{ display:'flex', gap: 12, marginTop: 8 }}>
                  <Avatar initials="KA" size={36}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 12, color:'#fff' }}>
                      {nxTxt2(lang, `${th.coachLabel || 'Koç'} Ahmet`, `${isSwimming ? 'Instructor' : 'Coach'} Ahmet`, `${coachWord} Ахмет`)} <span style={{ color:'#7A7A7A', fontWeight: 500 }}>· {nxTxt2(lang, 'Bu hafta', 'This week', 'На этой неделе')}</span>
                    </div>
                    <div style={{ fontFamily:'Manrope', fontSize: 13, color:'#B8B8B8', marginTop: 4, lineHeight: 1.45 }}>
                      {isTr
                        ? (isSwimming
                          ? 'Efe bu hafta serbest stil tekniğinde gelişim gösterdi. Nefes kontrolünde daha sakin.'
                          : 'Efe bu hafta bitiricilik çalışmasında belirgin gelişme gösterdi. Pas seçiminde daha sakin.')
                        : isRu
                        ? (isSwimming ? 'Эфе на этой неделе заметно улучшил технику вольного стиля. В дыхании стал спокойнее.' : 'Эфе на этой неделе заметно улучшил завершение. В решениях при передачах стал спокойнее.')
                        : (isSwimming ? 'Efe showed clear progress in freestyle technique this week. Calmer with breath control.' : 'Efe showed clear progress in finishing this week. Calmer with passing decisions.')}
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </>
      ) : (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Haftalık rapor', 'Weekly report', 'Недельный отчёт')}/>
          </div>
          <div style={{ padding:'0 20px' }}>
            {parentReportsLoading ? (
              <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:'#4F8DFF',
                      animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
                  ))}
                </div>
              </div>
            ) : parentErrors.reports ? (
              <Card style={{ textAlign:'center', padding:'24px 20px',
                background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
                  {parentErrors.reports}
                </div>
              </Card>
            ) : parentReports.length === 0 ? (
              <Card>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:16,
                  padding:'28px 0', textAlign:'center' }}>
                  <div style={{ width:44, height:44, borderRadius:14,
                    background:'rgba(0,255,136,0.06)', border:'1px solid rgba(0,255,136,0.20)',
                    display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Ico name="chart" size={22} style={{ color:'#00FF88' }}/>
                  </div>
                  <div>
                    <div style={{ fontFamily:'Oswald', fontWeight:700, fontSize:16,
                      textTransform:'uppercase', letterSpacing:'0.04em', color:'#fff', marginBottom:6 }}>
                      {nxTxt2(lang, 'Henüz haftalık gelişim raporu yok.', 'No weekly progress report yet.', 'Недельного отчёта о прогрессе пока нет.')}
                    </div>
                    <div style={{ fontFamily:'Manrope', fontSize:12, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
                      {isTr
                        ? `${th.coachLabel || 'Koç'} haftalık rapor oluşturduğunda burada görünecek.`
                        : isRu
                        ? `Недельные отчёты появятся здесь, когда ${coachWord.toLowerCase()} создаст их.`
                        : `Weekly reports will appear here when your ${isSwimming ? 'instructor' : 'coach'} creates them.`}
                    </div>
                  </div>
                </div>
              </Card>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                {parentReports.map((r, i) => {
                  const dateStr = r.weekStart
                    ? r.weekStart
                    : r.createdAt?.seconds
                    ? new Date(r.createdAt.seconds * 1000).toLocaleDateString(
                        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 || nxTxt2(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>
            )}
          </div>
        </>
      )}

      {/* Upcoming sessions for child */}
      {(isMock || profile?.playerUid) && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Yaklaşan seanslar', 'Upcoming sessions', 'Предстоящие занятия')}/>
          </div>
          {isMock ? (
            <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
              {[
                { title:nxTxt2(lang, isSwimming?'Serbest stil · Set 4':'Bitiricilik · Set 4', isSwimming?'Freestyle · Set 4':'Finishing · Set 4', isSwimming?'Вольный стиль · Сет 4':'Завершение · Сет 4'), type:'training', date:'2026-05-14', time:'18:30', location:isSwimming?(isRu?'Бассейн 2':'Havuz 2'):(isRu?'Поле 2':'Pitch 2'), xpReward:120 },
                { title:nxTxt2(lang, isSwimming?'Nefes kontrolü':'Pas üçgenleri', isSwimming?'Breath control':'Passing triangles', isSwimming?'Контроль дыхания':'Передачи в треугольниках'),       type:'training', date:'2026-05-16', time:'17:00', location:isSwimming?(isRu?'Бассейн 1':'Havuz 1'):(isRu?'Поле 1':'Pitch 1'), xpReward:90  },
                { title:nxTxt2(lang, isSwimming?'Dayanıklılık seti':'U16 Maçı', isSwimming?'Endurance set':'U16 Match', isSwimming?'Сет на выносливость':'Матч U16'),                    type:isSwimming?'training':'match',    date:'2026-05-18', time:'11:00', location:isSwimming?(isRu?'Главный бассейн':'Ana Havuz'):(isRu?'Главное поле':'Ana Saha'), xpReward:200 },
              ].map((s, i) => (
                <Card key={i} style={{ display:'flex', gap:14, alignItems:'flex-start', padding:14 }}>
                  <div style={{ width:34, height:34, borderRadius:9, flexShrink:0,
                    background: s.type==='match' && !isSwimming?'rgba(255,184,0,0.10)':'var(--nx-accent-soft)',
                    border:`1px solid ${s.type==='match' && !isSwimming?'rgba(255,184,0,0.30)':'var(--nx-accent-glow)'}`,
                    display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Ico name={s.type==='match' && !isSwimming?'trophy':'lightning'} size={15}
                      style={{ color: s.type==='match' && !isSwimming?'#FFB800':'var(--nx-accent)' }}/>
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13, color:'#fff' }}>{s.title}</div>
                    <div style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A', marginTop:2 }}>
                      {s.date} · {s.time} · {s.location}
                    </div>
                  </div>
                  <span style={{ fontFamily:'JetBrains Mono', fontSize:11, color:'var(--nx-accent)', flexShrink:0 }}>+{s.xpReward} XP</span>
                </Card>
              ))}
            </div>
          ) : parentErrors.sessions ? (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ textAlign:'center', padding:'20px',
                background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
                  {parentErrors.sessions}
                </div>
              </Card>
            </div>
          ) : !childProfile?.teamId ? (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ padding:14 }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#5A5A5A', textAlign:'center' }}>
                  {nxTxt2(lang, `Henüz ${th.teamLabel?.toLowerCase?.() || 'takım'} atanmadı.`, `No ${isSwimming ? 'group' : 'team'} assigned yet.`, isSwimming ? 'Группа ещё не назначена.' : 'Команда ещё не назначена.')}
                </div>
              </Card>
            </div>
          ) : upcomingSessions.length === 0 ? (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ padding:14 }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#5A5A5A', textAlign:'center' }}>
                  {nxTxt2(lang, 'Yaklaşan seans yok.', 'No upcoming sessions scheduled.', 'Предстоящих занятий пока нет.')}
                </div>
              </Card>
            </div>
          ) : (
            <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
              {upcomingSessions.map(s => (
                <Card key={s.id} style={{ display:'flex', gap:14, alignItems:'flex-start', padding:14 }}>
                  <div style={{ width:34, height:34, borderRadius:9, flexShrink:0,
                    background: s.type==='match' && !isSwimming?'rgba(255,184,0,0.10)':'var(--nx-accent-soft)',
                    border:`1px solid ${s.type==='match' && !isSwimming?'rgba(255,184,0,0.30)':'var(--nx-accent-glow)'}`,
                    display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Ico name={s.type==='match' && !isSwimming?'trophy':'lightning'} size={15}
                      style={{ color: s.type==='match' && !isSwimming?'#FFB800':'var(--nx-accent)' }}/>
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:'Manrope', fontWeight:700, fontSize:13, color:'#fff',
                      overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.title}</div>
                    <div style={{ fontFamily:'JetBrains Mono', fontSize:10, color:'#7A7A7A', marginTop:2 }}>
                      {s.date}{s.time ? ` · ${s.time}` : ''}{s.location ? ` · ${s.location}` : ''}
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </>
      )}

      {/* Coach feedback inbox */}
      {(isMock || profile?.playerUid) && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, `${th.coachLabel || 'Koç'} geri bildirimi`, `${isSwimming ? 'Instructor' : 'Coach'} feedback`, `${coachWord} отзыв`)}/>
          </div>

          {isMock ? (
            // Demo mock entries
            <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
              {[
                { c:'EA', name:nxTxt2(lang, `${th.coachLabel || 'Koç'} Ahmet`, `${isSwimming?'Instructor':'Coach'} Ahmet`, `${coachWord} Ахмет`), when:nxTxt2(lang, '2 saat önce', '2h ago', '2 ч назад'),
                  label:nxTxt2(lang, isSwimming?'Serbest stil · Set 4':'Bitiricilik · Set 4', isSwimming?'Freestyle · Set 4':'Finishing · Set 4', isSwimming?'Вольный стиль · Сет 4':'Завершение · Сет 4'),
                  note:nxTxt2(lang, 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.', isSwimming?'Ритм дыхания стал более контролируемым. Отлично.':'Передачи в треугольниках стали намного чище. Отлично.') },
                { c:'ES', name:nxTxt2(lang, `${th.coachLabel || 'Koç'} Selin`, `${isSwimming?'Instructor':'Coach'} Selin`, `${coachWord} Селин`), when:nxTxt2(lang, 'Dün', 'Yesterday', 'Вчера'),
                  label:'Sprint · 6×200m',
                  note:nxTxt2(lang, 'Toparlanma süresinde gelişim var.', 'Recovery time improving.', 'Время восстановления улучшается.') },
              ].map((m, i) => (
                <Card key={i} style={{ padding: 14 }}>
                  <div style={{ display:'flex', gap: 12 }}>
                    <Avatar initials={m.c} 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={{ fontFamily:'Manrope', fontWeight: 600, fontSize: 11,
                        letterSpacing:'0.04em', color:'#7A7A7A', marginTop: 2 }}>{m.label}</div>
                      <div style={{ fontFamily:'Manrope', fontSize: 13, color:'#B8B8B8', marginTop: 6, lineHeight: 1.45 }}>{m.note}</div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          ) : parentFeedbackLoading ? (
            <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:'#4F8DFF',
                    animation:`nxpulse 1.4s ease-in-out ${i*0.22}s infinite` }}/>
                ))}
              </div>
            </div>
          ) : parentErrors.feedback ? (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ textAlign:'center', padding:'24px 20px',
                background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
                  {parentErrors.feedback}
                </div>
              </Card>
            </div>
          ) : parentFeedback.length === 0 ? (
            <div style={{ padding:'0 20px' }}>
              <Card style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:14,
                padding:'24px 20px', textAlign:'center' }}>
                <Ico name="chart" size={22} style={{ color:'#4F8DFF' }}/>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#7A7A7A', lineHeight:1.5, maxWidth:220 }}>
                  {isTr
                    ? `Henüz ${th.coachLabel?.toLowerCase?.() || 'koç'} notu yok. ${th.trainingLabel || 'Antrenman'} sonrası burada görünecek.`
                    : isRu
                    ? `Пока нет отзывов от ${coachWord.toLowerCase()}а. Они появятся здесь после занятий.`
                    : `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: 8 }}>
              {parentFeedback.map((e, i) => {
                const coachName = e.coachName || coachWord;
                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 (
                  <Card key={i} style={{ 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 }}>
                            {[
                              [lang === 'ru' ? 'Техника' : isTr?'Teknik':'Tech',   e.ratings.technique],
                              [lang === 'ru' ? 'Интенс.' : isTr?'Yoğunluk':'Int.', e.ratings.intensity],
                              [lang === 'ru' ? 'Отнош.' : isTr?'Tutum':'Att.',    e.ratings.attitude],
                            ].map(([l, v]) => v != null && (
                              <span key={l} style={{ fontFamily:'JetBrains Mono', fontSize:9,
                                color: v >= 4 ? 'var(--nx-accent)' : v >= 3 ? (isSwimming ? '#B8B8B8' : '#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.chips && e.chips.length > 0 && (
                          <div style={{ display:'flex', flexWrap:'wrap', gap:4, marginTop:6 }}>
                            {e.chips.map(key => {
                              const chip = (window.FEEDBACK_CHIPS || []).find(c => c.key === key);
                              if (!chip) return null;
                              const chipLabel = isSwimming
                                ? (lang === 'ru' ? (chip.swimRu || chip.ru || chip.tr || chip.en || '') : isTr ? (chip.swimTr || chip.tr || chip.en || '') : (chip.swimEn || chip.en || chip.tr || ''))
                                : (lang === 'ru' ? (chip.ru || chip.tr || chip.en || '') : isTr ? (chip.tr || chip.en || '') : (chip.en || chip.tr || ''));
                              return (
                                <span key={key} style={{
                                  padding:'3px 8px', borderRadius:999,
                                  background:'var(--nx-accent-soft)', border:'1px solid var(--nx-accent-glow)',
                                  color:'var(--nx-accent)', fontFamily:'Manrope', fontWeight:600, fontSize:10,
                                }}>
                                  {chipLabel}
                                </span>
                              );
                            })}
                          </div>
                        )}
                        {e.notes && (
                          <div style={{ fontFamily:'Manrope', fontSize: 13, color:'#B8B8B8', marginTop: 6, lineHeight: 1.45 }}>
                            {e.notes}
                          </div>
                        )}
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
          )}
        </>
      )}

      {/* Attendance history — real mode only */}
      {!isMock && profile?.playerUid && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Katılım geçmişi', 'Attendance history', 'История посещаемости')}/>
          </div>
          <div style={{ padding:'0 20px' }}>
            {childAttLoading ? (
              <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>
            ) : parentErrors.attendance ? (
              <Card style={{ textAlign:'center', padding:'24px 20px',
                background:'rgba(255,107,107,0.05)', border:'1px solid rgba(255,107,107,0.18)' }}>
                <div style={{ fontFamily:'Manrope', fontSize:13, color:'#FF6B6B', lineHeight:1.5 }}>
                  {parentErrors.attendance}
                </div>
              </Card>
            ) : childAttendance.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 }}>
                  {isTr
                    ? 'Henüz katılım kaydı yok. Antrenman sonrası burada görünecek.'
                    : isRu
                    ? 'Записей посещаемости пока нет. Они появятся здесь после занятий.'
                    : 'No attendance records yet. They will appear here after sessions.'}
                </div>
              </Card>
            ) : (
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {childAttendance.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 ? nxTxt2(lang, 'Katıldı', 'Present', 'Присутствовал') : nxTxt2(lang, 'Katılmadı', 'Absent', 'Отсутствовал')}
                      </span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </>
      )}

      {/* Performance summary — demo only */}
      {isMock && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Performans özeti', 'Performance summary', 'Сводка результатов')}/>
          </div>
          <div style={{ padding:'0 20px' }}>
            <Card>
              <Label>{nxTxt2(lang, 'Güçlü yönler', 'Strengths', 'Сильные стороны')}</Label>
              <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 8 }}>
                {(isTr
                  ? (isSwimming ? ['Su içi koordinasyon', 'Hız ve sprint toparlanması', 'Stil ritmi'] : ['Driblingde top kontrolü', 'Hız ve sprint toparlanması', 'Top istemede pozisyon'])
                  : isRu
                  ? (isSwimming ? ['Координация в воде', 'Скорость и восстановление после спринта', 'Ритм стиля'] : ['Контроль мяча в дриблинге', 'Скорость и восстановление после спринта', 'Выбор позиции для получения мяча'])
                  : ['Ball control on the dribble', 'Pace & sprint recovery', 'Positioning when receiving'])
                  .map((s, i) => (
                    <div key={i} style={{ display:'flex', gap: 10, alignItems:'flex-start' }}>
                      <div style={{ width: 18, height: 18, borderRadius: 999,
                        background:'var(--nx-accent-soft)', border:'1px solid var(--nx-accent-glow)',
                        color:'var(--nx-accent)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0 }}>
                        <Ico name="check" size={11}/>
                      </div>
                      <span style={{ fontFamily:'Manrope', fontSize: 13, color:'#fff', lineHeight: 1.4 }}>{s}</span>
                    </div>
                  ))}
              </div>
              <div style={{ height: 1, background:'rgba(255,255,255,0.06)', margin: '14px 0' }}/>
              <Label>{nxTxt2(lang, 'Geliştirilecek alanlar', 'Improvement areas', 'Зоны для развития')}</Label>
              <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 8 }}>
                {(isTr
                  ? (isSwimming ? ['Dönüş tekniği', 'Kick tekniği'] : ['Savunma geçişlerinde geri dönüş', 'Sol ayakla bitiricilik'])
                  : isRu
                  ? (isSwimming ? ['Техника поворота', 'Техника работы ногами'] : ['Возврат в оборонительный переход', 'Завершение слабой ногой'])
                  : ['Tracking back in defensive transition', 'Finishing with weak foot'])
                  .map((s, i) => (
                    <div key={i} style={{ display:'flex', gap: 10, alignItems:'flex-start' }}>
                      <div style={{ width: 18, height: 18, borderRadius: 999,
                        background:isSwimming?'var(--nx-accent-soft)':'rgba(255,184,0,0.10)', border:isSwimming?'1px solid var(--nx-accent-glow)':'1px solid rgba(255,184,0,0.30)',
                        color:isSwimming?'var(--nx-accent)':'#FFB800', display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0 }}>
                        <Ico name="arrow" size={11}/>
                      </div>
                      <span style={{ fontFamily:'Manrope', fontSize: 13, color:'#fff', lineHeight: 1.4 }}>{s}</span>
                    </div>
                  ))}
              </div>
            </Card>
          </div>
        </>
      )}

      {/* Media — demo only */}
      {isMock && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Fotoğraf & video', 'Photos & video', 'Фото и видео')}
              action={nxTxt2(lang, 'Tümü', 'All', 'Все')} onAction={() => setMediaItem(MEDIA_ITEMS[0])}/>
          </div>
          <div style={{ padding:'0 20px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
            {MEDIA_ITEMS.map(m => (
              <button key={m.id} onClick={() => setMediaItem(m)} style={{
                aspectRatio:'1 / 1', borderRadius:12, cursor:'pointer',
                background: m.tint, border:'1px solid rgba(255,255,255,0.06)',
                position:'relative', overflow:'hidden', padding:0 }}>
                <svg viewBox="0 0 100 100" preserveAspectRatio="none"
                  style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.5 }}>
                  <rect x="6" y="6" width="88" height="88" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.6"/>
                  <circle cx="50" cy="50" r="14" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.6"/>
                </svg>
                {m.kind === 'video' && (
                  <>
                    <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <div style={{ width:32, height:32, borderRadius:'50%',
                        background:'rgba(0,0,0,0.6)', border:'1px solid rgba(255,255,255,0.4)',
                        display:'flex', alignItems:'center', justifyContent:'center' }}>
                        <div style={{ width:0, height:0, marginLeft:3,
                          borderTop:'5px solid transparent', borderBottom:'5px solid transparent',
                          borderLeft:'8px solid #fff' }}/>
                      </div>
                    </div>
                    <span style={{ position:'absolute', bottom:6, right:6,
                      fontFamily:'JetBrains Mono', fontSize:9, color:'#fff',
                      background:'rgba(0,0,0,0.6)', padding:'2px 5px', borderRadius:4 }}>{m.duration}</span>
                  </>
                )}
                {m.kind === 'photo' && (
                  <div style={{ position:'absolute', bottom:6, left:6,
                    fontFamily:'JetBrains Mono', fontSize:9, color:'rgba(255,255,255,0.5)',
                    background:'rgba(0,0,0,0.5)', padding:'2px 5px', borderRadius:4 }}>
                    {m.date[lang] || m.date.en}
                  </div>
                )}
              </button>
            ))}
          </div>
        </>
      )}

      {/* Notifications — demo only */}
      {isMock && (
        <>
          <div style={{ padding:'0 20px' }}>
            <SectionHead title={nxTxt2(lang, 'Bildirimler', 'Notifications', 'Уведомления')}/>
          </div>
          <div style={{ padding:'0 20px', display:'flex', flexDirection:'column', gap: 8 }}>
            {[
              { tone:'info',  t:nxTxt2(lang, `Yeni ${th.coachLabel?.toLowerCase?.() || 'koç'} notu`, `New ${isSwimming ? 'instructor' : 'coach'} note`, `Новая заметка: ${coachWord.toLowerCase()}`),
                s:nxTxt2(lang, `${th.coachLabel || 'Koç'} Ahmet · ${isSwimming?'Serbest stil':'Bitiricilik'} · 2 saat önce`, `${isSwimming ? 'Instructor Ahmet · Freestyle' : 'Coach Ahmet · Finishing'} · 2h ago`, `${coachWord} Ахмет · ${isSwimming ? 'Вольный стиль' : 'Завершение'} · 2 ч назад`) },
              { tone:'good',  t:nxTxt2(lang, 'Haftalık rapor hazır', 'Weekly report ready', 'Недельный отчёт готов'),
                s:nxTxt2(lang, '13–19 Mayıs · PDF', 'May 13–19 · PDF', '13–19 мая · PDF') },
              { tone:'warn',  t:nxTxt2(lang, `Yarınki ${th.trainingLabel?.toLowerCase?.() || 'antrenman'} 18:30`, `Tomorrow ${isSwimming ? 'session' : 'training'} 18:30`, `Завтра ${isSwimming ? 'занятие' : 'тренировка'} в 18:30`),
                s:nxTxt2(lang, `${th.mockLocation || 'Pitch 2'} · Onayla`, `${isSwimming ? 'Pool 2' : 'Pitch 2'} · Confirm`, `${isSwimming ? 'Бассейн 2' : 'Поле 2'} · Подтвердить`) },
            ].map((n, i) => {
              const c = isSwimming && n.tone !== 'info' ? '#38E8FF' : (n.tone==='good' ? '#00FF88' : n.tone==='warn' ? '#FFB800' : '#4F8DFF');
              return (
                <Card key={i} style={{ padding: 12 }}>
                  <div style={{ display:'flex', gap: 12, alignItems:'flex-start' }}>
                    <div style={{ width: 6, height: 6, borderRadius: 999, background: c, marginTop: 7, flexShrink: 0 }}/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 13, color:'#fff' }}>{n.t}</div>
                      <div style={{ fontFamily:'Manrope', fontSize: 12, color:'#B8B8B8', marginTop: 2 }}>{n.s}</div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </>
      )}

      {isMock && (
        <div style={{ padding:'0 20px' }}>
          <Button kind="ghost" full onClick={() => setOpenReport(PARENT_REPORTS[0])}>
            {nxTxt2(lang, 'Tüm raporları gör', 'View all reports', 'Все отчёты')} →
          </Button>
        </div>
      )}
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// ONBOARDING — language picker
// ────────────────────────────────────────────────────────────
const OnboardingScreen = ({ onPick, current }) => (
  <div className="nx-auth-screen nx-language-screen" style={{ display:'flex', flexDirection:'column', height:'100%', padding:'68px 24px 24px',
    justifyContent:'space-between' }}>
    {/* Brand */}
    <div>
      <BrandMark size={56} style={{ marginBottom: 32 }}/>
      <div style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 11,
        letterSpacing:'0.18em', textTransform:'uppercase', color:'#7A7A7A' }}>ATHLORYX</div>
      <h1 style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 38, lineHeight: 1.0,
        textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff', margin:'10px 0 12px' }}>
        Choose your<br/>language<span style={{ color:'#00FF88' }}>.</span>
      </h1>
      <div style={{ fontFamily:'Manrope', fontSize: 14, color:'#B8B8B8', lineHeight: 1.45 }}>
        Dilini seç. You can change this anytime in Settings.
      </div>
    </div>

    {/* Choices */}
    <div className="nx-language-options" style={{ display:'flex', flexDirection:'column', gap: 10, flex: 1, justifyContent:'center' }}>
      {[
        { code:'tr', name:'Türkçe',  sub:'Varsayılan' },
        { code:'en', name:'English', sub:'Default' },
        { code:'ru', name:'Русский', sub:'По умолчанию' },
      ].map(l => (
        <button key={l.code} onClick={() => onPick(l.code)} style={{
          background: current===l.code ? 'rgba(0,255,136,0.06)' : '#141414',
          border: `1px solid ${current===l.code ? 'rgba(0,255,136,0.40)' : 'rgba(255,255,255,0.06)'}`,
          borderRadius: 14, padding: 16, cursor:'pointer', textAlign:'left',
          display:'flex', alignItems:'center', justifyContent:'space-between',
        }}>
          <div>
            <div style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 20,
              textTransform:'uppercase', letterSpacing:'0.04em',
              color: current===l.code ? '#00FF88' : '#fff' }}>{l.name}</div>
            <div style={{ fontFamily:'Manrope', fontSize: 11, color:'#7A7A7A',
              letterSpacing:'0.10em', textTransform:'uppercase', marginTop: 2 }}>{l.sub}</div>
          </div>
          {current===l.code && (
            <div style={{ width: 24, height: 24, borderRadius: 999, background:'#00FF88',
              color:'#001A0E', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Ico name="check" size={14}/>
            </div>
          )}
        </button>
      ))}
    </div>

    <Button kind="primary" full size="lg" onClick={() => onPick(current)} icon="arrow">
      {current==='ru' ? 'Продолжить' : current==='tr' ? 'Devam et' : 'Continue'}
    </Button>
  </div>
);

// ────────────────────────────────────────────────────────────
// SETTINGS SHEET — language switcher (bottom sheet)
// ────────────────────────────────────────────────────────────
const SettingsSheet = ({ open, onClose, lang, setLang, role, sportType = 'football', onSportTypeChange, onSignOut, academy }) => {
  if (!open) return null;
  const langKey = nxLangKey2(lang);
  const isTr = langKey === 'tr';
  const isRu = langKey === 'ru';
  const th2 = window.NXT_THEME || (window.getSportTheme ? window.getSportTheme(sportType) : {});
  const isSwimming2 = th2.sportType === 'swimming';
  const ROLE_LABELS = {
    tr:{ player:'Sporcu', coach: th2.coachLabel || 'Koç', parent:'Veli', admin:'Admin' },
    en:{ player:'Athlete', coach: isSwimming2 ? 'Instructor' : 'Coach', parent:'Parent', admin:'Admin' },
    ru:{ player:'Спортсмен', coach: isSwimming2 ? 'Инструктор' : 'Тренер', parent:'Родитель', admin:'Админ' },
  };
  const ROLE_COLORS = { player:'#00FF88', coach:'#FFB800', parent:'#4F8DFF', admin:'#B26BFF' };
  const roleColor = ROLE_COLORS[role] || '#fff';
  const roleLabel = (ROLE_LABELS[lang] || ROLE_LABELS.tr)[role] || role;
  return (
    <div style={{ position:'absolute', inset: 0, zIndex: 30 }}>
      <div onClick={onClose} style={{ position:'absolute', inset: 0,
        background:'rgba(0,0,0,0.5)', backdropFilter:'blur(4px)' }}/>
      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0,
        background:'#141414', borderRadius:'20px 20px 0 0',
        border:'1px solid rgba(255,255,255,0.06)',
        padding: 20, paddingBottom: 28,
        display:'flex', flexDirection:'column', gap: 16,
        boxShadow:'0 -24px 60px -24px rgba(0,0,0,0.95)' }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background:'rgba(255,255,255,0.18)',
          margin:'0 auto' }}/>
        <div style={{ fontFamily:'Oswald', fontWeight: 700, fontSize: 22,
          textTransform:'uppercase', letterSpacing:'0.02em', color:'#fff' }}>
          {isRu ? 'Настройки' : isTr ? 'Ayarlar' : 'Settings'}
        </div>

        {/* Language */}
        <div>
          <Label>{isRu ? 'Язык' : isTr ? 'Dil' : 'Language'}</Label>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 8 }}>
            {[['tr','Türkçe'],['en','English'],['ru','Русский']].map(([code,name]) => (
              <button key={code} onClick={() => setLang(code)} style={{
                padding:'12px 14px', borderRadius: 10, cursor:'pointer',
                background: lang===code ? 'rgba(0,255,136,0.06)' : '#1C1C1C',
                border:`1px solid ${lang===code ? 'rgba(0,255,136,0.40)' : 'rgba(255,255,255,0.06)'}`,
                color: lang===code ? '#00FF88' : '#fff',
                fontFamily:'Manrope', fontWeight: 700, fontSize: 13, textAlign:'left',
              }}>{name}</button>
            ))}
          </div>
        </div>

        {/* Sport type — admin only */}
        {(role === 'admin' || role === 'superAdmin') && onSportTypeChange && (
          <div>
            <Label>{isRu ? 'Вид спорта' : isTr ? 'Spor türü' : 'Sport type'}</Label>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8, marginTop: 8 }}>
              {[['football', isRu?'Футбол':isTr?'Futbol':'Football'], ['swimming', isRu?'Плавание':isTr?'Yüzme':'Swimming']].map(([type, name]) => {
                const btnAccent = type === 'swimming' ? '#38E8FF' : '#00FF88';
                const on = sportType === type;
                return (
                  <button key={type} onClick={() => onSportTypeChange(type)} style={{
                    padding:'12px 14px', borderRadius: 10, cursor:'pointer',
                    background: on ? `${btnAccent}10` : '#1C1C1C',
                    border:`1px solid ${on ? `${btnAccent}66` : 'rgba(255,255,255,0.06)'}`,
                    color: on ? btnAccent : '#fff',
                    fontFamily:'Manrope', fontWeight: 700, fontSize: 13, textAlign:'left',
                  }}>{name}</button>
                );
              })}
            </div>
            <div style={{ marginTop: 8, padding:'8px 10px', borderRadius:8,
              background:'rgba(255,184,0,0.06)', border:'1px solid rgba(255,184,0,0.20)' }}>
              <span style={{ fontFamily:'Manrope', fontSize:11, color:'#FFB800', lineHeight:1.4 }}>
                {isRu
                  ? 'Этот параметр меняет тему и термины во всей академии.'
                  : isTr
                  ? 'Bu ayar akademi genelindeki tema ve terimleri değiştirir.'
                  : 'This setting changes the theme and labels across the entire academy.'}
              </span>
            </div>
          </div>
        )}

        {/* Academy registration code — admin only */}
        {(role === 'admin' || role === 'superAdmin') && academy?.id && (
          <div>
            <Label>{isRu ? 'Регистрационный код академии' : isTr ? 'Akademi kayıt kodu' : 'Academy registration code'}</Label>
            <div style={{ marginTop:8, padding:'12px 14px', borderRadius:10,
              background:'#1C1C1C', border:'1px solid rgba(255,255,255,0.06)',
              display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
              {academy.academyCode ? (
                <>
                  <span style={{ fontFamily:'JetBrains Mono', fontSize:17, fontWeight:700,
                    color:'#00FF88', letterSpacing:'0.14em' }}>
                    {academy.academyCode}
                  </span>
                  <button
                    onClick={() => navigator.clipboard?.writeText(academy.academyCode)}
                    style={{
                      padding:'6px 12px', borderRadius:8, cursor:'pointer',
                      background:'rgba(0,255,136,0.08)', border:'1px solid rgba(0,255,136,0.30)',
                      color:'#00FF88', fontFamily:'Manrope', fontWeight:700, fontSize:11,
                      letterSpacing:'0.06em', textTransform:'uppercase', flexShrink:0,
                    }}>
                    {isRu ? 'Копировать' : isTr ? 'Kopyala' : 'Copy'}
                  </button>
                </>
              ) : (
                <button
                  onClick={async () => {
                    if (!window.NX?.generateAndSaveAcademyCode) return;
                    await window.NX.generateAndSaveAcademyCode(academy.id);
                    // onAcademy listener in App will update academy state with the new code
                  }}
                  style={{
                    width:'100%', padding:'10px', borderRadius:8, cursor:'pointer',
                    background:'rgba(0,255,136,0.06)', border:'1px solid rgba(0,255,136,0.25)',
                    color:'#00FF88', fontFamily:'Manrope', fontWeight:700, fontSize:12,
                    letterSpacing:'0.06em', textTransform:'uppercase',
                  }}>
                  {isRu ? 'Создать код' : isTr ? 'Kod oluştur' : 'Generate code'}
                </button>
              )}
            </div>
            <div style={{ marginTop:6, padding:'6px 10px', borderRadius:8,
              background:'rgba(255,255,255,0.02)', border:'1px solid rgba(255,255,255,0.05)' }}>
              <span style={{ fontFamily:'Manrope', fontSize:11, color:'#5A5A5A', lineHeight:1.4 }}>
                {isRu
                  ? 'Поделитесь этим кодом со спортсменами, тренерами и родителями. Он нужен при регистрации.'
                  : isTr
                  ? 'Bu kodu sporcu, koç ve velilerle paylaş. Kayıt sırasında sorulur.'
                  : 'Share this code with athletes, coaches, and parents. It\'s required at sign-up.'}
              </span>
            </div>
          </div>
        )}

        {/* Account type — read-only */}
        <div>
          <Label>{isRu ? 'Тип аккаунта' : isTr ? 'Hesap türü' : 'Account type'}</Label>
          <div style={{ marginTop: 8, padding:'12px 14px', borderRadius: 10,
            background:'#1C1C1C', border:'1px solid rgba(255,255,255,0.06)',
            display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <span style={{ fontFamily:'Manrope', fontWeight: 700, fontSize: 13, color: roleColor }}>
              {roleLabel}
            </span>
            <span style={{ fontFamily:'JetBrains Mono', fontSize: 9, color:'#5A5A5A',
              letterSpacing:'0.10em', textTransform:'uppercase' }}>
              {isRu ? 'Привязано к аккаунту' : isTr ? 'Hesaba bağlı' : 'Account-locked'}
            </span>
          </div>
        </div>

        <div style={{ height: 1, background:'rgba(255,255,255,0.06)' }}/>

        <button onClick={onClose} style={{
          padding:'14px', borderRadius: 12, background:'#1C1C1C',
          border:'1px solid rgba(255,255,255,0.10)', color:'#fff',
          fontFamily:'Manrope', fontWeight: 700, fontSize: 13,
          letterSpacing:'0.06em', textTransform:'uppercase', cursor:'pointer',
        }}>{isRu ? 'Закрыть' : isTr ? 'Kapat' : 'Close'}</button>

        <button onClick={onSignOut} style={{
          padding:'14px', borderRadius: 12, background:'rgba(255,77,77,0.06)',
          border:'1px solid rgba(255,77,77,0.25)', color:'#FF6B6B',
          fontFamily:'Manrope', fontWeight: 700, fontSize: 13,
          letterSpacing:'0.06em', textTransform:'uppercase', cursor:'pointer',
        }}>{isRu ? 'Выйти' : isTr ? 'Çıkış yap' : 'Sign out'}</button>
      </div>
    </div>
  );
};

Object.assign(window, {
  TIERS, tierFor, nextTierOf, ovrBand,
  HomeScreenV2, ParentDashboardScreen, RealReportDetailScreen, OnboardingScreen, SettingsSheet,
  TierBadge, Avatar, Card, HomePlayerCard,
});