<template>
  <div class="app-layout">
    <Sidebar v-model="activeSchemaId" />
    <div class="main-content">
      <ConfigForm
        :key="activeSchemaId"
        :schema="currentSchema"
        @update:config="onConfigUpdate"
      />
    </div>
    <div class="preview-content">
      <CodePreview :code="generatedCode" :schema="currentSchema" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Sidebar from './components/Sidebar.vue'
import ConfigForm from './components/ConfigForm.vue'
import CodePreview from './components/CodePreview.vue'
import { schemas, generators, getDefaultValues } from './schemas'

const activeSchemaId = ref('nginx')
const currentConfig = ref({})

const currentSchema = computed(() => schemas[activeSchemaId.value])

const generatedCode = computed(() => {
  const gen = generators[activeSchemaId.value]
  if (!gen) return ''
  return gen(currentConfig.value)
})

function onConfigUpdate(config) {
  currentConfig.value = config
}

// Initialize with defaults
currentConfig.value = getDefaultValues(schemas[activeSchemaId.value])
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.main-content {
  flex: 0 0 420px;
  min-width: 380px;
  max-width: 480px;
  border-right: 1px solid #ebeef5;
  overflow: hidden;
}

.preview-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* Element Plus overrides */
.el-form-item {
  margin-bottom: 18px;
}

.el-input-number {
  width: 100%;
}

.el-select {
  width: 100%;
}
</style>
