import {
  createApp,
  div, text, button
} from 'reactive-tui-ts'

// Create a simple TUI application
async function createTuiApp() {
  // Create main application
  const app = createApp({
    title: 'My TUI Application',
    stylesheet: './styles/app.css',
    component: () => {
      return div({ class: 'container' })
        .child(text('Welcome to Reactive TUI!', { class: 'title' }))
        .child(
          button({
            id: 'main-btn',
            text: 'Click Me!',
            variant: 'filled',
            color: 'primary',
            onClick: () => console.log('Button clicked!')
          })
        )
        .build()
    }
  })

  await app.run()
}

// Create dashboard with widgets
function createDashboard() {
  return div({ class: 'dashboard-container' })
    .child(
      div({ class: 'dashboard-header' })
        .child(text('System Dashboard', { class: 'dashboard-title' }))
    )
    .child(
      div({ class: 'dashboard-content' })
        .child(createMetricsGrid())
    )
    .build()
}

function createMetricsGrid() {
  return div({ class: 'metrics-grid' })
    .child(createMetricCard('CPU Usage', '67%', 'success'))
    .child(createMetricCard('Memory', '45%', 'warning'))
    .child(createMetricCard('Disk I/O', '23%', 'info'))
    .build()
}

function createMetricCard(label: string, value: string, variant: string) {
  return div({ class: `metric-card metric-card--${variant}` })
    .child(text(label, { class: 'metric-label' }))
    .child(text(value, { class: 'metric-value' }))
    .build()
}

// Start the application
createTuiApp().catch(console.error)

import { createApp } from 'reactive-tui-ts'
import type { AppConfig } from 'reactive-tui-ts'

const config: AppConfig = {
  title: 'My TUI App',
  stylesheet: './styles/app.css',
  component: () => createMainComponent()
}

const app = createApp(config)

// Application methods (actual API)
await app.run()                    // Start the application
await app.stop()                   // Stop the application
await app.updateStylesheet(newCSS) // Hot reload CSS
app.setComponent(newComponent)     // Update root component

import { div, text, button } from 'reactive-tui-ts'
import type { Element, ElementBuilder } from 'reactive-tui-ts'

function createMainComponent(): Element {
  return div({ class: 'main-container' })
    .child(text('Welcome!', { class: 'title' }))
    .child(
      button({
        id: 'action-btn',
        text: 'Action',
        variant: 'filled',
        color: 'primary'
      })
    )
    .build() // Convert ElementBuilder to Element
}

import { LayoutEngine, ResponsiveWidget } from 'tui-bun'

const layoutEngine = new LayoutEngine({
  width: 400,
  height: 200,
  terminalSize: { width: 120, height: 30 }
})

// Responsive widget layout
const layout = layoutEngine.computeResponsiveLayout(widget, {
  x: 0, y: 0, width: 400, height: 200
})

// CSS-based layout computation
const cssLayout = layoutEngine.computeLayout(element, {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'stretch'
})

// Viewport management
layoutEngine.updateViewport({ width: 500, height: 300 })
const constraints = layoutEngine.getConstraints()

import { ThemeManager, ThemeBuilder } from 'tui-bun'

const themeManager = new ThemeManager()

// Load themes from files
await themeManager.loadThemeFile('themes/dark.json')
await themeManager.loadThemeDirectory('./themes')

// Create custom themes
const customTheme = new ThemeBuilder()
  .name('Corporate Blue')
  .primary('#007acc')
  .secondary('#6c757d')
  .background('#1a1a1a')
  .surface('#2d2d2d')
  .build()

// Theme operations
themeManager.registerTheme(customTheme)
themeManager.setActiveTheme('corporate-blue')
const currentTheme = themeManager.getActiveTheme()

// Theme inheritance and composition
const extendedTheme = themeManager.extendTheme('dark', {
  colors: { primary: '#ff6b6b' }
})

// Hot reload themes
themeManager.enableHotReload('./themes')
themeManager.onThemeChange((theme) => app.applyTheme(theme))

import { PluginManager, WidgetPlugin, Plugin } from 'tui-bun'

const pluginManager = new PluginManager()

// Load plugins
await pluginManager.loadPlugin('./plugins/custom-widget.js')
await pluginManager.loadPluginsFromDirectory('./plugins')

// Create custom widget plugin
class CustomChartWidget extends WidgetPlugin {
  constructor() {
    super({
      name: 'custom-chart',
      version: '1.0.0',
      capabilities: ['widget-provider']
    })
  }

  render() {
    return div({ class: 'custom-chart' })
      .child(text('Custom Chart Widget'))
  }
}

// Register and use plugins
pluginManager.register(new CustomChartWidget())
const chartWidget = pluginManager.createWidget('custom-chart', {
  data: chartData,
  type: 'line'
})

// Plugin lifecycle
pluginManager.enablePlugin('custom-chart')
pluginManager.disablePlugin('custom-chart')
pluginManager.unloadPlugin('custom-chart')

