/**
 * RSL Universal Dark Mode
 *
 * Automatically generates dark mode styles for pages without custom dark mode CSS.
 * Works with the RSL theme toggle system (theme-toggle.js).
 *
 * @fileoverview Automatic dark mode generation for RSL sites
 * @version 1.0.0
 * @license MIT
 *
 * How it works:
 * 1. On page load, injects a comprehensive dark mode stylesheet
 * 2. Targets common element types and inline styles
 * 3. Respects existing [data-theme="dark"] rules (they take precedence)
 * 4. Elements with data-no-dark-mode attribute are skipped
 *
 * Usage:
 * Simply include this script AFTER theme-toggle.js:
 * <script src="javascript/theme-toggle.js"></script>
 * <script src="javascript/universal-dark-mode.js"></script>
 *
 * To exclude specific elements from dark mode transformation:
 * <div data-no-dark-mode>This stays as-is in dark mode</div>
 *
 * Note: This provides a "good enough" dark mode. For brand-specific
 * dark themes, write custom [data-theme="dark"] CSS instead.
 */

(function() {
    'use strict';

    window.RSL = window.RSL || {};

    /**
     * Universal Dark Mode Module
     */
    window.RSL.UniversalDarkMode = {

        /** Whether the module has been initialized */
        initialized: false,

        /** The injected style element */
        styleElement: null,

        /**
         * Dark mode color palette
         * These are the standard colors applied in dark mode
         */
        colors: {
            // Backgrounds
            bgPrimary: '#1a1a2e',
            bgSecondary: '#16213e',
            bgTertiary: '#0f3460',
            bgCard: 'rgba(255, 255, 255, 0.05)',
            bgCardHover: 'rgba(255, 255, 255, 0.08)',
            bgInput: 'rgba(255, 255, 255, 0.05)',

            // Text
            textPrimary: '#ffffff',
            textSecondary: 'rgba(255, 255, 255, 0.8)',
            textTertiary: 'rgba(255, 255, 255, 0.6)',
            textMuted: 'rgba(255, 255, 255, 0.4)',

            // Borders
            border: 'rgba(255, 255, 255, 0.1)',
            borderLight: 'rgba(255, 255, 255, 0.05)',
            borderAccent: 'rgba(110, 123, 255, 0.3)',

            // Accent (RSL Purple)
            accent: '#6E7BFF',
            accentLight: '#8B96FF',
            accentDark: '#5A67D8',

            // Shadows
            shadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
            shadowLg: '0 8px 24px rgba(0, 0, 0, 0.4)',

            // Semantic colors
            success: '#2ecc71',
            warning: '#f39c12',
            danger: '#e74c3c',
            info: '#3498db'
        },

        /**
         * Initialize universal dark mode
         * Automatically called on script load
         */
        init: function() {
            if (this.initialized) return;

            this.injectStyles();
            this.initialized = true;

            console.log('[RSL] Universal Dark Mode initialized');
        },

        /**
         * Inject the dark mode stylesheet
         */
        injectStyles: function() {
            if (this.styleElement) return;

            var style = document.createElement('style');
            style.id = 'rsl-universal-dark-mode';
            style.textContent = this.generateCSS();
            document.head.appendChild(style);

            this.styleElement = style;
        },

        /**
         * Generate the complete dark mode CSS
         * @returns {string} CSS rules
         */
        generateCSS: function() {
            var c = this.colors;

            return `
/* ============================================
   RSL Universal Dark Mode - Auto-Generated
   ============================================ */

/* Skip elements with data-no-dark-mode */
[data-theme="dark"] [data-no-dark-mode],
[data-theme="dark"] [data-no-dark-mode] * {
    /* Inherit from parent, don't apply dark mode transforms */
}

/* ===========================================
   BASE ELEMENTS
   =========================================== */

/* Body */
[data-theme="dark"] body {
    background-color: ${c.bgPrimary};
    color: ${c.textPrimary};
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: ${c.textPrimary};
}

/* Paragraphs and text */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] small,
[data-theme="dark"] figcaption {
    color: ${c.textSecondary};
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol,
[data-theme="dark"] li {
    color: ${c.textSecondary};
}

/* Links */
[data-theme="dark"] a:not([class*="btn"]):not([class*="nav"]):not([data-no-dark-mode]) {
    color: ${c.accentLight};
}

[data-theme="dark"] a:not([class*="btn"]):not([class*="nav"]):not([data-no-dark-mode]):hover {
    color: ${c.accent};
}

/* ===========================================
   CONTAINERS & CARDS
   =========================================== */

/* Generic containers */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: transparent;
}

/* Sections */
[data-theme="dark"] section {
    background-color: transparent;
}

/* Cards and card-like elements */
[data-theme="dark"] .card,
[data-theme="dark"] .rsl-card,
[data-theme="dark"] [class*="-card"]:not([data-no-dark-mode]) {
    background: ${c.bgCard};
    border-color: ${c.border};
    color: ${c.textPrimary};
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .rsl-card:hover,
[data-theme="dark"] [class*="-card"]:not([data-no-dark-mode]):hover {
    background: ${c.bgCardHover};
    border-color: ${c.borderAccent};
}

/* Card headers and footers */
[data-theme="dark"] .card-header,
[data-theme="dark"] .rsl-card-header,
[data-theme="dark"] [class*="-card-header"] {
    background: rgba(110, 123, 255, 0.1);
    border-color: ${c.border};
}

[data-theme="dark"] .card-footer,
[data-theme="dark"] .rsl-card-footer,
[data-theme="dark"] [class*="-card-footer"] {
    background: rgba(0, 0, 0, 0.2);
    border-color: ${c.border};
}

/* ===========================================
   INLINE STYLE OVERRIDES
   =========================================== */

/* White backgrounds */
[data-theme="dark"] [style*="background: white"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background:white"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background: #fff"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background:#fff"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"]:not([data-no-dark-mode]) {
    background: ${c.bgCard} !important;
}

/* Light gray backgrounds */
[data-theme="dark"] [style*="background: #f"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background:#f"]:not([data-no-dark-mode]) {
    background: ${c.bgSecondary} !important;
}

/* Light backgrounds starting with #e */
[data-theme="dark"] [style*="background: #e"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="background:#e"]:not([data-no-dark-mode]) {
    background: ${c.bgTertiary} !important;
}

/* Dark text on light backgrounds - make light */
[data-theme="dark"] [style*="color: #333"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:#333"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color: #000"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:#000"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color: black"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:black"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"]:not([data-no-dark-mode]) {
    color: ${c.textPrimary} !important;
}

/* Gray text */
[data-theme="dark"] [style*="color: #6"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:#6"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color: #7"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:#7"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color: #8"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="color:#8"]:not([data-no-dark-mode]) {
    color: ${c.textSecondary} !important;
}

/* Border overrides */
[data-theme="dark"] [style*="border: 1px solid #"]:not([data-no-dark-mode]),
[data-theme="dark"] [style*="border:1px solid #"]:not([data-no-dark-mode]) {
    border-color: ${c.border} !important;
}

[data-theme="dark"] [style*="border-color: #"]:not([data-no-dark-mode]) {
    border-color: ${c.border} !important;
}

/* ===========================================
   FORMS
   =========================================== */

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: ${c.bgInput};
    border-color: ${c.border};
    color: ${c.textPrimary};
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: ${c.accent};
    box-shadow: 0 0 0 3px rgba(110, 123, 255, 0.2);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: ${c.textMuted};
}

[data-theme="dark"] label {
    color: ${c.textSecondary};
}

/* ===========================================
   TABLES
   =========================================== */

[data-theme="dark"] table {
    background: transparent;
    color: ${c.textPrimary};
}

[data-theme="dark"] th {
    background: rgba(110, 123, 255, 0.2);
    color: ${c.textPrimary};
    border-color: ${c.border};
}

[data-theme="dark"] td {
    background: transparent;
    color: ${c.textSecondary};
    border-color: ${c.border};
}

[data-theme="dark"] tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] tr:hover td {
    background: rgba(110, 123, 255, 0.1);
}

/* ===========================================
   BUTTONS
   =========================================== */

/* Generic buttons */
[data-theme="dark"] button:not([class*="btn"]):not([class*="toggle"]):not([data-no-dark-mode]) {
    background: rgba(110, 123, 255, 0.2);
    border-color: ${c.borderAccent};
    color: ${c.textPrimary};
}

/* Primary buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] [class*="btn-primary"] {
    background-color: ${c.accent} !important;
    border-color: ${c.accentDark} !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] [class*="btn-primary"]:hover {
    background-color: ${c.accentDark} !important;
}

/* Secondary/outline buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] [class*="btn-secondary"],
[data-theme="dark"] [class*="btn-outline"] {
    background: transparent !important;
    border-color: ${c.textSecondary} !important;
    color: ${c.textPrimary} !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] [class*="btn-secondary"]:hover,
[data-theme="dark"] [class*="btn-outline"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Semantic buttons */
[data-theme="dark"] .btn-success,
[data-theme="dark"] [class*="btn-success"] {
    background-color: ${c.success} !important;
    border-color: #27ae60 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-warning,
[data-theme="dark"] [class*="btn-warning"] {
    background-color: ${c.warning} !important;
    border-color: #e67e22 !important;
    color: #1a1a1a !important;
}

[data-theme="dark"] .btn-danger,
[data-theme="dark"] [class*="btn-danger"] {
    background-color: ${c.danger} !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-info,
[data-theme="dark"] [class*="btn-info"] {
    background-color: ${c.info} !important;
    border-color: #2980b9 !important;
    color: #ffffff !important;
}

/* ===========================================
   NAVIGATION
   =========================================== */

[data-theme="dark"] nav,
[data-theme="dark"] .nav,
[data-theme="dark"] .navbar,
[data-theme="dark"] [class*="navbar"] {
    background: ${c.bgSecondary};
    border-color: ${c.border};
}

[data-theme="dark"] .nav-link,
[data-theme="dark"] [class*="nav-link"],
[data-theme="dark"] [class*="navbar-link"] {
    color: ${c.textPrimary};
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] [class*="nav-link"]:hover,
[data-theme="dark"] [class*="navbar-link"]:hover {
    color: ${c.accentLight};
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] [class*="dropdown"] {
    background: ${c.bgTertiary};
    border-color: ${c.border};
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] [class*="dropdown-item"] {
    color: ${c.textPrimary};
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] [class*="dropdown-item"]:hover {
    background: rgba(110, 123, 255, 0.2);
}

/* ===========================================
   FOOTER
   =========================================== */

[data-theme="dark"] footer,
[data-theme="dark"] .footer,
[data-theme="dark"] [class*="footer"] {
    background: ${c.bgSecondary};
    border-color: ${c.border};
    color: ${c.textSecondary};
}

[data-theme="dark"] footer h1,
[data-theme="dark"] footer h2,
[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4,
[data-theme="dark"] footer h5,
[data-theme="dark"] footer h6,
[data-theme="dark"] .footer h1,
[data-theme="dark"] .footer h2,
[data-theme="dark"] .footer h3,
[data-theme="dark"] .footer h4,
[data-theme="dark"] .footer h5,
[data-theme="dark"] .footer h6 {
    color: ${c.textPrimary};
}

[data-theme="dark"] footer a,
[data-theme="dark"] .footer a {
    color: ${c.textSecondary};
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .footer a:hover {
    color: ${c.accentLight};
}

/* ===========================================
   ALERTS & NOTIFICATIONS
   =========================================== */

[data-theme="dark"] .alert,
[data-theme="dark"] [class*="alert-"] {
    border-color: ${c.border};
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] [class*="alert-success"] {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] [class*="alert-warning"] {
    background: rgba(243, 156, 18, 0.15);
    border-color: rgba(243, 156, 18, 0.3);
    color: #f39c12;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error,
[data-theme="dark"] [class*="alert-danger"],
[data-theme="dark"] [class*="alert-error"] {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] [class*="alert-info"] {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

/* ===========================================
   INFO/TIP/WARNING BOXES
   =========================================== */

[data-theme="dark"] .info-box,
[data-theme="dark"] .tip-box,
[data-theme="dark"] [class*="info-box"] {
    background: rgba(52, 152, 219, 0.15);
    border-left-color: ${c.info};
}

[data-theme="dark"] .warning-box,
[data-theme="dark"] [class*="warning-box"] {
    background: rgba(243, 156, 18, 0.15);
    border-left-color: ${c.warning};
}

[data-theme="dark"] .success-box,
[data-theme="dark"] [class*="success-box"] {
    background: rgba(46, 204, 113, 0.15);
    border-left-color: ${c.success};
}

[data-theme="dark"] .error-box,
[data-theme="dark"] .danger-box,
[data-theme="dark"] [class*="error-box"],
[data-theme="dark"] [class*="danger-box"] {
    background: rgba(231, 76, 60, 0.15);
    border-left-color: ${c.danger};
}

/* ===========================================
   CODE BLOCKS
   =========================================== */

[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    border-color: ${c.border};
}

[data-theme="dark"] pre {
    border-color: ${c.border};
}

/* ===========================================
   MODALS & OVERLAYS
   =========================================== */

[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] [class*="modal"] {
    background: ${c.bgSecondary};
    border-color: ${c.border};
    color: ${c.textPrimary};
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] [class*="modal-header"] {
    border-color: ${c.border};
}

[data-theme="dark"] .modal-footer,
[data-theme="dark"] [class*="modal-footer"] {
    border-color: ${c.border};
}

/* ===========================================
   MISCELLANEOUS
   =========================================== */

/* Horizontal rules */
[data-theme="dark"] hr {
    border-color: ${c.border};
}

/* Blockquotes */
[data-theme="dark"] blockquote {
    background: ${c.bgCard};
    border-left-color: ${c.accent};
    color: ${c.textSecondary};
}

/* Badges */
[data-theme="dark"] .badge,
[data-theme="dark"] [class*="badge"] {
    background: rgba(110, 123, 255, 0.3);
    color: ${c.textPrimary};
}

/* Progress bars */
[data-theme="dark"] .progress,
[data-theme="dark"] [class*="progress"] {
    background: rgba(255, 255, 255, 0.1);
}

/* Tooltips */
[data-theme="dark"] .tooltip,
[data-theme="dark"] [class*="tooltip"] {
    background: ${c.bgTertiary};
    color: ${c.textPrimary};
    border-color: ${c.border};
}

/* Popovers */
[data-theme="dark"] .popover,
[data-theme="dark"] [class*="popover"] {
    background: ${c.bgSecondary};
    border-color: ${c.border};
    color: ${c.textPrimary};
}

/* ===========================================
   IMAGES & MEDIA
   =========================================== */

/* Don't invert images by default, but provide option */
[data-theme="dark"] img {
    /* Images stay as-is */
}

/* For diagrams/illustrations that should invert */
[data-theme="dark"] img[data-dark-invert] {
    filter: invert(1) hue-rotate(180deg);
}

/* Reduce brightness slightly for better eye comfort */
[data-theme="dark"] img:not([data-dark-invert]):not([data-no-dark-mode]) {
    opacity: 0.9;
}

/* Videos stay as-is */
[data-theme="dark"] video,
[data-theme="dark"] iframe {
    /* No changes */
}

/* ===========================================
   SCROLLBARS (Webkit)
   =========================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: ${c.bgPrimary};
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===========================================
   TRANSITIONS
   =========================================== */

/* Smooth transitions when theme changes */
body,
.card,
.navbar,
footer,
input,
textarea,
select,
button,
a {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
}

/* ===========================================
   PRINT - DISABLE DARK MODE
   =========================================== */

@media print {
    [data-theme="dark"] body {
        background: white !important;
        color: black !important;
    }

    [data-theme="dark"] * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
    }
}
`;
        },

        /**
         * Remove the injected styles (if needed)
         */
        destroy: function() {
            if (this.styleElement) {
                this.styleElement.remove();
                this.styleElement = null;
            }
            this.initialized = false;
        },

        /**
         * Get the current color palette
         * @returns {Object} Color palette object
         */
        getColors: function() {
            return Object.assign({}, this.colors);
        },

        /**
         * Customize colors (call before init, or call init again after)
         * @param {Object} customColors - Object with color overrides
         */
        setColors: function(customColors) {
            Object.assign(this.colors, customColors);

            // If already initialized, regenerate styles
            if (this.initialized && this.styleElement) {
                this.styleElement.textContent = this.generateCSS();
            }
        }
    };

    // Auto-initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            window.RSL.UniversalDarkMode.init();
        });
    } else {
        window.RSL.UniversalDarkMode.init();
    }

})();
