<template>
  <q-dialog
    ref="dialogRef"
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <div v-if="details" class="details-page">

      <!-- HEADER -->
      <div class="page-header">
        <q-btn
          flat
          round
          dense
          icon="chevron_left"
          class="back-btn"
          @click="goBack"
        />

        <div class="page-title">
          {{ $t('provider.dashboard.opportunity_details.title') }}
        </div>
      </div>

      <!-- CLIENTE -->
      <div class="client-section">
        <img :src="details.avatar" class="client-avatar" />

        <div class="client-name">
          {{ details.schedule?.client_name }}
          <span class="rating">
            {{ details.schedule?.rating }}
          </span>
        </div>

        <div class="client-price">
          {{
            $t('provider.dashboard.opportunities.currency', {
              value: chooseprice(details.schedule?.period_type)
            })
          }}
        </div>

        <div class="date">
          {{ formatDate(details.schedule?.date) }}
        </div>

        <div class="hour">
          {{ formatHour(details.schedule?.start_time) }}
          {{ formatHour(details.schedule?.end_time) }}
        </div>
      </div>

      <!-- ENDEREÇO -->
      <div class="address">
        <q-icon name="place" size="16px" />

        {{ details.schedule?.address?.district }}
      </div>

      <div class="distance">
        {{
          $t(
            'provider.dashboard.opportunity_details.distance_text',
            { distance: details.schedule?.distance }
          )
        }}
      </div>

      <!-- TAGS -->
      <div v-if="details.tags?.length" class="tags-row">
        <q-chip
          v-for="(tag, index) in details.tags"
          :key="index"
          outline
          class="chip"
        >
          {{ tag }}
        </q-chip>
      </div>

      <!-- INFO -->
      <div class="service-type">
        {{ $t('provider.dashboard.opportunity_details.sob_medida') }}

        <span>
          {{
            $t(
              'provider.dashboard.opportunity_details.sob_medida_highlight'
            )
          }}
        </span>

        <br />

        {{ $t('provider.dashboard.opportunity_details.para') }}

        <strong class="highlight-service">
          {{ details.service_type_name }}
        </strong>
      </div>

      <div class="address-type">
        <span class="chip-type">
          {{ details.address_type }}
        </span>

        <span
          v-if="details.offers_meal"
          class="chip-type"
        >
          {{ $t('provider.dashboard.opportunity_details.offers_meal') }}
        </span>
      </div>

      <!-- INFO TITLE -->
      <div
        v-if="details.description"
        class="service-type gradient-diarista"
      >
        {{ $t('provider.dashboard.opportunity_details.info_title') }}
      </div>

      <!-- DESCRIÇÃO -->
      <div class="description-box">
        {{ details.description }}
      </div>

      <!-- BOTÃO -->
      <q-btn
        unelevated
        rounded
        no-caps
        class="accept-btn"
        :label="$t('provider.dashboard.opportunity_details.button_accept')"
        @click="goToProposalFlow"
      />

      <!-- ALERTA -->
      <div class="alert-box">
        <q-icon
          name="warning"
          size="18px"
          class="alert-icon"
        />

        <span class="alert-text">
          {{ $t('provider.dashboard.opportunity_details.alert_text') }}
        </span>
      </div>

    </div>
  </q-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useDialogPluginComponent } from 'quasar'
import { userStore } from 'src/stores/user'
import {
  getOpportunityById,
  proposalOpportunity
} from 'src/api/opportunities'

const props = defineProps({
  opportunityId: {
    type: Number,
    required: true
  }
})

defineEmits([
  ...useDialogPluginComponent.emits
])

const {
  dialogRef,
  onDialogOK
} = useDialogPluginComponent()

const router = useRouter()

const user = userStore()
const details = ref(null)
const loading = ref(true)

const chooseprice = (periodType) => {
  switch (periodType) {
    case "8":
      return user.user.provider_daily_price_8h
    case "6":
      return user.user.provider_daily_price_6h
    case "4":
      return user.user.provider_daily_price_4h
    case "2":
      return user.user.provider_daily_price_2h
    default:
      return 0
  }
}

// formatando a data
const formatDate = (date) => {
  if (!date) return ''

  const [day, month, year] = date.split('/')

  const parsedDate = new Date(year, month - 1, day)

  const formatted = parsedDate.toLocaleDateString('pt-BR', {
    weekday: 'long',
    day: '2-digit',
    month: '2-digit'
  })

  return formatted.charAt(0).toUpperCase() + formatted.slice(1)
}

// formatando hora para exibir só HH:mm
const formatHour = (time) => {
  if (!time) return ''
  return time.slice(0, 5)
}

const goBack = () => {
  onDialogOK()
}

const goToProposalFlow = async () => {

  await proposalOpportunity(
    details.value.schedule_id,
    user.user.provider.id
  )

  await router.push({
    name: 'DashboardPage',
    query: { showSuccessModal: 'true' }
  })

  onDialogOK()
}

onMounted(async () => {
  try {
    const response = await getOpportunityById(
      props.opportunityId
    )

    if (response) {
      details.value = response
    } else {
      console.warn('Nenhum dado retornado')
    }

  } catch (error) {
    console.error('Erro ao carregar detalhes:', error)

  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="scss">
.details-page {
  padding: 24px 16px;
  background: #f4f5f7;
  min-height: 100vh;
}

/* HEADER */
.page-header {
  display: flex;
  align-items: center;      
  justify-content: center;
  position: relative;

  height: 56px;            
  padding: 0 16px;

  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 16px 16px;

  margin-bottom: 20px;
}

.back-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%); 
  color: #7c5cff;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #7c5cff;
}

/* CLIENTE */
.client-section {
  text-align: center;
  margin-top: 10px;
}

.client-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.client-name {
  font-size: 16px;
  font-weight: 600;
  color: #444;
}

.rating {
  color: #ffb800;
  font-size: 12px;
  margin-left: 4px;
}

.client-price {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  color: #7c5cff;
}

/* DATA */
.date {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.hour {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

/* ENDEREÇO */
.address {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #7c5cff;
  font-size: 14px;
  font-weight: 600;
}

.distance {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  margin-bottom: 14px;
}

/* TEXTO SOB MEDIDA */
.service-type {
  text-align: center;
  font-size: 13px;
  margin-top: 14px;
  color: #666;
  line-height: 1.5;
}

.service-type span {
  color: #7c5cff;
  font-weight: 600;
}

.highlight-service {
  color: #7c5cff;
  font-weight: 600;
}

/* CHIPS */
.address-type {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.chip-type {
  border: 1.5px solid #7c5cff;
  color: #7c5cff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: white;
}

/* INFO TITLE */
.gradient-diarista {
  text-align: center;
  font-weight: 700;
  color: #7c5cff;
  margin-top: 18px;
  font-size: 14px;
}

/* DESCRIÇÃO */
.description-box {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 12px 0 24px;
  line-height: 1.5;
  padding: 0 10px;
}

/* BOTÃO */
.accept-btn {
  width: 100%;
  height: 52px;
  border-radius: 28px;
  background: linear-gradient(90deg, #7c5cff, #9f7aea);
  color: white;
  font-weight: 600;
  font-size: 15px;
}

/* ALERTA */
.alert-box {
  margin-top: 14px;
  background: #e9f0ff;
  padding: 12px;
  border-radius: 14px;
  font-size: 12px;
  text-align: center;
  color: #5c6b8a;

  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
</style>