// Profile — user stats, cashback, referrals, settings.

// One stat row inside the hero card — icon + label on the left, value on the right.
function StatRow({ icon: I, label, value, accent }) {
  return (
    <div className="row aic gap-10" style={{ padding: '9px 2px' }}>
      <I size={15} style={{ color: accent ? 'var(--accent)' : 'var(--text-mute)', flexShrink: 0 }} />
      <div className="flex1" style={{ fontSize: 14, fontWeight: 550, color: 'var(--text-soft)' }}>{label}</div>
      <div className="mono" style={{
        fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
        color: accent ? 'var(--accent)' : 'var(--text)',
      }}>{value}</div>
    </div>);

}

function SettingsRow({ icon: I, title, sub, right, danger, onClick }) {
  return (
    <div className="row aic gap-12 row-item" style={{ padding: '14px', cursor: 'pointer' }} onClick={onClick}>
      <div className="tile" style={{
        background: danger ? 'var(--red-soft)' : 'var(--accent-soft)',
        color: danger ? 'var(--red)' : 'var(--accent)'
      }}><I size={18} /></div>
      <div className="flex1">
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        {sub && <div className="small t-soft">{sub}</div>}
      </div>
      {right !== undefined ? right : <Icons.chevR size={16} style={{ color: 'var(--text-mute)' }} />}
    </div>);

}

function ProfileScreen() {
  const [notif, setNotif] = React.useState(true);
  const [sound, setSound] = React.useState(() => (window.SFX ? window.SFX.isEnabled() : false));
  const toggleSound = (on) => { setSound(on); if (window.SFX) window.SFX.setEnabled(on); };
  const openTgLink = (url) => {
    try {
      const tg = window.Telegram && window.Telegram.WebApp;
      if (tg && tg.openTelegramLink) tg.openTelegramLink(url);
      else window.open(url, '_blank', 'noopener');
    } catch (_) {}
  };

  // Реальный профиль из GET /me (имя/username/потрачено/куплено).
  const meState = (window.DataSource && window.DataSource.useMe) ? window.DataSource.useMe() : { data: null };
  const me = meState.data || null;
  const u = (me && me.user) || {};
  const dispName = [u.first_name, u.last_name].filter(Boolean).join(' ') || (u.username ? '@' + u.username : 'Гость');
  const dispUser = u.username ? '@' + u.username : (u.id ? 'id' + u.id : '');
  const avatarCh = String(u.first_name || u.username || '?').trim().charAt(0).toUpperCase() || '?';
  const spent = me ? Math.round(me.total_spent_rub || 0) : 0;
  const boughtN = me ? (me.orders || []).filter(o => o.status === 'success' && (o.kind === 'purchase' || o.kind === 'buy')).length : 0;
  const totalN = me ? (me.orders_total || 0) : 0;
  return (
    <ScreenWrap>
      {/* user header */}
      <GlassCard strong style={{ padding: 20, position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -40, right: -30,
          width: 180, height: 180, borderRadius: '50%',
          background: 'radial-gradient(circle, var(--accent-glow), transparent 65%)',
          pointerEvents: 'none', opacity: 0.7
        }} />
        <div className="row aic gap-14" style={{ position: 'relative' }}>
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <div style={{
              width: 68, height: 68, borderRadius: 20,
              background: 'linear-gradient(135deg, var(--accent), var(--accent-2))',
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 26, letterSpacing: '-0.02em',
              boxShadow: '0 8px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3)',
            }}>{avatarCh}</div>
            <div style={{
              position: 'absolute', bottom: -2, right: -2,
              width: 18, height: 18, borderRadius: '50%',
              background: 'var(--green)',
              border: '2.5px solid var(--bg-elev)',
              boxShadow: '0 0 8px var(--green-soft)',
            }} />
          </div>
          <div className="flex1" style={{ minWidth: 0 }}>
            <div className="row aic gap-6">
              <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.015em' }}>{dispName}</div>
            </div>
            <div className="small t-soft" style={{ marginTop: 2 }}>{dispUser}</div>
          </div>
        </div>

        <div style={{
          marginTop: 16, paddingTop: 8,
          borderTop: '0.5px solid var(--border)',
          position: 'relative',
        }}>
          <StatRow icon={Icons.ruble} label="Потрачено" value={fmtRub(spent)} />
          <StatRow icon={Icons.cart} label="Куплено" value={`${boughtN} шт.`} />
          <StatRow icon={Icons.gift} label="Заказов" value={`${totalN} шт.`} accent />
        </div>
      </GlassCard>


      <div className="lbl" style={{ padding: '4px 4px 0' }}>Уведомления и язык</div>
      <GlassCard style={{ padding: 0 }}>
        <div className="row aic gap-12 row-item" style={{ padding: '14px' }}>
          <div className="tile"><Icons.bell size={18} /></div>
          <div className="flex1">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Push в Telegram</div>
            <div className="small t-soft">Новые сделки, выгодные предложения</div>
          </div>
          <Switch on={notif} onChange={setNotif} />
        </div>
        <div style={{ height: 0.5, background: 'var(--border)', margin: '0 14px' }} />
        <div className="row aic gap-12 row-item" style={{ padding: '14px' }}>
          <div className="tile"><Icons.zap size={18} /></div>
          <div className="flex1">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Звуки сделок</div>
            <div className="small t-soft">Лёгкий щелчок при покупке</div>
          </div>
          <Switch on={sound} onChange={toggleSound} />
        </div>
        <div style={{ height: 0.5, background: 'var(--border)', margin: '0 14px' }} />
        <div className="row aic gap-12 row-item" style={{ padding: '14px' }}>
          <div className="tile"><Icons.history size={18}/></div>
          <div className="flex1">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Язык интерфейса</div>
            <div className="small t-soft">Русский</div>
          </div>
          <div style={{
            display: 'inline-flex', padding: 3,
            background: 'var(--bg-input)', borderRadius: 10,
          }}>
            <div style={{
              padding: '6px 12px', borderRadius: 7,
              background: 'var(--accent)', color: '#fff',
              fontSize: 12, fontWeight: 700, letterSpacing: '0.02em',
              textTransform: 'uppercase',
            }}>RU</div>
          </div>
        </div>
      </GlassCard>

      <div className="lbl" style={{ padding: '4px 4px 0' }}>Поддержка</div>
      <GlassCard style={{ padding: 0 }}>
        <SettingsRow icon={Icons.link} title="Чат поддержки" sub="@portals_rub_help · среднее время ответа 3м"
                     onClick={() => openTgLink('https://t.me/portals_rub_help')} />
        <div style={{ height: 0.5, background: 'var(--border)', margin: '0 14px' }} />
        <SettingsRow icon={Icons.eye} title="Условия использования" />
      </GlassCard>

      <div className="t-mute small center" style={{ marginTop: 8, padding: 8, lineHeight: 1.6 }}>
        vMarket — маркет NFT-подарков <span style={{ color: 'var(--green)' }}>● онлайн</span>
        {/* Атрибуция обязательна: данные о моделях/фонах/символах берём из @GiftChanges
            (api.changes.tg). Убирать нельзя — условие использования их API. */}
        <div style={{ marginTop: 5, opacity: 0.9 }}>
          Данные о подарках — <span style={{ color: 'var(--text-soft)', fontWeight: 600 }}>@GiftChanges</span>
        </div>
      </div>
    </ScreenWrap>);

}

window.ProfileScreen = React.memo(ProfileScreen);