<template>
  <div class="q-mx-md q-mb-md">
    <div class="row items-center justify-between q-mb-sm">
      <div class="font16 fontbold gradient-diarista section-title">
        {{ $t("provider.dashboard.opportunities.title") }}
      </div>

     <div
  v-if="data.length"
  class="row items-center"
>
  <q-btn
    color="grey-6"
    flat
    no-caps
    size="sm"
    :label="$t('common.see_all')"
    @click="openAllOpportunities"
  />

  <q-badge
    class="q-ml-xs"
    color="negative"
    rounded
    :label="data.length"
  />
</div>
</div>

    <div
      v-if="!data.length"
      class="empty-alert row no-wrap items-start"
    >
      <q-icon
        class="empty-alert__icon"
        name="mdi-alert-outline"
        size="28px"
      />

      <div class="empty-alert__text font10">
        <span class="fontbold">
          {{ $t("provider.dashboard.opportunities.empty_alert_bold") }}
        </span>

        {{ $t("provider.dashboard.opportunities.empty_alert_text") }}
      </div>
    </div>

    <div v-else class="scroll-wrapper">
      <div
        class="scroll-track row no-wrap"
        :class="{ 'q-gutter-x-md': data.length > 1 }"
      >
        <q-card
          v-for="item in data"
          :key="item.id"
          :flat="false"
          :class="{ 'opportunity-card--single': data.length === 1 }"
          class="opportunity-card bg-surface shadow-card card-border"
        >
          <q-card-section class="q-pa-sm">
            <div class="row no-wrap items-center q-gutter-x-sm">
              <q-avatar size="48px">
                <img
                  v-if="item.customer_photo"
                  :src="item.customer_photo"
                  style="object-fit: cover"
                />

                <span
                  v-else
                  class="flex flex-center full-height full-width"
                  style="border-radius: 50%"
                  :style="avatarColors[item.id % avatarColors.length]"
                >
                  {{
                    getFirstName(item.client_name ?? item.client?.user?.name)
                      ?.slice(0, 2)
                      .toUpperCase() ?? "??"
                  }}
                </span>
              </q-avatar>

              <div class="column flex-1">
                <div class="row items-center q-gutter-x-xs">
                  <span class="ellipsis font12 fontmedium text-text">
                    {{ getFirstName(item.client_name ?? item.client?.user?.name) || "—" }}
                  </span>

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

                    <div class="q-my-auto">
                      <span class="font9 fontregular text-text">
                        {{ item.client?.average_rating }}
                      </span>
                    </div>
                  </div>
                </div>

                <div class="row items-center no-wrap">
                  <span class="font9 fontbold text-schedule-date-bold">
                    {{ formatWeekday(item.date) }}
                  </span>

                  <span class="font9 text-schedule-date-regular">
                    {{ ", " + formatDayMonth(item.date) }}
                  </span>
                </div>

                <div class="text-schedule-date-regular font9">
                  {{ $t("common.from") }}

                  <span class="text-schedule-date-bold fontbold">
                    {{ item.start_time?.slice(0, 5) }}
                  </span>

                  {{ $t("common.to") }}

                  <span class="text-schedule-date-bold fontbold">
                    {{ item.end_time?.slice(0, 5) }}
                  </span>
                </div>
              </div>

              <div class="column items-end text-text">
                <div class="font12 fontbold text-price">
                  {{ formatCurrency(item.total_amount) }}
                </div>

                <div class="font9 text-type">
                  {{ $t(labelsPeriodTypes.find((label) => label.value == item.period_type)?.label) }}
                </div>

                <div class="font9 text-region">
                  {{ item.address?.district || "N/A" }}
                </div>

                <div class="font9 text-distance">
                  {{ item.distance_km ?? 0 }}{{ $t("common.km") }}
                </div>
              </div>
            </div>

            <div class="row q-mt-sm justify-between">
              <div class="font11 fontmedium text-primary text-text">
                {{ item.custom_schedule?.address_type }}
              </div>

              <q-btn
                color="primary"
                no-caps
                rounded
                size="xs"
                unelevated
                :label="$t('common.details')"
                @click="openOpportunityDetails(item)"
              />
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { avatarColors, formatCurrency, getFirstName } from "src/helpers/utils";
import { labelsPeriodTypes } from "src/helpers/labelsPeriodTypes.js";
import { formatDayMonth, formatWeekday } from "src/helpers/scheduleDate";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

import OpportunityDetailsDialog from "src/pages/opportunities/components/OpportunityDetailsDialog.vue";

defineProps({
  data: {
    default: () => [],
    type: Array,
  },
});

const $q = useQuasar();

const router = useRouter();




const openAllOpportunities = () => {
  router.push({
    name: "OpportunitiesPage",
  });
};

const openOpportunityDetails = (item) => {
  $q.dialog({
    component: OpportunityDetailsDialog,
    componentProps: {
      distanceKm: item.distance_km ?? null,
      opportunityId: item.custom_schedule?.id,
    },
  });
};
</script>

<style scoped lang="scss">
.empty-alert {
  background: #e3efff;
  border-radius: 8px;
  gap: 12px;
  padding: 13px 14px;
}
.empty-alert__icon {
  color: #6554d9;
  flex: 0 0 auto;
}
.empty-alert__text {
  color: #6554d9;
  line-height: 1.2;
  padding-top: 1px;
}
.scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 8px;

  &::-webkit-scrollbar {
    display: none;
  }
}
.opportunity-card {
  border-radius: 12px;
  min-width: 82vw;
}
.opportunity-card--single {
  min-width: 100%;
  width: 100%;
}
.text-schedule-date-bold {
  color: #3a3a4a;
}
.text-schedule-date-regular {
  color: #666;
}
.text-date,
.text-time,
.text-type,
.text-region,
.text-distance {
  color: #666;
}
.text-price {
  color: #3a3a4a;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
</style>
