<template>
  <q-dialog ref="dialogRef" persistent maximized transition-show="slide-left" transition-hide="slide-right">
    <div class="bg-page full-height column no-shadow">

      <div class="row items-center q-px-md q-pb-sm bg-white shadow-profile bg-surface dialog-safe-header">
        <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
        <q-space />
        <span class="text-primary font16 fontbold gradient-diarista">{{ $t('profile.privacy.title') }}</span>
        <q-space />
        <div style="width: 32px"></div>
      </div>

      <div v-if="loading" class="col flex flex-center">
        <q-spinner color="primary" size="3em" />
      </div>

      <div v-else-if="blocks.length === 0" class="col column items-center justify-center q-px-xl q-pb-xl">
        <q-img
          :src="diarinho"
          style="width: 220px; height: 220px;"
          fit="contain"
          class="q-mb-lg"
        />
        <p class="text-primary text-center q-mb-xs fontbold" style="font-size: 24px">
          {{ $t('profile.privacy.empty_message') }}
        </p>
        <p class="text-grey-6 text-center q-mb-xl font12 fontregular">
          {{ $t('profile.privacy.empty_sub') }}
        </p>
      </div>

      <div v-else class="col overflow-auto q-pb-xl">
        <div class="q-px-md q-mt-md">
          <p class="text-primary q-mb-md font16 fontbold gradient-diarista">
            {{ $t('profile.privacy.blocked_title') }}
          </p>

          <div
            v-for="block in blocks"
            :key="block.id"
            class="block-item row items-center no-wrap q-mb-md"
          >
            <q-avatar size="48px" class="flex-shrink-0 q-mr-sm">
              <img v-if="block.client_photo" :src="block.client_photo" style="object-fit: cover;" />
              <span
                v-else
                :style="avatarStyle(block)"
                class="full-width full-height flex flex-center"
                style="border-radius: 50%;"
              >
                {{ block.client_name?.slice(0, 2).toUpperCase() ?? '??' }}
              </span>
            </q-avatar>

            <div class="col column no-wrap overflow-hidden">
              <span class="text-text font12 fontmedium" style="line-height: 1.3;">
                {{ block.client_name }}
              </span>
              <div v-if="block.client_rating" class="row items-center q-mt-xs">
                <q-icon name="mdi-star" color="amber" size="12px" class="q-mr-xs" />
                <span class="text-grey-7 font9 fontregular">{{ Number(block.client_rating).toFixed(1) }}</span>
              </div>
            </div>

            <q-btn
              rounded
              color="primary"
              size="sm"
              class="flex-shrink-0 unblock-btn"
              :loading="unblockingId === block.id"
              :label="$t('profile.privacy.unblock_btn')"
              @click="unblock(block)"
            />
          </div>
        </div>
      </div>

    </div>
  </q-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDialogPluginComponent } from 'quasar'
import { avatarColors } from 'src/helpers/utils'
import { userStore } from 'src/stores/user'
import { getProviderClientBlocks, deleteProviderClientBlock } from 'src/api/providerClientBlock'
import diarinho from 'src/assets/diarinho_perfil_cliente_favoritos.svg'

defineEmits([...useDialogPluginComponent.emits])
const { dialogRef } = useDialogPluginComponent()
const store = userStore()

const blocks = ref([])
const loading = ref(false)
const unblockingId = ref(null)



const avatarStyle = (block) => {
  const idx = (block?.client_id ?? 0) % avatarColors.length
  return avatarColors[idx]
}

const unblock = async (block) => {
  unblockingId.value = block.id
  try {
    await deleteProviderClientBlock(block.id)
    blocks.value = blocks.value.filter(b => b.id !== block.id)
  } finally {
    unblockingId.value = null
  }
}

onMounted(async () => {
  loading.value = true
  try {
    blocks.value = await getProviderClientBlocks(store.user.provider.id) ?? []
  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="scss">
.shadow-profile {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}

.block-item {
  padding: 12px;
}

.unblock-btn {
  padding: 4px 14px;
}

.flex-shrink-0 {
  flex-shrink: 0;
}
</style>
