<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'
import { safeUrl } from '@vigilkids/section-core'

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'

const props = defineProps<{
  blockOrder: string[]
  blocks: Record<string, BlockData>
  editorMode?: boolean
  settings: Record<string, unknown>
}>()

const emit = defineEmits<{
  (e: 'update:setting', key: string, value: unknown): void
  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
  (e: 'inline-edit-start', key: string): void
  (e: 'inline-edit-end'): void
  (e: 'undo-redo', action: 'redo' | 'undo'): void
}>()

const s = computed(() => props.settings)
const variant = computed(() => (s.value.variant as string) || 'button')

const primaryUrl = computed(() => safeUrl(String(s.value.button_url || '')))
const secondaryUrl = computed(() => safeUrl(String(s.value.secondary_button_url || '')))

const { editableAttrs } = useInlineEdit({
  editorMode: () => !!props.editorMode,
  onSettingUpdate: (key, value) => emit('update:setting', key, value),
  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
  onEditStart: key => emit('inline-edit-start', key),
  onEditEnd: () => emit('inline-edit-end'),
  onUndoRedo: action => emit('undo-redo', action),
})
</script>

<template>
<a
    v-if="variant === 'button'"
    :href="editorMode ? undefined : primaryUrl"
    class="blog-btn"
    :class="{ disabled: editorMode }"
    v-bind="editableAttrs('button_text')"
  >
    {{ s.button_text }}
  </a>

  <div v-else-if="variant === 'button-group'" class="blog-btn-row">
    <div>
      <a
        :href="editorMode ? undefined : primaryUrl"
        class="blog-btn black"
        :class="{ disabled: editorMode }"
        v-bind="editableAttrs('button_text')"
      >
        {{ s.button_text }}
      </a>
      <p v-if="s.button_caption" class="blog-btn-note" v-bind="editableAttrs('button_caption')">
        <img src="https://cdn.visiva.ai/blog/coupon.svg" alt="Coupon" class="blog-icon-17">
        {{ s.button_caption }}
      </p>
    </div>

    <div>
      <a
        :href="editorMode ? undefined : secondaryUrl"
        class="blog-btn green cart"
        :class="{ disabled: editorMode }"
        v-bind="editableAttrs('secondary_button_text')"
      >
        {{ s.secondary_button_text }}
      </a>
      <p
        v-if="s.secondary_button_caption"
        class="blog-btn-note"
        v-bind="editableAttrs('secondary_button_caption')"
      >
        <svg
          width="17"
          height="17"
          viewBox="0 0 17 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8.5 0L10.4084 5.87336L16.584 5.87336L11.5878 9.50329L13.4962 15.3766L8.5 11.7467L3.50383 15.3766L5.41219 9.50329L0.416019 5.87336L6.59163 5.87336L8.5 0Z"
            fill="#00B67A"
          />
          <path d="M8.5 12L11.5 9.5L12 11L8.5 12Z" fill="#005128" />
        </svg>
        {{ s.secondary_button_caption }}
      </p>
    </div>
  </div>

  <div v-else-if="variant === 'button-group-dark'" class="blog-btn-row dark">
    <a
      :href="editorMode ? undefined : primaryUrl"
      class="blog-btn dark"
      :class="{ disabled: editorMode }"
      v-bind="editableAttrs('button_text')"
    >
      {{ s.button_text }}
    </a>
    <a
      :href="editorMode ? undefined : secondaryUrl"
      class="blog-btn green cart"
      :class="{ disabled: editorMode }"
      v-bind="editableAttrs('secondary_button_text')"
    >
      {{ s.secondary_button_text }}
    </a>
  </div>
</template>

<style scoped>
.blog-btn{align-items:center;background:linear-gradient(90deg,#33ff78,#caff33);border-radius:40px;color:#000;cursor:pointer;display:inline-flex;font-size:16px;font-weight:700;gap:8px;height:60px;justify-content:center;line-height:24px;min-width:270px;text-decoration:none}.blog-btn:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.disabled{pointer-events:none}.blog-btn:before{background-color:currentColor;content:"";flex:0 0 16px;height:16px;mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;width:16px}.blog-btn.cart:before{mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/ca973c088477b01d/cart.svg)}.blog-btn.black{background:#000;color:#fff}.blog-btn.black:hover{background:rgba(0,0,0,.8)}.blog-btn.green{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.blog-btn.green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.dark{background:#000;border:1px solid #fff;color:#fff}.blog-btn.dark:hover{background:#fff;color:#000}.blog-btn-row{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:40px}.blog-btn-row.dark{background:#000;border-radius:20px;gap:16px;padding:40px 16px}.blog-btn-note{align-items:center;color:#666262;display:flex;font-size:14px;font-weight:500;gap:6px;justify-content:center;line-height:20px;margin-top:16px}@media (min-width:768px){.blog-btn{min-width:220px}.blog-btn.green{min-width:260px}.blog-btn-row{flex-direction:row;gap:24px}.blog-btn-row.dark{gap:24px}.blog-btn-note{margin-top:20px}}.blog-icon-17{height:17px;width:17px}
</style>
