{% extends "/layouts/main.twig" %}
{% set mobile_head_button = {
  link: 'app/voiceover/voices'
} %}

{% set active_menu = '/app/voiceover' %}
{% set xdata %}
voiceover(
{{ (voice ?? null )|json_encode }},
{{ (speech ?? null )|json_encode }}
)
{% endset %}
{% block title p__('title', 'Voice Over')|title %}

{% block sidebar %}
	<div class="hidden group-data-[key=history]/sidebar:block">
		<div class="flex items-center justify-between p-4 border-b border-line sticky top-0 bg-main z-10">
			<h2>{{ p__('heading', 'History') }}</h2>

			<button type="button" class="text-content-dimmed hover:text-content" @click="sidebar.close()" x-tooltip.raw.placement.left="{{ __('Close') }}">
				<i class="text-2xl ti ti-x"></i>
			</button>
		</div>

		<div>
			<template x-for="i in history" :key="i.id">
				<a :href="`app/voiceover/${i.id}`" class="flex gap-2 items-center p-4 border-b border-line-dimmed hover:bg-line-dimmed/50" :class="preview && preview.id == i.id ? 'bg-line-dimmed/50' : ''" @click.prevent="select(i)">
					<x-avatar :title="i.title" class="shrink-0"></x-avatar>

					<div class="overflow-hidden">
						<div x-text="i.title || `{{ __('Untitled resource') }}`" class="overflow-hidden text-sm text-ellipsis text-nowrap max-w-full" :class="i.title ? '' : 'text-content-dimmed'"></div>

						<div class="flex">
							<x-time :datetime="i.created_at" data-type="date" class="text-xs text-content-dimmed"></x-time>
						</div>
					</div>
				</a>
			</template>

			<template x-if="!historyLoaded">
				<div class="my-8 flex justify-center">
					<button type="button" @click="fetchHistory()" class="font-semibold hover:underline text-sm">
						{{ __('Load more') }}
					</button>
				</div>
			</template>

			<template x-if="historyLoaded && history.length === 0">
				<div class="p-4 text-content-dimmed">
					{{ __('No speeches yet') }}
				</div>
			</template>
		</div>
	</div>
{% endblock %}

{% block toolbar %}
	<div class="absolute z-10 top-4 end-10 hidden md:flex gap-2 transition-all ease-in">
		<a href="app/voiceover" class="text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('New') }}">
			<i class="text-2xl ti ti-square-rounded-plus"></i>
		</a>

		<a href="app/library/speeches" class="text-content-dimmed hover:text-content" x-tooltip.raw="{{ __('History') }}" @click.prevent="sidebar.open('history')">
			<i class="text-2xl ti ti-file-stack"></i>
		</a>
	</div>
{% endblock %}

