/**
 * Visual Editor - Entry Point
 * 
 * A visual website builder foundation using React/TypeScript.
 * Features:
 * - Iframe-based canvas for isolated editing
 * - Click-to-select with blue overlay
 * - Dynamic style panel based on element type
 * - Real-time inline style editing
 */

import React from 'react';
import { createRoot } from 'react-dom/client';
import { VisualEditor } from './components/VisualEditor';

// Global styles
const globalStyles = `
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body, #root {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #0a0a0a;
    color: #e5e5e5;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #444;
  }
  
  /* Button hover states */
  button:hover:not(:disabled) {
    filter: brightness(1.1);
  }
  
  button:active:not(:disabled) {
    filter: brightness(0.95);
  }
  
  /* Input focus states */
  input:focus, select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  }
`;

// Inject global styles
const styleSheet = document.createElement('style');
styleSheet.textContent = globalStyles;
document.head.appendChild(styleSheet);

// Mount the app
const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(
    <React.StrictMode>
      <VisualEditor />
    </React.StrictMode>
  );
}

// Export components for use as library
export { VisualEditor } from './components/VisualEditor';
export { Canvas } from './components/Canvas';
export { StylePanel } from './components/StylePanel';
export { useVisualEditor } from './hooks/useVisualEditor';
export * from './utils/selector';
export * from './utils/overlay';
export * from './config/styleConfig';
export * from './types/editor';