<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-page class="bg-page q-pb-xl">
    <div
      class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-profile"
    >
      <q-space />

      <span
        class="text-subtitle1 text-primary font16 fontbold gradient-diarista"
      >
        {{ $t("profile.title") }}
      </span>

      <q-space />
    </div>

    <div class="q-px-md q-mt-md">
      <q-card
        class="profile-card bg-surface shadow-card card-border"
        :flat="false"
      >
        <q-card-section class="column items-center q-pb-md">
          <q-avatar
            class="shadow-card text-h5"
            color="indigo-1"
            size="70px"
            text-color="indigo-4"
          >
            <img
              v-if="profileMediaUrl"
              class="profile-image"
              :src="profileMediaUrl"
            />

            <span v-else>
              {{ user.name ? user.name.charAt(0).toUpperCase() : "" }}
            </span>
          </q-avatar>

          <div class="fonte-nome-profile q-mt-md text-dark font16 fontbold">
            {{ user.name || "—" }}
          </div>

          <div
            class="fonte-email-profile text-grey-6 q-my-sm font10 fontmedium"
          >
            {{ user.email || "—" }}
          </div>

          <div class="fonte-telefone-profile text-grey-7 font12 fontmedium">
            {{ user.phone || "—" }}
          </div>

          <q-btn
            class="full-width q-mt-sm btn-edit-profile text-text"
            no-caps
            outline
            padding="6px 16px"
            @click="openEditProfile"
          >
            <div class="row items-center q-gutter-x-sm">
              <q-icon
                name="mdi-account-outline"
                size="18px"
              />

              <span class="font10 fontbold">
                {{ $t("profile.edit_profile") }}
              </span>
            </div>
          </q-btn>
        </q-card-section>
      </q-card>
    </div>

    <div class="q-mt-md q-px-md column">
      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openPaymentsDialog"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.payments.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.payments.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openFavoritesDialog"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.favorites.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.favorites.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openAddressDialog"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.address.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.address.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openHelpDialog"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.help.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.help.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openPrivacyDialog"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.privacy.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.privacy.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openPrivacyPolicy"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.privacy_policy.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.privacy_policy.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openSupportPage"
      >
        <div class="column">
          <span class="menu-title gradient-diarista font16 fontbold">
            {{ $t("profile.support_page.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.support_page.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>

      <q-separator
        class="q-my-sm bg-grey-3"
        inset
      />

      <div
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="handleLogout"
      >
        <div class="column">
          <span class="menu-title text-text font16 fontbold">
            {{ $t("profile.logout.title") }}
          </span>

          <span class="text-text font12 fontregular">
            {{ $t("profile.logout.description") }}
          </span>
        </div>

        <q-space />

        <q-icon
          color="primary"
          name="mdi-chevron-right"
          size="md"
        />
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { Browser } from "@capacitor/browser";
import { computed, onMounted, ref } from "vue";
import { getProfileMediaUrl } from "src/helpers/profileMedia";
import { getUser } from "src/api/user";
import { useAuth } from "src/composables/useAuth";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { userStore } from "src/stores/user";

import ProfileAddressDialog from "src/components/profile/ProfileAddressDialog.vue";
import ProfileEditDialog from "./ProfileEditDialog.vue";
import ProfileFavoritesDialog from "src/components/profile/ProfileFavoritesDialog.vue";
import ProfileHelpDialog from "src/components/profile/ProfileHelpDialog.vue";
import ProfilePaymentsDialog from "src/components/profile/ProfilePaymentsDialog.vue";
import ProfilePrivacyDialog from "src/components/profile/ProfilePrivacyDialog.vue";

const router = useRouter();
const $q = useQuasar();
const { logout } = useAuth();

const store = userStore();

const user = ref({
  email: "",
  name: "",
  phone: "",
});

const profileMediaUrl = computed(() => getProfileMediaUrl(user.value));

const PRIVACY_POLICY_URL =
  "https://politicas.softpar.inf.br/politicas/politicaDiaristaCliente.html";
const SUPPORT_PAGE_URL =
  "https://politicas.softpar.inf.br/suportes/suporteDiaristaCliente.html";

const handleLogout = async () => {
  await logout();

  router.push("/login");
};

const openAddressDialog = () => {
  $q.dialog({
    component: ProfileAddressDialog,
  });
};

const openEditProfile = () => {
  $q.dialog({
    component: ProfileEditDialog,
    componentProps: {
      userData: user.value,
    },
  }).onOk((updatedUser) => {
    user.value = { ...user.value, ...updatedUser };

    store.setUser({ ...store.user, ...updatedUser });

    getUser().then((data) => {
      user.value = data;
    });
  });
};

const openFavoritesDialog = () => {
  $q.dialog({
    component: ProfileFavoritesDialog,
  });
};

const openHelpDialog = () => {
  $q.dialog({
    component: ProfileHelpDialog,
  });
};

const openPaymentsDialog = () => {
  $q.dialog({
    component: ProfilePaymentsDialog,
  });
};

const openPrivacyDialog = () => {
  $q.dialog({
    component: ProfilePrivacyDialog,
  });
};

const openPrivacyPolicy = async () => {
  await Browser.open({ url: PRIVACY_POLICY_URL });
};

const openSupportPage = async () => {
  await Browser.open({ url: SUPPORT_PAGE_URL });
};

onMounted(async () => {
  try {
    const data = await getUser();
    user.value = data;
  } catch (error) {
    console.error("Erro ao carregar perfil:", error);
  }
});
</script>

<style scoped lang="scss">
.profile-card {
  position: relative;
}

.profile-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.btn-edit-profile {
  border-radius: 6px;
}

.menu-item {
  transition: background 0.3s;
  &:active {
    background: rgba(0, 0, 0, 0.05);
  }
}

.menu-title {
  line-height: 1.4;
}

.flex-1 {
  flex: 1;
}

.text-dark {
  color: #2c3e50;
}

.fonte-email-profile {
  line-height: 100%;
  letter-spacing: 0%;
}

.fonte-telefone-profile {
  line-height: 100%;
  letter-spacing: 0%;
}

.fonte-nome-profile {
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
}

.shadow-profile {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1);
}
</style>
