/**
 * TrainingPage
 * Description: Course landing page for the AI+ Design VN training programme
 * Dependencies: window.AppData.TRAINING, window.Footer, window.BeforeAfter,
 *               window.TrainingStage, window.ReservationForm
 *
 * Does NOT use window.PageHeader: the language toggle has to sit inside the
 * 7+5 header grid, and PageHeader has no slot for it.
 */

window.TrainingPage = () => {
    const { useState, useEffect } = React;
    const { useSearchParams, Link } = ReactRouterDOM;

    // Language lives in ?lang= so a link opens in the language it was shared in
    const [searchParams, setSearchParams] = useSearchParams();
    const lang = searchParams.get('lang') === 'en' ? 'en' : 'vi';
    const setLang = (next) => {
        const p = new URLSearchParams(searchParams);
        if (next === 'en') p.set('lang', 'en'); else p.delete('lang');
        setSearchParams(p, { replace: true });
    };

    const DATA = window.AppData.TRAINING;
    const t = DATA[lang];
    const meta = DATA.meta;
    const labels = { before: t.baL, after: t.baR, sourceShort: t.lblSourceShort };

    const [formOpen, setFormOpen] = useState(false);
    const openForm = () => setFormOpen(true);

    const [tab, setTab] = useState('ind');
    const [showSticky, setShowSticky] = useState(false);
    const [currentShotIndex, setCurrentShotIndex] = useState(0);
    const pageRef = React.useRef(null);

    // Auto-rotate class shots (transition logic matching ExpertisePage)
    useEffect(() => {
        if (!DATA.media.classShots || DATA.media.classShots.length <= 1) return;
        const interval = setInterval(() => {
            setCurrentShotIndex((prev) => (prev + 1) % DATA.media.classShots.length);
        }, 4000);
        return () => clearInterval(interval);
    }, [DATA.media.classShots.length]);

    useEffect(() => {
        const node = pageRef.current;
        if (!node) return;
        const io = new IntersectionObserver(
            (entries) => entries.forEach((e) => setShowSticky(e.isIntersecting)),
            { threshold: 0 }
        );
        io.observe(node);
        return () => io.disconnect();
    }, []);

    // The chatbot bubble is fixed bottom-right at the exact spot the mobile
    // sticky bar occupies. This class is the only signal the bubble gets that
    // the bar is on screen; it is added by this page alone and removed on
    // unmount, so no other page is affected.
    useEffect(() => {
        if (!showSticky) return;
        document.body.classList.add('has-tr-sticky');
        return () => document.body.classList.remove('has-tr-sticky');
    }, [showSticky]);

    const hideBroken = (e) => { e.target.style.visibility = 'hidden'; };

    const heroItem = t.ses[0].items[0];
    const seatsLeft = Math.max(0, meta.minGroup - meta.filled);

    return (
        <div className="relative flex min-h-screen w-full flex-col overflow-x-hidden pt-24 tr-page">
            <div className="fixed inset-0 pointer-events-none z-0 swiss-grid"></div>

            <main ref={pageRef} className="relative flex-1 w-full flex flex-col pb-20 px-6 lg:px-12">
                <div className="mx-auto w-full max-w-7xl">

                    <header className="tr-ph">
                        <div className="tr-ph-grid">
                            <div>
                                <div className="tr-eyebrow">// AI+ DESIGN VN</div>
                                <h1 className="tr-h1">
                                    {t.h1.map((line, i) => (
                                        <React.Fragment key={i}>{line}<br /></React.Fragment>
                                    ))}
                                </h1>
                            </div>
                            <div className="tr-ph-side">
                                <div className="tr-lang">
                                    <button type="button" className={lang === 'vi' ? 'on' : ''}
                                            onClick={() => setLang('vi')}>VN</button>
                                    <button type="button" className={lang === 'en' ? 'on' : ''}
                                            onClick={() => setLang('en')}>EN</button>
                                </div>
                                <div className="tr-ph-desc">
                                    <p>{t.phd1}</p><p>{t.phd2}</p><p>{t.phd3}</p>
                                </div>
                            </div>
                        </div>
                    </header>

                    <section className="tr-hero">
                        <div className="tr-hero-grid">
                            <div>
                                <h2 className="tr-claim">{t.claim}</h2>
                                <p className="tr-body">{t.claimBody}</p>
                                <div className="tr-badges">
                                    <span className="tr-badge key">{t.b1}</span>
                                    <span className="tr-badge">{t.b2}</span>
                                    <span className="tr-badge">{t.b3}</span>
                                    <span className="tr-badge">{t.b4}</span>
                                    <span className="tr-badge key">{t.b5}</span>
                                </div>
                                <div className="tr-cta-row">
                                    <button type="button" className="tr-btn" onClick={openForm}>{t.ctaMain}</button>
                                    <Link to="/contact" className="tr-btn ghost">{t.ctaAlt}</Link>
                                </div>
                            </div>
                            <div className="tr-pair">
                                <div className="tr-pair-src">
                                    <span className="tr-pair-lbl">{t.lblSource}</span>
                                    <img src={window.ImageUtils.getImagePath(heroItem.src)} alt="" />
                                    <div className="tr-rule"><i></i><b>225 &times; 225 PX</b><i></i></div>
                                </div>
                                <div className="tr-pair-res">
                                    <span className="tr-pair-lbl">{t.lblResult}</span>
                                    <img src={window.ImageUtils.getImagePath(heroItem.k)} alt={heroItem.t} />
                                </div>
                            </div>
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey3}</div>
                            <h2 className="tr-h2">{t.hd3}</h2>
                        </div>
                        <div className="tr-cols">
                            <div className="tr-col yes">
                                <h3>{t.forWho}</h3>
                                <ul>{t.yes.map((x) => <li key={x}>{x}</li>)}</ul>
                            </div>
                            <div className="tr-col no">
                                <h3>{t.notWho}</h3>
                                <ul>{t.no.map((x) => <li key={x}>{x}</li>)}</ul>
                            </div>
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey2}</div>
                            <h2 className="tr-h2">{t.hd2}</h2>
                            <p className="tr-lede">{t.ld2}</p>
                        </div>

                        <div className="tr-fmts" style={{ marginBottom: '28px' }}>
                            {t.fmts.map((f) => (
                                <div className="tr-fmt" key={f.h}>
                                    <span className="tr-fmt-tag">{f.tag}</span>
                                    <h3>{f.h}</h3>
                                    <p>{f.p}</p>
                                    <div className="tr-fmt-note">{f.note}</div>
                                </div>
                            ))}
                        </div>

                        <div className="tr-tabs">
                            <button type="button" className={tab === 'ind' ? 'on' : ''}
                                    aria-pressed={tab === 'ind'}
                                    onClick={() => setTab('ind')}>{t.tabInd}</button>
                            <button type="button" className={tab === 'corp' ? 'on' : ''}
                                    aria-pressed={tab === 'corp'}
                                    onClick={() => setTab('corp')}>{t.tabCorp}</button>
                        </div>

                        <p className="tr-body" style={{ marginBottom: '28px' }}>
                            {tab === 'ind' ? t.indIntro : t.corpIntro}
                        </p>

                        <div className="tr-steps">
                            {(tab === 'ind' ? t.steps : t.corpSteps).map((s, i) => (
                                <div className="tr-step" key={s.h}>
                                    <span className="tr-step-n">{'0' + (i + 1)}</span>
                                    <h3>{s.h}</h3>
                                    <p>{s.p}</p>
                                </div>
                            ))}
                        </div>

                        {tab === 'ind' ? (
                            <React.Fragment>
                                <div className="tr-slots">
                                    <div className="tr-slots-top">
                                        <div className="tr-slots-left">
                                            <span className="tr-slots-n">
                                                <em>{meta.filled}</em> / {meta.minGroup}
                                            </span>
                                            <span className="tr-slots-note">
                                                {t.slotsLeft.replace('{n}', seatsLeft)}
                                            </span>
                                        </div>
                                        <button type="button" className="tr-btn" onClick={openForm}>{t.ctaMain}</button>
                                    </div>
                                    <div className="tr-slots-bar">
                                        {Array.from({ length: meta.minGroup }, (unused, i) => (
                                            <i key={i} className={i < meta.filled ? 'on' : ''}></i>
                                        ))}
                                    </div>
                                    <p className="tr-slots-cap">{t.slotsCap}</p>
                                </div>
                                <div className="tr-shortcut">
                                    <p>{t.shortcut}</p>
                                    <Link to="/contact" className="tr-btn">{t.ctaAlt}</Link>
                                </div>
                            </React.Fragment>
                        ) : (
                            <React.Fragment>
                                <div className="tr-shortcut">
                                    <p>{t.corpNote}</p>
                                    <Link to="/contact" className="tr-btn">{t.ctaAlt}</Link>
                                </div>
                            </React.Fragment>
                        )}
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey6}</div>
                            <h2 className="tr-h2">{t.hd6}</h2>
                            <p className="tr-lede">{t.ld6}</p>
                        </div>
                        {t.ses.map((s) => (
                            <div className="tr-sblock" key={s.n}>
                                <div className="tr-ses-card">
                                    <div className="tr-ses-top">
                                        <span className="tr-ses-n">{s.n}</span>
                                        <span className="tr-ses-h">{t.sesHours}</span>
                                    </div>
                                    <h3>{s.h}</h3>
                                    <ul>{s.li.map((x) => <li key={x}>{x}</li>)}</ul>
                                    <div className="tr-ses-out">
                                        <b>{t.sesOut}</b>
                                        <p>{s.o}</p>
                                    </div>
                                </div>
                                <window.TrainingStage items={s.items} labels={labels} />
                            </div>
                        ))}
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey4}</div>
                            <h2 className="tr-h2">{t.hd4}</h2>
                            <p className="tr-lede">{t.ld4}</p>
                        </div>
                        <div className="tr-outs">
                            {t.outs.map((x, i) => (
                                <div className="tr-out" key={x}>
                                    <b>{String(i + 1).padStart(2, '0')}</b>
                                    <span>{x}</span>
                                </div>
                            ))}
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey5}</div>
                            <h2 className="tr-h2">{t.hd5}</h2>
                        </div>
                        <div className="tr-plats">
                            {t.plats.map((p) => (
                                <div className="tr-plat" key={p.h}>
                                    <div className="tr-plat-top">
                                        <h3>{p.h}</h3>
                                        <span className="tr-free">{lang === 'vi' ? 'MIỄN PHÍ' : 'FREE TIER'}</span>
                                    </div>
                                    <p>{p.p}</p>
                                    {p.u ? <div className="tr-url">{p.u}</div> : null}
                                </div>
                            ))}
                        </div>
                        <p className="tr-shortcut info">{t.platNote}</p>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey8}</div>
                            <h2 className="tr-h2">{t.hd8}</h2>
                        </div>
                        <div className="tr-inst">
                            <div>
                                <div className="tr-inst-head">
                                    <img className="tr-portrait" onError={hideBroken}
                                         src={window.ImageUtils.getImagePath(DATA.media.portrait)} alt="" />
                                    <p className="tr-lede" style={{ margin: 0 }}>{t.instBio}</p>
                                </div>
                                <p className="tr-body">{t.instBio2}</p>
                                <p className="tr-focus-h">{t.focusHead}</p>
                                <ul className="tr-focus">{t.focus.map((x) => <li key={x}>{x}</li>)}</ul>
                            </div>
                            <div className="tr-inst-links">
                                {t.links.map((l) => (
                                    <Link to={l.to || '/work'} key={l.t}>
                                        <b>{l.t}</b><span>{l.m}</span>
                                    </Link>
                                ))}
                            </div>
                        </div>

                        <div className="tr-proof">
                            {t.proof.map((p) => (
                                <div className="tr-proof-c" key={p.b}>
                                    <b>{p.b}</b><span>{p.s}</span>
                                </div>
                            ))}
                        </div>

                        <p className="tr-subhead">{t.shHead}</p>
                        <figure className="relative aspect-[16/10] md:aspect-[16/9] overflow-hidden group border border-[var(--tr-line)] bg-[#080808] m-0">
                            <div className="absolute inset-0 bg-primary/20 mix-blend-overlay z-10 transition-opacity duration-500 group-hover:opacity-0 pointer-events-none"></div>
                            {DATA.media.classShots.map((shot, idx) => (
                                <img
                                    key={shot.src}
                                    src={window.ImageUtils.getImagePath(shot.src)}
                                    alt=""
                                    onError={hideBroken}
                                    className={`absolute inset-0 w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 ${
                                        idx === currentShotIndex ? 'opacity-100' : 'opacity-0 pointer-events-none'
                                    }`}
                                />
                            ))}
                            <figcaption className="absolute left-0 right-0 bottom-0 p-4 md:p-5 bg-gradient-to-t from-black/90 via-black/40 to-transparent z-20 flex flex-col md:flex-row md:items-end justify-between gap-4 font-mono text-[10px] md:text-[11px] tracking-wider uppercase text-neutral-300">
                                <span>{t[DATA.media.classShots[currentShotIndex].capKey]}</span>
                                <div className="flex gap-2 shrink-0 pb-0.5 pointer-events-auto">
                                    {DATA.media.classShots.map((shot, index) => (
                                        <button
                                            key={shot.src}
                                            type="button"
                                            onClick={() => setCurrentShotIndex(index)}
                                            className={`w-2 h-2 rounded-full transition-all duration-300 cursor-pointer ${
                                                index === currentShotIndex
                                                    ? 'bg-primary w-8'
                                                    : 'bg-white/50 hover:bg-white/80'
                                            }`}
                                            aria-label={`Slide ${index + 1}`}
                                        ></button>
                                    ))}
                                </div>
                            </figcaption>
                        </figure>

                        <p className="tr-subhead">{t.matHead}</p>
                        <div className="tr-mats">
                            {DATA.media.materials.map((m) => (
                                <figure className="tr-mat" key={m.src}>
                                    <img src={window.ImageUtils.getImagePath(m.src)} alt="" onError={hideBroken} />
                                    <figcaption>{t[m.capKey]}</figcaption>
                                </figure>
                            ))}
                        </div>

                        <p className="tr-subhead">{t.logoHead}</p>
                        <div className="tr-logos">
                            {DATA.logos.map((l) => (
                                <div className="tr-logo-tile" key={l.n}>
                                    <img src={window.ImageUtils.getImagePath(l.src)} alt={l.n} title={l.n} onError={hideBroken} />
                                </div>
                            ))}
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey9}</div>
                            <h2 className="tr-h2">{t.hd9}</h2>
                        </div>
                        <div className="tr-price">
                            <div className="tr-price-fig">
                                <b>{t.priceFig}</b><span>{t.priceUnit}</span>
                            </div>
                            <div className="tr-price-list">
                                <ul>{t.price.map((x) => <li key={x}>{x}</li>)}</ul>
                                <p className="tr-price-note">{t.priceNote}</p>
                            </div>
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey10}</div>
                            <h2 className="tr-h2">{t.hd10}</h2>
                        </div>
                        <div className="tr-after">
                            {t.after.map((a) => (
                                <div className="tr-after-c" key={a.h}>
                                    <b>{a.h}</b><p>{a.p}</p>
                                </div>
                            ))}
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-sec-head">
                            <div className="tr-eyebrow">{t.ey11}</div>
                            <h2 className="tr-h2">{t.hd11}</h2>
                        </div>
                        <div className="tr-faq">
                            {t.faq.map((f, i) => (
                                <details key={f.q}>
                                    <summary>
                                        <b>{String(i + 1).padStart(2, '0')}</b>{f.q}
                                    </summary>
                                    <div className="tr-faq-a">{f.a}</div>
                                </details>
                            ))}
                        </div>
                    </section>

                    <section className="tr-sec">
                        <div className="tr-final">
                            <div className="tr-eyebrow">{t.ey12}</div>
                            <h2>{t.hd12.map((line, i) => (
                                <React.Fragment key={i}>{line}<br /></React.Fragment>
                            ))}</h2>
                            <div className="tr-cta-row">
                                <button type="button" className="tr-btn" onClick={openForm}>{t.ctaMain}</button>
                                <Link to="/contact" className="tr-btn ghost">{t.ctaAlt}</Link>
                            </div>
                            <p className="tr-final-note">
                                {t.finalNote.split('\n').map((line, i) => (
                                    <React.Fragment key={i}>{line}<br /></React.Fragment>
                                ))}
                            </p>
                        </div>
                    </section>

                </div>
            </main>

            {formOpen && window.ReservationForm ? (
                <window.ReservationForm lang={lang} setLang={setLang}
                                       onClose={() => setFormOpen(false)} />
            ) : null}

            <div className={'tr-sticky' + (showSticky ? ' show' : '')}>
                <button type="button" onClick={openForm}>{t.ctaMain}</button>
                <Link to="/contact" className="alt">{t.ctaAltShort}</Link>
            </div>

            <window.Footer />
        </div>
    );
};