@props(['model', 'preview', 'catalog', 'id' => 'message-body', 'rows' => 6])

@php
    $namespaceLabels = ['target' => 'اطلاعات تارگت', 'workspace' => 'فضای کاری'];
@endphp

{{-- A message editor: the text, buttons that insert variables at the cursor, and a live preview with the SMS segment count. --}}
<div
    {{ $attributes->class(['space-y-2']) }}
    x-data="{
        insert(token) {
            const el = this.$refs.field;
            const start = el.selectionStart ?? el.value.length;
            const end = el.selectionEnd ?? el.value.length;
            el.value = el.value.slice(0, start) + token + el.value.slice(end);
            el.selectionStart = el.selectionEnd = start + token.length;
            el.dispatchEvent(new Event('input', { bubbles: true }));
            el.focus();
        }
    }"
>
    <textarea wire:model.live.debounce.300ms="{{ $model }}" x-ref="field" id="{{ $id }}" rows="{{ $rows }}" class="block w-full rounded-md border-gray-300 text-sm leading-7 shadow-sm"></textarea>

    @foreach ($catalog as $namespace => $variables)
        <div class="flex flex-wrap items-center gap-1.5 text-xs" wire:key="{{ $id }}-vars-{{ $namespace }}">
            <span class="text-gray-400">{{ $namespaceLabels[$namespace] ?? $namespace }}:</span>
            @foreach ($variables as $qualified => $label)
                <button type="button" x-on:click="insert(@js('{'.$qualified.'}'))" class="rounded-full border border-gray-200 bg-white px-2.5 py-1 text-gray-700 hover:border-indigo-300 hover:text-indigo-700">{{ $label }}</button>
            @endforeach
        </div>
    @endforeach

    <p class="text-xs text-gray-400">برای مقدار جایگزین وقتی اطلاعاتی نیست بنویسید <span class="ltr-numerals" dir="ltr">{target.first_name|همکار گرامی}</span>. نام مخاطب را بدون «آقا/خانم» خطاب کنید؛ جنسیت مخاطب در سامانه ثبت نمی‌شود.</p>

    <div class="rounded-md bg-gray-50 p-3">
        <div class="mb-1 flex items-center justify-between text-xs text-gray-500">
            <span>پیش‌نمایش با مقادیر نمونه</span>
            <span>
                <span class="ltr-numerals">{{ $preview['count']['length'] }}</span> کاراکتر ·
                <span class="ltr-numerals">{{ $preview['count']['segments'] }}</span> پیامک
            </span>
        </div>
        <p class="whitespace-pre-line text-sm leading-7 text-gray-800">{{ $preview['text'] !== '' ? $preview['text'] : '—' }}</p>
        @if ($preview['unknown'] !== [])
            <p class="mt-2 text-xs text-rose-600">متغیر ناشناخته: <span class="ltr-numerals" dir="ltr">{{ collect($preview['unknown'])->map(fn ($v) => '{'.$v.'}')->implode('، ') }}</span></p>
        @endif
        @if ($preview['count']['segments'] > 1)
            <p class="mt-2 text-xs text-amber-700">این متن بیش از یک پیامک محاسبه می‌شود (هر پیامک فارسی حدود {{ $preview['count']['per_segment'] }} کاراکتر). شمارش تقریبی است و ممکن است پنل شما کمی متفاوت حساب کند.</p>
        @endif
    </div>
</div>