{% extends "/layouts/main.twig" %}

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

{% block template %}
<div class="flex flex-col gap-4 grow">
  <div>
    {% include "snippets/back.twig" with {link: 'app/library/speeches', label: 'Library', icon: 'square-rounded-arrow-up-filled'} %}

    <div class="relative mt-4">
      <div
        class="absolute top-0 left-0 z-10 h-full pointer-events-none bg-gradient-to-r from-main to-transparent w-28">
      </div>

      <div class="flex">
        <div class="flex items-center justify-end gap-2 pr-1 overflow-hidden">
          <template x-if="history === null">
            <template x-for="i in 5" :key="i">
              <div
                class="flex items-center gap-2 p-2 border rounded-lg shrink-0 w-72 border-line-dimmed"
                @click.prevent="select(i)">
                <div class="avatar loading">
                </div>

                <div class="grow">
                  <div class="w-2/3 h-4 my-1 loading">
                  </div>

                  <div class="w-20 h-3 my-1 loading">
                  </div>
                </div>
              </div>
            </template>
          </template>

          <template x-if="history && history.length > 0">
            <template x-for="i in history" :key="i.id">
              <a :href="`app/voiceover/${i.id}`"
                class="flex items-center gap-2 p-2 border rounded-lg shrink-0 w-72 hover:border-line"
                :class="preview && preview.id == i.id ? 'border-line' : 'border-line-dimmed'"
                @click.prevent="select(i)">
                <div class="avatar">
                  <span
                    x-text="i.title.match(/(\b\S)?/g).join('').slice(0, 2)"></span>
                </div>

                <div class="grow">
                  <div x-text="i.title"
                    class="overflow-hidden text-sm text-ellipsis text-nowrap max-w-52">
                  </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>
        </div>
      </div>
    </div>
  </div>

  <div class="my-6"
    :class="preview || isProcessing ? '' : 'flex justify-center my-auto'">
    <template x-if="!preview && !isProcessing">
      <div class="text-center">
        <div
          class="mx-auto w-16 h-16 flex items-center justify-center text-main bg-content bg-gradient-to-br from-[#BCE143] to-[#30C862] rounded-full">
          <i class="text-4xl ti ti-volume"></i>
        </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 items-center gap-4 p-2 box">
          <span
            class="flex items-center justify-center w-10 h-10 rounded-lg bg-intermediate text-intermediate-content">
          </span>

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

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

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

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

        <div class="flex items-center gap-4">
          <div class="flex items-center gap-1 mr-auto">
            <span class="w-16 h-3 my-1 loading"></span>
            <span
              class="text-xs ti ti-point-filled text-content-dimmed animate-pulse"></span>
            <span class="w-24 h-3 my-1 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="h-4 mt-1 loading"></div>
          <div class="h-4 mt-2 loading"></div>
          <div class="h-4 mt-2 loading"></div>
          <div class="w-2/3 h-4 mt-2 mb-1 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 document') }}"
              autocomplete="off" x-model="preview.title" rows="1"
              @input.debounce.750ms="save(preview)"
              class="block w-full px-0 py-0 transition-colors bg-transparent border-0 appearance-none resize-none focus:ring-0 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>

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

          <div class="grow">
            <x-wave :src="preview.output_file.url"
              class="flex items-center gap-2 group" x-ref="previewWave"
              @audioprocess="previewTime = $event.detail.time">
              <button type="button" play-pause class="text-content-dimmed">
                <i
                  class="ti ti-player-play-filled 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>

                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  width="20px" height="20px" viewBox="0 0 50 50"
                  style="enable-background:new 0 0 50 50;"
                  class="hidden group-[[state=loading]]:block group-[[state=loaded]]:block"
                  xml:space="preserve">
                  <path fill="currentColor"
                    d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                    <animateTransform attributeType="xml"
                      attributeName="transform" type="rotate" from="0 25 25"
                      to="360 25 25" dur="0.6s" repeatCount="indefinite">
                    </animateTransform>
                  </path>
                </svg>
              </button>

              <span process
                class="text-xs text-content-dimmed w-9 group-[[state=loading]]:hidden">
                00:00
              </span>

              <div class="h-10 grow" wave>
              </div>

              <span duration
                class="text-xs text-content-dimmed w-9 group-[[state=loading]]:hidden">
                00:00
              </span>
            </x-wave>
          </div>
        </div>

        <div class="flex items-center gap-4">
          <div class="flex items-center gap-4 mr-auto">
            <template x-if="preview.voice">
              <span class="flex items-center gap-1 text-sm 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="flex items-center gap-1 text-sm 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>

            <template x-if="preview.cost > 0">
              <span class="flex items-center gap-1 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>
            </template>

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

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

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

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

              <ul class="text-sm">
                <li>
                  <a :href="preview.output_file.url" target="_blank" download
                    class="flex items-center w-full gap-2 px-4 py-2 text-left 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 items-center gap-1 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 items-center gap-1 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="modal" @submit.prevent="remove(preview);">
      <div class="p-8 rounded-xl bg-main w-[480px] shadow-2xl">
        <div class="max-w-xs mx-auto">
          <div
            class="relative flex items-center justify-center w-24 h-24 mx-auto 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 items-center justify-center w-20 h-20 text-4xl transition-all rounded-full bg-failure/25 text-failure">
              <i class="text-4xl ti ti-trash"></i>
            </div>
          </div>

          <div class="mt-4 text-lg text-center">
            {{ __('Do you really want to delete the speech?') }}
          </div>

          <div class="flex items-center justify-center gap-4 mt-10">
            <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>
        </div>
      </div>
    </form>
  </template>
