<template>
  <div class="space-y-4">
    <!-- Content Tab -->
    <div v-if="editTab === 'content'" class="space-y-4">
      <div class="border-t-2 border-gray-100 pt-4 first:border-t-0 first:pt-0">
        <h3 class="mb-3 font-medium">{{ $t('system.diy.content') }}</h3>
        
        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <!-- Text Content -->
          <a-form-item :label="$t('system.diy.textContent')">
            <a-textarea
              v-model:value="localValue.text"
              :placeholder="$t('system.diy.textContentPlaceholder')"
              :rows="3"
            />
          </a-form-item>
          
          <!-- Font Size -->
          <a-form-item :label="$t('system.diy.fontSize')">
            <a-slider
              v-model:value="localValue.fontSize"
              :min="12"
              :max="48"
              :step="1"
              :marks="{ 12: '12px', 24: '24px', 36: '36px', 48: '48px' }"
            />
          </a-form-item>
          
          <!-- Font Weight -->
          <a-form-item :label="$t('system.diy.fontWeight')">
            <a-radio-group v-model:value="localValue.fontWeight">
              <a-radio value="normal">{{ $t('system.diy.normal') }}</a-radio>
              <a-radio value="bold">{{ $t('system.diy.bold') }}</a-radio>
              <a-radio value="lighter">{{ $t('system.diy.lighter') }}</a-radio>
            </a-radio-group>
          </a-form-item>
          
          <!-- Text Alignment -->
          <a-form-item :label="$t('system.diy.textAlign')">
            <a-radio-group v-model:value="localValue.textAlign">
              <a-radio value="left">{{ $t('system.diy.alignLeft') }}</a-radio>
              <a-radio value="center">{{ $t('system.diy.alignCenter') }}</a-radio>
              <a-radio value="right">{{ $t('system.diy.alignRight') }}</a-radio>
            </a-radio-group>
          </a-form-item>
          
          <!-- Line Height -->
          <a-form-item :label="$t('system.diy.lineHeight')">
            <a-slider
              v-model:value="localValue.lineHeight"
              :min="1"
              :max="3"
              :step="0.1"
              :marks="{ 1: '1x', 1.5: '1.5x', 2: '2x', 2.5: '2.5x', 3: '3x' }"
            />
          </a-form-item>
        </a-form>
      </div>
    </div>
    
    <!-- Style Tab -->
    <div v-if="editTab === 'style'" class="space-y-4">
      <ComponentStyleEditor
        :value="localValue"
        @update:value="updateLocalValue"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { cloneDeep } from 'lodash-es';

import ComponentStyleEditor from './component-style-editor.vue';

interface Props {
  value: any;
  editTab: 'content' | 'style';
}

interface Emits {
  (e: 'update:value', value: any): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const localValue = ref<any>({
  text: '',
  fontSize: 16,
  fontWeight: 'normal',
  textAlign: 'left',
  lineHeight: 1.5,
  textColor: '#333333',
  margin: {
    top: 0,
    bottom: 10,
    both: 0,
  },
  topRounded: 0,
  bottomRounded: 0,
  componentStartBgColor: '',
  componentEndBgColor: '',
  componentGradientAngle: 'to bottom',
  componentBgUrl: '',
  componentBgAlpha: 2,
  isHidden: false,
});

// Initialize local value
const initLocalValue = () => {
  if (props.value) {
    localValue.value = {
      ...localValue.value,
      ...props.value,
    };
  }
};

// Watch for value changes
watch(
  () => props.value,
  () => {
    initLocalValue();
  },
  { immediate: true, deep: true }
);

// Watch for local changes
watch(
  localValue,
  (newValue) => {
    emit('update:value', newValue);
  },
  { deep: true }
);

const updateLocalValue = (newValue: any) => {
  localValue.value = {
    ...localValue.value,
    ...newValue,
  };
};

// Initialize
initLocalValue();
</script>

<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-form-item:last-child) {
  margin-bottom: 0;
}
</style>