<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import {
  getExternalBrowserUrl,
  shouldShowIOSLineFallback,
} from '@/utils/forceExternalBrowser'

const showExternalBrowserFallback = computed(() => shouldShowIOSLineFallback())
const fallbackUrl = computed(() => getExternalBrowserUrl())
const copied = ref(false)

const tryOpenAgain = () => {
  window.location.href = fallbackUrl.value
}

const copyLink = async () => {
  copied.value = false

  if (!navigator.clipboard?.writeText) {
    return
  }

  await navigator.clipboard.writeText(fallbackUrl.value)
  copied.value = true
}

onMounted(() => {
  useSocketStore()
})
</script>

<template>
  <router-view />

  <div v-if="showExternalBrowserFallback" class="external-browser-overlay">
    <div class="external-browser-card">
      <h2>แนะนำให้เปิดด้วย Safari</h2>
      <p>
        LINE Browser อาจทำให้กล้องหรือตำแหน่งทำงานไม่ครบ กรุณาเปิดหน้านี้ใน
        Safari เพื่อใช้งานระบบลงเวลาได้เสถียรกว่าเดิม
      </p>
      <ol>
        <li>แตะปุ่ม เมนู ใน LINE Browser</li>
        <li>เลือก เปิดใน Safari</li>
      </ol>

      <div class="external-browser-actions">
        <button type="button" class="primary" @click="tryOpenAgain">
          ลองเปิดอีกครั้ง
        </button>
        <button type="button" class="secondary" @click="copyLink">
          คัดลอกลิงก์
        </button>
      </div>

      <p v-if="copied" class="copy-success">
        คัดลอกลิงก์แล้ว สามารถวางใน Safari ได้ทันที
      </p>
    </div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

.external-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.external-browser-card {
  width: min(520px, 100%);
  border-radius: 16px;
  padding: 20px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
}

.external-browser-card h2 {
  margin: 0 0 10px;
  font-size: 24px;
  color: #0d3b66;
}

.external-browser-card p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.external-browser-card ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.external-browser-actions {
  display: flex;
  gap: 10px;
}

.external-browser-actions button {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 16px;
  cursor: pointer;
}

.external-browser-actions .primary {
  background: #1976d2;
  color: #ffffff;
}

.external-browser-actions .secondary {
  background: #edf2f7;
  color: #1f2937;
}

.copy-success {
  margin-top: 12px;
  color: #0b7a3f;
  font-weight: 600;
}
</style>
