<template>
    <div class="checkbox-wrapper">
        <div class="checkbox-container">
            <input :id="id" v-model="internalValue" type="checkbox" :disabled="disabled" :required="required"
                class="checkbox-input" :class="checkboxClasses" v-bind="$attrs" />
            <div class="checkbox-indicator">
                <BaseIcon v-if="internalValue" name="heroicons:check" class="check-icon" />
            </div>
        </div>
        <label v-if="label || $slots.default" :for="id" class="checkbox-label" :class="labelClasses">
            <slot>{{ label }}</slot>
        </label>
    </div>
</template>

<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import BaseIcon from '@/components/BaseIcon.vue'

interface Props {
    modelValue?: boolean
    label?: string
    disabled?: boolean
    required?: boolean
    size?: 'sm' | 'md' | 'lg'
    color?: 'primary' | 'success' | 'warning' | 'error'
    id?: string
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    size: 'md',
    color: 'primary',
    id: () => `checkbox-${Math.random().toString(36).substr(2, 9)}`
})

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
}>()

const attrs = useAttrs()

const internalValue = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
})

const checkboxClasses = computed(() => [
    'checkbox-base',
    `checkbox-${props.size}`,
    `checkbox-${props.color}`,
    {
        'checkbox-disabled': props.disabled,
        'checkbox-checked': internalValue.value
    }
])

const labelClasses = computed(() => [
    'label-base',
    `label-${props.size}`,
    {
        'label-disabled': props.disabled
    }
])
</script>

<style scoped>
.checkbox-wrapper {
    @apply flex items-start gap-3;
}

.checkbox-container {
    @apply relative flex-shrink-0;
}

.checkbox-input {
    @apply sr-only;
}

.checkbox-indicator {
    @apply flex items-center justify-center transition-all duration-micro;
    @apply border-2 rounded-md cursor-pointer;
    @apply border-border-primary bg-surface-primary;
    @apply hover:border-primary-300 focus-within:ring-2 focus-within:ring-primary-500/20;
}

/* Size variants */
.checkbox-base+.checkbox-indicator {
    @apply w-5 h-5;
}

.checkbox-sm+.checkbox-indicator {
    @apply w-4 h-4;
}

.checkbox-lg+.checkbox-indicator {
    @apply w-6 h-6;
}

/* Color variants */
.checkbox-primary:checked+.checkbox-indicator {
    @apply bg-primary-500 border-primary-500;
}

.checkbox-success:checked+.checkbox-indicator {
    @apply bg-success-500 border-success-500;
}

.checkbox-warning:checked+.checkbox-indicator {
    @apply bg-warning-500 border-warning-500;
}

.checkbox-error:checked+.checkbox-indicator {
    @apply bg-error-500 border-error-500;
}

.checkbox-disabled+.checkbox-indicator {
    @apply opacity-50 cursor-not-allowed;
}

.check-icon {
    @apply w-3 h-3 text-white;
}

.checkbox-sm+.checkbox-indicator .check-icon {
    @apply w-2.5 h-2.5;
}

.checkbox-lg+.checkbox-indicator .check-icon {
    @apply w-4 h-4;
}

/* Label styles */
.checkbox-label {
    @apply cursor-pointer select-none;
}

.label-base {
    @apply text-sm font-medium text-text-primary;
}

.label-sm {
    @apply text-xs;
}

.label-lg {
    @apply text-base;
}

.label-disabled {
    @apply opacity-50 cursor-not-allowed;
}
</style>