<template>
  <div>
    <DefaultHeaderPage />

    <div class="validate-container">

      <div class="validate-header">

        <div class="validate-title">
          {{ $t("associate_validation.title") }}
        </div>

        <q-btn
          unelevated
          no-caps
          size="sm"
          color="violet-normal"
          class="qr-btn"
          disable
          icon="mdi-qrcode-scan"
          :label="$t('associate_validation.qr_code')"
        />

      </div>

      <q-card flat class="search-card">

        <div class="search-label">
         {{ $t("associate_validation.description") }}
        </div>

        <div class="row q-col-gutter-sm">

          <div class="col">
            <q-input
              v-model="search"
              outlined
              dense
              bg-color="white"
              :placeholder="$t('associate_validation.search_placeholder')"
              @keyup.enter="onValidate"
            />
          </div>

          <div class="col-auto">
            <q-btn
              color="violet-normal"
              unelevated
              no-caps
              :loading="loading"
              :label="$t('associate_validation.search')"
              @click="onValidate"
            />
          </div>

        </div>

      </q-card>

      <div
        v-if="associate"
        class="q-mt-lg"
      >

        <q-card flat class="associate-result-card">

          <div class="result-title">
           {{ $t("associate_validation.associate_found") }}
          </div>

          <div class="result-body q-mt-md">

            <div class="result-photo">
              <q-avatar size="80px" color="purple-2">
                <img
                  v-if="associate.photo_url"
                  :src="associate.photo_url"
                  style="object-fit: cover; width: 100%; height: 100%;"
                />
                <q-icon
                  v-else
                  name="mdi-account"
                  size="48px"
                  color="purple-6"
                />
              </q-avatar>
            </div>

            <div class="result-info">

              <div class="result-row">
                <span class="result-label">
                {{ $t("associate_validation.name") }}
                </span>

                <span class="result-value">
                  {{ associate.name }}
                </span>
              </div>

              <div class="result-row">
                <span class="result-label">
                {{ $t("associate_validation.cpf") }}
                </span>

                <span class="result-value">
                  {{ associate.cpf }}
                </span>
              </div>

              <div class="result-row">
                <span class="result-label">
                  {{ $t("associate_validation.registration") }}
                </span>

                <span class="result-value">
                  {{ associate.registration }}
                </span>
              </div>

              <div class="result-row">
                <span class="result-label">
                  {{ $t("associate_validation.expiry_date") }}
                </span>

                <span class="result-value">
                  {{ associate.expiry_date || "—" }}
                </span>
              </div>

            </div>

          </div>

        </q-card>

      </div>

    </div>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { Notify } from "quasar";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

import {
  validateAssociate,
} from "src/api/associateValidation";

const search = ref("");

const loading = ref(false);

const associate = ref(null);

const onValidate = async () => {

  if (!search.value) {
    return;
  }

  loading.value = true;

  associate.value = null;

  try {

    const response = await validateAssociate({

      search: search.value,

    });

    associate.value = response;

  } catch  {

    Notify.create({
      type: "negative",
      message: "Associado não encontrado",
    });

  } finally {

    loading.value = false;

  }
};
</script>

<style scoped lang="scss">
.validate-container {
  padding: 20px;
}

.validate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.validate-title {
  font-size: 28px;
  font-weight: 700;
  color: #702082;
}

.qr-btn {
  border-radius: 20px;
}

.search-card {
  padding: 16px;
  border-radius: 10px;
  background: white;
}

.search-label {
  font-size: 13px;
  color: #702082;
  margin-bottom: 10px;
}

.associate-result-card {
  padding: 20px;
  border-radius: 10px;
  background: #F8F3F9;
}

.result-title {
  font-size: 18px;
  font-weight: 700;
  color: #702082;
}

.result-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.result-photo {
  flex-shrink: 0;
}

.result-info {
  flex: 1;
}

.result-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.result-label {
  font-weight: 700;
  color: #702082;
}

.result-value {
  color: #555;
}
</style>