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

{% set adapters = [
  {
    is_available: option.aimlapi.api_key is defined and option.aimlapi.api_key is not empty,
    models: [
      {
        model: 'aimlapi/chirp-v3.5',
        name: 'Chirp 3.5',
        short_name: 'Chirp 3.5',
        prompt_length: 3000,
        style: true,
        is_enabled: workspace.subscription.plan.config.models['aimlapi/chirp-v3.5'] ?? false,
        is_available: option.features.composer.models is not defined or 'aimlapi/chirp-v3.5' in option.features.composer.models,
      },

      {
        model: 'aimlapi/chirp-v3',
        name: 'Chirp 3.0',
        short_name: 'Chirp 3.0',
        prompt_length: 3000,
        style: true,
        is_enabled: workspace.subscription.plan.config.models['aimlapi/chirp-v3'] ?? false,
        is_available: option.features.composer.models is not defined or 'aimlapi/chirp-v3' in option.features.composer.models,
      }
    ]
  }
] %}

{% set active_menu = 'composer' %}
{% set xdata %}composer(
`{{ option.features.composer.default_model ?? 'aimlapi/chirp-v3.5'}}`,
{{ adapters|json_encode }},
{{ (composition ?? null )|json_encode() }}
){% endset %}
{% block title p__('title', 'Composer')|title %}

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

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

      <div class="flex">
        <div
          class="flex overflow-hidden gap-2 justify-end items-center pr-1 h-16">
          <template x-if="history === null">
            <template x-for="i in 15" :key="i">
              <div class="size-14 shrink-0 loading">
              </div>
            </template>
          </template>

          <template x-if="history && history.length > 0">
            <template x-for="i in history" :key="i.id">
              <a :href="`app/composition/${i.id}`"
                class="block overflow-hidden relative rounded-lg size-14 shrink-0 hover:outline focus:outline outline-2 outline-offset-2 outline-line"
                @click.prevent="select(i);">
                <template x-if="i.cover_image?.blur_hash">
                  <canvas is="x-blurhash"
                    class="absolute top-0 left-0 w-full h-full" width="56"
                    height="56" :hash="i.cover_image?.blur_hash"
                    type="color"></canvas>
                </template>

                <template x-if="i.cover_image">
                  <img :src="i.cover_image?.url" :alt="i.title"
                    class="object-cover absolute top-0 left-0 w-full h-full">
                </template>

                <template x-if="!i.cover_image">
                  <span
                    x-text="(i.title || `{{ __('Untitled composition') }}`).match(/(\b\S)?/g).join('').slice(0, 2)"></span>
                </template>
              </a>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>

  <div class="md:my-6"
    :class="preview || isProcessing ? '' : 'flex justify-center md: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-gradient-to-br from-[#600989] to-[#CF83F3] tool-icon">
          <div class="bg-gradient-to-br from-[#600989] to-[#CF83F3]"></div>

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

        <h1 class="mt-6">{{ p__('heading', 'Composer') }}</h1>
        <p class="mt-1 text-lg font-light text-content-dimmed">
          {{ __('Create music and sounds.') }}</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 mr-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>

        <p class="flex gap-2 items-center text-sm text-content-dimmed">
          <i class="text-base animate-spin ti ti-loader-2"></i>
          {{ __('It might take several minutes to generate the composition. Please wait.') }}
        </p>
      </div>
    </template>

    <template x-if="preview && !isProcessing">
      <div class="flex flex-col gap-10">
        <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 transition-colors 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 relative z-10 gap-4 items-center p-2 box bg-main">
            <span class="rounded-lg avatar">
              <template x-if="preview.cover_image?.blur_hash">
                <canvas is="x-blurhash"
                  class="absolute top-0 left-0 w-full h-full" width="40"
                  height="40" :hash="preview.output_file.blur_hash"
                  type="color"></canvas>
              </template>

              <template x-if="preview.cover_image">
                <img :src="preview.cover_image.url" :alt="preview.title">
              </template>

              <template x-if="!preview.cover_image">
                <i class="ti ti-music"></i>
              </template>
            </span>

            <div class="grow">
              <x-wave :src="preview.output_file.url"
                class="flex gap-2 items-center group">
                <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 gap-4 items-center">
            <div class="flex gap-4 items-center mr-auto">
              {% include "snippets/audience.twig" %}

              <template x-if="preview.cost > 0">
                <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 && preview.cost"
                    format="{{ __(":count credits") }}"></x-credit>
                </span>
              </template>

              <span
                class="hidden gap-1 items-center text-sm md:flex text-content-dimmed">
                <i class="text-base ti ti-file-music"></i>

                <x-filesize :data-value="preview.output_file.size"></x-filesize>
              </span>
            </div>

            <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 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="block px-4 py-2 text-left hover:bg-intermediate">
                        {{ p__('button', 'Download audio') }}
                      </a>
                    </li>

                    <template x-if="preview.cover_image">
                      <li>
                        <a :href="preview.cover_image.url" target="_blank"
                          download
                          class="block px-4 py-2 text-left hover:bg-intermediate">
                          {{ p__('button', 'Download cover image') }}
                        </a>
                      </li>
                    </template>
                  </ul>
                </div>
              </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>

        <template x-if="preview.lyrics">
          <div class="flex flex-col gap-4 mt-4 box" data-density="comfortable">
            <div class="message">
              <x-markdown :content="preview.lyrics"></x-markdown>
            </div>

            <div class="flex">
              <x-copy :data-copy="preview.lyrics"
                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>
        </template>
      </div>
    </template>
  </div>
