<template>
  <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
    <q-card class="pending-exams-card">
      <q-card-section class="q-pb-none">
        <div class="text-h6 text-violet-normal">{{ $t("agendamento.guias_aguardando") }}</div>
        <div class="text-body2 text-grey-8 q-mt-xs">
          {{ $t("agendamento.guias_aguardando_aviso") }}
        </div>
      </q-card-section>

      <q-separator class="q-mt-md" />

      <q-card-section class="pending-exams-card__scroll">
        <div
          v-for="exam in pending"
          :key="exam.id"
          class="exam-block"
        >
          <div class="exam-block__header">
            <span class="exam-block__order">#{{ exam.order_number }}</span>
            <span class="exam-block__clinic">{{ exam.partner_agreement?.company_name || "—" }}</span>
          </div>

          <div v-if="exam.user_dependent" class="exam-block__dependent">
            {{ $t("associado.dependent") }}: {{ exam.user_dependent.name }}
          </div>

          <div v-if="exam.date" class="exam-block__schedule">
            <q-icon name="mdi-calendar-clock-outline" size="14px" />
            <span>{{ formatDateTimeBR(exam.date, exam.time) }}</span>
          </div>

          <div
            v-for="item in exam.exams"
            :key="item.id"
            class="exam-block__line"
          >
            <span>{{ item.name }}</span>
            <span class="exam-block__price">{{ formatToBRLCurrency(item.service_price) ?? "—" }}</span>
          </div>

          <div class="exam-block__total">
            <span>{{ $t("agendamento.total") }}</span>
            <span>{{ formatToBRLCurrency(exam.service_price) ?? "—" }}</span>
          </div>

          <div v-if="exam.observations" class="exam-block__notes">
            {{ exam.observations }}
          </div>

          <div class="exam-block__actions">
            <q-btn
              flat
              dense
              no-caps
              size="sm"
              color="violet-normal"
              class="bg-white exam-block__btn"
              icon="mdi-close-circle-outline"
              :label="$t('agendamento.recusar')"
              :disable="busyId === exam.id"
              @click="onRefuse(exam)"
            />
            <q-btn
              unelevated
              dense
              no-caps
              size="sm"
              color="violet-normal"
              text-color="white"
              class="exam-block__btn"
              icon="mdi-check-circle-outline"
              :label="$t('agendamento.aceitar')"
              :loading="busyId === exam.id"
              @click="onAccept(exam)"
            />
          </div>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="q-pa-sm">
        <q-btn
          flat
          color="violet-normal"
          :label="$t('common.actions.close')"
          :disable="pending.length > 0"
          @click="onDialogOK()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useDialogPluginComponent, useQuasar } from "quasar";
import { acceptExamAppointment, refuseExamAppointment } from "src/api/appointment";
import { formatToBRLCurrency, formatDateTimeBR } from "src/helpers/utils";
import RefuseExamDialog from "src/components/RefuseExamDialog.vue";

const props = defineProps({
  exams: { type: Array, required: true },
});

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

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

const pending = ref([...props.exams]);
const busyId = ref(null);

const removeFromList = (id) => {
  pending.value = pending.value.filter((e) => e.id !== id);
  if (pending.value.length === 0) onDialogOK();
};

const onAccept = async (exam) => {
  busyId.value = exam.id;
  try {
    await acceptExamAppointment(exam.id);
    removeFromList(exam.id);
  } catch (e) {
    $q.notify({ type: "negative", message: e?.response?.data?.message || t("http.errors.failed") });
  } finally {
    busyId.value = null;
  }
};

const onRefuse = (exam) => {
  $q.dialog({ component: RefuseExamDialog }).onOk(async ({ reason }) => {
    busyId.value = exam.id;
    try {
      await refuseExamAppointment(exam.id, reason || null);
      removeFromList(exam.id);
    } catch (e) {
      $q.notify({ type: "negative", message: e?.response?.data?.message || t("http.errors.failed") });
    } finally {
      busyId.value = null;
    }
  });
};
</script>

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

.pending-exams-card {
  width: 90vw;
  max-width: 560px;
  min-width: 300px;

  &__scroll {
    max-height: 60vh;
    overflow-y: auto;
  }
}

.exam-block {
  background: vars.$violet-light;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }

  &__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
  }

  &__order {
    font-size: 12px;
    font-weight: 700;
    color: vars.$violet-normal;
  }

  &__clinic {
    font-size: 12px;
    color: vars.$color-text-2;
    text-align: right;
  }

  &__dependent {
    font-size: 12px;
    color: vars.$color-text-2;
    margin-bottom: 4px;
  }

  &__schedule {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: vars.$violet-normal;
    margin-bottom: 6px;
  }

  &__line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 2px 0;
  }

  &__price {
    flex-shrink: 0;
    color: vars.$color-text-2;
  }

  &__total {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(77, 22, 88, 0.15);
    font-size: 13px;
    font-weight: 700;
    color: vars.$violet-normal;
  }

  &__notes {
    margin-top: 8px;
    font-size: 12px;
    color: vars.$color-text-2;
    white-space: pre-wrap;
  }

  &__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
  }

  &__btn {
    border-radius: 8px;
    padding: 3px 12px;
  }
}
</style>