import { createRouter, fullScreenRouter } from 'tui-bun'

const router = createRouter({
  fullScreen: true,
  enableHistory: true,
  maxHistorySize: 50,
  onNavigate: (event) => console.log(`Navigated to ${event.to}`)
})

// Register routes
router.registerRoutes({
  '/dashboard': {
    title: 'Dashboard',
    component: () => createDashboard(),
    beforeEnter: () => checkAuth()
  },
  '/settings': {
    title: 'Settings',
    component: () => createSettings(),
    afterEnter: () => trackPageView()
  }
})

// Navigation
await router.navigate('/dashboard')
router.back()
router.forward()
router.replace('/login')

// Route guards and hooks
router.beforeEach(async (to, from) => {
  if (to.startsWith('/admin') && !isAdmin()) {
    return '/unauthorized'
  }
})

router.afterEach((to, from) => {
  analytics.track('page_view', { page: to })
})

import { dataTable, createColumn } from 'tui-bun'

interface UserData {
  id: number
  name: string
  email: string
  status: 'active' | 'inactive'
  lastLogin: Date
}

const userTable = dataTable<UserData>({
  id: 'user-table',
  data: userData,
  columns: [
    createColumn('id', 'ID', { width: 60, sortable: true }),
    createColumn('name', 'Name', { width: 150, sortable: true }),
    createColumn('email', 'Email', { width: 200, sortable: true }),
    createColumn('status', 'Status', {
      width: 100,
      renderer: (status) => status === 'active' ? '🟢 Active' : '🔴 Inactive'
    }),
    createColumn('lastLogin', 'Last Login', {
      width: 120,
      renderer: (date) => date.toLocaleDateString()
    })
  ],
  config: {
    sortable: true,
    filterable: true,
    selectable: true,
    paginated: true,
    virtualScrolling: true
  },
  callbacks: {
    onRowSelect: (rowId, row, selected) => {
      console.log(`User ${row.name} ${selected ? 'selected' : 'deselected'}`)
    },
    onSort: (columnId, order) => {
      console.log(`Sorting by ${columnId} in ${order} order`)
    }
  }
})

import { Tree, TreeBuilder, createTreeNode } from 'tui-bun'

const fileTree = new TreeBuilder()
  .root(createTreeNode('root', 'Project Files', 'folder'))
  .addNode('src', 'src/', 'folder', 'root')
  .addNode('components', 'components/', 'folder', 'src')
  .addNode('app.ts', 'app.ts', 'file', 'src')
  .addNode('index.ts', 'index.ts', 'file', 'src')
  .config({
    expandable: true,
    selectable: true,
    lazyLoad: true,
    showIcons: true
  })
  .callbacks({
    onNodeSelect: (nodeId, node) => console.log(`Selected: ${node.label}`),
    onNodeExpand: (nodeId, node) => loadChildNodes(nodeId),
    onNodeCollapse: (nodeId, node) => console.log(`Collapsed: ${node.label}`)
  })
  .build()

import { modal, alertModal, confirmModal, promptModal } from 'tui-bun'

// Alert modal
const alert = alertModal({
  title: 'Success',
  message: 'Operation completed successfully!',
  type: 'success',
  buttons: ['OK']
})

// Confirmation modal
const confirm = confirmModal({
  title: 'Confirm Action',
  message: 'Are you sure you want to delete this item?',
  type: 'warning',
  buttons: ['Cancel', 'Delete'],
  onConfirm: () => deleteItem(),
  onCancel: () => console.log('Cancelled')
})

// Prompt modal
const prompt = promptModal({
  title: 'Enter Name',
  message: 'Please enter your name:',
  placeholder: 'Your name here...',
  validation: (value) => value.length >= 2,
  onSubmit: (value) => console.log(`Hello, ${value}!`)
})

// Custom modal
const customModal = modal({
  title: 'Custom Dialog',
  size: 'large',
  position: 'center',
  backdrop: true,
  closable: true,
  component: () => createCustomContent()
})

import { toast, ToastManager } from 'tui-bun'

// Create different toast types
const successToast = toast({
  message: 'Operation completed successfully!',
  variant: 'success',
  duration: 3000,
  position: 'top-right',
  closable: true
})

const errorToast = toast({
  message: 'An error occurred',
  variant: 'error',
  duration: 5000,
  position: 'top-center',
  actions: [
    { label: 'Retry', action: () => retryOperation() },
    { label: 'Dismiss', action: () => toast.dismiss() }
  ]
})

// Toast manager
const toastManager = new ToastManager({
  maxToasts: 5,
  defaultDuration: 3000,
  defaultPosition: 'top-right'
})

toastManager.show(successToast)
toastManager.show(errorToast)
toastManager.dismissAll()

import { createApp, div, text, button, tree } from 'reactive-tui-ts'
import type { Element } from 'reactive-tui-ts'

