<template>
  <q-page class="tech-surface">
    <!-- Hero -->
    <section class="tg-hero more-hero">
      <div class="tg-hero-inner">
        <div class="t-caption t-ink-on-hero-dim" style="margin-bottom:4px">Paramètres</div>
        <div class="t-h1 t-ink-on-hero">Plus d'options</div>
      </div>
    </section>

    <div class="tg-page more-content">
      <!-- Status card -->
      <section class="tg-card tg-card--wash section-card">
        <div class="section-head-inline t-micro">Connexion</div>
        <div class="more-row">
          <span class="material-icons" :style="{ color: isOnline ? 'var(--sig-go)' : 'var(--sig-stop)' }">
            {{ isOnline ? 'wifi' : 'wifi_off' }}
          </span>
          <div class="col">
            <div class="t-body">{{ isOnline ? 'En ligne' : 'Hors ligne' }}</div>
            <div class="t-caption">{{ isOnline ? 'Synchronisation active' : 'Les changements seront envoyés à la reconnexion' }}</div>
          </div>
          <span class="tg-chip" :class="isOnline ? 'is-go' : 'is-stop'">
            <span class="tg-chip-dot" />
            {{ isOnline ? 'OK' : 'Attente' }}
          </span>
        </div>
      </section>

      <!-- Tools -->
      <section class="tg-card section-card">
        <div class="section-head-inline t-micro">Outils</div>
        <button class="more-action" @click="$router.push('/j/diagnostic')">
          <span class="material-icons more-action-ic" style="color:var(--tg-500)">speed</span>
          <div class="col">
            <div class="t-body">Diagnostic réseau</div>
            <div class="t-caption">Test de vitesse + vérification hôtes</div>
          </div>
          <span class="material-icons t-ink-400">chevron_right</span>
        </button>
      </section>

      <!-- Account -->
      <section class="tg-card section-card">
        <div class="section-head-inline t-micro">Compte</div>
        <button class="more-action" @click="logout">
          <span class="material-icons more-action-ic" style="color:var(--sig-stop)">logout</span>
          <div class="col">
            <div class="t-body" style="color:var(--sig-stop)">Déconnexion</div>
            <div class="t-caption">Terminer la session SSO</div>
          </div>
          <span class="material-icons t-ink-400">chevron_right</span>
        </button>
      </section>

      <div class="t-caption text-center" style="margin-top:24px">Targo Ops · Vue technicien · v2.1</div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const isOnline = ref(navigator.onLine)
function onOnline () { isOnline.value = true }
function onOffline () { isOnline.value = false }
onMounted(() => {
  window.addEventListener('online', onOnline)
  window.addEventListener('offline', onOffline)
})
onUnmounted(() => {
  window.removeEventListener('online', onOnline)
  window.removeEventListener('offline', onOffline)
})

function logout () {
  window.location.href = 'https://id.gigafibre.ca/if/flow/default-invalidation-flow/'
}
</script>

<style lang="scss" scoped>
.more-hero {
  padding: 24px 18px 28px;
}
.more-content {
  padding: 20px 16px 8px;
}
.section-card {
  margin-bottom: 14px;
}
.section-head-inline {
  margin-bottom: 10px;
}
.more-row {
  display: flex; align-items: center; gap: 12px;
  .col { flex: 1; min-width: 0; }
}
.more-action {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 4px;
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms;
  border-radius: var(--r-md);
  &:active { background: var(--tg-50); }
  &:not(:last-child) { border-bottom: 1px solid rgba(15,23,42,0.05); }
  .col { flex: 1; min-width: 0; }
  .more-action-ic { font-size: 22px; flex-shrink: 0; }
}
.text-center { text-align: center; }
</style>
