<?php
/**
 * 404 Page Template
 */

?>
<!DOCTYPE html>
<html lang="<?php echo \esc_attr( \get_bloginfo( 'language' ) ?: 'en' ); ?>">

    <head>
        <title>404 - Page Not Found</title>
        <link rel="stylesheet" href="<?php echo \FleekDash\Libs\Assets\getCssUrl('core'); ?>">
        <link rel="stylesheet" href="<?php echo \FleekDash\Libs\Assets\getCssUrl('index'); ?>">
        <script>
            // Set theme from localStorage
            const theme = localStorage.getItem( 'fleekdash-theme' );
            if ( theme ) {
                document.documentElement.setAttribute( 'data-theme', theme );
            }

            // Set dark mode from localStorage
            const isDarkMode = localStorage.getItem( 'fleekdash-dark-mode' ) === 'true';
            if ( isDarkMode ) {
                document.documentElement.classList.add( 'dark' );
                document.documentElement.classList.remove( 'light' );
            } else {
                document.documentElement.classList.add( 'light' );
                document.documentElement.classList.remove( 'dark' );
            }

            // Theme sync for iframe
            if ( window.parent !== window ) {
                const parentDoc = window.parent.document;
                const observer = new MutationObserver( ( mutations ) => {
                    mutations.forEach( ( mutation ) => {
                        if ( mutation.type === 'attributes' &&
                            ( mutation.attributeName === 'data-theme' || mutation.attributeName === 'class' ) ) {
                            const doc = document.documentElement;

                            // Sync data-theme
                            const parentTheme = parentDoc.documentElement.getAttribute( 'data-theme' );
                            if ( parentTheme ) {
                                doc.setAttribute( 'data-theme', parentTheme );
                            }

                            // Sync light/dark classes
                            if ( parentDoc.documentElement.classList.contains( 'light' ) ) {
                                doc.classList.add( 'light' );
                                doc.classList.remove( 'dark' );
                            } else if ( parentDoc.documentElement.classList.contains( 'dark' ) ) {
                                doc.classList.add( 'dark' );
                                doc.classList.remove( 'light' );
                            }
                        }
                    } );
                } );

                observer.observe( parentDoc.documentElement, {
                    attributes: true,
                    attributeFilter: [ 'data-theme', 'class' ]
                } );
            }
        </script>
        <style>
            /* Define missing CSS variables with fallbacks */
            :root {
                --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                --text-xs: 0.75rem;
                --text-sm: 0.875rem;
                --text-base: 1rem;
                --text-lg: 1.125rem;
                --text-xl: 1.25rem;
                --radius-sm: 0.375rem;
                --radius: 0.5rem;
                --radius-md: 0.75rem;
                --radius-lg: 1rem;
                --radius-xl: 1.5rem;
                --radius-full: 9999px;
            }

            body {
                font-family: var(--font-family);
                background-color: transparent;
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                text-align: center;
                color: var(--foreground) !important;
            }

            .container {
                max-width: 600px;
                padding: 2rem;
            }

            body #wpwrap #wpbody h1 {
                font-size: 4rem;
                font-weight: 700;
                color: var(--card-foreground) !important;
                margin: 0;
                line-height: 1.2;
            }

            body #wpwrap #wpbody h2 {
                font-size: 2rem;
                font-weight: 600;
                color: var(--muted-foreground) !important;
                margin: 1rem 0;
                line-height: 1.4;
            }

            body #wpwrap #wpbody p {
                color: var(--muted-foreground) !important;
                margin-bottom: 2rem;
                font-size: var(--text-base) !important;
                line-height: 1.6;
            }

            body #wpwrap #wpbody .button {
                display: inline-block;
                padding: 0.75rem 1.5rem;
                background-color: var(--primary);
                color: var(--primary-foreground);
                text-decoration: none;
                border-radius: var(--radius-full);
                font-weight: 500;
                font-size: var(--text-sm) !important;
                transition: all 0.2s ease;
                border: none;
                cursor: pointer;
            }

            body #wpwrap #wpbody .button:hover {
                background-color: var(--primary);
                opacity: 0.9;
                color: var(--primary-foreground) !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
        </style>
    </head>

    <body class="wp-admin fleekdash-iframe">
        <div class="container" id="wpwrap">
            <main id="wpbody">
                <h1>404</h1>
                <h2>Page Not Found</h2>
                <p>The page you are looking for does not exist or has been moved.</p>
                <a href="<?php echo \esc_url(\admin_url('admin.php?page=fleekdash#/dashboard')); ?>" class="button" target="_parent">Return to Dashboard</a>
            </main>
        </div>
    </body>

</html>
