@push('alpine-components')
    <script>
        window.bitflanCaseConverterComponent = function() {
            return {
                converted: false,
                content: '',
                characterCount: 0,
                wordCount: 0,

                init() {
                    this.$watch('content', value => {
                        this.characterCount = value.length;
                        this.wordCount = value.trim().split(/\s+/).filter(word => word.length > 0).length;
                    });
                },

                generate() {
                    if (!this.content.trim()) return;
                    
                    let result = this.content.trim();
                    
                    switch(this.$refs.case.value) {
                        case 'lower':
                            result = result.toLowerCase();
                            break;
                        case 'upper':
                            result = result.toUpperCase();
                            break;
                        case 'title':
                            result = result
                                .split(/\s+/)
                                .map(word => word[0].toUpperCase() + word.slice(1).toLowerCase())
                                .join(' ');
                            break;
                        case 'camel':
                            result = result
                                .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => 
                                    index === 0 ? word.toLowerCase() : word.toUpperCase())
                                .replace(/\s+/g, '');
                            break;
                        case 'pascal':
                            result = result
                                .replace(/(?:^\w|[A-Z]|\b\w)/g, word => word.toUpperCase())
                                .replace(/\s+/g, '');
                            break;
                        case 'snake':
                            result = result
                                .toLowerCase()
                                .replace(/\s+/g, '_');
                            break;
                        case 'kebab':
                            result = result
                                .toLowerCase()
                                .replace(/\s+/g, '-');
                            break;
                        case 'alternating':
                            result = result
                                .split('')
                                .map((char, i) => i % 2 === 0 ? char.toLowerCase() : char.toUpperCase())
                                .join('');
                            break;
                        case 'inverse':
                            result = result
                                .split('')
                                .map(char => char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase())
                                .join('');
                            break;
                    }

                    this.$refs.textarea.value = result;
                    this.converted = true;
                },

                clear() {
                    this.content = '';
                    this.converted = false;
                    this.$refs.textarea.value = '';
                }
            }
        }
    </script>
@endpush

<div x-data="window.bitflanCaseConverterComponent()">
    <div class="form-group">
        <label class="custom-label fw-semibold mb-2 d-block text-dark dark:text-light">{{ trans('webtools/tools/case-converter.case') }}</label>
        <select x-ref="case" class="custom-input form-select">
            <option value="lower">{{ trans('webtools/tools/case-converter.lower') }}</option>
            <option value="upper">{{ trans('webtools/tools/case-converter.upper') }}</option>
            <option value="title">{{ trans('webtools/tools/case-converter.title') }}</option>
            <option value="camel">{{ trans('webtools/tools/case-converter.camel') }}</option>
            <option value="pascal">{{ trans('webtools/tools/case-converter.pascal') }}</option>
            <option value="snake">{{ trans('webtools/tools/case-converter.snake') }}</option>
            <option value="kebab">{{ trans('webtools/tools/case-converter.kebab') }}</option>
            <option value="alternating">{{ trans('webtools/tools/case-converter.alternating') }}</option>
            <option value="inverse">{{ trans('webtools/tools/case-converter.inverse') }}</option>
        </select>
        <div class="help-text">
            <span>{{ trans('webtools/tools/case-converter.case_help') }}</span>
        </div>
    </div>

    <div class="form-group mt-4">
        <label class="custom-label fw-semibold mb-2 d-block text-dark dark:text-light">{{ trans('webtools/tools/case-converter.content') }}</label>
        <textarea x-model="content" class="custom-input custom-textarea" rows="5" placeholder="{{ trans('webtools/tools/case-converter.content_holder') }}"></textarea>
        <div class="d-flex justify-content-between mt-2">
            <small class="text-secondary">
                <span x-text="characterCount"></span> {{ trans('webtools/tools/case-converter.characters') }} | 
                <span x-text="wordCount"></span> {{ trans('webtools/tools/case-converter.words') }}
            </small>
            <button x-on:click="clear()" class="btn btn-link btn-sm text-secondary p-0">
                {{ trans('webtools/tools/case-converter.clear') }}
            </button>
        </div>
    </div>

    <div class="form-group mt-4">
        <button x-on:click="generate()" class="btn custom--btn button__lg">{{ trans('webtools/tools/case-converter.submit') }}</button>
    </div>

    <div class="row mt-3" x-cloak x-show="converted">
        <div class="col-12">
            <div class="form-group">
                <div class="form-group position-relative">
                    <button @click="window.writeClipboardText($event, $refs.textarea.value)" class="btn custom--btn button__md ace-copy-btn btn__dark">{{ trans('webtools/tools/case-converter.copy') }}</button>
                    <textarea x-ref="textarea" class="custom-input custom-textarea" rows="5" readonly></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.help-text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark .help-text {
    color: var(--color-white);
}
.dark label, .dark .custom-label {
    color: var(--color-white) !important;
}

.form-group {
    position: relative;
}

.custom-input {
    transition: all 0.2s ease;
}

.dark .custom-input {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-700);
    color: var(--color-white);
}

.custom-input {
    background-color: #fff;
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-900);
}

.custom-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

.dark .custom-input::placeholder {
    color: var(--bs-gray-500);
}

.custom-input::placeholder {
    color: var(--bs-gray-500);
}

.custom-textarea {
    resize: vertical;
    min-height: 120px;
}

.ace-copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

.dark .text-light {
    color: var(--color-white) !important;
}
</style>