<script setup>
import { reactive, onMounted, nextTick } from "vue";
import { useQuasar } from "quasar";
import { q, useLight } from "#imports";
import { getApiClient } from "@hostlink/light";
import { fabGoogle, fabFacebook, fabMicrosoft } from "@quasar/extras/fontawesome-v6";
const api = getApiClient();
const light = useLight();
const quasar = useQuasar();
let { app, my } = await q({
  app: {
    googleClientId: true,
    microsoftClientId: true,
    microsoftTenantId: true,
    facebookAppId: true
  },
  my: {
    google: true,
    microsoft: true,
    facebook: true
  }
});
const $q = useQuasar();
my = reactive(my);
const handleGoogleCredentialResponse = async (response) => {
  try {
    await api.auth.google.register(response.credential);
    const resp = await q({
      my: { google: true }
    });
    my.google = resp.my.google;
    light.notify({
      message: "Google account linked",
      color: "positive"
    });
  } catch (e) {
    console.log(e);
  }
};
onMounted(() => {
  if (app.googleClientId) {
    if (!window.google) {
      quasar.notify({
        message: "Google login is not available",
        //set script https://accounts.google.com/gsi/client in nuuxt.config.js
        color: "negative",
        icon: "sym_o_error",
        position: "top",
        timeout: 2e3
      });
      return;
    }
  }
  nextTick(() => {
    google.accounts.id.initialize({
      client_id: app.googleClientId,
      callback: handleGoogleCredentialResponse
    });
    google.accounts.id.renderButton(
      document.getElementById("g_id_signin"),
      {
        type: "profile",
        shape: "pill",
        theme: "outline",
        text: "signin_with",
        size: "large",
        logo_alignment: "left"
      }
    );
  });
});
const onUnlink = async () => {
  light.dialog({
    title: "Unlink",
    color: "negative",
    message: "Are you sure you want to unlink your Google account?",
    ok: "Yes",
    cancel: "No"
  }).onOk(async () => {
    await api.auth.google.unlink();
    my.gmail = null;
    window.location.reload();
  });
};
const onUnlinkMicrosoft = async () => {
  light.dialog({
    title: "Unlink",
    color: "negative",
    message: "Are you sure you want to unlink your Microsoft account?",
    ok: "Yes",
    cancel: "No"
  }).onOk(async () => {
    await api.auth.microsoft.unlink();
    my.microsoft = null;
    window.location.reload();
  });
};
const onLinkMicrosoft = async (resp) => {
  try {
    await api.auth.microsoft.register(resp.account.localAccountId);
    light.notify({
      message: "Microsoft account linked",
      color: "positive"
    });
    window.location.reload();
  } catch (e) {
    light.notify({
      message: e.message,
      color: "negative"
    });
  }
};
const onLinkFacebook = async (accessToken) => {
  try {
    await api.auth.facebook.register(accessToken);
    light.notify({
      message: "Facebook account linked",
      color: "positive"
    });
  } catch (e) {
    light.notify({
      message: e.message,
      color: "negative"
    });
  }
};
const onUnlinkFacebook = async () => {
  light.dialog({
    title: "Unlink",
    color: "negative",
    message: "Are you sure you want to unlink your Facebook account?",
    ok: "Yes",
    cancel: "No"
  }).onOk(async () => {
    await api.auth.facebook.unlink();
    my.facebook = null;
    window.location.reload();
  });
};
const text1 = "Your social accounts are securely linked using industry-standard OAuth protocols. You can unlink them at any time.";
</script>

