<template>
  <q-dialog ref="dialogRef" persistent maximized transition-show="slide-left" transition-hide="slide-right">
    <div class="bg-page full-height column no-shadow">
      <div class="row items-center q-px-md q-pb-sm bg-white shadow-profile bg-surface dialog-safe-header">
        <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
        <q-space />
        <span class="gradient-diarista font16 fontbold">{{ $t('profile.service_data.title') }}</span>
        <q-space />
        <div style="width: 32px"></div>
      </div>

      <div class="col overflow-auto">
        <div class="q-px-md q-pt-lg q-pb-xl justify-between column full-height">
          <div class="text-center q-mb-lg">
            <q-img :src="LogoDiariaCampos" style="max-width: 160px;" />
          </div>

          <div class="q-mb-lg">
            <div class="text-text q-mb-sm font12 fontbold">
              {{ $t('profile.service_data.price_8h_label') }}
            </div>
            <DefaultCurrencyInput
              v-model="form.daily_price_8h"
              class="q-mb-xs bg-surface custom-currency-input"
              input-class="text-text"
              :error="!!priceError"
              :error-message="priceError"
              :rules="[validateDailyPrice]"
              hide-bottom-space
              label=""
            />

            <div class="text-text text-center q-mb-lg font10 fontmedium">
              {{ dailyPriceMinMaxText }}
            </div>

            <div class="text-text text-center q-mb-sm font12 fontmedium">
              {{ $t('profile.service_data.shorter_services') }}
            </div>

            <div class="row q-col-gutter-sm q-mb-sm">
              <div class="col-4">
                <div class="text-text text-center q-mb-xs font11 fontbold">
                  {{ $t('profile.service_data.up_to_6h') }}
                </div>
                <q-input
                  :model-value="formatCurrency(form.daily_price_6h)"
                  outlined
                  dense
                  readonly
                  class="bg-surface"
                  input-class="text-text text-center"
                />
              </div>
              <div class="col-4">
                <div class="text-text text-center q-mb-xs font11 fontbold">
                  {{ $t('profile.service_data.up_to_4h') }}
                </div>
                <q-input
                  :model-value="formatCurrency(form.daily_price_4h)"
                  outlined
                  dense
                  readonly
                  class="bg-surface"
                  input-class="text-text text-center"
                />
              </div>
              <div class="col-4">
                <div class="text-text text-center q-mb-xs font11 fontbold">
                  {{ $t('profile.service_data.up_to_2h') }}
                </div>
                <q-input
                  :model-value="formatCurrency(form.daily_price_2h)"
                  outlined
                  dense
                  readonly
                  class="bg-surface"
                  input-class="text-text text-center"
                />
              </div>
            </div>
          </div>

          <div class="text-text text-center font12">
            <span class="fontbold">
              {{ $t('profile.service_data.services_subtitle') }}
            </span>
            <div class="text-text q-mb-md text-center font12">
              {{ $t('profile.service_data.change_in_profile') }}
            </div>
            <div class="q-mb-lg">
              <div v-if="loadingServiceTypes" class="row justify-center q-py-md">
                <q-spinner color="primary" size="28px" />
              </div>

              <div v-else-if="serviceOptions.length" class="row q-col-gutter-sm service-options">
                <div v-for="service in serviceOptions" :key="service.value" class="col-6 service-option-cell">
                  <q-checkbox
                    :model-value="isServiceSelected(service.value)"
                    :label="service.label"
                    :disable="togglingService[service.value]"
                    color="primary"
                    class="text-text full-width"
                    keep-color
                    @update:model-value="(checked) => onServiceToggle(service, checked)"
                  />
                </div>
              </div>

              <div v-else class="text-grey-7 text-center q-py-md font12">
                {{ $t('profile.service_data.no_services') }}
              </div>

              <div class="text-grey-6 text-center q-mt-md font12">
                {{ $t('profile.service_data.services_hint') }}
              </div>
            </div>
          </div>


          <q-btn
            unelevated
            rounded
            no-caps
            color="primary"
            padding="4px 12px"
            class="full-width q-py-md"
            :label="$t('common.actions.update')"
            :loading="saving"
            :disable="!!priceError || saving"
            @click="save"
          />

        </div>
      </div>

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

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useDialogPluginComponent, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { getPublicServiceTypes } from 'src/api/serviceType';
import { getProviderServiceTypes, createProviderServiceType, deleteProviderServiceType } from 'src/api/providerServiceType';
import { getUser } from 'src/api/user';
import { getProviderDailyPriceMin, updateProvider } from 'src/api/provider';
import { userStore } from 'src/stores/user';
import DefaultCurrencyInput from 'src/components/defaults/DefaultCurrencyInput.vue';
import LogoDiariaCampos from 'src/assets/logo_diaria_campos_login.svg';

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogOK } = useDialogPluginComponent();
const $q = useQuasar();
const { t } = useI18n();
const user = userStore();

const DEFAULT_DAILY_PRICE_MIN = 100;
const DAILY_PRICE_MAX = 500;

const form = ref({
  daily_price_8h: null,
  daily_price_6h: null,
  daily_price_4h: null,
  daily_price_2h: null,
});

const dailyPriceMin = ref(DEFAULT_DAILY_PRICE_MIN);
const serviceOptions = ref([]);
const providerServiceTypes = ref([]);
const loadingServiceTypes = ref(false);
const togglingService = ref({});
const saving = ref(false);

const formatCurrency = (value) => {
  if (value === null || value === undefined || Number.isNaN(Number(value))) return 'R$ 0,00';
  return Number(value).toLocaleString('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    minimumFractionDigits: 2,
  });
};

