<template>
  <div
    class="z-[1] select-none touch-none"
    :class="selected ? 'outline outline-2 outline-accent outline-offset-2' : ''"
    :style="computedStyle"
    @mousedown.stop="$emit('drag-start', { id: widget.id, event: $event })"
    @touchstart.stop="$emit('drag-start', { id: widget.id, event: $event })"
    @click.stop="$emit('select')"
  >
    <div class="absolute inset-0 p-1.5 flex flex-col gap-1" :style="contentStyle">
      <div
        v-for="(row, rowIdx) in rows"
        :key="rowIdx"
        class="flex-1 min-h-0 flex gap-1"
      >
        <div
          v-for="(label, colIdx) in row"
          :key="`${rowIdx}-${colIdx}`"
          class="min-w-0 flex-1 rounded-md flex items-center justify-center px-1 text-center truncate"
          :style="cellStyle"
        >
          {{ label }}
        </div>
      </div>
    </div>

    <div
      v-if="selected"
      class="absolute -right-1.5 -bottom-1.5 w-3.5 h-3.5 rounded-[4px] bg-accent border-[2px] border-[#1b1308] shadow-[0_4px_12px_rgba(0,0,0,0.35)] cursor-se-resize z-10"
      data-resize-handle
      @mousedown.stop="$emit('resize-start', { id: widget.id, event: $event })"
      @touchstart.stop="$emit('resize-start', { id: widget.id, event: $event })"
    >
      <span class="absolute right-[2px] bottom-[2px] w-[6px] h-[6px] border-r-2 border-b-2 border-[#1b1308a6] rounded-[2px]"></span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { fontSizes } from '../../../constants';
import { getBaseStyle, getBorderStyle, getShadowStyle, clamp, hexToRgba } from '../shared/utils';

const props = defineProps({
  widget: { type: Object, required: true },
  scale: { type: Number, default: 1 },
  selected: { type: Boolean, default: false }
});

defineEmits(['select', 'drag-start', 'resize-start']);

function parseMatrix(text) {
  if (!text || !text.trim()) {
    return [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9']
    ];
  }

  const result = text
    .split('\n')
    .map(row => row.split(/[;,]/).map(item => item.trim()).filter(Boolean))
    .filter(row => row.length > 0);

  if (result.length === 0) {
    return [
      ['1', '2', '3'],
      ['4', '5', '6'],
      ['7', '8', '9']
    ];
  }

  return result;
}

const rows = computed(() => parseMatrix(props.widget.text || ''));

const contentStyle = computed(() => {
  return {
    fontSize: `${(fontSizes[props.widget.fontSize] || 18) * props.scale}px`
  };
});

const cellStyle = computed(() => {
  const buttonAlpha = clamp((props.widget.bgOpacity ?? 180) / 255, 0, 1);
  return {
    color: props.widget.textColor || '#FFFFFF',
    background: hexToRgba(props.widget.bgColor || '#2A3A4A', buttonAlpha)
  };
});

const computedStyle = computed(() => {
  const w = props.widget;
  const s = props.scale;

  const style = getBaseStyle(w, s);
  style.background = hexToRgba(w.bgColor || '#2A3A4A', clamp((w.bgOpacity ?? 180) / 255, 0, 0.4));
  style.borderRadius = `${(w.radius || 10) * s}px`;
  style.overflow = 'hidden';

  Object.assign(style, getBorderStyle(w, s));
  Object.assign(style, getShadowStyle(w, s));

  return style;
});
</script>
