/**
 * HTML Editor Constants
 *
 * Centralized constants for the HTML Editor component
 */

// Documentation URL for Liquid / HTML editor
export const HTML_EDITOR_DOC_URL = 'https://docs.capillarytech.com/docs/configure-email#html-editor-validation-messages-and-warnings';

// HTML Editor Variants
export const HTML_EDITOR_VARIANTS = {
  EMAIL: 'email',
  INAPP: 'inapp',
};

// Device Types (for InApp variant)
export const DEVICE_TYPES = {
  ANDROID: 'android',
  IOS: 'ios',
};

// Editor languages
export const EDITOR_LANGUAGES = {
  HTML: 'html',
  CSS: 'css',
  JAVASCRIPT: 'javascript',
};

// Preview modes
export const PREVIEW_MODES = {
  DESKTOP: 'desktop',
  MOBILE: 'mobile',
};

// Device specifications for mobile preview
export const DEVICE_PRESETS = {
  ANDROID_PHONE: {
    key: 'android-phone',
    width: 393,
    height: 851,
    devicePixelRatio: 2.75,
    userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36',
    platform: 'android',
    model: 'Pixel 7',
  },
  IPHONE: {
    key: 'iphone',
    width: 390,
    height: 844,
    devicePixelRatio: 3,
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)',
    platform: 'ios',
    model: 'iPhone 15',
  },
};

// Validation severity levels
export const VALIDATION_SEVERITY = {
  ERROR: 'error',
  WARNING: 'warning',
  INFO: 'info',
};

/**
 * Rule Group #1: Input & Sanitization Errors.
 * ONLY these rules are treated as BLOCKING ERROR for Save/Update/Preview/Test.
 * All other rule groups (HTML/CSS/Liquid, compatibility, security, etc.) are WARNING only.
 * Backward compatibility: CKEditor legacy templates (unclosed CSS, indentation, etc.) must never block.
 */
export const BLOCKING_ERROR_RULE_IDS = [
  'sanitizer.invalidInput',
  'sanitizer.invalidInputNonEmpty',
  'sanitizer.sanitizationFailed',
  'sanitizer.dangerousProtocolDetected',
];

// Validation types
export const VALIDATION_TYPES = {
  HTML: 'html',
  CSS: 'css',
  JAVASCRIPT: 'javascript',
  SECURITY: 'security',
};

// Error types for preview
export const PREVIEW_ERROR_TYPES = {
  RUNTIME: 'runtime',
  RENDER: 'render',
  SECURITY: 'security',
};

// Performance thresholds
export const PERFORMANCE = {
  PREVIEW_UPDATE_DEBOUNCE: 300, // ms
  VALIDATION_DEBOUNCE: 500, // ms
  AUTO_SAVE_INTERVAL: 30000, // ms
  MAX_CONTENT_LENGTH: 100000, // characters
  PERFORMANCE_WARNING_THRESHOLD: 50000, // characters
};

// Layout constraints
export const LAYOUT = {
  MIN_PANE_SIZE: 20, // percentage
  MAX_PANE_SIZE: 80, // percentage
  DEFAULT_SPLIT_SIZES: [50, 50], // [left, right] percentages
  GUTTER_SIZE: 8, // pixels
  MOBILE_BREAKPOINT: 768, // pixels
  MOBILE_WIDTH_DEFAULT: 375, // pixels
};


// CodeMirror configuration
export const CODEMIRROR_CONFIG = {
  THEME: 'default',
  FONT_SIZE: 14,
  FONT_FAMILY: '"Fira Code", "Monaco", "Menlo", "Consolas", monospace',
  LINE_NUMBERS: true,
  HIGHLIGHT_ACTIVE_LINE: true,
  BRACKET_MATCHING: true,
  AUTO_CLOSE_BRACKETS: true,
  FOLD_GUTTER: true,
  SEARCH_ENABLED: true,
  AUTOCOMPLETE_ENABLED: true,
  LINT_ENABLED: true,
};

