<template>
  <q-dialog
    ref="dialogRef"
    @hide="onDialogHide"
  >
    <q-card class="provider-dialog card-border shadow-card bg-surface text-text">

      <q-btn
        class="close-btn"
        color="grey-7"
        dense
        flat
        icon="close"
        round
        @click="closeDialog"
      />

      <q-card-section class="provider-header">

        <q-avatar
          class="provider-avatar"
          size="72px"
          :style="avatarColors[(info.provider_id ?? 0) % avatarColors.length]"
        >
          <img
            v-if="photoUrl"
            :src="photoUrl"
          >

          <span
            v-else
            class="text-subtitle1 text-weight-bold"
          >
            {{ initials }}
          </span>
        </q-avatar>

        <div class="provider-info">

          <div class="font16 fontbold text-text">
            {{ firstName }}
          </div>

          <div class="font10 fontmedium text-grey-7">
            {{ info.district ?? "—" }}
          </div>

          <div
            v-if="info.age"
            class="font10 fontmedium text-grey-7"
          >
            <span>
              {{ $t("scheduling_page.provider_info.age", { value: info.age }) }}
            </span>

            <span class="q-ml-md">
              {{ $t("scheduling_page.provider_info.gender", { value: genderLabel }) }}
            </span>
          </div>


          <div class="provider-stats">

            <div class="row items-center">
              <q-icon
                color="warning"
                name="mdi-star"
                size="16px"
              />

              <span class="font10 fontmedium q-ml-xs">
                {{ ratingLabel }}
              </span>

              <span class="font10 fontmedium text-grey-7 q-ml-xs">
                {{ `(${info.total_reviews ?? 0})` }}
              </span>
            </div>

            <div class="row items-center">
              <q-icon
                color="secondary"
                name="mdi-broom"
                size="16px"
              />

              <span class="font10 fontmedium q-ml-xs">
                {{ `(${info.total_services ?? 0})` }}
              </span>
            </div>

          </div>

        </div>

      </q-card-section>

      <q-separator />

      <div
        v-if="loading"
        class="row items-center justify-center q-py-md"
      >
        <q-spinner-dots
          color="primary"
          size="32px"
        />
      </div>

      <q-list
        v-else-if="serviceTypes.length"
        class="q-pa-sm"
        dense
      >
        <q-item
          v-for="serviceType in serviceTypes"
          :key="serviceType.id"
        >
          <q-item-section avatar>
            <q-icon
              color="primary"
              name="mdi-check"
            />
          </q-item-section>

          <q-item-section class="font12 fontmedium text-text">
            {{ serviceType.description }}
          </q-item-section>
        </q-item>
      </q-list>

      <div
        v-else
        class="text-center text-grey-6 font10 fontmedium q-pa-md"
      >
        {{ $t("scheduling_page.provider_info.no_service_types") }}
      </div>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { avatarColors } from "src/helpers/avatarColors";
import { getFirstName } from "src/helpers/utils";
import { getPerfilPrestador } from "src/api/dashboard";
import { getProfileMediaUrl } from "src/helpers/profileMedia";
import { useI18n } from "vue-i18n";

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

defineEmits(useDialogPluginComponent.emits);

const {
  dialogRef,
  onDialogHide,
} = useDialogPluginComponent();

const { t } = useI18n();

const loading = ref(false);
const info = ref({ ...props.provider });

const closeDialog = () => {
  dialogRef.value.hide();
};

const firstName = computed(
  () => getFirstName(info.value.provider_name) || "—"
);

const photoUrl = computed(() => getProfileMediaUrl(info.value));

const serviceTypes = computed(() => info.value.service_types ?? []);

const ratingLabel = computed(
  () => Number(info.value.average_rating ?? 0).toFixed(1)
);

const genderLabel = computed(() => {
  if (info.value.gender_label) return info.value.gender_label;

  const gender = info.value.gender;
  if (!gender) return null;

  const key = `genders.${gender}`;
  const label = t(key);

  return label === key ? null : label;
});

const initials = computed(
  () => firstName.value.slice(0, 2).toUpperCase() || "?"
);

onMounted(async () => {
  const providerId = props.provider?.provider_id ?? props.provider?.id;
  if (!providerId) return;

  loading.value = true;

  try {
    const payload = await getPerfilPrestador(providerId);
    info.value = { ...props.provider, ...payload };
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.provider-dialog {
  width: 380px;
  max-width: 95vw;
  overflow: hidden;
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
}

.provider-avatar {
  flex-shrink: 0;
}

.provider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-info {
  flex: 1;
}

.provider-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.q-list .q-item {
  min-height: 38px;
}
</style>
