// academy-page.jsx — أكاديمية المبتكرين: full page (hero, stats, path, tracks, activities, enrollment)

function AcademyPage({ go, t, L, store, auth }) {
  const toast = useToast();
  const [track, setTrack] = React.useState(ACADEMY_PROGRAMS[0].id);
  const [lvl, setLvl] = React.useState(0);
  const [openTrack, setOpenTrack] = React.useState(ACADEMY_PROGRAMS[0].id);
  const [f, setF] = React.useState({ name: '', empId: '', dept: '', email: '', motivation: '' });
  const [sending, setSending] = React.useState(false);
  const [done, setDone] = React.useState(null);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));

  const totalHours = ACADEMY_PROGRAMS.reduce((a, p) => a + p.hours, 0);

  const submit = (e) => {
    e.preventDefault();
    setSending(true);
    setTimeout(() => {
      const ref = 'ACAD-' + Math.floor(1000 + Math.random() * 9000);
      const prog = ACADEMY_PROGRAMS.find(p => p.id === track);
      const record = {
        ref, kind: 'academy',
        title: L(prog.name),
        ...f,
        track: prog.name,
        level: ACADEMY_LEVELS[lvl].name,
        submittedAt: new Date().toISOString(),
        status: 'review',
      };
      if (store && store.addSubmission) store.addSubmission('ideas', record);
      setSending(false);
      setDone(ref);
      setF({ name: '', empId: '', dept: '', email: '', motivation: '' });
      toast(t('acad_done_t'));
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }, 1000);
  };

  const stats = [
    [ACADEMY_PROGRAMS.length, 'acad_stat_tracks', 'layers', 'mint'],
    [totalHours, 'acad_stat_hours', 'clock', 'purple'],
    [ACADEMY_LEVELS.length, 'acad_stat_levels', 'award', 'gold'],
    [ACADEMY_LEVELS.length, 'acad_stat_certs', 'shield', 'rose'],
  ];

  if (done) {
    return (
      <div>
        <PageHeader go={go} t={t} eyebrow={t('acad_eyebrow')} title={t('acad_name')} icon="award" />
        <section className="section tight">
          <div className="wrap" style={{ maxWidth: 620 }}>
            <div className="card card-pad center" style={{ padding: 48 }}>
              <div className="acad-seal" style={{ width: 72, height: 72, marginBottom: 20 }}><Icon.award s={32} /></div>
              <h2 style={{ fontSize: 27 }}>{t('acad_done_t')}</h2>
              <p className="muted" style={{ marginTop: 14, fontSize: 16 }}>{t('acad_done_d')}</p>
              <div className="chip on" style={{ margin: '20px auto 0', fontSize: 18, padding: '12px 22px' }}><Icon.hash s={16} /> {done}</div>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => setDone(null)}>{t('acad_apply')}</button>
                <button className="btn btn-ghost" onClick={() => go('home')}>{t('back')}</button>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div>
      {/* hero */}
      <div className="page-head acad-hero">
        <BrainCanvas mode="backdrop" />
        <div className="wrap">
          <button className="back-link" onClick={() => go('home')}><Icon.arrowL s={16} /> {t('back')}</button>
          <div className="center" style={{ maxWidth: 760, margin: '26px auto 0' }}>
            <span className="acad-seal"><Icon.award s={26} /></span>
            <div className="eyebrow" style={{ justifyContent: 'center', marginTop: 16 }}><Icon.spark s={15} /> {t('acad_eyebrow')}</div>
            <h1 style={{ fontSize: 'clamp(30px, 5vw, 52px)', marginTop: 14, lineHeight: 1.08 }}>{t('acad_name')}</h1>
            <p className="muted" style={{ fontSize: 17, marginTop: 16, lineHeight: 1.75 }}>{t('acad_page_sub')}</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-lg" href="#acad-enroll"><Icon.rocket s={18} /> {t('acad_apply')}</a>
              <a className="btn btn-ghost btn-lg" href="#acad-ie"><Icon.target s={18} /> {t('ie_title')}</a>
              <a className="btn btn-ghost btn-lg" href="#acad-tracks"><Icon.book s={18} /> {t('acad_programs')}</a>
            </div>
          </div>
        </div>
      </div>

      {/* stats */}
      <section className="section tight">
        <div className="wrap">
          <div className="grid g4">
            {stats.map(([v, k, ic, ac], i) => {
              const I = Icon[ic];
              return (
                <Reveal key={k} delay={i * 60}>
                  <div className="card card-pad" style={{ display: 'flex', alignItems: 'center', gap: 15 }}>
                    <span style={{ width: 46, height: 46, flex: 'none', borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${ac}) 16%, transparent)`, color: `var(--${ac})` }}><I s={22} /></span>
                    <div>
                      <div className="kpi-num" style={{ fontSize: 30 }}><CountUp to={v} /></div>
                      <div className="muted" style={{ fontSize: 13 }}>{t(k)}</div>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* هندسة الابتكار — flagship discipline */}
      <InnovationEngineering t={t} L={L} go={go} store={store} auth={auth} />

      {/* graduation path + pillars (reuse the homepage section body) */}
      <Academy go={go} t={t} L={L} />

      {/* training tracks */}
      <section className="section" id="acad-tracks">
        <div className="wrap">
          <Reveal><Head eyebrow={t('acad_programs')} title={t('acad_programs_t')} icon="layers" /></Reveal>
          <div style={{ display: 'grid', gap: 12, marginTop: 32 }}>
            {ACADEMY_PROGRAMS.map((p, i) => {
              const I = Icon[p.icon];
              const isOpen = openTrack === p.id;
              return (
                <Reveal key={p.id} delay={Math.min(i, 5) * 55}>
                  <div className={`card act-row ${isOpen ? 'open' : ''}`}>
                    <button className="act-head" onClick={() => setOpenTrack(isOpen ? null : p.id)} aria-expanded={isOpen}>
                      <span style={{ width: 46, height: 46, flex: 'none', borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${p.accent}) 16%, transparent)`, color: `var(--${p.accent})` }}><I s={23} /></span>
                      <span style={{ flex: 1, minWidth: 0, textAlign: 'start' }}>
                        <b style={{ fontSize: 16, display: 'block' }}>{L(p.name)}</b>
                        <span className="muted" style={{ fontSize: 12.5 }}>{p.hours} {t('acad_hours')} · {L(p.level)}</span>
                      </span>
                      <span className="act-chev" style={{ flex: 'none', color: 'var(--accent)' }}><Icon.chevR s={18} /></span>
                    </button>
                    {isOpen && (
                      <div className="act-body">
                        <p style={{ fontSize: 14.5, lineHeight: 1.75, margin: 0 }}>{L(p.desc)}</p>
                        <div style={{ marginTop: 16 }}>
                          <div className="eyebrow"><Icon.book s={14} /> {t('acad_topics')}</div>
                          <ul className="acad-topics">
                            {p.topics.map((tp, k) => (
                              <li key={k}><span style={{ color: `var(--${p.accent})`, flex: 'none' }}><Icon.check s={16} /></span>{L(tp)}</li>
                            ))}
                          </ul>
                        </div>
                        <button className="btn btn-primary btn-sm" style={{ marginTop: 18 }} onClick={() => { setTrack(p.id); const el = document.getElementById('acad-enroll'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>
                          <Icon.arrow s={15} /> {t('acad_apply')}
                        </button>
                      </div>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* applied activities */}
      <section className="section" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,.02), transparent)' }}>
        <div className="wrap">
          <Reveal><Head eyebrow={t('acad_acts')} title={t('acad_acts_t')} icon="flask" /></Reveal>
          <div className="grid g3" style={{ marginTop: 32 }}>
            {ACADEMY_ACTIVITIES.map((a, i) => {
              const I = Icon[a.icon];
              return (
                <Reveal key={i} delay={(i % 3) * 70}>
                  <div className="card card-pad hoverable" style={{ height: '100%' }}>
                    <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${a.accent}) 16%, transparent)`, color: `var(--${a.accent})` }}><I s={22} /></span>
                    <b style={{ fontSize: 16.5, display: 'block', marginTop: 14 }}>{L(a.title)}</b>
                    <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.65 }}>{L(a.desc)}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* membership benefits · science books · one team */}
      <AcademyPerks t={t} L={L} go={go} data={store && store.data} />

      {/* owner-updatable resource shelf (glossaries, guides, handouts) */}
      <section className="section tight">
        <div className="wrap">
          <ResourceShelf t={t} L={L} store={store} auth={auth} bucket="academy" accent="purple"
            eyebrow={t('shelf_ac_eyebrow')} title={t('shelf_ac_title')} sub={t('shelf_ac_sub')} kindLabel={t('shelf_add_ac')} />
        </div>
      </section>

      {/* enrollment */}
      <section className="section" id="acad-enroll">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <Reveal><Head center eyebrow={t('acad_apply')} title={t('acad_enroll_t')} sub={t('acad_enroll_d')} icon="rocket" /></Reveal>
          <Reveal>
            <form className="card card-pad" style={{ display: 'grid', gap: 18, padding: 30, marginTop: 30 }} onSubmit={submit}>
              <div className="grid g2" style={{ gap: 18 }}>
                <Field label={t('f_name')} required><input className="input" required value={f.name} onChange={e => set('name', e.target.value)} placeholder="—" /></Field>
                <Field label={t('f_id')} required><input className="input" required value={f.empId} onChange={e => set('empId', e.target.value)} placeholder="EE-0000" /></Field>
              </div>
              <div className="grid g2" style={{ gap: 18 }}>
                <Field label={t('f_dept')} required><input className="input" required value={f.dept} onChange={e => set('dept', e.target.value)} placeholder="—" /></Field>
                <Field label={t('f_email')} required><input className="input" type="email" required value={f.email} onChange={e => set('email', e.target.value)} placeholder="name@ibtikar.health" /></Field>
              </div>
              <Field label={t('acad_pick_track')} required>
                <select className="select" value={track} onChange={e => setTrack(e.target.value)}>
                  {ACADEMY_PROGRAMS.map(p => <option key={p.id} value={p.id}>{L(p.name)}</option>)}
                </select>
              </Field>
              <Field label={t('acad_pick_level')} required>
                <div className="tabs" style={{ display: 'flex', flexWrap: 'wrap' }}>
                  {ACADEMY_LEVELS.map((x, i) => (
                    <button type="button" key={x.lvl} className={`tab ${lvl === i ? 'on' : ''}`} onClick={() => setLvl(i)}>{L(x.name)}</button>
                  ))}
                </div>
              </Field>
              <Field label={t('acad_motivation')}><textarea className="textarea" value={f.motivation} onChange={e => set('motivation', e.target.value)} placeholder="—" /></Field>
              <button className="btn btn-primary btn-lg" disabled={sending} style={{ justifySelf: 'start' }}>
                {sending ? <><span className="spin" /> {t('sending')}</> : <><Icon.rocket s={18} /> {t('acad_apply')}</>}
              </button>
            </form>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.AcademyPage = AcademyPage;