<!-- 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-btn flat round dense icon="mdi-share-variant-outline" color="grey-6" class="absolute-top-right q-ma-sm" />
        
        <q-card-section class="column items-center q-pb-md">
          <q-avatar size="70px" color="indigo-1" text-color="indigo-4" class="shadow-card text-h5">
            <img v-if="user.client?.profile_media?.url" :src="user.client.profile_media.url" style="object-fit: cover;" />
            <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 
            outline 
            no-caps 
            padding="6px 16px"
            class="full-width q-mt-sm btn-edit-profile text-text" 
            @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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" 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 name="mdi-chevron-right" color="primary" size="md" />
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { Browser } from '@capacitor/browser';
import { useAuth } from 'src/composables/useAuth';
import { getUser } from 'src/api/user';
import { userStore } from 'src/stores/user';
import ProfileEditDialog from './ProfileEditDialog.vue';
import ProfileAddressDialog from 'src/components/profile/ProfileAddressDialog.vue';
import ProfilePaymentsDialog from 'src/components/profile/ProfilePaymentsDialog.vue';
import ProfileFavoritesDialog from 'src/components/profile/ProfileFavoritesDialog.vue';
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue';
import ProfilePrivacyDialog from 'src/components/profile/ProfilePrivacyDialog.vue';
import { useRouter } from 'vue-router';

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 $q = useQuasar();
const store = userStore();

const { logout } = useAuth();
const router = useRouter();
const user = ref({
  name: '',
  email: '',
  phone: ''
});

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 openPaymentsDialog = () => {
  $q.dialog({
    component: ProfilePaymentsDialog
  });
};

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

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

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

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 });
};

const handleLogout = async () => {
  await logout();
  router.push('/login');
};

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;
}

.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>
