<template>
  <div>
    <!-- Chart -->
    <h4 :class="headingClass">Chart</h4>
    <div :class="rowClass"><label :class="labelClass">Titel</label><input :class="inputClass" type="text" v-model="widget.text"></div>
    <div :class="rowClass"><label :class="labelClass">Zeitraum</label>
      <select :class="inputClass" v-model.number="widget.chart.period">
        <option v-for="opt in chartPeriods" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
      </select>
    </div>
    <div :class="rowClass"><label :class="labelClass">Serien</label>
      <select :class="inputClass" v-model.number="chartSeriesCount">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
    </div>
    <div v-for="(series, idx) in chartSeries" :key="idx" class="border border-border rounded-lg px-2.5 py-2 mb-2 bg-panel-2">
      <div class="flex items-center gap-2 mb-2 text-[11px] text-muted">
        <label class="w-[70px] text-[11px] text-muted">Serie {{ idx + 1 }}</label>
        <input class="h-[22px] w-[32px] cursor-pointer border-0 bg-transparent p-0" type="color" v-model="series.color">
      </div>
      <div class="flex items-center gap-2 mb-2 text-[11px] text-muted">
        <label class="w-[70px] text-[11px] text-muted">Quelle</label>
        <select class="flex-1 bg-white border border-border rounded-md px-2 py-1 text-[11px]" v-model.number="series.textSrc">
          <optgroup v-for="group in groupedSources(sourceOptions.chart)" :key="group.label" :label="group.label">
            <option v-for="opt in group.values" :key="opt" :value="opt">{{ textSources[opt] }}</option>
          </optgroup>
        </select>
      </div>
      <div class="flex items-center gap-2 text-[11px] text-muted">
        <label class="w-[70px] text-[11px] text-muted">KNX</label>
        <select class="flex-1 bg-white border border-border rounded-md px-2 py-1 text-[11px]" v-model.number="series.knxAddr">
          <option :value="0">-- Waehlen --</option>
          <option v-for="addr in store.knxAddresses" :key="`${addr.addr}-${addr.index}`" :value="addr.addr">
            GA {{ addr.addrStr }} (GO{{ addr.index }})
          </option>
        </select>
      </div>
    </div>

    <!-- Style -->
    <h4 :class="headingClass">Stil</h4>
    <div :class="rowClass"><label :class="labelClass">Textfarbe</label><input :class="colorInputClass" type="color" v-model="widget.textColor"></div>
    <div :class="rowClass"><label :class="labelClass">Hintergrund</label><input :class="colorInputClass" type="color" v-model="widget.bgColor"></div>
    <div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.bgOpacity"></div>
    <div :class="rowClass"><label :class="labelClass">Radius</label><input :class="inputClass" type="number" v-model.number="widget.radius"></div>
    <h4 :class="headingClass">Rand</h4>
    <div :class="rowClass"><label :class="labelClass">Breite</label><input :class="inputClass" type="number" min="0" max="32" v-model.number="widget.borderWidth"></div>
    <div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.borderColor"></div>
    <div :class="rowClass"><label :class="labelClass">Deckkraft</label><input :class="inputClass" type="number" min="0" max="255" v-model.number="widget.borderOpacity"></div>

    <!-- Shadow -->
    <h4 :class="headingClass">Schatten</h4>
    <div :class="rowClass"><label :class="labelClass">Aktiv</label><input class="accent-[var(--accent)]" type="checkbox" v-model="widget.shadow.enabled"></div>
    <div :class="rowClass"><label :class="labelClass">X</label><input :class="inputClass" type="number" v-model.number="widget.shadow.x"></div>
    <div :class="rowClass"><label :class="labelClass">Y</label><input :class="inputClass" type="number" v-model.number="widget.shadow.y"></div>
    <div :class="rowClass"><label :class="labelClass">Blur</label><input :class="inputClass" type="number" v-model.number="widget.shadow.blur"></div>
    <div :class="rowClass"><label :class="labelClass">Farbe</label><input :class="colorInputClass" type="color" v-model="widget.shadow.color"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useEditorStore } from '../../../stores/editor';
import { sourceOptions, textSources, textSourceGroups, chartPeriods } from '../../../constants';
import { rowClass, labelClass, inputClass, headingClass, colorInputClass } from '../shared/styles';

const props = defineProps({
  widget: { type: Object, required: true }
});

const store = useEditorStore();

const chartSeries = computed(() => props.widget?.chart?.series ?? []);

const chartSeriesCount = computed({
  get() {
    const count = chartSeries.value.length || 1;
    return Math.max(1, Math.min(count, 3));
  },
  set(value) {
    if (!props.widget || !props.widget.chart) return;
    const target = Math.max(1, Math.min(value, 3));
    const colors = ['#EF6351', '#7DD3B0', '#5EA2EF'];
    if (!Array.isArray(props.widget.chart.series)) {
      props.widget.chart.series = [];
    }
    while (props.widget.chart.series.length < target) {
      const idx = props.widget.chart.series.length;
      props.widget.chart.series.push({
        knxAddr: 0,
        textSrc: 1,
        color: colors[idx] || '#EF6351'
      });
    }
    if (props.widget.chart.series.length > target) {
      props.widget.chart.series = props.widget.chart.series.slice(0, target);
    }
  }
});

function groupedSources(options) {
  const allowed = new Set(options || []);
  return textSourceGroups
    .map((group) => ({
      label: group.label,
      values: group.values.filter((value) => allowed.has(value))
    }))
    .filter((group) => group.values.length > 0);
}
</script>
