<template>
  <aside class="sidebar right">
    <section class="panel properties" id="properties">
      <div v-if="!w" class="no-selection">
        Kein Widget ausgewaehlt.<br><br>
        Waehle ein Widget im Canvas oder im Baum.
      </div>
      <div v-else>
        <!-- Layout -->
        <h4>Layout</h4>
        <div class="prop-row"><label>X</label><input type="number" v-model.number="w.x"></div>
        <div class="prop-row"><label>Y</label><input type="number" v-model.number="w.y"></div>
        <div class="prop-row"><label>Breite</label><input type="number" v-model.number="w.w"></div>
        <div class="prop-row"><label>Hoehe</label><input type="number" v-model.number="w.h"></div>
        <div class="prop-row"><label>Sichtbar</label><input type="checkbox" v-model="w.visible"></div>

        <!-- Content -->
        <template v-if="key === 'label'">
            <h4>Inhalt</h4>
            <div class="prop-row"><label>Quelle</label>
                <select v-model.number="w.textSrc" @change="handleTextSrcChange">
                    <option v-for="opt in sourceOptions.label" :key="opt" :value="opt">{{ textSources[opt] }}</option>
                </select>
            </div>
            <div v-if="w.textSrc === 0" class="prop-row">
                <label>Text</label><input type="text" v-model="w.text">
            </div>
            <template v-else>
                <div class="prop-row"><label>Format</label><input type="text" v-model="w.text"></div>
                <div class="prop-row"><label>KNX Objekt</label>
                    <select v-model.number="w.knxAddr">
                        <option :value="0">-- Waehlen --</option>
                        <option v-for="addr in store.knxAddresses" :key="addr.index" :value="addr.index">
                            GO{{ addr.index }} ({{ addr.addrStr }})
                        </option>
                    </select>
                </div>
            </template>
        </template>

        <template v-if="key === 'button'">
            <h4>Text</h4>
            <div class="prop-row"><label>Text</label><input type="text" v-model="w.text"></div>
        </template>

        <template v-if="key === 'led'">
            <h4>LED</h4>
            <div class="prop-row"><label>Modus</label>
                <select v-model.number="w.textSrc">
                    <option v-for="opt in sourceOptions.led" :key="opt" :value="opt">{{ textSources[opt] }}</option>
                </select>
            </div>
            <div v-if="w.textSrc === 2" class="prop-row">
                <label>KNX Objekt</label>
                <select v-model.number="w.knxAddr">
                    <option :value="0">-- Waehlen --</option>
                    <option v-for="addr in store.knxAddresses" :key="addr.index" :value="addr.index">
                         GO{{ addr.index }} ({{ addr.addrStr }})
                    </option>
                </select>
            </div>
        </template>

        <!-- Icon Widget -->
        <template v-if="key === 'icon'">
            <h4>Icon</h4>
            <div class="prop-row">
                <label>Icon</label>
                <button class="icon-select-btn" @click="showIconPicker = true">
                    <span v-if="w.iconCodepoint" class="material-symbols-outlined">{{ String.fromCodePoint(w.iconCodepoint) }}</span>
                    <span v-else>Auswaehlen</span>
                </button>
            </div>
            <div class="prop-row">
                <label>Groesse</label>
                <select v-model.number="w.iconSize">
                    <option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }}</option>
                </select>
            </div>
            <div class="prop-row"><label>Modus</label>
                <select v-model.number="w.textSrc">
                    <option v-for="opt in sourceOptions.icon" :key="opt" :value="opt">{{ textSources[opt] }}</option>
                </select>
            </div>
            <div v-if="w.textSrc === 2" class="prop-row">
                <label>KNX Objekt</label>
                <select v-model.number="w.knxAddr">
                    <option :value="0">-- Waehlen --</option>
                    <option v-for="addr in store.knxAddresses" :key="addr.index" :value="addr.index">
                         GO{{ addr.index }} ({{ addr.addrStr }})
                    </option>
                </select>
            </div>
        </template>

        <template v-if="key === 'tabview'">
            <h4>Tabs</h4>
            <div class="prop-row"><label>Position</label>
                <select v-model.number="w.iconPosition">
                    <option :value="0">Oben</option>
                    <option :value="1">Unten</option>
                    <option :value="2">Links</option>
                    <option :value="3">Rechts</option>
                </select>
            </div>
            <div class="prop-row"><label>Tab Hoehe</label>
                <input type="number" v-model.number="w.iconSize" min="1" max="20">
                <span style="font-size:10px; color:var(--muted); margin-left:4px">x10px</span>
            </div>
        </template>

        <template v-if="key === 'tabpage'">
            <h4>Tab Seite</h4>
            <div class="prop-row"><label>Titel</label><input type="text" v-model="w.text"></div>
        </template>

        <!-- Typography -->
        <template v-if="key === 'label' || key === 'button'">
            <h4>Typo</h4>
            <div class="prop-row"><label>Schriftgr.</label>
                <select v-model.number="w.fontSize">
                    <option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }}</option>
                </select>
            </div>
        </template>

        <!-- Icon for Label/Button -->
        <template v-if="key === 'label' || key === 'button'">
            <h4>Icon</h4>
            <div class="prop-row">
                <label>Icon</label>
                <button class="icon-select-btn" @click="showIconPicker = true">
                    <span v-if="w.iconCodepoint" class="material-symbols-outlined">{{ String.fromCodePoint(w.iconCodepoint) }}</span>
                    <span v-else>Kein Icon</span>
                </button>
                <button v-if="w.iconCodepoint" class="icon-remove-btn" @click="w.iconCodepoint = 0">x</button>
            </div>
            <template v-if="w.iconCodepoint">
                <div class="prop-row">
                    <label>Position</label>
                    <select v-model.number="w.iconPosition">
                        <option :value="0">Links</option>
                        <option :value="1">Rechts</option>
                        <option :value="2">Oben</option>
                        <option :value="3">Unten</option>
                    </select>
                </div>
                <div class="prop-row">
                    <label>Icon-Gr.</label>
                    <select v-model.number="w.iconSize">
                        <option v-for="(size, idx) in fontSizes" :key="idx" :value="idx">{{ size }}</option>
                    </select>
                </div>
                <div class="prop-row">
                    <label>Abstand</label>
                    <input type="number" v-model.number="w.iconGap" min="0" max="50">
                </div>
            </template>
        </template>

        <!-- Style -->
        <template v-if="key === 'led'">
            <h4>Stil</h4>
            <div class="prop-row"><label>Farbe</label><input type="color" v-model="w.bgColor"></div>
            <div class="prop-row"><label>Helligkeit</label><input type="number" min="0" max="255" v-model.number="w.bgOpacity"></div>
        </template>
        <template v-else-if="key === 'icon'">
            <h4>Stil</h4>
            <div class="prop-row"><label>Farbe</label><input type="color" v-model="w.textColor"></div>
            <div class="prop-row"><label>Hintergrund</label><input type="color" v-model="w.bgColor"></div>
            <div class="prop-row"><label>Deckkraft</label><input type="number" min="0" max="255" v-model.number="w.bgOpacity"></div>
            <div class="prop-row"><label>Radius</label><input type="number" v-model.number="w.radius"></div>
        </template>
        <template v-else>
            <h4>Stil</h4>
            <div class="prop-row"><label>Textfarbe</label><input type="color" v-model="w.textColor"></div>
            <div class="prop-row"><label>Hintergrund</label><input type="color" v-model="w.bgColor"></div>
            <div class="prop-row"><label>Deckkraft</label><input type="number" min="0" max="255" v-model.number="w.bgOpacity"></div>
            <div class="prop-row"><label>Radius</label><input type="number" v-model.number="w.radius"></div>
        </template>

        <!-- Shadow/Glow -->
        <template v-if="key !== 'icon'">
            <h4>{{ key === 'led' ? 'Glow' : 'Schatten' }}</h4>
            <div class="prop-row"><label>Aktiv</label><input type="checkbox" v-model="w.shadow.enabled"></div>
            <div class="prop-row" v-if="key !== 'led'"><label>X</label><input type="number" v-model.number="w.shadow.x"></div>
            <div class="prop-row" v-if="key !== 'led'"><label>Y</label><input type="number" v-model.number="w.shadow.y"></div>
            <div class="prop-row"><label>Blur</label><input type="number" v-model.number="w.shadow.blur"></div>
            <div class="prop-row"><label>Farbe</label><input type="color" v-model="w.shadow.color"></div>
        </template>

        <!-- Button Actions -->
        <template v-if="key === 'button'">
            <h4>Aktion</h4>
            <div class="prop-row"><label>Typ</label>
                <select v-model.number="w.action">
                    <option :value="BUTTON_ACTIONS.KNX">KNX</option>
                    <option :value="BUTTON_ACTIONS.JUMP">Sprung</option>
                    <option :value="BUTTON_ACTIONS.BACK">Zurueck</option>
                </select>
            </div>
            <div v-if="w.action === BUTTON_ACTIONS.JUMP" class="prop-row">
                <label>Ziel</label>
                <select v-model.number="w.targetScreen">
                    <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
                </select>
            </div>
            <template v-if="w.action === BUTTON_ACTIONS.KNX">
                <div class="prop-row"><label>Toggle</label><input type="checkbox" v-model="w.isToggle"></div>
                <div class="prop-row"><label>KNX Schreib</label>
                    <select v-model.number="w.knxAddrWrite">
                        <option :value="0">-- Keine --</option>
                        <option v-for="addr in writeableAddresses" :key="addr.index" :value="addr.index">
                             GO{{ addr.index }} ({{ addr.addrStr }})
                        </option>
                    </select>
                </div>
            </template>
        </template>

        <div class="prop-actions">
            <button class="btn ghost danger" @click="store.deleteWidget">Widget loeschen</button>
        </div>
      </div>
    </section>

    <!-- Icon Picker Modal -->
    <IconPicker
      v-if="showIconPicker"
      v-model="w.iconCodepoint"
      @close="showIconPicker = false"
    />
  </aside>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useEditorStore } from '../stores/editor';
import { typeKeyFor } from '../utils';
import { sourceOptions, textSources, fontSizes, BUTTON_ACTIONS, defaultFormats, WIDGET_TYPES } from '../constants';
import IconPicker from './IconPicker.vue';

const store = useEditorStore();
const w = computed(() => store.selectedWidget);
const key = computed(() => w.value ? typeKeyFor(w.value.type) : 'label');
const showIconPicker = ref(false);

const writeableAddresses = computed(() => store.knxAddresses.filter(a => a.write));

function handleTextSrcChange() {
    if (!w.value) return;
    const newSrc = w.value.textSrc;
    if (w.value.type === WIDGET_TYPES.LABEL && newSrc > 0 && defaultFormats[newSrc]) {
        w.value.text = defaultFormats[newSrc];
    }
}
</script>

<style scoped>
.icon-select-btn {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
}

.icon-select-btn:hover {
    border-color: var(--accent);
}

.icon-select-btn .material-symbols-outlined {
    font-size: 20px;
}

.icon-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 107, 0.4);
    background: transparent;
    color: #ffd1d1;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
}
</style>