class FileManager {
  private currentPath: string = '/'

  createApp() {
    return createApp({
      title: 'File Manager',
      stylesheet: './file-manager.css',
      component: () => this.createUI()
    })
  }

  private createUI(): Element {
    return div({ class: 'file-manager' })
      .child(this.createBreadcrumb())
      .child(this.createFileTree())
      .build()
  }

  private createBreadcrumb(): Element {
    return div({ class: 'breadcrumb' })
      .child(text(`📁 ${this.currentPath}`, { class: 'path' }))
      .build()
  }

  private createFileTree(): any {
    // Use the actual tree widget
    return tree({
      id: 'file-tree',
      data: this.getFileData(),
      expandable: true,
      selectable: true
    })
  }
    return breadcrumb
  }

  private createFileTree(): JsElement {
    // File tree implementation with type safety
    const tree = TuiUtils.div()
    tree.addClass('file-tree')
    return tree
  }
}

interface MetricData {
  label: string
  value: number
  trend: 'up' | 'down' | 'stable'
  color: string
}

class Dashboard {
  private metrics: MetricData[] = []

  constructor(private app: JsTuiApp) {
    this.initializeMetrics()
    this.render()
  }

  private initializeMetrics(): void {
    this.metrics = [
      { label: 'CPU Usage', value: 45, trend: 'up', color: '#ff6b6b' },
      { label: 'Memory', value: 67, trend: 'stable', color: '#4ecdc4' },
      { label: 'Disk I/O', value: 23, trend: 'down', color: '#45b7d1' }
    ]
  }

  private render(): void {
    const dashboard = TuiUtils.div()
    dashboard.addClass('dashboard-grid')

    this.metrics.forEach(metric => {
      const card = this.createMetricCard(metric)
      dashboard.addChild(card)
    })

    this.app.setComponent(dashboard)
  }

  private createMetricCard(metric: MetricData): JsElement {
    const card = TuiUtils.div()
    card.addClass('metric-card')
    card.setAttribute('data-trend', metric.trend)

    const label = TuiUtils.div()
    label.addClass('metric-label')
    label.setContent(metric.label)

    const value = TuiUtils.div()
    value.addClass('metric-value')
    value.setContent(`${metric.value}%`)

    card.addChild(label)
    card.addChild(value)

    return card
  }
}

class OptimizedComponent {
  private elements: Map<string, JsElement> = new Map()

  createElement(id: string, tag: string): JsElement {
    if (this.elements.has(id)) {
      return this.elements.get(id)!
    }

    const element = new JsElement(tag)
    element.setId(id)
    this.elements.set(id, element)

    return element
  }

  cleanup(): void {
    this.elements.clear()
  }
}

interface RenderOptions {
  batchSize: number
  debounceMs: number
}

class BatchRenderer {
  private pendingUpdates: JsElement[] = []
  private updateTimer: Timer | null = null

  constructor(private options: RenderOptions) {}

  scheduleUpdate(element: JsElement): void {
    this.pendingUpdates.push(element)

    if (this.updateTimer) {
      clearTimeout(this.updateTimer)
    }

    this.updateTimer = setTimeout(() => {
      this.flushUpdates()
    }, this.options.debounceMs)
  }

  private flushUpdates(): void {
    const batch = this.pendingUpdates.splice(0, this.options.batchSize)
    // Process batch updates
    this.updateTimer = null
  }
}

import { test, expect } from 'bun:test'
import { div, text, button } from 'reactive-tui-ts'

test('Element creation and manipulation', () => {
  const elementBuilder = div({ id: 'test-element', class: 'test-class' })
  elementBuilder.content('Test content')

  const element = elementBuilder.build()

  expect(element.id).toBe('test-element')
  expect(element.classes).toContain('test-class')
  expect(element.content).toBe('Test content')
})

test('Parent-child relationships', () => {
  const parent = div()
    .child(text('Hello World'))
    .build()

  expect(parent.children).toHaveLength(1)
  expect(parent.children[0].content).toBe('Hello World')
})

import { createApp } from 'reactive-tui-ts'

test('App initialization and component setting', async () => {
  const app = createApp({
    title: 'Test App',
    component: () => div().child(text('Test')).build()
  })

  // Test app creation
  expect(app).toBeDefined()
  expect(typeof app.run).toBe('function')
  expect(typeof app.stop).toBe('function')
})

class DebugUtils {
  static logElementTree(element: JsElement, depth: number = 0): void {
    const indent = '  '.repeat(depth)
    console.log(`${indent}Element: ${element.constructor.name}`)
    // Log element properties and children
  }

  static validateCSS(css: string): string[] {
    return TuiUtils.validateCss(css)
  }

  static getTerminalInfo(): { width: number; height: number } {
    const [width, height] = TuiUtils.getTerminalSize()
    return { width, height }
  }
}