<template>
    <div class="cw-cp-wrap" :style="{ '--active-color': modelValue || '#000000' }">
        <div class="cw-cp-swatch-row">
            <span ref="anchorEl" class="cw-cp-anchor"></span>
            <input
                class="cw-cp-hex-input"
                type="text"
                :value="modelValue"
                @input="onHexInput($event.target.value)"
                placeholder="#000000"
                maxlength="7"
                spellcheck="false"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import Pickr from '@simonwep/pickr';
import '@simonwep/pickr/dist/themes/nano.min.css';

const props = defineProps({
    modelValue: { type: String, default: '#000000' },
});
const emit = defineEmits(['update:modelValue']);

const anchorEl = ref(null);
let pickr = null;
let ignoreWatch = false;

onMounted(() => {
    pickr = Pickr.create({
        el: anchorEl.value,
        theme: 'nano',
        default: props.modelValue || '#000000',
        defaultRepresentation: 'HEXA',
        adjustableNumbers: true,
        autoSave: true,
        components: {
            preview: false,
            opacity: false,
            hue: true,
            interaction: {
                hex: false,
                input: false,
                save: false,
            },
        },
    });

    pickr.on('change', (color) => {
        ignoreWatch = true;
        emit('update:modelValue', color.toHEXA().toString().slice(0, 7));
        setTimeout(() => { ignoreWatch = false; }, 0);
    });
});

watch(() => props.modelValue, (val) => {
    if (!pickr || ignoreWatch || !val) return;
    try {
        const current = pickr.getColor()?.toHEXA().toString().slice(0, 7);
        if (val.toLowerCase() !== current.toLowerCase()) {
            pickr.setColor(val);
        }
    } catch {}
});

function onHexInput(val) {
    if (/^#[0-9a-fA-F]{6}$/.test(val)) {
        emit('update:modelValue', val);
        pickr?.setColor(val);
    }
}

onBeforeUnmount(() => {
    pickr?.destroy();
    pickr = null;
});
</script>

<style scoped>
.cw-cp-wrap {
    display: flex;
    align-items: center;
}
.cw-cp-swatch-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 3px;
    background: var(--bg-surface);
    cursor: pointer;
}
.cw-cp-hex-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: monospace;
    color: var(--text-primary);
    background: transparent;
    min-width: 0;
    width: 80px;
    padding: 0px;

}
</style>

<style>
/* Pickr nano overrides - non-scoped so they reach the portal */
.pcr-app[data-theme="nano"] {
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    font-family: inherit;
    z-index: 999999 !important;
}
.pcr-app .pcr-interaction .pcr-save {
    background: var(--active-bg);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.pcr-app .pcr-interaction .pcr-save:hover { background: var(--active-hover); }
.pcr-button,
.pcr-button::after,
.pcr-button::before {
    width: 28px !important;
    height: 28px !important;
    border-radius: 5px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
    background: var(--active-color) !important;
}
.pcr-button:focus,
.pcr-button:active,
.pcr-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
</style>
