@props([
    'id' => null,
    'placeholder' => '',
])

@php
    $id = $id ?? 'rte-' . uniqid();
@endphp

<div x-data="{
    content: @entangle($attributes->wire('model')),
    showLinkInput: false,
    linkUrl: 'https://',
    insertText(tag) {
        const textarea = this.$refs.textarea;
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const text = textarea.value || '';
        const selected = text.substring(start, end);
        let replacement = '';
        
        if (tag === 'link') {
            if (this.linkUrl) {
                replacement = `<a href=&quot;${this.linkUrl}&quot;>${selected || this.linkUrl}</a>`;
            } else {
                return;
            }
            this.showLinkInput = false;
            this.linkUrl = 'https://';
        } else if (tag === 'p' || tag === 'h2' || tag === 'h3' || tag === 'h4' || tag === 'strong' || tag === 'em' || tag === 'b' || tag === 'i') {
            replacement = `<${tag}>${selected}</${tag}>`;
        } else if (tag === 'ul' || tag === 'ol') {
            replacement = `<${tag}>\n  <li>${selected || ''}</li>\n</${tag}>`;
        } else if (tag === 'li') {
            replacement = `<li>${selected}</li>`;
        } else if (tag === 'br') {
            replacement = '<br>';
        }
        
        const newText = text.substring(0, start) + replacement + text.substring(end);
        this.content = newText;
        
        this.$nextTick(() => {
            textarea.focus();
            const newPos = start + replacement.length;
            textarea.setSelectionRange(newPos, newPos);
        });
    }
}" class="sf-editor-container">
    <div class="sf-editor-toolbar">
        <button type="button" @click="insertText('h2')" title="Başlık 2">H2</button>
        <button type="button" @click="insertText('h3')" title="Başlık 3">H3</button>
        <button type="button" @click="insertText('h4')" title="Başlık 4">H4</button>
        <button type="button" @click="insertText('p')" title="Paragraf">P</button>
        <button type="button" @click="insertText('strong')" title="Kalın"><strong>B</strong></button>
        <button type="button" @click="insertText('em')" title="İtalik"><em>I</em></button>
        <button type="button" @click="insertText('ul')" title="Sırasız Liste">• Liste</button>
        <button type="button" @click="insertText('ol')" title="Sıralı Liste">1. Liste</button>
        <button type="button" @click="insertText('li')" title="Liste Öğesi">Öğe</button>
        
        <div class="sf-editor-link-wrapper">
            <button type="button" @click="showLinkInput = !showLinkInput" title="Bağlantı Ekle">Link</button>
            <div x-show="showLinkInput" @click.away="showLinkInput = false" class="sf-editor-link-popover" x-transition x-cloak>
                <input type="text" x-model="linkUrl" placeholder="https://" class="form-control sf-editor-link-input">
                <div class="sf-editor-link-popover-buttons">
                    <button type="button" class="btn btn-primary btn-sm" @click="insertText('link')">Ekle</button>
                    <button type="button" class="btn btn-secondary btn-sm" @click="showLinkInput = false">İptal</button>
                </div>
            </div>
        </div>

        <button type="button" @click="insertText('br')" title="Satır Sonu">Satır Sonu</button>
    </div>
    <textarea 
        x-ref="textarea"
        x-model="content"
        id="{{ $id }}"
        {{ $attributes->whereDoesntStartWith('wire:model') }}
        placeholder="{{ $placeholder }}"
        class="form-control sf-editor-textarea"
    ></textarea>
</div>