<template>
  <aside class="sidebar left">
    <section class="panel">
      <div class="panel-header">
        <h3>Elemente</h3>
        <span class="panel-hint">Klick zum Hinzufuegen</span>
      </div>
      <div class="element-grid">
        <button class="element-btn" @click="store.addWidget('label')">
          <span class="element-title">Label</span>
          <span class="element-sub">Text</span>
        </button>
        <button class="element-btn" @click="store.addWidget('button')">
          <span class="element-title">Button</span>
          <span class="element-sub">Aktion</span>
        </button>
        <button class="element-btn" @click="store.addWidget('led')">
          <span class="element-title">LED</span>
          <span class="element-sub">Status</span>
        </button>
        <button class="element-btn" @click="store.addWidget('icon')">
          <span class="element-title">Icon</span>
          <span class="element-sub">Symbol</span>
        </button>
        <button class="element-btn" @click="store.addWidget('tabview')">
          <span class="element-title">Tabs</span>
          <span class="element-sub">Container</span>
        </button>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Bildschirme</h3>
        <button class="icon-btn" @click="store.addScreen">+</button>
      </div>
      <div class="screen-list">
        <div 
            v-for="screen in store.config.screens" 
            :key="screen.id"
            class="screen-item"
            :class="{ active: screen.id === store.activeScreenId }"
            @click="store.activeScreenId = screen.id; store.selectedWidgetId = null;"
        >
            <span class="screen-tag">{{ screen.mode === 1 ? 'Modal' : 'Fullscreen' }}</span>
            <span class="screen-name">{{ screen.name }}</span>
        </div>
      </div>
      <div class="screen-settings" v-if="store.activeScreen">
        <div class="control-row">
          <label>Name</label>
          <input type="text" v-model="store.activeScreen.name">
        </div>
        <div class="control-row">
          <label>Modus</label>
          <select v-model.number="store.activeScreen.mode">
            <option :value="0">Fullscreen</option>
            <option :value="1">Modal</option>
          </select>
        </div>
        
        <template v-if="store.activeScreen.mode === 1">
            <div class="control-row"><label>X</label><input type="number" v-model.number="store.activeScreen.modal.x"></div>
            <div class="control-row"><label>Y</label><input type="number" v-model.number="store.activeScreen.modal.y"></div>
            <div class="control-row"><label>Breite</label><input type="number" v-model.number="store.activeScreen.modal.w"></div>
            <div class="control-row"><label>Hoehe</label><input type="number" v-model.number="store.activeScreen.modal.h"></div>
            <div class="control-row"><label>Radius</label><input type="number" v-model.number="store.activeScreen.modal.radius"></div>
            <label class="toggle">
                <input type="checkbox" v-model="store.activeScreen.modal.dim">
                <span>Hintergrund dimmen</span>
            </label>
        </template>

        <button class="btn ghost danger small" @click="store.deleteScreen">Screen loeschen</button>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Baum</h3>
        <span class="panel-hint">{{ store.activeScreen?.widgets.length || 0 }}</span>
      </div>
      <div class="tree">
        <div class="tree-root">{{ store.activeScreen?.name }}</div>
        <div class="tree-list">
             <div v-if="!store.widgetTree.length" class="tree-empty">Keine Widgets</div>
             <TreeItem 
                v-else
                v-for="node in store.widgetTree"
                :key="node.id"
                :node="node"
             />
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Canvas</h3>
      </div>
      <div class="control-row">
        <label>Hintergrund</label>
        <input type="color" v-model="store.activeScreen.bgColor" v-if="store.activeScreen">
      </div>
      <div class="control-row">
        <label>Zoom</label>
        <input type="range" min="0.3" max="1" step="0.05" v-model.number="store.canvasScale">
      </div>
      <div class="control-meta">
        <span>{{ Math.round(store.canvasScale * 100) }}%</span>
        <span>1280x800</span>
      </div>
      <label class="toggle">
        <input type="checkbox" v-model="store.showGrid">
        <span>Grid anzeigen</span>
      </label>
      <div class="control-row" style="margin-top: 8px;">
        <label>Grid Gr.</label>
        <input type="number" min="5" max="100" v-model.number="store.gridSize">
      </div>
      <label class="toggle">
        <input type="checkbox" v-model="store.snapToGrid">
        <span>Am Grid ausrichten</span>
      </label>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Navigation</h3>
      </div>
      <div class="control-row">
        <label>Startscreen</label>
        <select v-model.number="store.config.startScreen">
            <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
        </select>
      </div>
      <label class="toggle">
        <input type="checkbox" v-model="store.config.standby.enabled">
        <span>Standby aktiv</span>
      </label>
      <div class="control-row" style="margin-top:8px;">
        <label>Standby</label>
        <select v-model.number="store.config.standby.screen">
            <option :value="-1">-- Kein --</option>
            <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
        </select>
      </div>
      <div class="control-row">
        <label>Minuten</label>
        <input type="number" min="0" v-model.number="store.config.standby.minutes">
      </div>
    </section>
  </aside>
</template>

<script setup>
import { useEditorStore } from '../stores/editor';
import TreeItem from './TreeItem.vue';
import { typeKeyFor } from '../utils';
import { TYPE_LABELS } from '../constants';

const store = useEditorStore();
</script>
