<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="rating-dialog-card bg-surface shadow-card" :flat="false">

      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn flat round dense icon="close" color="grey-6" size="sm" @click="onDialogCancel" />
      </div>

      <div class="column items-center q-pb-sm">
        <q-avatar size="64px" class="q-mb-sm">
          <span
            :style="avatarStyle"
            class="full-width full-height flex flex-center"
            style="border-radius: 50%;"
          >
            {{ initials }}
          </span>
        </q-avatar>
        <div class="font16 fontbold text-text text-center q-px-lg" style="line-height:1.3">
          {{ $t('dashboard_client.schedule_rating.title') }}
          <span class="text-primary"> {{ schedule.provider_name + '?' }}</span>
        </div>
      </div>

      <div class="column items-center q-pb-xs">
        <q-rating
          v-model="stars"
          :max="5"
          size="lg"
          color="amber"
          icon="mdi-star-outline"
          icon-selected="mdi-star"
          @update:model-value="onStarsChange"
        />
      </div>

      <q-card-section v-if="stars > 0" class="q-pt-xs q-pb-xs">
        <div class="text-grey-7 font14 fontbold text-center q-mb-sm">
          {{ isNegative ? $t('dashboard_client.schedule_rating.negative_label') : $t('dashboard_client.schedule_rating.positive_label') }}
        </div>
        <div v-if="loadingTags" class="row justify-center q-py-sm">
          <q-spinner-dots color="primary" size="24px" />
        </div>
        <div v-else class="row justify-center q-gutter-xs">
          <div
            v-for="tag in tags"
            :key="tag.id"
            class="tag-pill"
            :class="{ 'tag-pill--selected': selectedTagIds.includes(tag.id) }"
            @click="toggleTag(tag.id)"
          >
            {{ tag.description }}
          </div>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-xs q-pb-xs q-px-lg">
        <div class="font14 fontbold text-text q-mb-xs text-center">
          {{ $t('dashboard_client.schedule_rating.comment_placeholder') }}
        </div>
        <q-input
          v-model="comment"
          type="textarea"
          outlined
          dense
          rows="3"
          color="primary"
          input-class="text-black"
          hide-bottom-space
        />
      </q-card-section>

      <q-card-section class="q-pt-xs q-pb-xs q-px-lg">
        <input
          ref="photoInputRef"
          type="file"
          accept="image/jpeg,image/png,image/webp"
          multiple
          class="hidden"
          @change="onPhotosSelected"
        />
        <div class="row q-gutter-xs">
          <div v-for="(preview, idx) in photoPreviews" :key="idx" class="photo-thumb">
            <img :src="preview" />
            <q-btn round dense flat icon="close" size="xs" class="photo-thumb__remove" @click="removePhoto(idx)" />
          </div>
          <div v-if="photos.length < 5" class="photo-add" @click="photoInputRef.click()">
            <q-icon name="mdi-camera-plus-outline" size="24px" color="grey-5" />
            <div class="photo-add__label">{{ $t('dashboard_client.schedule_rating.add_photo') }}</div>
          </div>
        </div>
      </q-card-section>

      <q-card-section v-if="stars > 0" class="q-pt-xs q-pb-xs q-px-lg">
        <q-checkbox
          v-model="checkboxValue"
          :label="isNegative ? $t('dashboard_client.schedule_rating.block_label') : $t('dashboard_client.schedule_rating.favorite_label')"
          color="primary"
          keep-color
          class="text-text"
          checked-icon="mdi-check-circle"
          unchecked-icon="mdi-checkbox-blank-circle-outline"
        />
      </q-card-section>

      <q-card-section class="q-pt-sm q-pb-xs q-px-lg row">
        <q-btn
          unelevated
          rounded
          no-caps
          full-width
          color="primary"
          padding="8px 12px"
          class="submit-btn col-12"
          :label="$t('dashboard_client.schedule_rating.submit_btn')"
          :loading="loading"
          :disable="stars === 0"
          @click="submit"
        />
      </q-card-section>

      <q-card-section class="q-pt-xs q-pb-lg text-center">
        <span class="text-text font12 fontbold cursor-pointer" @click="openHelp">
          {{ $t('dashboard_client.schedule_rating.help_link') }}
        </span>
      </q-card-section>

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

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDialogPluginComponent, useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { createReview, getImprovementTypes } from 'src/api/review'
import { userStore } from 'src/stores/user'
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue'

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