const parseDailyPriceMin = (payload) => {
  const rawValue = payload?.daily_price_min
    ?? payload?.dailyPriceMin
    ?? payload?.min
    ?? payload?.value
    ?? payload;

  const value = Number(rawValue);

  if (!Number.isFinite(value) || value < 0) {
    return DEFAULT_DAILY_PRICE_MIN;
  }

  return value;
};

const dailyPriceMinMaxText = computed(() => {
  return t('profile.service_data.price_min_max', {
    min: formatCurrency(dailyPriceMin.value),
    max: formatCurrency(DAILY_PRICE_MAX),
  });
});

const getDailyPriceError = (value) => {
  const numericValue = Number(value);

  if (!value && value !== 0) return '';
  if (Number.isNaN(numericValue)) return t('validation.rules.required');
  if (numericValue < dailyPriceMin.value) {
    return t('profile.service_data.price_min_error', { value: formatCurrency(dailyPriceMin.value) });
  }
  if (numericValue > DAILY_PRICE_MAX) {
    return t('profile.service_data.price_max_error', { value: formatCurrency(DAILY_PRICE_MAX) });
  }

  return '';
};

const priceError = computed(() => getDailyPriceError(form.value.daily_price_8h));

const validateDailyPrice = () => {
  return getDailyPriceError(form.value.daily_price_8h) || true;
};

const isServiceSelected = (serviceTypeId) => {
  return providerServiceTypes.value.some((pst) => pst.service_type_id === serviceTypeId);
};

watch(
  () => form.value.daily_price_8h,
  (value) => {
    const price = Number(value);
    if (!price || Number.isNaN(price)) {
      form.value.daily_price_6h = null;
      form.value.daily_price_4h = null;
      form.value.daily_price_2h = null;
      return;
    }
    form.value.daily_price_6h = Number((price * 0.85).toFixed(2));
    form.value.daily_price_4h = Number((price * 0.55).toFixed(2));
    form.value.daily_price_2h = Number((price * 0.30).toFixed(2));
  },
  { immediate: true },
);

const loadData = async () => {
  try {
    const userData = await getUser();
    form.value.daily_price_8h = userData.provider_daily_price_8h ?? null;
    form.value.daily_price_6h = userData.provider_daily_price_6h ?? null;
    form.value.daily_price_4h = userData.provider_daily_price_4h ?? null;
    form.value.daily_price_2h = userData.provider_daily_price_2h ?? null;
  } catch (error) {
    console.error('Erro ao carregar dados do prestador:', error);
  }
};

const loadDailyPriceMin = async () => {
  try {
    const payload = await getProviderDailyPriceMin();
    dailyPriceMin.value = parseDailyPriceMin(payload);
  } catch (error) {
    dailyPriceMin.value = DEFAULT_DAILY_PRICE_MIN;
    console.error(error);
  }
};

const loadServiceTypes = async () => {
  loadingServiceTypes.value = true;
  try {
    const [allTypes, providerTypes] = await Promise.all([
      getPublicServiceTypes(),
      getProviderServiceTypes(user.user.provider_id),
    ]);

    serviceOptions.value = (Array.isArray(allTypes) ? allTypes : [])
      .filter((item) => item?.is_active !== false)
      .map((item) => ({ label: item.description, value: Number(item.id) }))
      .filter((item) => Number.isInteger(item.value) && item.value > 0);

    providerServiceTypes.value = Array.isArray(providerTypes) ? providerTypes : [];
  } catch (error) {
    console.error('Erro ao carregar tipos de serviço:', error);
    $q.notify({ type: 'negative', message: t('http.errors.failed') });
  } finally {
    loadingServiceTypes.value = false;
  }
};

const onServiceToggle = async (service, checked) => {
  togglingService.value = { ...togglingService.value, [service.value]: true };
  try {
    if (checked) {
      const created = await createProviderServiceType(user.user.provider_id, {
        service_type_id: service.value,
      });
      providerServiceTypes.value = [...providerServiceTypes.value, created];
    } else {
      const existing = providerServiceTypes.value.find((pst) => pst.service_type_id === service.value);
      if (existing) {
        await deleteProviderServiceType(user.user.provider_id, existing.id);
        providerServiceTypes.value = providerServiceTypes.value.filter((pst) => pst.id !== existing.id);
      }
    }
  } catch {
    $q.notify({ type: 'negative', message: t('http.errors.failed') });
  } finally {
    const updated = { ...togglingService.value };
    delete updated[service.value];
    togglingService.value = updated;
  }
};

const save = async () => {
  if (priceError.value) return;
  saving.value = true;
  try {
    await updateProvider(user.user.provider_id, {
      daily_price_8h: form.value.daily_price_8h,
      daily_price_6h: form.value.daily_price_6h,
      daily_price_4h: form.value.daily_price_4h,
      daily_price_2h: form.value.daily_price_2h,
    });
    onDialogOK();
  } catch {
    $q.notify({ type: 'negative', message: t('http.errors.failed') });
  } finally {
    saving.value = false;
  }
};

onMounted(async () => {
  await Promise.all([loadData(), loadServiceTypes(), loadDailyPriceMin()]);
});
</script>

<style scoped lang="scss">
@use "sass:map";

:deep(.q-field--outlined .q-field__control) {
  border-radius: 10px;
}

:deep(.custom-currency-input .q-field__bottom) {
  background: map.get($colors, "page");
}

.service-option-cell {
  text-align: left;
}

:deep(.service-option-cell .q-checkbox) {
  justify-content: flex-start;
}
</style>
