<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { buildCustomerServiceUrl } from '../config/customerService';
import { useAuthStore } from '../stores/auth';
import { usePlayerProfile } from '../composables/usePlayerProfile';

const { t } = useI18n();
const auth = useAuthStore();
const { profileRaw, avatarUrl } = usePlayerProfile();

const iframeSrc = computed(() => {
  const visitor = auth.user
    ? {
        name:
          profileRaw.value?.username ||
          profileRaw.value?.preferences?.phone ||
          auth.user.username ||
          '',
        avatar: avatarUrl.value
          ? new URL(avatarUrl.value, window.location.origin).href
          : '',
        id: String(profileRaw.value?.id ?? auth.user.id ?? ''),
      }
    : null;

  return buildCustomerServiceUrl(t('support.connecting'), visitor);
});
</script>

<template>
  <div class="cs-panel">
    <iframe
      :key="iframeSrc"
      class="cs-frame"
      :src="iframeSrc"
      :title="t('support.title')"
      allow="microphone; camera; clipboard-read; clipboard-write"
    />
  </div>
</template>

<style scoped>
.cs-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
  background: var(--bg-body);
}

.cs-frame {
  flex: 1;
  width: 100%;
  min-height: calc(100dvh - 140px);
  border: 0;
  background: #fff;
}
</style>
