<script setup>
import { ref } from 'vue';
import { appUser } from '../globals/user.js';
import { subscribeOrUnsubscribeUser } from '../services/subscriptionService.js';

const props = defineProps({
  onSubscribe: Function,
  cpvCode: String
});

const email = ref('');
const phone = ref('');
const snackbar = ref({ show: false, message: '' });

async function handleSubscribe() {
  let result;
  try {
    result = await subscribeOrUnsubscribeUser({
      user: appUser.value,
      cpvCode: props.cpvCode,
      email: email.value,
      phone: phone.value,
      notifyWhatsapp: appUser.value?.notifyWhatsapp ?? false,
      notifySms: appUser.value?.notifySms ?? false,
      notifyEmail: appUser.value?.notifyEmail ?? false,
      onSubscribe: (payload) => {
        // Show snackbar message
        if (payload && payload.action === 'subscribe') {
          snackbar.value.message = `Abonat la ${props.cpvCode} cu numărul ${phone.value} (${appUser.value?.notifyWhatsapp ? 'WhatsApp' : ''} ${appUser.value?.notifySms ? 'SMS' : ''} ${appUser.value?.notifyEmail ? 'Email' : ''})`;
        } else if (payload && payload.action === 'unsubscribe') {
          snackbar.value.message = `Dezabonat de la ${props.cpvCode}`;
        } else if (payload && payload.email) {
          snackbar.value.message = `Abonat nou la ${props.cpvCode} cu email ${payload.email}`;
        }
        snackbar.value.show = true;
        // Notify parent to close dialog
        if (props.onSubscribe) props.onSubscribe(payload);
        // Hide snackbar after 2.5s
        setTimeout(() => { snackbar.value.show = false; }, 2500);
      }
    });
  } catch (e) {
    snackbar.value.message = 'A apărut o eroare la abonare.';
    snackbar.value.show = true;
    setTimeout(() => { snackbar.value.show = false; }, 2500);
  }
}
</script>

<template>
  <div class="subscribe-widget">
    <div v-if="snackbar.show" class="snackbar">{{ snackbar.message }}</div>
    <div v-if="props.cpvCode" style="margin:1.5em 0 0.5em 0; font-weight:500; color:#000;">
      Urmează să primești notificări pentru licitații care conțin codul cpv: <span style="color:#007bff;">{{
        props.cpvCode }}</span>
    </div>
    <button @click="handleSubscribe">
      {{ appUser.value && Array.isArray(appUser.value.topics) && appUser.value.topics.includes(props.cpvCode) ?
        'Dezabonează-te'
        : 'Abonează-te' }}
    </button>
  </div>
</template>

<style scoped>
.subscribe-widget {
  padding: 1em;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
  max-width: 400px;
}

.subscribe-widget input[type="email"],
.subscribe-widget input[type="text"] {
  width: 100%;
  padding: 0.5em;
  margin-top: 0.2em;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.subscribe-widget button {
  margin-top: 1.5em;
  padding: 0.5em 1.5em;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.subscribe-widget button:hover {
  background: #0056b3;
}

.snackbar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #323232;
  color: #fff;
  padding: 0.75em 2em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 1em;
  z-index: 9999;
  animation: fadein 0.3s, fadeout 0.3s 2.2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
</style>
