// home.jsx — Главная участника: приветствие и тариф, «Продолжить» по цели из анкеты,
// ближайшие события, разделы базы. Не участнику вместо неё — экран «Доступ по подписке»
// (paywall.jsx), незалогиненному — вход (login.jsx). Выбор делает app.jsx.

const useFetch = (url, deps = []) => {
  const [data, setData] = React.useState(null);
  React.useEffect(()=>{
    let alive = true;
    fetch(url, { credentials:'same-origin' }).then(r => r.json()).then(j => alive && setData(j)).catch(() => alive && setData({ ok: false }));
    return () => { alive = false; };
  }, deps);
  return data;
};
window.useFetch = useFetch;

const EV_KIND_LABEL = { webinar:'Вебинар', qa:'Q&A', mastermind:'Мастермайнд', offline:'Офлайн' };

function EventsList({ events }) {
  const tier = ME().member.tier;
  if (!events) return <div className="cm-empty">Загружаем расписание…</div>;
  if (!events.length) return <div className="cm-soon">Ближайших событий пока нет — расписание месяца появится здесь.</div>;
  return (
    <div className="os-card" style={{ padding: 0, overflow:'hidden' }}>
      {events.slice(0, 4).map((e, i) => {
        const closed = e.access === 'pro' && tier !== 'pro';
        return (
          <div key={e.id || i} className="cm-ev" style={i ? null : { borderTop: 0 }}>
            <div className="cm-ev-d">
              <div style={{ fontFamily:'var(--font-display)', fontSize: 15 }}>{fmtDay(e.date)}</div>
              <div style={{ fontSize: 11.5, color:'var(--ink-40)' }}>{e.time} МСК</div>
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap' }}>
                <span className={`os-badge ${e.access === 'pro' ? 'mag' : 'blue'}`}>{EV_KIND_LABEL[e.kind] || 'Событие'}</span>
                {e.access === 'pro' && <LockBadge lock="pro"/>}
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 600, marginTop: 6, lineHeight: 1.3 }}>{e.title}</div>
              <div style={{ fontSize: 12.5, color:'var(--ink-55)', marginTop: 2 }}>
                {[e.host, e.note].filter(Boolean).join(' · ')}{closed ? ' · в тарифе PRO' : ''}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
window.EventsList = EventsList;

function Home({ nav }) {
  const { user, member, profile } = ME();
  const prof = useFetch('/api/profile');
  const ev = useFetch('/api/events');
  const kb = useKB();
  const goal = profile && ((CFG().goals || []).find(g => g.id === profile.goal));
  const goalTitle = profile ? (profile.goal === 'other' ? profile.goal_custom : goal && goal.title) : null;
  const rec = (prof && prof.recommended) || [];
  const next = rec.find(r => !r.locked) || rec[0];
  const today = new Date().toLocaleDateString('ru-RU', { weekday:'long', day:'numeric', month:'long' });
  const clusters = (kb && kb.clusters) || CFG().clusters || [];
  const cnt = (id) => ((kb && kb.items) || []).filter(i => i.cluster === id).length;

  return (
    <div className="os-frame">
      <Sidebar active="home" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Главная']}/>
        <div className="os-content">
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>{today}</div>
            <h1 className="os-h1">{firstName(user.name) ? `Привет, ${firstName(user.name)}.` : 'Привет.'}</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
              Вы в сообществе <b style={{ color:'var(--ink)', fontWeight: 600 }}>хакку</b> · тариф{' '}
              <b style={{ color:'var(--ink)', fontWeight: 600 }}>{TIER_LABEL[member.tier]}</b>
              {member.paid_until && !member.admin ? `, оплачено до ${fmtDate(member.paid_until).replace(/\.$/, '')}` : ''}.
            </p>
          </div>

          {/* «Продолжить» по цели из анкеты */}
          <div className="os-ink" style={{ padding: 30 }}>
            <img className="holo" src="/assets/holo_ring.webp" alt="" style={{ width: 230, right: -36, top: -46, opacity: .92 }}/>
            <div style={{ position:'relative', zIndex: 2, maxWidth: 560 }}>
              <div className="eb" style={{ marginBottom: 14 }}>{goalTitle ? `Ваша цель · ${goalTitle}` : 'С чего начать'}</div>
              {next ? (
                <>
                  <h3 style={{ fontSize: 28, lineHeight: 1.1, marginBottom: 12 }}>{next.title}</h3>
                  <p className="muted" style={{ fontSize: 15, lineHeight: 1.55, margin: 0, maxWidth: 480 }}>{next.summary}</p>
                  <div style={{ display:'flex', gap: 10, marginTop: 22, flexWrap:'wrap' }}>
                    <button className="os-btn tg" onClick={()=>nav('kb', { m: next.slug })}>Продолжить →</button>
                    <button className="os-btn ghost" style={{ color:'#fff', borderColor:'rgba(255,255,255,.24)' }}
                            onClick={()=>nav('onboarding')}>{profile ? 'Изменить цель' : 'Указать цель'}</button>
                  </div>
                </>
              ) : (
                <>
                  <h3 style={{ fontSize: 28, lineHeight: 1.1, marginBottom: 12 }}>Расскажите, зачем вы здесь.</h3>
                  <p className="muted" style={{ fontSize: 15, lineHeight: 1.55, margin: 0 }}>Две минуты на анкету — и подберём первые материалы под вашу цель.</p>
                  <div style={{ marginTop: 22 }}><button className="os-btn tg" onClick={()=>nav('onboarding')}>Заполнить анкету →</button></div>
                </>
              )}
            </div>
          </div>

          {rec.length > 1 && (
            <div>
              <div className="cm-h2row">
                <h2 className="os-h2">Подобрали под вашу цель</h2>
                <a className="cm-more" href="/os/?view=kb" onClick={(e)=>{ e.preventDefault(); nav('kb'); }}>Вся база →</a>
              </div>
              <div className="cm-grid-3">{rec.map(r => <MatCard key={r.slug} it={r} nav={nav}/>)}</div>
            </div>
          )}

          <div>
            <div className="cm-h2row">
              <h2 className="os-h2">Ближайшие события</h2>
              {/* TODO: календарь месяца и ссылки на подключение — после синка с расписанием */}
            </div>
            <EventsList events={ev && ev.ok ? ev.events : (ev ? [] : null)}/>
          </div>

          <div>
            <div className="cm-h2row">
              <h2 className="os-h2">Разделы базы знаний</h2>
              <a className="cm-more" href="/os/?view=kb" onClick={(e)=>{ e.preventDefault(); nav('kb'); }}>Открыть базу →</a>
            </div>
            <div className="cm-clusters">
              {clusters.map(c => (
                <a key={c.id} className="cm-cluster" href={`/os/?view=kb&c=${c.id}`}
                   onClick={(e)=>{ e.preventDefault(); nav('kb', { c: c.id }); }}>
                  <span className="cm-sec-n">{c.n}</span>
                  <span style={{ minWidth: 0 }}>
                    <span className="cm-cluster-t">{c.title}</span>
                    <span className="cm-cluster-d">{cnt(c.id) ? `${cnt(c.id)} мат.` : 'скоро'}</span>
                  </span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <MemberRail>
        <div className="os-rail-block">
          <div className="os-rail-h">Сообщество</div>
          <div className="os-card tight" style={{ padding: 16 }}>
            <p style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, margin: '0 0 12px' }}>
              Чат участников, Random Coffee и записи эфиров — в сообществе hakku.
            </p>
            <a className="os-btn ghost sm block" href="https://hakku.ai/community" target="_blank" rel="noopener noreferrer"
               style={{ justifyContent:'center', textDecoration:'none' }}>hakku.ai/community ↗</a>
          </div>
        </div>
      </MemberRail>
    </div>
  );
}
window.Home = Home;