<template>
  <div>
    <div class="bg-violet-light q-pb-md">
      <div class="row justify-end q-mb-sm q-gutter-sm">
        <q-btn
          unelevated
          icon="mdi-upload"
          :label="$t('common.actions.import')"
          padding="6px 12px"
          class="btn-gradient"
        />
        <q-btn
          unelevated
          icon="mdi-plus"
          :label="$t('common.actions.new')"
          padding="6px 12px"
          class="btn-gradient"
          @click="onAddService"
        />
      </div>

      <q-input
        v-model="serviceSearch"
        :placeholder="$t('parceiro.search_placeholder')"
        outlined
        dense
        clearable
        color="violet-normal"
        class="q-mb-sm service-search"
      >
        <template #prepend>
          <q-icon name="mdi-magnify" color="violet-normal" />
        </template>
      </q-input>
    </div>

    <q-card>
      <div v-if="loadingServices" class="flex flex-center q-pa-xl">
        <q-spinner color="violet-normal" size="40px" />
      </div>

      <DefaultTable
        v-else
        v-model:rows="filteredServices"
        :columns="serviceColumns"
        no-api-call
        :show-search-field="false"
        open-item
        @on-row-click="({ row }) => onEditService(row)"
      />
    </q-card>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { getServicesByPartner } from "src/api/partnerAgreementService";

import DefaultTable from "src/components/defaults/DefaultTable.vue";

const props = defineProps({
  partnerId: { type: Number, required: true },
  active:    { type: Boolean, default: false },
});

const router = useRouter();
const $q = useQuasar();
const { t } = useI18n();

const services = ref([]);
const loadingServices = ref(false);
const serviceSearch = ref("");

const filteredServices = computed(() => {
  if (!serviceSearch.value) return services.value;
  const needle = serviceSearch.value.toLowerCase();
  return services.value.filter((s) =>
    [s.name, s.category?.name, s.price, s.associate_price]
      .some((f) => f != null && String(f).toLowerCase().includes(needle))
  );
});

const serviceColumns = computed(() => [
  { name: "name",            label: t("common.terms.name"),         field: "name",            align: "left", sortable: true },
  { name: "category",        label: t("parceiro.service_category"), field: (r) => r.category?.name ?? "—", align: "left" },
  { name: "price",           label: t("parceiro.price"),            field: "price",            align: "left" },
  { name: "associate_price", label: t("parceiro.associate_price"),  field: "associate_price",  align: "left" },
  { name: "actions",         label: t("common.terms.actions"),      align: "right", required: true },
]);

const loadServices = async () => {
  loadingServices.value = true;
  try {
    services.value = await getServicesByPartner(props.partnerId);
  } catch {
    $q.notify({ type: "negative", message: t("http.errors.failed") });
  } finally {
    loadingServices.value = false;
  }
};

const onAddService = () => {
  router.push({ name: "ParceiroServicoCadastroPage", params: { id: props.partnerId } });
};

const onEditService = (svc) => {
  router.push({ name: "ParceiroServicoCadastroPage", params: { id: props.partnerId, serviceId: svc.id } });
};

watch(() => props.active, (isActive) => {
  if (isActive) loadServices();
}, { immediate: true });
</script>

<style lang="scss" scoped>
.btn-gradient {
  background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 8px 16px;
}

.btn-gradient :deep(.q-icon) {
  color: white !important;
}

.service-search :deep(.q-field__control) {
  border-radius: 24px !important;
}
</style>
