<template>
  <q-dialog
    ref="dialogRef"
    persistent
    no-esc-dismiss
    no-backdrop-dismiss
    @hide="onDialogHide"
  >
    <q-card class="evaluation-card">
      <q-card-section class="evaluation-header">
        <div class="text-h6 text-white text-weight-bold">
          {{ campaign.title }}
        </div>
        <div class="text-caption text-white q-mt-xs" style="opacity: 0.85">
          {{ campaign.description || $t("evaluation.dialog.default_description") }}
        </div>
      </q-card-section>

      <q-card-section class="q-pt-lg">
        <div class="text-subtitle2 text-center text-weight-medium q-mb-sm">
          {{ $t("evaluation.dialog.rating_label") }}
        </div>

        <div class="flex flex-center">
          <q-rating
            v-model="form.rating"
            :max="10"
            size="24px"
            color="amber-7"
            color-selected="amber-8"
            icon="mdi-star-outline"
            icon-selected="mdi-star"
            class="evaluation-rating"
          />
        </div>

        <div class="text-center q-mt-xs" style="min-height: 20px">
          <span v-if="form.rating" class="text-caption text-grey-7">
            {{ $t("evaluation.dialog.rating_value", { rating: form.rating }) }}
          </span>
        </div>

        <q-input
          v-model="form.comment"
          outlined
          type="textarea"
          rows="4"
          counter
          maxlength="2000"
          class="q-mt-md"
          :label="$t('evaluation.dialog.comment_label')"
          :hint="$t('evaluation.dialog.comment_hint')"
        />
      </q-card-section>

      <q-card-actions class="q-px-md q-pb-md column q-gutter-sm">
        <q-btn
          unelevated
          no-caps
          color="violet-normal"
          class="full-width"
          :label="$t('evaluation.dialog.submit')"
          :loading="saving"
          :disable="!form.rating"
          @click="onSubmit"
        />
        <q-btn
          flat
          dense
          no-caps
          color="grey-7"
          class="full-width q-ml-none"
          :label="$t('auth.logout')"
          :disable="saving"
          @click="onLogout"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar, useDialogPluginComponent } from "quasar";
import { useI18n } from "vue-i18n";
import { useAuth } from "src/composables/useAuth";
import { submitEvaluationAssociado } from "src/api/evaluation";

const { campaign } = defineProps({
  campaign: {
    type: Object,
    required: true,
  },
});

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

const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
const $q = useQuasar();
const { t } = useI18n();
const router = useRouter();
const { logout } = useAuth();

const saving = ref(false);
const form = ref({
  rating: 0,
  comment: "",
});

const onSubmit = async () => {
  if (!form.value.rating) return;

  saving.value = true;
  try {
    await submitEvaluationAssociado({
      evaluation_campaign_id: campaign.id,
      rating: form.value.rating,
      comment: form.value.comment || null,
    });

    $q.notify({ type: "positive", message: t("evaluation.dialog.success") });
    onDialogOK();
  } catch (error) {
    $q.notify({
      type: "negative",
      message: error?.response?.data?.message || t("http.errors.failed"),
    });
  } finally {
    saving.value = false;
  }
};

const onLogout = async () => {
  await logout();
  onDialogHide();
  router.push({ name: "LoginPage" });
};
</script>

<style scoped lang="scss">
@use "src/css/quasar.variables.scss" as *;

.evaluation-card {
  width: 92vw;
  max-width: 480px;
}

.evaluation-header {
  background: linear-gradient(135deg, $violet-normal 0%, $violet-dark 100%);
  border-radius: 4px 4px 0 0;
}

.evaluation-rating {
  flex-wrap: wrap;
  justify-content: center;
}
</style>
