<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-pt-md q-pb-sm bg-white shadow-profile bg-surface">
        <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
        <q-space />
        <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.help.title') }}</span>
        <q-space />
        <div style="width: 32px"></div>
      </div>

      <div class="col overflow-auto">

        <div class="support-banner row no-wrap">
          <div class="col-8 q-pa-md">
            <div class="row items-center q-mb-xs q-gutter-x-sm">
              <span class="text-h6 text-white text-weight-bold">{{ $t('profile.help.support_title') }}</span>
            </div>
            <div class="row items-center q-gutter-x-xs q-mb-md">
              <q-icon name="mdi-circle" color="green-4" size="10px" />
              <span class="text-caption text-white">{{ $t('profile.help.online_status') }}</span>
            </div>
            <div class="row items-center q-gutter-x-sm">
              <q-icon name="mdi-robot-outline" color="white" size="18px" />
              <span class="text-caption text-white">{{ $t('profile.help.ai_assistant_label') }}</span>
            </div>
          </div>
          <div class="col-4 flex items-end">
            <q-img
              :src="diarinho_suporte"
              style="width: 110px; height: 110px; object-fit: cover;"
            >
              <template #error>
                <div class="support-avatar-placeholder column flex-center">
                  <q-icon name="mdi-face-agent" size="48px" color="white" />
                </div>
              </template>
            </q-img>
          </div>
        </div>

        <div class="q-px-md q-pt-lg q-pb-xl">

          <q-card class="bg-surface shadow-card q-mb-lg border-message-support" style="border-radius: 16px;">
            <q-card-section class="q-pb-xs">
              <div class="row items-center q-gutter-x-sm q-mb-sm">
                <q-icon name="mdi-message-outline" color="primary" size="18px" />
                <span class="text-caption text-weight-bold text-primary">{{ $t('profile.help.virtual_assistant') }}</span>
              </div>
              <p class="text-text q-mb-xs">{{ $t('profile.help.greeting_message') }}</p>
              <span class="text-caption text-grey-5">{{ currentTime }}</span>
            </q-card-section>
          </q-card>
          <div class="q-pt-sm">
            <div class="col-12 text-caption text-grey-6 q-mb-sm">{{ $t('profile.help.quick_suggestions') }}</div>
            <div 
              v-for="suggestion in suggestions"
              :key="suggestion"
              class="row col-12 q-py-xs"
            >
              <span class="text-text bg-surface suggestion-btn q-py-sm q-px-md">{{ suggestion }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-surface chat-footer q-px-md q-py-sm shadow-up">
        <div class="row items-center q-gutter-x-sm">
          <q-input
            v-model="messageInput"
            dense
            class="col input-suporte"
            borderless
            input-class="text-text"
            :placeholder="$t('profile.help.message_placeholder')"
            @keyup.enter="sendMessage"
          />
          <q-btn
            round
            unelevated
            color="primary"
            icon="mdi-send"
            size="sm"
            :disable="!messageInput.trim()"
            @click="sendMessage"
          />
        </div>
        <div class="footer-disclaimer text-text text-center q-my-md">
          {{ $t('profile.help.footer_disclaimer') }}
        </div>
      </div>

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

<script setup>
import { ref, computed } from 'vue';
import { useDialogPluginComponent, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import diarinho_suporte from 'src/assets/diarinho_suporte.svg';
defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef } = useDialogPluginComponent();
const $q = useQuasar();
const { t } = useI18n();

const messageInput = ref('');

const currentTime = computed(() => {
  return new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
});

const suggestions = computed(() => [
  t('profile.help.suggestion_cancel'),
  t('profile.help.suggestion_data'),
  t('profile.help.suggestion_payment'),
  t('profile.help.suggestion_human'),
]);

const sendMessage = () => {
  if (!messageInput.value.trim()) return;
  $q.notify({ type: 'info', message: t('profile.help.coming_soon') });
  messageInput.value = '';
};
</script>

<style scoped lang="scss">
.support-banner {
  background: linear-gradient(180deg, #6C54C1 0%, #9A7FF6 100%);
  min-height: 120px;
}

.support-avatar-placeholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.suggestion-btn {
  border-radius: 32px;
  font-size: 12px;
  height: auto;
  min-height: unset;
  border: 1.15px solid #d8d7d7ce;
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
}

.chat-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.shadow-up {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.border-message-support {
  border: 1px solid rgba(0, 0, 0, 0.151);
}

.input-suporte {
  :deep(.q-field__control) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  :deep(.q-field__control-container) {
    background: var(--q-page, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 32px;

    padding: 10px 14px;
  }

  :deep(.q-field__native) {
    padding: 0 !important;
  }

  :deep(.q-field__control::before),
  :deep(.q-field__control::after) {
    display: none !important;
  }

  :deep(.q-field--focused .q-field__control-container) {
    box-shadow: none;
  }

  :deep(.q-field__bottom),
  :deep(.q-field__marginal) {
    display: none;
  }

  :deep(.q-field__control),
  :deep(.q-field__control:before),
  :deep(.q-field__control:after) {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  :deep(.q-field--focused .q-field__control),
  :deep(.q-field--focused .q-field__control-container) {
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
}

.footer-disclaimer {
  font-family: Inter;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0px;
  text-align: center;
}
</style>