defineEmits([...useDialogPluginComponent.emits])
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
const { t } = useI18n()
const $q = useQuasar()
const store = userStore()

const stars = ref(0)
const selectedTagIds = ref([])
const comment = ref(null)
const checkboxValue = ref(false)
const tags = ref([])
const loadingTags = ref(false)
const loading = ref(false)
const photos = ref([])
const photoPreviews = ref([])
const photoInputRef = ref(null)

const isNegative = computed(() => stars.value > 0 && stars.value <= 2)
const isPositive = computed(() => stars.value >= 3)

const avatarColors = [
  { background: '#ffd5df', color: '#932e57' },
  { background: '#d7e8ff', color: '#2158a8' },
  { background: '#dfd',    color: '#2a7a3b' },
  { background: '#ffe5cc', color: '#8a4500' },
]

const avatarStyle = computed(() => {
  const c = avatarColors[props.schedule.provider_id % avatarColors.length]
  return { background: c.background, color: c.color }
})

const initials = computed(() =>
  props.schedule.provider_name?.slice(0, 2).toUpperCase() ?? '??'
)

const onStarsChange = () => {
  selectedTagIds.value = []
  checkboxValue.value = false
}

const toggleTag = (id) => {
  const idx = selectedTagIds.value.indexOf(id)
  if (idx === -1) selectedTagIds.value.push(id)
  else selectedTagIds.value.splice(idx, 1)
}

const onPhotosSelected = (event) => {
  const files = Array.from(event.target.files)
  const remaining = 5 - photos.value.length
  files.slice(0, remaining).forEach(file => {
    photos.value.push(file)
    photoPreviews.value.push(URL.createObjectURL(file))
  })
  event.target.value = ''
}

const removePhoto = (idx) => {
  URL.revokeObjectURL(photoPreviews.value[idx])
  photos.value.splice(idx, 1)
  photoPreviews.value.splice(idx, 1)
}

const openHelp = () => {
  $q.dialog({ component: ProfileHelpDialog })
}

const submit = async () => {
  if (stars.value === 0) return
  loading.value = true
  try {
    await createReview({
      schedule_id: props.schedule.id,
      origin: 'client',
      origin_id: store.user.client.id,
      stars: stars.value,
      comment: comment.value || null,
      improvements_ids: selectedTagIds.value,
      block_provider: isNegative.value && checkboxValue.value,
      block_client: false,
      favorite_provider: isPositive.value && checkboxValue.value,
      photos: photos.value,
    })

    onDialogOK(true)
  } catch (error) {
    const status = error?.response?.status
    if (status === 422) {
      $q.notify({ message: t('dashboard_client.schedule_rating.already_reviewed'), color: 'negative', icon: 'mdi-alert-circle-outline' })
    } else {
      $q.notify({ message: t('http.errors.failed'), color: 'negative' })
    }
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  loadingTags.value = true
  try {
    const result = await getImprovementTypes('client')
    tags.value = result ?? []
  } catch {
    tags.value = []
  } finally {
    loadingTags.value = false
  }
})
</script>

<style scoped lang="scss">
.rating-dialog-card {
  width: 320px;
  max-width: 96vw;
  border-radius: 20px !important;
  overflow: hidden;
}

.tag-pill {
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  padding: 5px 14px;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  user-select: none;

  &--selected {
    border-color: #8B5CF6;
    color: #8B5CF6;
  }
}

.submit-btn {
  padding: 10px 0;
}

.photo-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;

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

  &__remove {
    position: absolute !important;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    min-height: unset !important;
  }
}

.photo-add {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1.5px dashed #d1d5db;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;

  &__label {
    color: #9ca3af;
    text-align: center;
    margin-top: 2px;
    line-height: 1.2;
  }

  &:active { background: rgba(0, 0, 0, 0.03); }
}

.hidden { display: none; }
</style>
