{{-- Робота зі словами тексту: слово натискається просто в тексті, переклад вводиться в панелі поруч --}}
@props([
    'text',
    'text_id',
    'languages',
    'translationSources',
    'language_from',
    'language_to' => null,
    'showTranslationButton' => true,
])
@php
    $sourceLanguage = $languages->firstWhere('id', (int) $language_from);
    $textDir = $sourceLanguage?->direction() ?? 'ltr';
    $user = auth()->user();
    $ownTranslation = $showTranslationButton
        ? $text->translations()->where('user_id', $user->id)->first()
        : null;
    $parserConfig = [
        'textId' => (int) $text_id,
        'languageFrom' => (int) $language_from,
        'languageTo' => $language_to ? (int) $language_to : null,
        'languageIds' => $languages->pluck('id')->map(fn ($id) => (int) $id)->values(),
        'translationLanguageLabels' => $languages->mapWithKeys(function ($language) {
            $key = 'app.language.translation_in.'.$language->name;

            return [(string) $language->id => \Illuminate\Support\Facades\Lang::has($key)
                ? __($key)
                : ($language->native_name ?: $language->name)];
        }),
        'sources' => $translationSources
            ->where('language_from_id', (int) $language_from)
            ->map(fn ($source) => ['id' => (string) $source->id, 'name' => $source->name])
            ->values(),
        'urls' => [
            'parse' => route('texts.parse'),
            'words' => route('words.store'),
            'wordTranslations' => route('word-translation.store'),
            'sources' => route('translation-sources.store'),
        ],
    ];
