<!-- 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="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" @click="shareProfile" />
        
        <q-card-section class="column items-center q-pb-md">
          <q-avatar size="70px" class="shadow-card" :style="!user.profile_photo ? avatarStyle : undefined">
            <img v-if="user.profile_photo" :src="user.profile_photo" style="object-fit:cover;width:100%;height:100%;border-radius:50%" />
            <span v-else class="font16 fontbold ">{{ user.name ? user.name.slice(0, 2).toUpperCase() : '??' }}</span>
          </q-avatar>
          
          <div class="fonte-nome-profile font16 fontbold q-mt-md text-text">{{ user.name || '—' }}</div>
          <div class="fonte-email-profile font9 fontmedium text-grey-6 q-my-sm">{{ user.email || '—' }}</div>
          <div class="fonte-telefone-profile font9 fontmedium text-grey-7">{{ user.phone || '—' }}</div> 
          
          <q-btn
            v-if="!isPendingProvider"
            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="16px" />
              <span class="font9 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 v-if="isPendingProvider" class="pending-notice font12 fontregular q-mb-md">
        {{ $t('provider.dashboard.pending_approval.analyzing') }}
      </div>

      <div
        v-if="!isPendingProvider"
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openBankDataDialog"
      >
        <div class="column">
          <span class="font16 fontbold menu-title gradient-diarista">{{ $t('profile.bank_data.title') }}</span>
          <span class="font12 fontregular text-text">{{ $t('profile.bank_data.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div
        v-if="!isPendingProvider"
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openAvailabilityDialog"
      >
        <div class="column">
          <span class="font16 fontbold menu-title gradient-diarista">{{ $t('profile.availability.title') }}</span>
          <span class="font12 fontregular text-text">{{ $t('profile.availability.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div
        v-if="!isPendingProvider"
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openServiceDataDialog"
      >
        <div class="column">
          <span class="font16 fontbold menu-title gradient-diarista">{{ $t('profile.service_data.title') }}</span>
          <span class="font12 fontregular text-text">{{ $t('profile.service_data.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div
        v-if="!isPendingProvider"
        class="menu-item row items-center no-wrap cursor-pointer q-py-sm"
        @click="openAddressDialog"
      >
        <div class="column">
          <span class="font16 fontbold menu-title gradient-diarista">{{ $t('profile.address.title') }}</span>
          <span class="font12 fontregular text-text">{{ $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="font16 fontbold menu-title gradient-diarista">{{ $t('profile.help.title') }}</span>
          <span class="font12 fontregular menu-description text-text">{{ $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="font16 fontbold menu-title gradient-diarista">{{ $t('profile.privacy.title') }}</span>
          <span class="font12 fontregular menu-description text-text">{{ $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="font16 fontbold menu-title gradient-diarista">{{ $t('profile.privacy_policy.title') }}</span>
          <span class="font12 fontregular menu-description text-text">{{ $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="font16 fontbold menu-title gradient-diarista">{{ $t('profile.support_page.title') }}</span>
          <span class="font12 fontregular menu-description text-text">{{ $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="logOutPrestador">
        <div class="column">
          <span class="font16 fontbold menu-title text-text">{{ $t('profile.logout.title') }}</span>
          <span class="font12 fontregular text-text">{{ $t('profile.logout.description') }}</span>
        </div>
        <q-space/>
        <q-icon name="mdi-chevron-right" color="primary" size="md" />
      </div>

      <div class="text-center text-grey-6 font12 fontregular q-mt-lg q-mb-sm">
        v{{ appVersion }}
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { Browser } from '@capacitor/browser';
import { useAuth } from 'src/composables/useAuth';
import { useProviderApproval } from 'src/composables/useProviderApproval';
import { getUser } from 'src/api/user';
import { Share } from '@capacitor/share';
import ProfileEditDialog from './ProfileEditDialog.vue';
import ProfileAddressDialog from 'src/components/profile/ProfileAddressDialog.vue';
import ProfileBankDataDialog from 'src/components/profile/ProfileBankDataDialog.vue';
import ProfileAvailabilityDialog from 'src/components/profile/ProfileAvailabilityDialog.vue';
import ProfileServiceDataDialog from 'src/components/profile/ProfileServiceDataDialog.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/politicaDiaristaPrestador.html';
const SUPPORT_PAGE_URL   = 'https://politicas.softpar.inf.br/suportes/suporteDiaristaPrestador.html';

const appVersion = process.env.APP_VERSION;

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

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

// compartilha perfil 
const shareProfile = async () => {
  const message = t('profile.share.message', { name: user.value.name });

  try {
    await Share.share({
      title: 'Diária App',
      text: message,
      dialogTitle: 'Compartilhar perfil',
    });
  } catch (error) {
    if (error?.name === 'AbortError') {
      return;
    }

    console.error('Erro ao compartilhar perfil:', error);
  }
};

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

const openAvailabilityDialog = () => {
  $q.dialog({
    component: ProfileAvailabilityDialog
  });
};

const openBankDataDialog = () => {
  $q.dialog({
    component: ProfileBankDataDialog
  });
};

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

const openServiceDataDialog = () => {
  $q.dialog({
    component: ProfileServiceDataDialog
  });
};

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

.pending-notice {
  background: #e3efff;
  border-radius: 8px;
  color: #6554d9;
  line-height: 1.3;
  padding: 12px 14px;
}

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

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

.menu-description {
  font-size: 14px;
}

.flex-1 {
  flex: 1;
}

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