import { useEffect, type ReactNode } from 'react';
import { usePage } from '@inertiajs/react';
import { Pengumuman } from '@/komponen/Pengumuman';
import { Ikon, SpriteIkon } from '@/komponen/Ikon';
import { useBodyKelas } from '@/lib/guna';
import { bukaDialogPrivasi } from '@/komponen/DialogPrivasi';
import type { PropsBersama } from '@/tipe/inertia';
import type { Tahap } from '@/tipe/model';

interface Props {
    fokus?: boolean;
    tahapan?: Tahap[];
    wadah?: string;
    /** Teks kecil di atas judul hero (menggantikan "Langkah X dari Y"). */
    eyebrow?: ReactNode;
    /** Teks penjelasan di bawah judul hero. */
    lead?: ReactNode;
    /** Stepper di dalam hero (menggantikan @yield('kemajuan')). */
    kemajuan?: ReactNode;
    /** Isi utama di dalam <main> (menggantikan @yield('isi')). */
    children: ReactNode;
}

/**
 * Port langsung layouts/publik.blade.php. Markup dan kelasnya identik
 * dengan versi sebelum migrasi supaya tampilan tidak berubah (docs/
 * MIGRASI-REACT.md §6.3).
 */
export default function TataLetakPublik({ fokus, tahapan = [], wadah, eyebrow, lead, kemajuan, children }: Props) {
    const { sekolah, wa_panitia, toast, pendaftaran_dibuka } = usePage().props as unknown as PropsBersama;
    const jumlahTahap = tahapan.length;

    useBodyKelas(fokus ? 'laman--fokus' : '');

    /*
     * Tautan Kebijakan privasi tampil sebagai modal SweetAlert2, persis
     * penangan di bagian akhir inti.js.
     */
    useEffect(() => {
        function saatKlik(e: MouseEvent) {
            const tautan = (e.target as HTMLElement).closest('.link-privasi');

            if (!tautan) {
                return;
            }

            e.preventDefault();

            bukaDialogPrivasi(wa_panitia);
        }

        document.addEventListener('click', saatKlik);

        return () => document.removeEventListener('click', saatKlik);
    }, [wa_panitia]);

    /*
     * Appbar muncul saat hero tergulir keluar layar — penangan
     * IntersectionObserver di bagian akhir inti.js.
     */
    useEffect(() => {
        if (!fokus || !('IntersectionObserver' in window)) {
            return;
        }

        const appbar = document.querySelector('[data-appbar]');
        const hero = document.querySelector('[data-hero]');

        if (!appbar || !hero) {
            return;
        }

        const pengamat = new IntersectionObserver(
            (entri) => appbar.classList.toggle('tampil', !entri[0]?.isIntersecting),
            { rootMargin: '-80px 0px 0px 0px' },
        );

        pengamat.observe(hero);

        return () => pengamat.disconnect();
    }, [fokus]);

    return (
        <>
            <SpriteIkon />
            <a className="lewati-ke-isi" href="#isi">Lewati ke isi utama</a>

            <div className="laman">
                {fokus ? (
                    <>
                        <div className="appbar" data-appbar aria-hidden="true">
                            <a className="ikon-btn" href="/" aria-label="Kembali ke halaman utama"><Ikon nama="home" ukuran={20} /></a>
                            <b data-judul-mini>{tahapan[0]?.nama}</b>
                            <span className="mini"><i data-mini></i></span>
                        </div>

                        <header className="hero" data-hero>
                            <span className="hero-watermark" aria-hidden="true"></span>
                            <div className="bar">
                                <a className="ikon-btn" href="/" aria-label="Kembali ke halaman utama"><Ikon nama="home" ukuran={20} /></a>
                                <span className="logo"><img src={sekolah.logo} alt="" width="34" height="34" /></span>
                                <span className="merek">
                                    <b>{sekolah.nama}</b>
                                    <small>SPMB · Tahun Ajaran {sekolah.tahun_ajaran}</small>
                                </span>
                                <span className="lencana">{pendaftaran_dibuka ? 'Dibuka' : 'Ditutup'}</span>
                            </div>
                            <div className="hero-isi">
                                <p className="eyebrow">{eyebrow ?? <>Langkah <span data-nomor-langkah>1</span> dari {jumlahTahap}</>}</p>
                                <h1 data-judul-langkah>{tahapan[0]?.judul}</h1>
                                <p className="lead">{lead ?? 'Isi data dengan benar. Progres tersimpan di perangkat ini, jadi kamu bisa melanjutkan kapan saja.'}</p>
                            </div>
                            {kemajuan}
                        </header>
                    </>
                ) : (
                    <header className="kepala-situs">
                        <div className="wadah kepala-situs__isi">
                            <img className="kepala-situs__logo" src={sekolah.logo} alt="" width="48" height="48" />
                            <p className="kepala-situs__nama">
                                {sekolah.nama}
                                <span className="kepala-situs__sub">
                                    Penerimaan Murid Baru {sekolah.tahun_ajaran}
                                </span>
                            </p>
                        </div>
                    </header>
                )}

                {/* Mode fokus memakai struktur <main> yang sama; CSS
                    `.laman--fokus .isi-utama{padding:0}` yang menghapus jaraknya. */}
                <main className="isi-utama" id="isi">
                    <div className={`wadah${wadah ? ` ${wadah}` : ''}`}>
                        <Pengumuman />
                        {children}
                    </div>
                </main>

                <footer className={`kaki-situs${fokus ? ' kaki-situs--fokus' : ''}`}>
                    <div className="wadah">
                        <div className="kaki-situs__tautan">
                            {!fokus && (
                                <>
                                    <a href="/daftar">Formulir pendaftaran</a>
                                    <a href="/cek-status">Cek status</a>
                                </>
                            )}
                            <a href="#" className="link-privasi">Kebijakan privasi</a>
                            <a href={wa_panitia ?? '/cek-status'} rel="noopener">Hubungi panitia</a>
                        </div>
                        <p className="tanpa-jarak-bawah">&copy; {new Date().getFullYear()} {sekolah.nama}</p>
                    </div>
                </footer>
            </div>

            {toast && (
                <div className={`spanduk spanduk--${toast.jenis}`} role="status">
                    <p className="tanpa-jarak-bawah">{toast.pesan}</p>
                </div>
            )}
        </>
    );
}