</modal-element>

<modal-element name="voice-list-modal">
  <div class="modal">
    <div class="p-8 rounded-xl bg-main w-[480px] flex flex-col gap-6">
      <div class="flex items-center justify-between">
        <h2 class="text-xl">{{ p__('heading', 'Voice library') }}</h2>

        <button
          class="flex items-center justify-center w-8 h-8 border border-transparent rounded-full 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 pr-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="relative flex items-center gap-2 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 items-center justify-between gap-2">
                <h3 x-text="v.name" class="line-clamp-1"></h3>

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

                  <template
                    x-if="v.supported_languages && v.supported_languages.length > 3">
                    <button type="button"
                      class="ml-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>
  </div>
</modal-element>

<modal-element name="voice-modal">
  <template x-if="currentResource">
    <div class="modal">
      <div class="p-8 rounded-xl bg-main w-[480px] flex flex-col gap-8">
        <div class="flex items-center justify-between">
          <h2 class="text-xl" x-text="currentResource.name"></h2>

          <button
            class="flex items-center justify-center w-8 h-8 border border-transparent rounded-full 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 items-center gap-1 text-sm font-bold">
            <i class="text-lg ti ti-language "></i>
            {{ __('Supported languages') }}
          </div>

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

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

{% block footer %}
<div class="lg:sticky lg:z-40 lg:bottom-0 lg:mt-auto">
  <div class="h-4 lg:bg-gradient-to-t lg:from-main lg:to-transparent">
  </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-end justify-between mb-3">
          <div>
            <div class="flex items-center gap-0 5">
              <span
                class="font-bold">{{ p__('heading', 'Text to speech') }}</span>
              <i
                class="text-base ti ti-corner-right-up text-content-dimmed"></i>
            </div>

            <div class="flex items-center gap-2">
              <div class="text-sm text-content-dimmed">
                {{ __('Generate speeches from writen texts') }}
              </div>

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

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

        <div
          class="relative p-1 rounded-xl bg-line-dimmed has-[textarea:focus]:bg-gradient-to-br has-[textarea:focus]:from-gradient-from has-[textarea:focus]:to-gradient-to">

          <div class="flex items-end gap-2 p-2 pl-4 rounded-lg bg-main">
            <div
              class="mb-2 overflow-y-auto autogrow-textarea text-content grow max-h-36"
              :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 items-center gap-2 ml-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="w-10 h-10 p-0 button button-accent"
                  :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="w-10 h-10 p-0 button button-dimmed"
                  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="w-10 h-10 p-0 button button-dimmed"
                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 %}