<template>
  <div class="flex-grow flex flex-col p-4 md:p-6 lg:p-8 items-center dark:bg-gray-800 text-gray-700 dark:text-gray-200">
    <header class="w-full max-w-2xl mb-2 text-center">
      <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-1">About Nexus Timer</h1>
      <div class="flex items-center justify-center space-x-2 text-xs text-gray-500 dark:text-gray-400 mb-4">
        <span>Build: <span class="font-mono">{{ buildTime }}</span></span>
        <button 
            v-if="canCheckForUpdate"
            @click="checkForUpdates" 
            class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 underline text-xs"
            :disabled="checkingForUpdate"
        >
          {{ checkingForUpdate ? 'Checking...' : 'Check for Update' }}
        </button>
      </div>
      <p v-if="updateStatusMessage" class="text-sm mt-1" :class="updateError ? 'text-red-500' : 'text-green-500'">
        {{ updateStatusMessage }}
      </p>
    </header>

    <main class="w-full max-w-2xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md prose dark:prose-invert">
      <p>
        Nexus Timer is a dynamic multi-player timer designed for games, workshops, or any activity where turns pass sequentially in a circular fashion. 
        It provides a clear visual focus on the current participant and their immediate successor, ensuring everyone stays engaged and aware of who is next.
      </p>
      
      <h2 class="text-xl font-semibold mt-6 mb-2">Key Features:</h2>
      <ul>
        <li>Circular player display focusing on Current and Next player.</li>
        <li>Individual customizable countdown timers (MM:SS) per player.</li>
        <li>Timers can go into negative time.</li>
        <li>Two game modes: Normal (one timer runs) and All Timers Running.</li>
        <li>Player management: Add, edit, delete, reorder (max 99 players).</li>
        <li>Photo avatars using device camera or defaults.</li>
        <li>Configurable hotkeys for passing turns and global actions.</li>
        <li>**MQTT integration for remote control using unique characters per action.**</li> 
        <li>Audio feedback for timer events.</li>
        <li>Light/Dark theme options.</li>
        <li>Persistent storage of game state.</li>
        <li>Screen Wake Lock to keep screen on during active gameplay.</li>
        <li>PWA installability with update checks.</li>
      </ul>

      <h2 class="text-xl font-semibold mt-6 mb-2">Source Code</h2>
      <p>
          The source code for Nexus Timer is available:
          <a href="https://gitea.virtonline.eu/2HoursProject/nexus-timer.git" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">
            https://gitea.virtonline.eu/2HoursProject/nexus-timer.git
        </a>
      </p>
    </main>

    <footer class="mt-8 w-full max-w-2xl text-center">
      <button @click="goBack" class="btn btn-primary">
        Back to Game
      </button>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const router = useRouter();
const store = useStore();

const buildTime = ref('N/A'); 

onMounted(() => {
  buildTime.value = import.meta.env.VITE_APP_BUILD_TIME || 'Unknown Build Time';
});

const canCheckForUpdate = ref('serviceWorker' in navigator);
const checkingForUpdate = ref(false);
const updateStatusMessage = ref('');
const updateError = ref(false);

const checkForUpdates = async () => {
  if (!('serviceWorker' in navigator)) {
    updateStatusMessage.value = 'Service Worker API not supported.';
    updateError.value = true;
    return;
  }
  checkingForUpdate.value = true;
  updateStatusMessage.value = 'Checking for updates...';
  updateError.value = false;
  try {
    const registration = await navigator.serviceWorker.getRegistration();
    if (!registration) {
      updateStatusMessage.value = 'No active service worker. Try reloading.';
      updateError.value = true;
      checkingForUpdate.value = false;
      return;
    }
    await registration.update();
    setTimeout(() => {
        const newWorker = registration.waiting;
        if (newWorker) {
            updateStatusMessage.value = 'New version downloaded! Refresh prompt may appear.';
            updateError.value = false;
        } else if (registration.active && registration.installing) {
            updateStatusMessage.value = 'New version installing...';
            updateError.value = false;
        } else {
            updateStatusMessage.value = 'You are on the latest version.';
            updateError.value = false;
        }
        checkingForUpdate.value = false;
    }, 2000);
  } catch (error) {
    console.error('Error checking for PWA updates:', error);
    updateStatusMessage.value = 'Error checking updates. See console.';
    updateError.value = true;
    checkingForUpdate.value = false;
  }
};

const goBack = () => {
  if (store.getters.players && store.getters.players.length >= 2) {
    router.push({ name: 'Game' });
  } else {
    router.push({ name: 'Setup' });
  }
};
</script>