<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin overflow-hidden" style="min-width: 300px; max-width: 460px; width: 92vw">
      <DefaultDialogHeader :title="() => $t('loja.whatsapp_dialog_title')" @close="onDialogCancel" />

      <q-card-section class="q-pt-sm">
        <div class="wpp-message-box">
          <q-icon name="mdi-whatsapp" color="positive" size="22px" class="wpp-icon" />
          <p class="text-body2 q-mb-none wpp-text">{{ message }}</p>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="q-px-md q-pb-md">
        <q-btn
          flat
          color="grey-7"
          :label="$t('common.actions.cancel')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          color="positive"
          icon="mdi-whatsapp"
          :label="$t('loja.whatsapp_btn_send')"
          @click="openWhatsApp"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useI18n } from "vue-i18n";
import { userStore } from "src/stores/user";
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { item, variationLabel } = defineProps({
  item: { type: Object, required: true },
  variationLabel: { type: String, default: null },
});

const { t } = useI18n();
const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
const store = userStore();

const message = computed(() => {
  const nome = store.user?.name ?? "";
  const variacao = variationLabel ? ` - ${variationLabel}` : "";
  return t("loja.whatsapp_message", { nome, item: item.name, variacao });
});

const openWhatsApp = () => {
  const encoded = encodeURIComponent(message.value);
  window.open(`https://wa.me/5545991266531?text=${encoded}`, "_blank");
  onDialogCancel();
};
</script>

<style scoped lang="scss">
.wpp-message-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 14px;
}

.wpp-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.wpp-text {
  line-height: 1.55;
  color: #166534;
}
</style>