@endphp
<div class="@container space-y-4" x-data="parserData(@js($parserConfig))">
    <div class="flex flex-wrap items-center justify-end gap-2">
        @if ($text->isOwnedBy($user))
            <flux:button href="{{ route('texts.edit', ['text' => $text_id]) }}" icon="pencil-square">Редагувати текст</flux:button>
        @endif
        <flux:modal.trigger name="export-pdf-{{ $text_id }}">
            <flux:button icon="arrow-down-tray">Експорт PDF</flux:button>
        </flux:modal.trigger>
        @if ($showTranslationButton)
            <flux:button
                href="{{ $ownTranslation ? route('text-translations.show', $ownTranslation) : route('text-translations.create', $text) }}"
                variant="primary"
                :icon="$ownTranslation ? 'language' : 'plus'"
            >
                {{ $ownTranslation ? 'Переглянути свій переклад' : 'Додати свій переклад' }}
            </flux:button>
        @endif
    </div>

    <flux:modal name="export-pdf-{{ $text_id }}" class="w-full max-w-md">
        <form method="GET" class="space-y-5">
            <div class="space-y-1">
                <flux:heading size="lg">Експорт PDF</flux:heading>
                <flux:text>Мова потрібна лише для варіантів зі словами.</flux:text>
            </div>
            <flux:select name="language_to" label="Мова перекладу слів для PDF" required>
                @foreach ($languages->where('id', '!=', $language_from) as $languageTo)
                    <option value="{{ $languageTo->id }}" @selected(request('language_to', $user->native_language_id) == $languageTo->id)>{{ $languageTo->label }}</option>
                @endforeach
            </flux:select>
            <div class="grid gap-2">
                <flux:button type="submit" formaction="{{ route('texts.pdf', ['text' => $text_id]) }}" formnovalidate icon="arrow-down-tray" class="cursor-pointer">Завантажити текст</flux:button>
                <flux:button type="submit" formaction="{{ route('texts.pdf_with_words', ['text' => $text_id]) }}" icon="arrow-down-tray" class="cursor-pointer">Завантажити текст + слова</flux:button>
                <flux:button type="submit" formaction="{{ route('texts.pdf_with_sentences', ['text' => $text_id]) }}" icon="arrow-down-tray" class="cursor-pointer">Завантажити речення + слова</flux:button>
            </div>
        </form>
    </flux:modal>

    <div class="flex flex-wrap items-end gap-3">
        <div class="flex flex-wrap items-end gap-3" x-show="interactive" x-cloak>
            <div class="min-w-48 flex-1 @2xl:max-w-xs">
                <flux:select label="Мова перекладу слів" x-model="language_to" x-on:change="parseText()" placeholder="Оберіть мову">
                    @foreach ($languages as $l)
                        <flux:select.option value="{{ $l->id }}">{{ $l->label }}</flux:select.option>
                    @endforeach
                </flux:select>
            </div>
            <flux:button x-on:click="parseText()" x-bind:disabled="parsing">
                <span class="inline-flex items-center gap-2">
                    <template x-if="parsing"><x-spinner/></template>
                    <span x-text="parsing ? 'Опрацьовуємо текст…' : 'Опрацювати текст'"></span>
                </span>
            </flux:button>
        </div>
        <div role="group" aria-label="Вигляд тексту"
            class="inline-flex rounded-lg border border-zinc-200 bg-zinc-100 p-0.5 dark:border-zinc-700 dark:bg-zinc-900">
            <button type="button" x-on:click="setInteractive(false)" :aria-pressed="!interactive"
                class="h-9 cursor-pointer rounded-md px-3 text-sm font-medium text-zinc-600 aria-pressed:bg-white aria-pressed:text-zinc-900 aria-pressed:shadow-xs dark:text-zinc-300 dark:aria-pressed:bg-zinc-700 dark:aria-pressed:text-white">Оригінал</button>
            <button type="button" x-on:click="setInteractive(true)" :aria-pressed="interactive"
                class="h-9 cursor-pointer rounded-md px-3 text-sm font-medium text-zinc-600 aria-pressed:bg-white aria-pressed:text-zinc-900 aria-pressed:shadow-xs dark:text-zinc-300 dark:aria-pressed:bg-zinc-700 dark:aria-pressed:text-white">Слова</button>
            <button type="button" x-on:click="setSentenceMode()" :aria-pressed="sentenceMode"
                class="h-9 cursor-pointer rounded-md px-3 text-sm font-medium text-zinc-600 aria-pressed:bg-white aria-pressed:text-zinc-900 aria-pressed:shadow-xs dark:text-zinc-300 dark:aria-pressed:bg-zinc-700 dark:aria-pressed:text-white">Речення</button>
        </div>
    </div>

    <flux:callout variant="danger" icon="exclamation-triangle" x-show="parsingError" x-cloak>
        <flux:callout.text><span x-text="parsingError"></span></flux:callout.text>
    </flux:callout>

    <div x-show="parsing && !parsed" x-cloak role="status" aria-live="polite" class="flex items-center gap-3 text-zinc-600 dark:text-zinc-300">
        <x-spinner class="size-6"/>
        <span>Опрацьовуємо текст, зачекайте…</span>
    </div>

    <template x-if="parsed && interactive">
        <div class="space-y-4">
            <template x-if="!sentenceMode">
                <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-zinc-600 dark:text-zinc-300">
                    <div class="flex min-w-56 flex-1 items-center gap-3 @2xl:max-w-sm">
                        <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700" role="progressbar"
                            aria-label="Слова з власним перекладом" aria-valuemin="0" :aria-valuemax="stats.total" :aria-valuenow="stats.done">
                            <div class="h-full rounded-full bg-emerald-600" :style="`width: ${stats.percent}%`"></div>
                        </div>
                        <span class="whitespace-nowrap font-medium text-zinc-900 dark:text-white" x-text="`Перекладено ${stats.done} із ${stats.total} слів`"></span>
                    </div>
                    <span class="inline-flex items-center gap-2">
                        <span class="rounded-sm border-b-2 border-emerald-700 bg-emerald-100 px-1 text-zinc-900 dark:border-emerald-400 dark:bg-emerald-500/20 dark:text-emerald-50">слово</span>
                        мій переклад
                    </span>
                    <span class="inline-flex items-center gap-2">
                        <span class="border-b-2 border-dotted border-accent px-1 text-zinc-900 dark:text-white">слово</span>
                        є у спільному словнику
                    </span>
                </div>
            </template>

            <div class="grid items-start gap-6 @4xl:grid-cols-[minmax(0,1fr)_22rem]">
                <template x-if="!sentenceMode">
                    <div>
                        <div dir="{{ $textDir }}" class="reading-text text-zinc-900 dark:text-zinc-100" :class="current && 'max-lg:pb-[60dvh]'" aria-label="Текст зі словами">
                            <template x-for="paragraph in paragraphs" :key="paragraph.index">
                                <p class="mb-5 last:mb-0">
                                    {{-- Усе в один рядок: пробіли між тегами стали б зайвими пробілами в тексті --}}
                                    <template x-for="item in paragraph.items" :key="item.id"><span><template x-if="item.word"><button type="button" x-on:click="select(item)" :class="wordClass(item)" :aria-pressed="item.id === selectedId" :data-word-id="item.id" class="cursor-pointer scroll-mt-24 rounded-t-sm border-b-2 align-baseline leading-[1.35] transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent"><template x-for="(fragment, index) in item.fragments" :key="index"><span x-text="fragment.text" :style="fragment.fontSize ? { fontSize: fragment.fontSize } : null"></span></template></button></template><template x-if="!item.word"><span :class="gapClass(item)"><template x-for="(fragment, index) in item.fragments ?? [{ text: item.text }]" :key="index"><span x-text="fragment.text" :style="fragment.fontSize ? { fontSize: fragment.fontSize } : null"></span></template></span></template></span></template>
                                </p>
                            </template>
                        </div>
                        <p x-show="!current" class="mt-4 hidden rounded-xl border border-dashed border-zinc-300 p-5 text-sm text-zinc-600 @4xl:block dark:border-zinc-600 dark:text-zinc-300">
                            Натисніть слово в тексті, щоб побачити переклади та додати свій.
                        </p>
                    </div>
                </template>

                <template x-if="sentenceMode">
                    <ol dir="{{ $textDir }}" aria-label="Текст, поділений на речення" class="list-decimal space-y-3 pl-8 text-zinc-900 marker:font-medium marker:text-zinc-500 dark:text-zinc-100 dark:marker:text-zinc-400">
                        <template x-for="(sentence, sentenceIndex) in sentences" :key="sentenceIndex">
                            <li class="reading-text pl-1" :class="sentence.paragraph !== sentences[sentenceIndex - 1]?.paragraph && sentenceIndex > 0 ? 'mt-6' : ''">
                                <span class="inline">
                                    <template x-for="(segment, segmentIndex) in sentence.segments" :key="segmentIndex">
                                        <span>
                                            <template x-if="segment.word">
                                                <button type="button" x-on:click="select({ id: `${sentenceIndex}-${segmentIndex}`, word: segment.word, sentence: sentenceIndex })"
                                                    :class="wordClass({ id: `${sentenceIndex}-${segmentIndex}`, word: segment.word, sentence: sentenceIndex })"
                                                    :aria-pressed="`${sentenceIndex}-${segmentIndex}` === selectedId"
                                                    :data-word-id="`${sentenceIndex}-${segmentIndex}`"
                                                    class="cursor-pointer scroll-mt-24 rounded-t-sm border-b-2 align-baseline leading-[1.35] transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent"
                                                ><template x-for="(fragment, index) in segment.fragments ?? [{ text: segment.text }]" :key="index"><span x-text="fragment.text" :style="fragment.fontSize ? { fontSize: fragment.fontSize } : null"></span></template></button>
                                            </template>
                                            <template x-if="!segment.word">
                                                <span><template x-for="(fragment, index) in segment.fragments ?? [{ text: segment.text }]" :key="index"><span x-text="fragment.text" :style="fragment.fontSize ? { fontSize: fragment.fontSize } : null"></span></template></span>
                                            </template>
                                        </span>
                                    </template>
                                </span>
                            </li>
                        </template>
                    </ol>
                </template>

                <aside x-show="current" x-cloak aria-label="Вибране слово"
                    class="z-10 space-y-4 overflow-y-auto rounded-xl border border-zinc-200 bg-white p-4 shadow-xl max-lg:fixed max-lg:inset-x-0 max-lg:bottom-0 max-lg:max-h-[60dvh] max-lg:rounded-b-none lg:sticky lg:bottom-2 lg:max-h-[75dvh] @4xl:top-4 @4xl:bottom-auto @4xl:max-h-[calc(100dvh-2rem)] @4xl:shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h2 class="font-reading break-words text-2xl font-medium text-zinc-900 dark:text-white" dir="auto" x-text="current?.name"></h2>
                            <p class="text-sm text-zinc-600 dark:text-zinc-300" dir="auto" x-show="current?.my_transcription" x-text="current?.my_transcription"></p>
                        </div>
                        <button type="button" x-on:click="closeWord()" aria-label="Закрити панель слова"
                            class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800">
                            <flux:icon name="x-mark" class="size-5"/>
                        </button>
                    </div>

                    <template x-if="otherTranslations.length > 0">
                        <div class="space-y-2">
                            <p class="text-sm font-medium text-zinc-800 dark:text-zinc-200">Зі спільного словника</p>
                            <ul class="space-y-2">
                                <template x-for="(translation, translationIndex) in otherTranslations" :key="translationIndex">
                                    <li>
                                        <button type="button" x-on:click="useSuggestion(translation)" title="Підставити у свій переклад"
                                            class="w-full cursor-pointer rounded-lg border border-zinc-200 px-3 py-2 text-left hover:border-accent hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
                                            <span class="block whitespace-pre-wrap text-zinc-900 dark:text-white" dir="auto" x-text="translation.value"></span>
                                            <span class="mt-0.5 block text-xs text-zinc-600 dark:text-zinc-400" x-show="translation.translation_source"
                                                x-text="sourceLine(translation.translation_source)"></span>
                                        </button>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </template>

                    <form x-on:submit.prevent="save()" class="space-y-3">
                        <div>
                            <label for="word-translation-{{ $text_id }}" class="mb-2 block text-sm font-medium text-zinc-800 dark:text-zinc-200">
                                {{ __('app.language.translation') }} (<span x-text="translationLanguageLabel"></span>)
                            </label>
                            <flux:textarea id="word-translation-{{ $text_id }}" placeholder="Ваш переклад" rows="2" dir="auto" x-model="form.translation" x-ref="translation"
                                x-on:keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); save(); }"/>
                        </div>
                        <div class="space-y-2">
                            <flux:select label="Джерело перекладу" x-model="form.translationSourceId">
                                <option value="">Виберіть джерело</option>
                                <template x-for="source in translationSources" :key="source.id">
                                    <option :value="source.id" x-text="source.name"></option>
                                </template>
                            </flux:select>
                            <flux:button type="button" size="sm" variant="subtle" icon="plus" x-on:click="openTranslationSourceModal()">
                                Додати нове джерело
                            </flux:button>
                        </div>
                        <flux:input label="Транскрипція (необов’язково)" placeholder="Ваша транскрипція або читання" maxlength="100" dir="auto" x-model="form.transcription"/>
                        <flux:callout variant="danger" icon="exclamation-triangle" x-show="savingError" x-cloak>
                            <flux:callout.text><span x-text="savingError"></span></flux:callout.text>
                        </flux:callout>
                        {{-- Кнопка збереження завжди видима, навіть коли панель прокручується --}}
                        <div class="sticky bottom-0 -mx-4 -mb-1 flex flex-wrap items-center justify-between gap-3 bg-white px-4 py-3 max-lg:justify-end dark:bg-zinc-900">
                            <flux:text size="sm" class="max-lg:hidden">Enter — зберегти й перейти до наступного слова</flux:text>
                            <flux:button type="submit" variant="primary" x-bind:disabled="saving">
                                <span class="inline-flex items-center gap-2">
                                    <template x-if="saving"><x-spinner/></template>
                                    <span x-text="saving ? 'Збереження…' : 'Зберегти'"></span>
                                </span>
                            </flux:button>
                        </div>
                    </form>

                    <div class="space-y-2 border-t border-zinc-200 pt-3 dark:border-zinc-700" x-show="selectedSentence !== null">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-sm text-zinc-600 dark:text-zinc-300" x-text="`Речення ${selectedSentence + 1} з ${sentences.length}`"></span>
                            <flux:button type="button" size="sm" variant="subtle" icon="clipboard-document" x-on:click="copySentence()">
                                <span x-text="copied ? 'Скопійовано' : 'Копіювати'"></span>
                            </flux:button>
                        </div>
                        <p dir="{{ $textDir }}" class="font-reading text-sm leading-relaxed text-zinc-700 dark:text-zinc-300" x-text="sentences[selectedSentence]?.value"></p>
                    </div>
                </aside>
            </div>
        </div>
    </template>

    <flux:modal name="add-translation-source" class="md:w-96">
        <form x-on:submit.prevent="createTranslationSource()" class="space-y-6">
            <flux:heading size="lg">Нове джерело перекладу</flux:heading>
            <flux:input label="Назва джерела" placeholder="Назва словника або іншого джерела" x-model="newSource.name" required maxlength="255"/>
            <flux:select label="З мови" x-model="newSource.language_from_id" required placeholder="Оберіть мову">
                @foreach ($languages as $language)
                    <flux:select.option value="{{ $language->id }}">{{ $language->label }}</flux:select.option>
                @endforeach
            </flux:select>
            <flux:select label="На мову" x-model="newSource.language_to_id" required placeholder="Оберіть мову">
                @foreach ($languages as $language)
                    <flux:select.option value="{{ $language->id }}">{{ $language->label }}</flux:select.option>
                @endforeach
                <flux:select.option value="other">Інша мова</flux:select.option>
            </flux:select>
            <flux:input
                label="Назва іншої мови"
                placeholder="Введіть назву мови"
                x-model="newSource.language_to_other"
                x-show="newSource.language_to_id === 'other'"
                x-bind:required="newSource.language_to_id === 'other'"
                maxlength="255"
            />
            <flux:input label="Автори (необов’язково)" placeholder="Автори" x-model="newSource.authors" maxlength="1000"/>
            <flux:input label="Посилання (необов’язково)" type="url" placeholder="https://" x-model="newSource.url" maxlength="2048"/>
            <flux:input label="Видавництво (необов’язково)" placeholder="Видавництво" x-model="newSource.publisher" maxlength="255"/>
            <flux:input label="Рік видання (необов’язково)" type="number" min="1" max="9999" x-model="newSource.source_year"/>
            <flux:callout variant="danger" icon="exclamation-triangle" x-show="sourceError" x-cloak>
                <flux:callout.text><span x-text="sourceError"></span></flux:callout.text>
            </flux:callout>
            <div class="flex">
                <flux:spacer/>
                <flux:button type="submit" variant="primary" x-bind:disabled="sourceSaving">
                    <span x-text="sourceSaving ? 'Збереження…' : 'Додати джерело'"></span>
                </flux:button>
            </div>
        </form>
    </flux:modal>
</div>