// profile.jsx — Профиль: подписка (подробно — экран «Мой тариф»), ответы анкеты, промокод
// на Хакку-коворк, Telegram, выход.

function Profile({ nav }) {
  const { user, member, profile } = ME();
  const cfg = CFG();
  const active = member.state === 'active';
  const [cowork, setCowork] = React.useState(null);
  React.useEffect(() => {
    if (!active || !profile) return;
    fetch('/api/coworking', { credentials:'same-origin' }).then(r => r.json()).then(j => setCowork(j && j.coworking)).catch(() => {});
  }, []);
  const goal = goalTitleOf(profile);
  const fresh = profile && profile.first_name;     // анкета п. 3.2; старые — с уровнем, ролью, «делиться»
  const sphere = profile && profile.sphere && (profile.sphere === 'other'
    ? (profile.sphere_custom || 'Другое') : ((cfg.spheres || []).find(s => s.id === profile.sphere) || {}).title);
  const level = profile && (cfg.levels || []).find(l => l.id === profile.ai_level);
  const role = profile && profile.role && (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">{fresh ? `${profile.first_name} ${profile.last_name || ''}`.trim() : user.name || user.email}</h1>
            <p className="os-sub" style={{ marginTop: 6, overflowWrap:'anywhere' }}>{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 && (
              <div style={{ marginTop: 16, display:'flex', gap: 10, flexWrap:'wrap', alignItems:'center' }}>
                {active
                  ? <button className="os-btn tg" onClick={() => nav('tariff')}>Мой тариф и варианты →</button>
                  : <a className="os-btn tg" href={cfg.pricing_url} target="_blank" rel="noopener noreferrer" style={{ textDecoration:'none' }}>Выбрать тариф ↗</a>}
              </div>
            )}
          </div>

          {cowork && <CoworkingCode c={cowork}/>}

          {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 && fresh && (
                <>
                  <Row k="Чем занимаешься" v={sphere}/>
                  <Row k="Компания" v={profile.company}/>
                  <Row k="Откуда" v={[profile.city, profile.country].filter(Boolean).join(', ')}/>
                  <Row k="Цель" v={goal}/>
                  {profile.about && <div className="cm-about">{profile.about}</div>}
                </>
              )}
              {profile && !fresh && (
                <>
                  <Row k="Цель" v={goal}/>
                  {level && <Row k="Владение ИИ" v={`${level.id} из 5 · ${level.title}`}/>}
                  {role && <Row k="Роль" v={role}/>}
                  {share && share.length > 0 && <Row k="Готов делиться" v={share.join(', ')}/>}
                  <p className="os-sub" style={{ margin: '12px 0 0', fontSize: 13.5 }}>
                    Анкета обновилась: добавились город, сфера и пара слов о себе. Дополни, чтобы мы знакомили тебя с участниками рядом.
                  </p>
                </>
              )}
              {!profile && <p className="os-sub" style={{ margin: 0 }}>Анкета не заполнена. Заполни, чтобы получить подборку материалов под цель.</p>}
            </div>
          )}

          {active && (
            <div className="os-card tight cm-tg">
              <div className="cm-tg-t">
                <div style={{ fontWeight: 600, fontSize: 14.5 }}>Telegram</div>
                <div style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, marginTop: 3 }}>Уведомления от бота hakku.ai. Без бота пришлём на почту.</div>
              </div>
              <a className="os-btn ghost sm" href={cfg.bot_url} target="_blank" rel="noopener noreferrer"
                 onClick={() => track('tg:connect')} style={{ textDecoration:'none' }}>Подключить Telegram ↗</a>
            </div>
          )}

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