{% block template %}
	<div class="flex flex-col gap-4 grow">
		<div :class="preview || isProcessing ? '' : 'flex justify-center my-auto'">
			<template x-if="!preview && !isProcessing">
				<div class="my-10 text-center md:my-0">
					<div class="mx-auto w-16 h-16 bg-linear-to-br from-[#BCE143] to-[#30C862] tool-icon">
						<div class="bg-linear-to-br from-[#BCE143] to-[#30C862]"></div>

						{% include "snippets/icons/voiceover.twig" %}
					</div>

					<h1 class="mt-6">{{ p__('heading', 'Speech') }}</h1>
					<p class="mt-1 text-lg font-light text-content-dimmed">
						{{ __('Effortlessly transform written text into spoken words.') }}
					</p>
				</div>
			</template>

			<template x-if="isProcessing">
				<div class="flex flex-col gap-4">
					<div class="flex flex-col gap-3 grow">
						<div class="w-2/3 h-6 loading"></div>

						<div class="mb-1">
							<div class="w-64 h-4 loading"></div>
						</div>
					</div>

					<div class="flex gap-4 items-center p-2 box">
						<span class="flex justify-center items-center w-10 h-10 rounded-lg bg-intermediate text-intermediate-content"></span>

						<div class="grow">
							<div class="flex gap-2 items-center group">
								<div type="button" class="w-6 h-6 loading"></div>

								<span process class="w-9 h-3 text-xs text-content-dimmed loading"></span>

								<div class="h-6 grow loading" wave></div>

								<span duration class="w-9 h-3 text-xs text-content-dimmed loading"></span>
							</div>
						</div>
					</div>

					<div class="flex gap-4 items-center">
						<div class="flex gap-1 items-center me-auto">
							<span class="my-1 w-16 h-3 loading"></span>
							<span class="text-xs animate-pulse ti ti-point-filled text-content-dimmed"></span>
							<span class="my-1 w-24 h-3 loading"></span>
						</div>

						<div class="my-1 size-5 loading"></div>
						<div class="my-1 size-5 loading"></div>
						<div class="my-1 size-5 loading"></div>
					</div>

					<div>
						<div class="mt-1 h-4 loading"></div>
						<div class="mt-2 h-4 loading"></div>
						<div class="mt-2 h-4 loading"></div>
						<div class="mt-2 mb-1 w-2/3 h-4 loading"></div>
					</div>
				</div>
			</template>

			<template x-if="preview && !isProcessing">
				<div class="flex flex-col gap-4">
					<div class="grow">
						<div class="text-xl autogrow-textarea font-editor-heading" :data-replicated-value="preview.title">
							<textarea placeholder="{{ __('Untitled resource') }}" autocomplete="off" x-model="preview.title" rows="1" @input.debounce.750ms="save(preview)" class="block px-0 py-0 w-full bg-transparent border-0 ring-0 transition-colors appearance-none outline-none resize-none placeholder:text-content-dimmed placeholder:opacity-50 read-only:text-content-dimmed"></textarea>
						</div>

						<div class="mt-1">
							<x-uuid x-text="preview.id"></x-uuid>
						</div>
					</div>

					{% include "snippets/audio.twig" with {src: 'preview.output_file.url'} %}

					<div class="flex gap-4 items-center">
						<div class="flex gap-4 items-center me-auto">
							{% include "snippets/audience.twig" %}

							<template x-if="preview.voice">
								<span class="hidden gap-1 items-center text-sm md:flex text-content-dimmed">
									<i class="text-base ti ti-user-circle"></i>
									<span x-text="preview.voice.name" class="capitalize"></span>
								</span>
							</template>

							<span class="hidden gap-1 items-center text-sm md:flex text-content-dimmed">
								{% set count %}
								<span x-text="preview.content.length"></span>
								{% endset %}

								<i class="text-base ti ti-square-rounded-letter-t"></i>
								{{ __(":count characters", {':count': count})|raw }}
							</span>

							<span class="flex gap-1 items-center text-sm text-content-dimmed">
								<i class="text-base ti ti-coins"></i>
								<x-credit :data-value="preview.cost" format="{{ __(":count credits") }}"></x-credit>
							</span>
						</div>

						<div class="relative" @click.outside="$refs.downloadOptions.removeAttribute('data-open')">

							<button @click="$refs.downloadOptions.toggleAttribute('data-open')" class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content">
								<i class="text-xl ti ti-download"></i>
							</button>

							<div class="menu" x-ref="downloadOptions" @click="$el.removeAttribute('data-open')">

								<ul class="text-sm">
									<li>
										<a :href="preview.output_file.url" target="_blank" download class="flex gap-2 items-center px-4 py-2 w-full text-start hover:bg-intermediate">
											<i class="text-lg text-content-dimmed ti ti-music"></i>
											{{ p__('button', 'Download file') }}
										</a>
									</li>
								</ul>
							</div>
						</div>

						<button @click="modal.open('delete-modal');" class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content group">
							<i class="text-xl ti ti-trash group-hover:text-failure"></i>
						</button>
					</div>

					<div class="flex flex-col gap-4 mt-4 box" data-density="comfortable">
						<div class="editor" x-text="preview.content"></div>

						<div class="flex">
							<x-copy :data-copy="preview.content" class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content">
								<i class="text-xl ti ti-copy"></i>

								<span class="hidden md:inline">{{ p__('button', 'Copy') }}</span>
							</x-copy>
						</div>
					</div>
				</div>
			</template>
		</div>
	</div>

	<modal-element name="delete-modal">
		<template x-if="preview">
			<form class="flex flex-col gap-6 items-center modal" @submit.prevent="remove(preview);">
				<div class="flex relative justify-center items-center mx-auto w-24 h-24 rounded-full text-failure/25">
					<svg class="absolute top-0 left-0 w-full h-full" width="112" height="112" viewbox="0 0 112 112" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="56" cy="56" r="55.5" stroke="currentColor" stroke-dasharray="8 8"/>
					</svg>

					<div class="flex justify-center items-center w-20 h-20 text-4xl rounded-full transition-all bg-failure/25 text-failure">
						<i class="text-4xl ti ti-trash"></i>
					</div>
				</div>

				<div class="flex flex-col gap-2 items-center text-center">
					<div class="text-lg text-center">
						{{ __('Do you really want to delete the speech?') }}
					</div>

					<p class="text-sm text-content-dimmed">
						{{ __('All associated content and files will be permanently removed. This action cannot be reverted once confirmed.') }}
					</p>
				</div>

				<div class="flex gap-4 justify-center items-center">
					<button class="button button-outline" @click="modal.close()" type="button">
						{{ p__('button', 'No, cancel') }}
					</button>

					<button class="button button-failure" type="submit" :processing="isDeleting">
						{% include "/snippets/spinner.twig" %}

						{{ p__('button', 'Yes, delete') }}
					</button>
				</div>
			</form>
		</template>
	</modal-element>

	<modal-element name="voice-list-modal">
		<div class="flex flex-col gap-6 modal">
			<div class="flex justify-between items-center">
				<h2 class="text-xl">{{ p__('heading', 'Voice library') }}</h2>

				<button class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line" @click="modal.close()" type="button">
					<i class="text-xl ti ti-x"></i>
				</button>
			</div>

			<div>
				<input type="text" class="mt-2 input" id="new-voice-search" placeholder="{{ __('Search voices') }}" x-model="query" @keyup.debounce="getVoices(null,true)">
			</div>

			<div class="flex flex-col gap-1 pe-1 overflow-y-scroll max-h-[424px]" @scroll.throttle="getVoices(voices.length > 0 ? voices[voices.length-1].id : null)">
				<template x-for="v in voices" :key="v.id">
					<div class="flex relative gap-2 items-center box hover:border-line group">

						<template x-if="$store.workspace.subscription?.plan.config.models[v.model]">
							<button type="button" class="absolute top-0 left-0 w-full h-full opacity-0" @click="selectVoice(v); showList=false;"></button>
						</template>

						<template x-if="v.sample_url">
							<x-wave class="flex cursor-pointer group" :src="v.sample_url" lazy>
								<button type="button" play-pause @click.stop class="avatar">
									<i class="ti ti-player-play-filled hover:text-content group-[[state=loading]]:hidden group-[[state=loaded]]:hidden group-[[state=playing]]:hidden"></i>
									<i class="ti ti-player-pause-filled hidden group-[[state=playing]]:block"></i>
								</button>

								<div wave class="w-0"></div>
							</x-wave>
						</template>

						<div class="grow">
							<div class="flex gap-2 justify-between items-center">
								<h3 x-text="v.name" class="line-clamp-1"></h3>

								<div class="flex relative items-center group">
									<template x-for="locale, i in v.supported_languages">
										<template x-if="i < 3">
											<x-avatar class="border-2 transition-all cursor-pointer border-main hover:border-line avatar-xs" :class="i > 0 ? '-ms-2 group-hover:ms-0' : null" x-tooltip="locale.name || locale.code" :src="`https://flagcdn.com/${locale.country_code.toLowerCase()}.svg`"></x-avatar>
										</template>
									</template>

									<template x-if="v.supported_languages && v.supported_languages.length > 3">
										<button type="button" class="ms-1 text-xs text-content-dimmed hover:text-content" @click="currentResource = v; modal.open('voice-modal')" x-tooltip.raw="{{ __('View all') }}">
											+<span x-text="v.supported_languages.length - 3"></span>
										</button>
									</template>
								</div>
							</div>

							<div class="text-sm capitalize">
								<template x-if="v.age">
									<span x-text="v.age"></span>
								</template>

								<template x-if="v.accent">
									<span x-text="v.accent"></span>
								</template>

								<template x-if="v.gender">
									<span x-text="v.gender"></span>
								</template>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
	</modal-element>

	<modal-element name="voice-modal">
		<template x-if="currentResource">
			<div class="flex flex-col gap-8 modal">
				<div class="flex justify-between items-center">
					<h2 class="text-xl" x-text="currentResource.name"></h2>

					<button class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line" @click="showList ?  modal.open('voice-list-modal') : modal.close()" type="button">
						<i class="text-xl ti ti-x"></i>
					</button>
				</div>

				<div>
					<div class="flex gap-1 items-center text-sm font-bold">
						<i class="text-lg ti ti-language"></i>
						{{ __('Supported languages') }}
					</div>

					<ul class="flex overflow-y-auto flex-wrap gap-1 items-center mt-4 max-h-80">
						<template x-for="locale in currentResource.supported_languages">
							<li class="flex gap-1 items-center px-2 py-1 rounded-md border border-line-dimmed">
								<x-avatar class="avatar-xs" :title="locale.country_code" :src="`https://flagcdn.com/${locale.country_code.toLowerCase()}.svg`"></x-avatar>

								<span x-text="locale.name || locale.code" class="text-sm"></span>
							</li>
						</template>
					</ul>
				</div>
			</div>
		</template>
	</modal-element>
{% endblock %}