<template>
    <div class="q-pa-md">
        <!-- 頁面標題 -->
        <div class="q-mb-lg">
            <h1 class="text-h4 q-mb-sm">{{ $t('Social Account Linking') }}</h1>
            <p class="text-grey-6">{{ $t('Link your social accounts to enable quick sign-in and enhanced features.') }}
            </p>
        </div>

        <!-- 社交平台連結區域 -->
        <div class="row q-col-gutter-md">
            <!-- Google -->
            <div class="col-12 col-md-4">
                <q-card class="full-height" :class="my.google ? 'bg-green-1 border-green' : 'bg-grey-1'">
                    <q-card-section class="text-center q-pb-none">
                        <q-avatar size="64px" class="q-mb-md" :color="my.google ? 'green' : 'grey-5'"
                            text-color="white">
                            <q-icon :name="fabGoogle" size="32px" />
                        </q-avatar>
                        <div class="text-h6 q-mb-xs">Google</div>
                        <q-badge v-if="my.google" color="green" class="q-mb-md">
                            {{ $t('Connected') }}
                        </q-badge>
                        <q-badge v-else color="grey-5" class="q-mb-md">
                            {{ $t('Not Connected') }}
                        </q-badge>
                    </q-card-section>

                    <q-card-section v-if="app.googleClientId">
                        <template v-if="my.google">
                            <div class="text-center q-mb-md">
                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
                                <div class="text-body2 text-weight-medium q-mt-xs">{{ my.google }}</div>
                            </div>
                            <q-btn class="full-width" color="negative" outline @click="onUnlink" icon="sym_o_link_off"
                                :label="$t('Unlink Account')" />
                        </template>
                        <template v-else>
                            <div class="text-center q-mb-md text-grey-6">
                                {{ $t('Click to link your Google account for quick sign-in') }}
                            </div>
                            <div id="g_id_signin" class="flex justify-center"></div>
                        </template>
                    </q-card-section>
                    <q-card-section v-else>
                        <q-banner class="bg-orange-2 text-orange-9">
                            <template v-slot:avatar>
                                <q-icon name="sym_o_warning" />
                            </template>
                            {{ $t('Service not configured. Please contact administrator.') }}
                        </q-banner>
                    </q-card-section>
                </q-card>
            </div>

            <!-- Microsoft -->
            <div class="col-12 col-md-4">
                <q-card class="full-height" :class="my.microsoft ? 'bg-blue-1 border-blue' : 'bg-grey-1'">
                    <q-card-section class="text-center q-pb-none">
                        <q-avatar size="64px" class="q-mb-md" :color="my.microsoft ? 'blue' : 'grey-5'"
                            text-color="white">
                            <q-icon :name="fabMicrosoft" size="32px" />
                        </q-avatar>
                        <div class="text-h6 q-mb-xs">Microsoft</div>
                        <q-badge v-if="my.microsoft" color="blue" class="q-mb-md">
                            {{ $t('Connected') }}
                        </q-badge>
                        <q-badge v-else color="grey-5" class="q-mb-md">
                            {{ $t('Not Connected') }}
                        </q-badge>
                    </q-card-section>

                    <q-card-section v-if="app.microsoftClientId">
                        <template v-if="my.microsoft">
                            <div class="text-center q-mb-md">
                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
                                <div class="text-body2 text-weight-medium q-mt-xs">{{ my.microsoft }}</div>
                            </div>
                            <q-btn class="full-width" color="negative" outline @click="onUnlinkMicrosoft"
                                icon="sym_o_link_off" :label="$t('Unlink Account')" />
                        </template>
                        <template v-else>
                            <div class="text-center q-mb-md text-grey-6">
                                {{ $t('Click to link your Microsoft account for quick sign-in') }}
                            </div>
                            <div class="flex justify-center">
                                <l-microsoft-button :client-id="app.microsoftClientId"
                                    :tenant-id="app.microsoftTenantId" @login="onLinkMicrosoft" />
                            </div>
                        </template>
                    </q-card-section>
                    <q-card-section v-else>
                        <q-banner class="bg-orange-2 text-orange-9">
                            <template v-slot:avatar>
                                <q-icon name="sym_o_warning" />
                            </template>
                            {{ $t('Service not configured. Please contact administrator.') }}
                        </q-banner>
                    </q-card-section>
                </q-card>
            </div>

            <!-- Facebook -->
            <div class="col-12 col-md-4">
                <q-card class="full-height" :class="my.facebook ? 'bg-indigo-1 border-indigo' : 'bg-grey-1'">
                    <q-card-section class="text-center q-pb-none">
                        <q-avatar size="64px" class="q-mb-md" :color="my.facebook ? 'indigo' : 'grey-5'"
                            text-color="white">
                            <q-icon :name="fabFacebook" size="32px" />
                        </q-avatar>
                        <div class="text-h6 q-mb-xs">Facebook</div>
                        <q-badge v-if="my.facebook" color="indigo" class="q-mb-md">
                            {{ $t('Connected') }}
                        </q-badge>
                        <q-badge v-else color="grey-5" class="q-mb-md">
                            {{ $t('Not Connected') }}
                        </q-badge>
                    </q-card-section>

                    <q-card-section v-if="app.facebookAppId">
                        <template v-if="my.facebook">
                            <div class="text-center q-mb-md">
                                <div class="text-caption text-grey-6">{{ $t('Connected Account') }}</div>
                                <div class="text-body2 text-weight-medium q-mt-xs">{{ my.facebook }}</div>
                            </div>
                            <q-btn class="full-width" color="negative" outline @click="onUnlinkFacebook"
                                icon="sym_o_link_off" :label="$t('Unlink Account')" />
                        </template>
                        <template v-else>
                            <div class="text-center q-mb-md text-grey-6">
                                {{ $t('Click to link your Facebook account for quick sign-in') }}
                            </div>
                            <div class="flex justify-center">
                                <l-facebook-button @login="onLinkFacebook" />
                            </div>
                        </template>
                    </q-card-section>
                    <q-card-section v-else>
                        <q-banner class="bg-orange-2 text-orange-9">
                            <template v-slot:avatar>
                                <q-icon name="sym_o_warning" />
                            </template>
                            {{ $t('Service not configured. Please contact administrator.') }}
                        </q-banner>
                    </q-card-section>
                </q-card>
            </div>
        </div>

        <!-- 安全提示 -->
        <q-card class="q-mt-lg bg-blue-1">
            <q-card-section>
                <div class="row items-center">
                    <q-icon name="sym_o_security" color="blue" size="24px" class="q-mr-sm" />
                    <div class="text-h6 text-blue-8">{{ $t('Security Notice') }}</div>
                </div>
                <p class="text-blue-7 q-mb-none q-mt-sm">
                    {{ $t(text1) }}
                </p>
            </q-card-section>
        </q-card>
    </div>
</template>

<style scoped>
.border-green{border:2px solid #4caf50!important}.border-blue{border:2px solid #2196f3!important}.border-indigo{border:2px solid #3f51b5!important}.q-card{border-radius:12px;transition:all .3s ease}.q-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px)}.q-avatar{transition:all .3s ease}.q-card:hover .q-avatar{transform:scale(1.05)}.full-height{height:100%;min-height:300px}@media (max-width:768px){.full-height{min-height:auto}}
</style>
