// profile.jsx — Профиль: тариф, «оплачено до», переход в PRO, ответы анкеты, выход.

function Profile({ nav }) {
  const { user, member, profile } = ME();
  const cfg = CFG();
  const active = member.state === 'active';
  const goal = profile && (profile.goal === 'other' ? profile.goal_custom : ((cfg.goals || []).find(g => g.id === profile.goal) || {}).title);
  const level = profile && (cfg.levels || []).find(l => l.id === profile.ai_level);
  const role = profile && (profile.role === 'other' ? profile.role_custom || 'Другое' : ((cfg.roles || []).find(r => r.id === profile.role) || {}).title);
  const share = profile && [...(profile.share || []).map(id => ((cfg.share || []).find(s => s.id === id) || {}).title).filter(Boolean),
                            profile.share_custom].filter(Boolean);
  const Row = ({ k, v }) => (
    <div className="cm-kv"><span>{k}</span><b>{v || '—'}</b></div>
  );
  return (
    <div className="os-frame">
      <Sidebar active="profile" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Профиль']}/>
        <div className="os-content">
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>Профиль</div>
            <h1 className="os-h1">{user.name || user.email}</h1>
            <p className="os-sub" style={{ marginTop: 6 }}>{user.email} · вход через Hakku ID</p>
          </div>

          <div className="os-card" style={{ padding: 22 }}>
            <div className="cm-h2row" style={{ marginBottom: 12 }}>
              <h2 className="os-h2" style={{ fontSize: 20 }}>Подписка</h2>
              {active && <span className={`os-badge ${member.tier === 'pro' ? 'mag' : 'blue'}`}>{TIER_LABEL[member.tier]}</span>}
            </div>
            <Row k="Тариф" v={active ? TIER_LABEL[member.tier] : member.state === 'not_member' ? 'нет в списке участников' : TIER_LABEL[member.tariff] || '—'}/>
            <Row k="Статус" v={member.admin ? 'команда сообщества' : STATUS_LABEL[member.status] || (member.state === 'not_member' ? '—' : member.status)}/>
            <Row k="Оплачено до" v={member.admin && !member.paid_until ? 'без срока' : fmtDate(member.paid_until)}/>
            {active && member.grace_until && member.grace_until !== member.paid_until && !member.admin && (
              <div style={{ fontSize: 12, color:'var(--ink-40)', marginTop: 8 }}>
                После даты оплаты доступ держится ещё 3 дня — до {fmtDate(member.grace_until)}.
              </div>
            )}
            {!member.admin && (member.tier === 'enthusiast' || member.tier === 'kb_only' || !active) && (
              <div style={{ marginTop: 16, display:'flex', gap: 10, flexWrap:'wrap', alignItems:'center' }}>
                <a className="os-btn tg" href={cfg.pricing_url} target="_blank" rel="noopener noreferrer" style={{ textDecoration:'none' }}>
                  {active ? 'Перейти в PRO ↗' : 'Выбрать тариф ↗'}
                </a>
                {member.tier === 'enthusiast' && <span style={{ fontSize: 12.5, color:'var(--ink-55)' }}>для участников Enthusiast — 4 500 ₽/мес вместо 4 900 ₽</span>}
              </div>
            )}
          </div>

          {active && (
            <div className="os-card" style={{ padding: 22 }}>
              <div className="cm-h2row" style={{ marginBottom: 12 }}>
                <h2 className="os-h2" style={{ fontSize: 20 }}>Анкета</h2>
                <button className="os-btn ghost sm" onClick={()=>nav('onboarding')}>{profile ? 'Изменить' : 'Заполнить'}</button>
              </div>
              {profile ? (
                <>
                  <Row k="Цель" v={goal}/>
                  <Row k="Владение ИИ" v={level && `${level.id} из 5 · ${level.title}`}/>
                  <Row k="Роль" v={role}/>
                  <Row k="Готов делиться" v={share && share.length ? share.join(', ') : null}/>
                </>
              ) : (
                <p className="os-sub" style={{ margin: 0 }}>Анкета не заполнена — заполните, чтобы получить подборку материалов под цель.</p>
              )}
            </div>
          )}

          <div><button className="os-btn ghost" onClick={osLogout}>Выйти</button></div>
        </div>
      </div>
    </div>
  );
}
window.Profile = Profile;