<template>
  <div :class="['form-check-container mb-3', { 'has-error': error, 'is-switch': isSwitch }]">
    <label :for="id" class="checkbox-wrapper">
      <input
        type="checkbox"
        :id="id"
        class="checkbox-input"
        :checked="isChecked"
        :disabled="disabled"
        :value="value"
        @change="handleChange"
      />
      <div class="checkbox-custom" :class="{ 'is-premium': isPremium }">
        <div v-if="isSwitch" class="switch-handle"></div>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="check-icon"><path d="M20 6 9 17l-5-5"/></svg>
      </div>
      <span class="checkbox-label" v-if="label">{{ label }}</span>
    </label>
    <div v-if="error" class="form-error mt-1">{{ error }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label:      { type: String, default: '' },
  id:         { type: String, required: true },
  modelValue: { type: [Boolean, Array], default: false },
  value:      { type: [String, Number, Boolean], default: null },
  disabled:   { type: Boolean, default: false },
  isSwitch:   { type: Boolean, default: false },
  isPremium:  { type: Boolean, default: true },
  error:      { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue'])

const isChecked = computed(() => {
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.includes(props.value)
  }
  return props.modelValue
})

const handleChange = (event) => {
  const checked = event.target.checked
  if (Array.isArray(props.modelValue)) {
    const newValue = [...props.modelValue]
    if (checked) {
      newValue.push(props.value)
    } else {
      const index = newValue.indexOf(props.value)
      if (index > -1) newValue.splice(index, 1)
    }
    emit('update:modelValue', newValue)
  } else {
    emit('update:modelValue', checked)
  }
}
</script>

<style scoped>
.form-check-container {
  display: block;
  min-height: 1.5rem;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 0.75rem;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom Checkbox Design */
.checkbox-custom {
  position: relative;
  height: 22px;
  width: 22px;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

:global(.dark-mode) .checkbox-custom {
  background: var(--bg-tertiary, #24272d);
  border-color: rgba(255, 255, 255, 0.1);
}

.is-switch .checkbox-custom {
  width: 44px;
  border-radius: 20px;
}

.checkbox-input:checked ~ .checkbox-custom {
  background: var(--accent-color, #533dea);
  border-color: var(--accent-color, #533dea);
  box-shadow: 0 4px 6px -1px var(--accent-soft, rgba(83, 61, 234, 0.4));
}

.check-icon {
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-input:checked ~ .checkbox-custom .check-icon {
  opacity: 1;
  transform: scale(1);
}

/* Switch Handle */
.switch-handle {
  position: absolute;
  left: 3px;
  top: 3px;
  height: 14px;
  width: 14px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-input:checked ~ .checkbox-custom .switch-handle {
  left: 25px;
}

/* Premium Effects */
.is-premium {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.checkbox-wrapper:hover .checkbox-custom {
  border-color: var(--accent-color, rgba(83, 61, 234, 0.3));
}

.checkbox-label {
  font-size: 0.875rem;
  color: var(--text-primary, #1e1e1e);
  font-weight: 500;
}

.form-error {
  font-size: 0.75rem;
  color: #ef4444;
  margin-left: 2rem;
}

.checkbox-input:disabled ~ .checkbox-custom {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
