<template>
  <div class="q-mx-md q-mb-md">
    <div class="row items-center justify-between q-mb-sm">
      <div class="section-title gradient-diarista">{{ $t('provider.dashboard.opportunities.title') }}</div>
      <q-btn flat no-caps color="grey-6" size="sm" :label="$t('common.see_all')"  @click="openAllOpportunities"/>
    </div>

    <div class="scroll-wrapper">
      <div class="scroll-track row no-wrap q-gutter-x-md">
        <q-card
          v-for="item in data"
          :key="item.id"
          class="opportunity-card bg-surface shadow-card card-border"
          :flat="false"
        >
          <q-card-section class="q-pa-sm">
            <div class="row no-wrap items-center q-gutter-x-sm">
              <q-avatar size="48px">
                <img :src="item.customer_photo || 'https://cdn.quasar.dev/img/avatar.png'">
              </q-avatar>
              <div class="column flex-1">
                <div class="row items-center q-gutter-x-xs">
                  <span class="text-name ellipsis">{{ item.client?.user?.name }}</span>
                  <div class="row items-center">
                    <q-icon name="mdi-star" color="warning" size="14px" />
                    <span class="text-rating text-text">{{ item.client?.average_rating }}</span>
                  </div>
                </div>
                <div class="row items-center no-wrap">
                  <span class="text-schedule-date-bold">{{ formatWeekday(item.date) }}</span>
                  <span class="text-schedule-date-regular">{{ ', ' + formatDayMonth(item.date) }}</span>
                </div>
                <div class="text-schedule-date-regular">
                  {{ $t('common.from') }}
                  <span class="text-schedule-date-bold">{{ item.start_time?.slice(0, 5) }}</span>
                  {{ $t('common.to') }}
                  <span class="text-schedule-date-bold">{{ item.end_time?.slice(0, 5) }}</span>
                </div>
              </div>
              <div class="column items-end text-text">
                <div class="text-price">{{ formatCurrency(item.total_amount) }}</div>
                <div class="text-type">{{ $t(labelsPeriodTypes.find(label => label.value == item.period_type)?.label) }}</div>
                <div class="text-region text-weight-bold">{{ item.address?.district || 'N/A' }}</div>
                <div class="text-distance">{{ item.distance || 0 }}{{ $t('common.km') }}</div>
              </div>
            </div>

            <div class="row q-mt-sm justify-between">
              <div class="text-text text-primary">
                  {{ item.custom_schedule?.service_type?.description }}
              </div>
              <q-btn
                 unelevated
                 rounded
                 no-caps
                 color="primary"
                 size="sm"
                 class="btn-details"
                 :label="$t('common.details')"
                 @click="openOpportunityDetails(item)"
                />
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatCurrency } from 'src/helpers/utils';
import { labelsPeriodTypes } from 'src/helpers/arraysOptions/labelsPeriodTypes.js';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import OpportunityDetailsDialog from 'src/pages/opportunities/components/OpportunityDetailsDialog.vue';

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



const $q = useQuasar();

const router = useRouter();


const openOpportunityDetails = (item) => {
  $q.dialog({
    component: OpportunityDetailsDialog,
   componentProps: {
  opportunityId: item.custom_schedule?.id
}
  })
}

// botão ver todas 
const openAllOpportunities = () => {
  router.push({
    name: 'OpportunitiesPage'
  })
}




const formatWeekday = (iso) => {
  if (!iso) return '';
  const d = new Date(iso);
  const w = d.toLocaleDateString('pt-BR', { weekday: 'long' });
  return w.charAt(0).toUpperCase() + w.slice(1);
};

const formatDayMonth = (iso) => {
  if (!iso) return '';
  return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
};

</script>

<style scoped lang="scss">
.scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 8px;
  &::-webkit-scrollbar {
    display: none;
  }
}
.opportunity-card {
  min-width: 85vw;
  border-radius: 12px;
}
.text-name {
  font-weight: 700;
  color: #3a3a4a;
}
.text-rating {
  font-size: 12px;
  font-weight: 600;
}
.text-schedule-date-bold {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #3a3a4a;
}
.text-schedule-date-regular {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #666;
}
.text-date, .text-time, .text-type, .text-region, .text-distance {
  font-size: 11px;
  color: #666;
}
.text-price {
  font-weight: 700;
  color: #3a3a4a;
  font-size: 14px;
}
.btn-details {
  font-weight: 700;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
</style>
