<script setup lang="ts">
import { computed } from 'vue'
import ColorPicker from './ColorPicker.vue'
import { isColorVariable, isSizeVariable, isShadowVariable, isTransitionVariable, isFontVariable } from '../../services/themeService'

const props = defineProps<{
  name: string
  value: string
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const variableType = computed(() => {
  if (isColorVariable(props.name)) return 'color'
  if (isSizeVariable(props.name)) return 'size'
  if (isShadowVariable(props.name)) return 'shadow'
  if (isTransitionVariable(props.name)) return 'transition'
  if (isFontVariable(props.name)) return 'font'
  return 'text'
})

const isRadiusVariable = computed(() => props.name.toLowerCase().includes('radius'))

const displayName = computed(() => {
  return props.name
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
})

function handleColorChange(newValue: string) {
  emit('update', newValue)
}

function handleInputChange(e: Event) {
  emit('update', (e.target as HTMLInputElement).value)
}
</script>

<template>
  <div class="variable-editor" :class="variableType">
    <div class="variable-header">
      <span class="variable-name">{{ displayName }}</span>
      <code class="variable-key">--{{ name }}</code>
    </div>

    <div class="variable-input">
      <!-- Color input -->
      <ColorPicker
        v-if="variableType === 'color'"
        :modelValue="value"
        @update:modelValue="handleColorChange"
      />

      <!-- Size input -->
      <div v-else-if="variableType === 'size'" class="size-input">
        <input
          type="text"
          :value="value"
          @input="handleInputChange"
          placeholder="8px"
        />
        <div
          v-if="isRadiusVariable"
          class="radius-preview"
          :style="{ borderRadius: value }"
        ></div>
        <div
          v-else
          class="size-preview"
          :style="{ width: value, height: value }"
        ></div>
      </div>

      <!-- Text/Other input -->
      <input
        v-else
        type="text"
        :value="value"
        @input="handleInputChange"
        class="text-input"
      />
    </div>
  </div>
</template>

<style scoped>
.variable-editor {
  padding: 0.875rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.15s;
}

.variable-editor:hover {
  border-color: var(--border-hover);
}

.variable-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.variable-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
}

.variable-key {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.variable-input {
  width: 100%;
}

.size-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.size-input input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.size-preview {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 4px;
  flex-shrink: 0;
}

.radius-preview {
  width: 28px;
  height: 28px;
  background: var(--accent);
  flex-shrink: 0;
}

.text-input {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.text-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .variable-editor {
    padding: 0.75rem;
  }

  .variable-header {
    margin-bottom: 0.5rem;
  }

  .variable-name {
    font-size: 0.8rem;
  }

  .variable-key {
    font-size: 0.65rem;
  }

  .size-input input,
  .text-input {
    padding: 0.4rem;
    font-size: 0.8rem;
  }

  .size-preview,
  .radius-preview {
    width: 24px;
    height: 24px;
  }
}
</style>