{% block footer %}
	<div class="sticky bottom-0 z-40 mt-auto">
		<div class="h-8 to-transparent bg-linear-to-t from-main"></div>

		<div class="bg-main">
			<template x-if="voice">
				<form @submit.prevent="{{ workspace.subscription.plan.config.voiceover.is_enabled is defined and workspace.subscription.plan.config.voiceover.is_enabled ? 'submit' : '' }}">
					<div class="flex items-center gap-2 py-3">
						<div class="avatar avatar-sm bg-linear-to-br from-[#BCE143] to-[#30C862] text-main">
							{% include "snippets/icons/voiceover.twig" %}
						</div>

						<div class="flex gap-1 items-center">
							<button type="button" class="button button-xs button-dimmed" @click="showList=true; modal.open('voice-list-modal');">
								<i class="ti ti-player-play-filled text-xs"></i>
								<span x-text="voice.name"></span>
							</button>

							<template x-if="voice.supported_languages.length > 0">
								<button type="button" class="text-content-dimmed hover:text-content" @click="currentResource = voice; modal.open('voice-modal')">
									<i class="ti ti-info-square-rounded-filled"></i>
								</button>
							</template>
						</div>
					</div>

					<div class="relative p-0.5 rounded-3xl bg-line-dimmed has-[textarea:focus]:bg-linear-to-br has-[textarea:focus]:from-gradient-from has-[textarea:focus]:to-gradient-to">
						<div class="flex gap-2 items-end p-2 ps-4 rounded-[1.375rem] bg-main">
							<div class="overflow-y-auto mb-2 max-h-36 autogrow-textarea text-content grow" :data-replicated-value="prompt">
								<textarea placeholder="{{ __('Type a prompt here...') }}" autocomplete="off" rows="1" x-model="prompt" x-ref="prompt" class="block p-0 text-base bg-transparent border-none focus:ring-0 placeholder:text-content-dimmed" required></textarea>
							</div>

							<div class="flex gap-2 items-center ms-auto">
								{% if workspace.subscription.plan.config.voiceover.is_enabled is defined and workspace.subscription.plan.config.voiceover.is_enabled %}
									<template x-if="$store.workspace.subscription?.plan.config.models[voice.model]">
										<button type="submit" class="p-0 w-10 h-10 button button-accent rounded-[0.875rem]" :processing="isProcessing" :disabled="!voice || !prompt">
											{% include "/snippets/spinner.twig" %}

											<template x-if="!isProcessing">
												<i class="ti ti-arrow-up"></i>
											</template>
										</button>
									</template>

									<template x-if="!$store.workspace.subscription?.plan.config.models[voice.model]">
										<a href="app/billing" class="p-0 w-10 h-10 button button-dimmed rounded-[0.875rem]" x-tooltip.raw="{{ __('Selected voice is not available in your plan. Either upgrade your plan or select another voice.') }}">
											<i class="ti ti-lock-up"></i>
										</a>
									</template>
								{% else %}
									<a href="app/billing" class="p-0 w-10 h-10 button button-dimmed rounded-[0.875rem]" x-tooltip.raw="{{ __('Upgrade your plan') }}">
										<i class="ti ti-lock-up"></i>
									</a>
								{% endif %}
							</div>
						</div>
					</div>
				</form>
			</template>

			{% include "/sections/footer.twig" %}
		</div>
	</div>
{% endblock %}