// HTML validation rules (HTMLHint)
export const HTML_VALIDATION_RULES = {
  'tag-pair': true,
  'tag-self-close': true,
  'tagname-lowercase': true,
  'attr-lowercase': true,
  'attr-value-double-quotes': true,
  'id-unique': true,
  'src-not-empty': true,
  'title-require': false,
  'alt-require': true,
  'doctype-first': false, // Optional: support both fragments and full documents
  'doctype-html5': false, // Optional: support both fragments and full documents
  'head-script-disabled': false,
  'style-disabled': false,
  'inline-style-disabled': false,
  'inline-script-disabled': false,
  'space-tab-mixed-disabled': 'space',
  'spec-char-escape': true,
};

// CSS validation rules
export const CSS_VALIDATION_RULES = {
  // Will be implemented with Stylelint or similar
  'property-case': 'lower',
  'value-case': 'lower',
  'declaration-colon-space-after': 'always',
  'declaration-colon-space-before': 'never',
  'block-closing-brace-newline-after': 'always',
  'block-opening-brace-space-before': 'always',
};

// JavaScript validation rules (ESLint-style)
export const JS_VALIDATION_RULES = {
  // Basic rules for HTML editor context
  'no-undef': 'error',
  'no-unused-vars': 'warn',
  'no-console': 'warn',
  'semi': ['error', 'always'],
  'quotes': ['error', 'single'],
  'indent': ['error', 2],
};

// Keyboard shortcuts
export const KEYBOARD_SHORTCUTS = {
  SAVE: 'Ctrl+S',
  SAVE_MAC: 'Cmd+S',
  FULLSCREEN: 'F11',
  TOGGLE_PREVIEW: 'Ctrl+P',
  TOGGLE_PREVIEW_MAC: 'Cmd+P',
  FORMAT_CODE: 'Shift+Alt+F',
  FORMAT_CODE_MAC: 'Shift+Option+F',
  FIND: 'Ctrl+F',
  FIND_MAC: 'Cmd+F',
  REPLACE: 'Ctrl+H',
  REPLACE_MAC: 'Cmd+Option+F',
};

// Feature flags
export const FEATURES = {
  AUTO_SAVE: true,
  VALIDATION: true,
  MOBILE_PREVIEW: true,
  DEVICE_PREVIEW: true,
  FULLSCREEN_MODE: true,
  KEYBOARD_SHORTCUTS: true,
  ERROR_RECOVERY: true,
  PERFORMANCE_MONITORING: true,
  ACCESSIBILITY_FEATURES: true,
};

// Animation durations (ms)
export const ANIMATIONS = {
  FAST: 150,
  NORMAL: 300,
  SLOW: 500,
  PANEL_RESIZE: 200,
  FADE_IN: 300,
  SLIDE_IN: 250,
};

// Z-index layers
export const Z_INDEX = {
  BASE: 1,
  OVERLAY: 1000,
  MODAL: 1050,
  FULLSCREEN: 9999,
  TOOLTIP: 10000,
};

// Default HTML content template
export const DEFAULT_HTML_CONTENT = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Editor Preview</title>
    <style>
        /* Your CSS styles here */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to HTML Editor</h1>
        <p>Start editing your HTML, CSS, and JavaScript code to see the live preview here.</p>
        <button id="demoButton">Click me!</button>
    </div>

    <script>
        // Your JavaScript code here
        document.getElementById('demoButton').addEventListener('click', function() {
            alert('Hello from the HTML Editor!');
        });
    </script>
</body>
</html>`;

// Constants for tag API calls
export const TAG = 'TAG';
export const EMBEDDED = 'embedded';
export const DEFAULT = 'default';
export const FULL = 'full';
export const ALL = 'all';
export const SMS = 'SMS';
export const EMAIL = 'EMAIL';
