<template>
  <q-page class="details-page">
    <!-- HEADER -->
    <div class="page-header">
      <q-btn
        flat
        round
        dense
        icon="chevron_left"
        class="back-btn"
        @click="router.back()"
      />
      <div class="page-title">{{ details.title }}</div>
    </div>

    <!-- CLIENTE -->
    <div class="client-section">
      <img :src="AvatarMock" class="client-avatar" />
      <div class="client-name">{{ details.clientName }}</div>
      <div class="client-price">{{ details.price }}</div>
    </div>

    <!-- INFOS -->
    <div class="details-info">
      <div>{{ details.date }}</div>
      <div>{{ details.hour }}</div>
      <div>{{ details.address }}</div>
      <div>{{ details.distance }}</div>
    </div>

    <!-- TAGS -->
    <div class="tags-row">
      <q-chip dense color="grey-3">
        {{ details.tags[0] }}
      </q-chip>

      <q-chip dense color="grey-3">
        {{ details.tags[1] }}
      </q-chip>
    </div>

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

    <!-- BOTÃO -->
    <q-btn
      unelevated
      rounded
      no-caps
      color="secondary"
      :label="details.buttonLabel"
      class="full-width q-mt-md"
      @click="goToProposalFlow"
    />

    <!-- ALERTA -->
    <q-card flat class="bottom-alert">
      {{ details.alertText }}
    </q-card>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import AvatarMock from 'src/assets/foto_diarista_login.svg'
import { getOpportunityById } from 'src/api/opportunities'

// router
const router = useRouter()
const route = useRoute()

// state
const details = ref(null)
const loading = ref(false)

// params
const opportunityId = route.params.id

// helpers
const formatHour = (time) =>
  time ? time.slice(0, 5).replace(':', 'h') : ''

// normalize (PADRÃO EMPRESA)
const normalizeDetails = (item) => ({
  title: 'Detalhes do serviço',

  avatar: item.client?.user?.photo || AvatarMock,

  clientName:
    item.client?.user?.name || 'Cliente',

  price: `R$${Number(
    item.custom_schedule?.max_price || 0
  ).toFixed(2)}`,

  date: new Date(
    item.custom_schedule?.created_at || item.created_at
  ).toLocaleDateString('pt-BR'),

  hour: `Das ${formatHour(item.start_time)} às ${formatHour(item.end_time)}`,

  address:
    item.address?.address || 'Endereço não informado',

  distance: '0 km',

  tags: [
    item.custom_schedule?.service_type?.description,
    item.custom_schedule?.offers_meal
      ? 'Refeição no local'
      : null
  ].filter(Boolean),

  description:
    item.custom_schedule?.description || '',

  buttonLabel: 'Quero atender',

  alertText:
    'Se seu pedido for aceito pelo cliente você receberá um aviso confirmando o agendamento e aparecerá nos seus próximos serviços.'
})

// load
const loadDetails = async () => {
  loading.value = true

  try {
    const response = await getOpportunityById(opportunityId)

    console.log('DETAILS RESPONSE:', response)

    details.value = normalizeDetails(response)
  } catch (error) {
    console.error('Erro ao carregar detalhes:', error)
    details.value = null
  } finally {
    loading.value = false
  }
}

// actions
const goToProposalFlow = () => {
  console.log('Ir para proposta', details.value)
}

// lifecycle
onMounted(loadDetails)

</script>

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

.page-header {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;
}

.back-btn {
  position: absolute;
  left: 0;
  top: -4px;
}

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

.client-section {
  text-align: center;
  margin-top: 8px;
}

.client-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.client-name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
  color: #666;
}

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

.details-info {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

.distance-info {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.service-highlight {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.highlight-text {
  color: #7c5cff;
  font-weight: 700;
}

.tags-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0;
}

.tags-row .q-chip {
  border: 1px solid #7c5cff;
  color: #7c5cff;
  background: white;
  font-size: 12px;
}

.info-title {
  text-align: center;
  color: #7c5cff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.description-box {
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

.full-width {
  margin-top: 20px;
  height: 48px;
  font-size: 16px;
  background: #8f6dfc !important;
}

.bottom-alert {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #dfeeff;
  font-size: 12px;
  line-height: 1.5;
  color: #5c6b8a;
  text-align: center;
}
</style>