</div>

<modal-element name="delete-modal">
  <template x-if="preview">
    <form class="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="mt-4 text-lg text-center">

        {{ __('Do you really want to delete the image?') }}
      </div>

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

<modal-element name="options">
  <form @submit.prevent="modal.close()" class="flex flex-col gap-6 modal">
    <div class="flex justify-between items-center">
      <h2 class="text-xl">{{ p__('heading', 'Options') }}</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 class="flex flex-col gap-4">
      <div>
        <label>{{ p__('label', 'Model') }}</label>
        <select class="mt-2 input border-line-dimmed hover:border-line"
          x-model="model">
          <template x-for="a in adapters">
            <option :value="a.model" x-text="a.name">
            </option>
          </template>
        </select>
      </div>

      <div>
        <label>{{ p__('label', 'Composition type') }}</label>
        <select class="mt-2 input border-line-dimmed hover:border-line"
          @change="instrumental = $el.value == 'instrumental'">
          <option value="intrumental" :selected="instrumental">
            {{ p__('label', 'Instrumental') }}
          </option>

          <option value="vocal" :selected="!instrumental">
            {{ p__('label', 'Vocal') }}
          </option>
        </select>
      </div>

      <div>
        <label class="flex gap-1 items-center" for="tags">
          {{ p__('label', 'Style of Music') }}

          <i class="ti ti-help-square-rounded-filled help"
            x-tooltip.raw="{{ __('Describe the style of music you want (e.g. acoustic pop). Artists\' names are not recognized, but genres and vibes are.') }}"></i>
        </label>

        <input type="text" id="tags" class="mt-2 input" autocomplete="off"
          x-model="tags" placeholder="{{ __('Enter style of music') }}"
          maxlength="120" />
      </div>
    </div>


    <div>
      <button type="submit" class="w-full button">
        {{ p__('button', 'Confirm') }}
      </button>
    </div>
  </form>
</modal-element>
{% endblock %}

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

  <div class="bg-main">
    <form
      @submit.prevent="{{ workspace.subscription.plan.config.composer.is_enabled is defined and workspace.subscription.plan.config.composer.is_enabled ? 'submit($el)' : ''   }}">
      <div class="flex justify-between items-end mb-3">
        <div>
          <div class="flex gap-0 items-center 5">
            <span class="font-bold">{{ p__('heading', 'Composer') }}</span>
            <i class="text-base ti ti-corner-right-up text-content-dimmed"></i>
          </div>

          <div class="text-sm text-content-dimmed">
            {{ p__('composer-tool-description', 'Create music and sounds.')  }}
          </div>
        </div>

        <div class="flex gap-2 items-center">
          <div class="flex gap-1 items-center">
            <template x-if="instrumental">
              <button type="button" @click="instrumental = false"
                class="text-base ti ti-music text-content-dimmed hover:text-content"
                x-tooltip.raw="{{ __('Instrumental') }}"></>
            </template>

            <template x-if="!instrumental">
              <button type="button" @click="instrumental = true"
                class="text-base ti ti-microphone-2 text-content-dimmed hover:text-content"
                x-tooltip.raw="{{ __('Vocal') }}"></>
            </template>
          </div>

          <template x-if="adapter">
            <button type="button"
              class="capitalize button button-xs button-dimmed"
              @click="window.modal.open('options')">
              <span x-text="adapter.short_name"></span>
              <i class="ti ti-caret-up-down"></i>
            </button>
          </template>
        </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 gap-2 items-end p-2 pl-4 rounded-lg bg-main">
          <div
            class="overflow-y-auto mb-2 max-h-36 autogrow-textarea text-content grow"
            :data-replicated-value="prompt">
            <textarea
              :placeholder="instrumental ? `{{ __('Type a prompt for instrumental music here...') }}` : `{{ __('Include lyrics for vocal music here...') }}`"
              autocomplete="off" rows="1" x-model="prompt" x-ref="prompt"
              :maxlength="adapter?.prompt_length"
              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 ml-auto">
            <button type="button"
              class="relative p-0 w-10 h-10 button button-outline"
              @click.stop="window.modal.open('options')">
              <i class="ti ti-settings"></i>

              <template x-if="tags">
                <i
                  class="absolute bottom-full left-full text-2xl -translate-x-1/2 translate-y-1/2 ti ti-point-filled text-accent"></i>
              </template>
            </button>

            {% if workspace.subscription.plan.config.composer.is_enabled is defined and workspace.subscription.plan.config.composer.is_enabled %}
            <template x-if="adapter?.is_enabled">
              <button type="submit" class="p-0 w-10 h-10 button button-accent"
                :disabled="!prompt || isProcessing" :processing="isProcessing">
                {% include "/snippets/spinner.twig" %}

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

            <template x-if="!adapter || !adapter.is_enabled">
              <a href="app/billing" class="p-0 w-10 h-10 button button-dimmed"
                x-tooltip.raw="{{ __('Selected model is not available in your plan. Either upgrade your plan or select another model.') }}">
                <i class="ti ti-lock-up"></i>
              </a>
            </template>
            {% else %}
            <a href="app/billing" class="p-0 w-10 h-10 button button-dimmed"
              x-tooltip.raw="{{ __('Upgrade your plan') }}">
              <i class="ti ti-lock-up"></i>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </form>

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