/**
 * CvViewerButton Component
 * Description: Button that opens a fullscreen popup with the HTML CV (iframe) and a Download CV button
 * Props: className (button style), children (button label)
 * Dependencies: React, ReactDOM
 */

window.CvViewerButton = ({ className, children }) => {
    const cvHtmlUrl = "/src/assets/portfolio-hardcopy/cv-profile.html";
    const cvPdfUrl = "/src/assets/portfolio-hardcopy/cv-profile.pdf";
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
        if (!open) return;
        const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
        // Keys pressed while the iframe has focus never reach this document; the viewer relays Esc.
        const onMessage = (e) => {
            if (e.origin === window.location.origin && e.data && e.data.type === 'cv-close') setOpen(false);
        };
        const prevOverflow = document.body.style.overflow;
        document.addEventListener('keydown', onKey);
        window.addEventListener('message', onMessage);
        document.body.style.overflow = 'hidden';
        return () => {
            document.removeEventListener('keydown', onKey);
            window.removeEventListener('message', onMessage);
            document.body.style.overflow = prevOverflow;
        };
    }, [open]);

    const modal = open ? ReactDOM.createPortal(
        <div role="dialog" aria-modal="true" aria-label="Curriculum Vitae" className="fixed inset-0 z-[9999] flex flex-col bg-[#050505]">
            <div className="flex items-center justify-between gap-4 h-16 px-6 lg:px-12 border-b border-white/10 shrink-0">
                <span className="font-mono text-xs text-primary font-bold uppercase tracking-[0.2em]">
                    // CURRICULUM VITAE
                </span>
                <div className="flex items-center gap-3">
                    <a
                        href={cvPdfUrl}
                        download="CV-Nguyen-Bao-Anh.pdf"
                        className="inline-flex items-center justify-center h-10 px-6 whitespace-nowrap bg-white text-black text-xs font-black uppercase tracking-[0.15em] hover:bg-primary hover:text-white transition-all duration-300"
                    >
                        Download CV
                    </a>
                    <button
                        type="button"
                        onClick={() => setOpen(false)}
                        aria-label="Close CV"
                        className="inline-flex items-center justify-center w-10 h-10 border border-white/20 text-white hover:border-white hover:bg-white hover:text-black transition-all duration-300"
                    >
                        <span className="material-symbols-outlined">close</span>
                    </button>
                </div>
            </div>
            <iframe title="Curriculum Vitae" src={cvHtmlUrl} className="flex-1 w-full border-0 bg-[#050505]"></iframe>
        </div>,
        document.body
    ) : null;

    return (
        <React.Fragment>
            <button type="button" onClick={() => setOpen(true)} className={className}>{children}</button>
            {modal}
        </React.Fragment>
    );
};